/* VaultFi Services v22 — Vibrant Edition
   One mobile 3-column menu.
   Preserves existing menu behavior and layout.
   Visual/color changes only.
*/

/* Desktop: hide mobile-only panel */
@media (min-width: 769px) {
  #vfSvcPanelV22,
  #vfServicesScrollTailV15 {
    display: none !important;
  }
}

@media (max-width: 768px) {

  /* Block leftover old menus */
  body[data-section="dashboard"] #vfDashboardMenuV12,
  body[data-section="dashboard"] .vf-dashboard-menu-v12,
  body[data-section="dashboard"] #vfServicesCompactV1,
  body[data-section="dashboard"] #vfServicesCompactNativeV1,
  body[data-section="dashboard"] .vf-services-compact:not(#vfSvcPanelV22) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
  }

  /* Main Services panel */
  body[data-section="dashboard"] #vfSvcPanelV22.vf-svc-v22,
  body[data-section="dashboard"] .vf-svc-v22 {
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 15px 0 17px !important;
    padding: 15px 12px 13px !important;

    border: 1px solid #d5dbf5 !important;
    border-radius: 20px !important;

    background: linear-gradient(
      155deg,
      #ffffff 0%,
      #f7f9ff 55%,
      #f5f1ff 100%
    ) !important;

    box-shadow:
      0 10px 28px rgba(72, 65, 175, 0.12),
      0 2px 5px rgba(41, 60, 121, 0.04) !important;

    color: #172342 !important;
    overflow: visible !important;

    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Arial,
      sans-serif !important;
  }

  body[data-section="dashboard"] .vf-svc-v22 *,
  body[data-section="dashboard"] .vf-svc-v22 *::before,
  body[data-section="dashboard"] .vf-svc-v22 *::after {
    box-sizing: border-box !important;
  }

  /* Header */
  body[data-section="dashboard"] .vf-svc-v22__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 2px 12px !important;
  }

  body[data-section="dashboard"] .vf-svc-v22__head h2 {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.35px !important;
    font-weight: 820 !important;
    color: #172342 !important;
  }

  body[data-section="dashboard"] .vf-svc-v22__head p {
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: #596988 !important;
  }

  /* SERVICES badge */
  body[data-section="dashboard"] .vf-svc-v22__badge {
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;

    color: #5232df !important;
    background: linear-gradient(
      135deg,
      #ebe5ff,
      #ddd6ff
    ) !important;

    box-shadow: inset 0 0 0 1px rgba(91, 64, 220, 0.1) !important;

    font-size: 10px !important;
    font-weight: 770 !important;
  }

  /* Preserve 3-column grid */
  body[data-section="dashboard"] .vf-svc-v22__grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Service cards */
  body[data-section="dashboard"] .vf-svc-v22__item {
    appearance: none !important;
    -webkit-appearance: none !important;

    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-height: 94px !important;
    padding: 12px 5px 9px !important;
    margin: 0 !important;

    text-decoration: none !important;
    text-align: center !important;

    background: linear-gradient(
      150deg,
      #ffffff 0%,
      #f0f3ff 100%
    ) !important;

    border: 1px solid #d6ddf5 !important;
    border-radius: 15px !important;

    box-shadow:
      0 4px 12px rgba(51, 65, 145, 0.09),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

    color: #19284a !important;
    cursor: pointer !important;

    font: inherit !important;
    line-height: 1.2 !important;
    -webkit-tap-highlight-color: transparent !important;

    transition:
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.18s ease !important;
  }

  body[data-section="dashboard"] .vf-svc-v22__item:hover,
  body[data-section="dashboard"] .vf-svc-v22__item:focus-visible {
    border-color: #8775f6 !important;

    box-shadow:
      0 7px 19px rgba(93, 71, 218, 0.18) !important;

    outline: 2px solid transparent !important;
  }

  body[data-section="dashboard"] .vf-svc-v22__item:active {
    transform: scale(0.98) !important;
  }

  /* Vivid icon tiles — retains colors supplied by JS */
  body[data-section="dashboard"] .vf-svc-v22__icon {
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center !important;

    width: 38px !important;
    height: 38px !important;

    background: var(--vf-tint, #e6deff) !important;
    color: var(--vf-accent, #573ce6) !important;

    border-radius: 13px !important;

    border: 1px solid rgba(86, 74, 188, 0.12) !important;

    box-shadow:
      0 5px 12px rgba(66, 56, 155, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;

    filter: saturate(1.35) !important;
  }

  body[data-section="dashboard"] .vf-svc-v22__icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  /* Card labels */
  body[data-section="dashboard"] .vf-svc-v22__name {
    display: block !important;
    width: 100% !important;

    font-size: 11.5px !important;
    font-weight: 760 !important;
    line-height: 1.18 !important;

    color: #172544 !important;
    overflow-wrap: break-word !important;
  }

  /* Premium card */
  body[data-section="dashboard"]
  .vf-svc-v22__item[data-kind="premium"] {
    background: linear-gradient(
      145deg,
      #f8f2ff,
      #ece2ff
    ) !important;

    border-color: #cbb6fa !important;

    box-shadow:
      0 5px 15px rgba(123, 74, 217, 0.13) !important;
  }

  body[data-section="dashboard"]
  .vf-svc-v22__item[data-kind="premium"]
  .vf-svc-v22__name {
    color: #6130c9 !important;
  }

  /* Logout card */
  body[data-section="dashboard"]
  .vf-svc-v22__item[data-kind="logout"] {
    background: linear-gradient(
      145deg,
      #fffafd,
      #fff0f4
    ) !important;

    border-color: #f0c7d6 !important;
  }

  body[data-section="dashboard"]
  .vf-svc-v22__item[data-kind="logout"]
  .vf-svc-v22__name {
    color: #b12e61 !important;
  }

  /* Active service */
  body[data-section="dashboard"]
  .vf-svc-v22__item[aria-current="page"] {
    border-color: #9380f7 !important;

    background: linear-gradient(
      145deg,
      #f4f1ff,
      #eae5ff
    ) !important;

    box-shadow:
      0 4px 14px rgba(100, 77, 221, 0.14) !important;
  }

  /* Small devices — unchanged geometry */
  @media (max-width: 360px) {
    body[data-section="dashboard"] .vf-svc-v22 {
      padding: 13px 9px 11px !important;
    }

    body[data-section="dashboard"] .vf-svc-v22__grid {
      gap: 6px !important;
    }

    body[data-section="dashboard"] .vf-svc-v22__item {
      min-height: 91px !important;
      padding: 10px 2px 8px !important;
    }

    body[data-section="dashboard"] .vf-svc-v22__name {
      font-size: 10.8px !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-section="dashboard"] .vf-svc-v22__item {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------
   ADDITION ONLY: make Dashboard quick actions more vibrant.
   Send / Receive / Convert / Trade / Cashout.
   No Services layout, menu visibility, footer, or JavaScript changes.
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  body[data-section="dashboard"] #vfDWApp .dw-quick a {
    background: linear-gradient(145deg, var(--qa-bg1, #eef0ff), var(--qa-bg2, #dde4ff)) !important;
    border-color: var(--qa-border, #cbd1f5) !important;
    color: var(--qa-text, #243765) !important;
    box-shadow: 0 5px 14px rgba(46, 61, 136, 0.12) !important;
  }

  body[data-section="dashboard"] #vfDWApp .dw-quick a .dw-icon {
    background: linear-gradient(135deg, var(--qa-icon1, #6673e8), var(--qa-icon2, #7657d9)) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(51, 57, 123, 0.16) !important;
  }

  body[data-section="dashboard"] #vfDWApp .dw-quick a:nth-child(1) {
    --qa-bg1: #edf4ff;
    --qa-bg2: #dce9ff;
    --qa-border: #b5cbfb;
    --qa-text: #214eaf;
    --qa-icon1: #3486ed;
    --qa-icon2: #535bdc;
  }

  body[data-section="dashboard"] #vfDWApp .dw-quick a:nth-child(2) {
    --qa-bg1: #eafff6;
    --qa-bg2: #cff5e5;
    --qa-border: #a4e6cc;
    --qa-text: #08775b;
    --qa-icon1: #16bd91;
    --qa-icon2: #0b937b;
  }

  body[data-section="dashboard"] #vfDWApp .dw-quick a:nth-child(3) {
    --qa-bg1: #f4edff;
    --qa-bg2: #e8dcff;
    --qa-border: #cfb7fa;
    --qa-text: #6736b9;
    --qa-icon1: #9260eb;
    --qa-icon2: #7141d0;
  }

  body[data-section="dashboard"] #vfDWApp .dw-quick a:nth-child(4) {
    --qa-bg1: #e9faff;
    --qa-bg2: #d3efff;
    --qa-border: #a5ddeb;
    --qa-text: #116c92;
    --qa-icon1: #18a7cb;
    --qa-icon2: #306ee3;
  }

  body[data-section="dashboard"] #vfDWApp .dw-quick a:nth-child(5) {
    --qa-bg1: #fff2e9;
    --qa-bg2: #ffe4d5;
    --qa-border: #f3c4ad;
    --qa-text: #a84c30;
    --qa-icon1: #ee8a45;
    --qa-icon2: #d85c78;
  }
}

/* VF_FEE_REFERRAL_V12_TILE_STYLE */
/* Only the Referrals tile inside the ONE existing VaultFi Services V22 panel. */
@media(max-width:768px){
body[data-section="dashboard"] #vfSvcPanelV22 .vf-svc-v22__item[data-kind="referrals"]{
  background:linear-gradient(145deg,#eafff9,#eef0ff)!important;
  border-color:#9bded3!important;
  box-shadow:0 5px 14px rgba(21,145,158,.11)!important;
}
body[data-section="dashboard"] #vfSvcPanelV22 .vf-svc-v22__item[data-kind="referrals"] .vf-svc-v22__icon{
  background:linear-gradient(140deg,#14bfae,#5478e8)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.42)!important;
  filter:none!important;
  box-shadow:0 5px 13px rgba(31,128,188,.20)!important;
}
body[data-section="dashboard"] #vfSvcPanelV22 .vf-svc-v22__item[data-kind="referrals"] .vf-svc-v22__name{color:#126d75!important}
}