/*
 * Alpina Pay v10.19 — light shell reframe.
 *
 * The connected cabinet still carries several warm v10.9 variables and
 * green ambient gradients.  This layer is intentionally light-only and is
 * loaded last: the dark theme is already the stronger visual direction and
 * must stay untouched.
 */

html:not([data-app-theme="dark"]),
html:not([data-app-theme="dark"]) body,
html:not([data-app-theme="dark"]) #root {
  background-color: #eef3fa !important;
}

html:not([data-app-theme="dark"]) .ui-v109,
html:not([data-app-theme="dark"]) .ui-v109-modal {
  --v109-bg: #eef3fa;
  --v109-surface: #ffffff;
  --v109-surface-soft: #f2f5fa;
  --v109-surface-tint: #f8faff;
  --v109-text: #111827;
  --v109-text-soft: #667085;
  --v109-text-faint: #98a2b3;
  --v109-muted: var(--v109-text-soft);
  --v109-line: #e1e7f0;
  --v109-line-strong: #d2dae7;
  --v109-brand: #5d6bea;
  --v109-brand-hover: #505fdc;
  --v109-brand-soft: #edf0ff;
  --v109-shadow-soft:
    0 1px 2px rgba(16, 24, 40, 0.035),
    0 18px 44px -34px rgba(32, 51, 84, 0.27);
  --v109-shadow-float:
    0 2px 5px rgba(16, 24, 40, 0.035),
    0 30px 72px -46px rgba(32, 51, 84, 0.34);
}

html:not([data-app-theme="dark"]) body:has(.ui-v109) {
  background-color: #eef3fa !important;
  background-image:
    radial-gradient(
      ellipse 68rem 34rem at 50% -17rem,
      rgba(91, 105, 234, 0.24),
      transparent 72%
    ),
    radial-gradient(
      circle at 1px 1px,
      rgba(54, 72, 104, 0.065) 0.75px,
      transparent 0.9px
    ),
    linear-gradient(180deg, #edf2fb 0%, #f5f7fb 38rem, #f2f5fa 100%) !important;
  background-size: auto, 24px 24px, auto !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-attachment: fixed !important;
}

html:not([data-app-theme="dark"]) body:has(.ui-v109)::before {
  display: none !important;
}

/* The header contains three useful floating controls; it is not a panel. */
html:not([data-app-theme="dark"]) .ui-v109 .pay-home-topbar {
  min-height: 50px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 2px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:not([data-app-theme="dark"]) .ui-v109 .pay-brand,
html:not([data-app-theme="dark"]) .ui-v109 .topbar-wallet-pill,
html:not([data-app-theme="dark"]) .ui-v109 .user-avatar-button {
  border-color: rgba(116, 132, 159, 0.17) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.035),
    0 18px 42px -32px rgba(32, 51, 84, 0.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
}

html:not([data-app-theme="dark"]) .ui-v109 .topbar-wallet-pill {
  background: rgba(255, 255, 255, 0.94) !important;
}

/* Restore the rounded catalogue that an older .ui-v10 rule flattened. */
html:not([data-app-theme="dark"]) .ui-v109.ui-v10 .services-home {
  overflow: hidden !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 101% -7%, rgba(93, 107, 234, 0.12), transparent 22rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.985), rgba(248, 250, 255, 0.97)) !important;
  box-shadow: var(--v109-shadow-soft) !important;
}

html:not([data-app-theme="dark"]) .ui-v109.ui-v10 .services-home::before {
  width: 300px !important;
  height: 300px !important;
  top: -218px !important;
  right: 3% !important;
  border-color: rgba(93, 107, 234, 0.055) !important;
}

html:not([data-app-theme="dark"]) .ui-v109 .pay-side-nav nav {
  border-color: #e1e7f0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--v109-shadow-soft) !important;
}

/* Turn the card hero into a compact wallet dock. */
html:not([data-app-theme="dark"]) .ui-v109 .card-workspace-v1016 {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border: 1px solid #dce4ef !important;
  background:
    radial-gradient(circle at 10% -12%, rgba(93, 107, 234, 0.105), transparent 24rem),
    linear-gradient(150deg, rgba(255, 255, 255, 0.985), rgba(247, 249, 255, 0.98)) !important;
  box-shadow: var(--v109-shadow-float) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:not([data-app-theme="dark"]) .ui-v109 .card-usage-info-v1016 {
  border-color: #e1e7f0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.025) !important;
}

@media (min-width: 761px) {
  html:not([data-app-theme="dark"]) .ui-v109.pay-home {
    padding-top: 16px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .pay-home-topbar {
    top: 12px !important;
    margin-bottom: 4px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .pay-brand {
    min-height: 46px !important;
    border-radius: 15px !important;
    padding: 0 13px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .topbar-wallet-pill {
    min-width: 138px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .user-avatar-button {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }
}

@media (min-width: 961px) {
  html:not([data-app-theme="dark"]) .ui-v109 .card-workspace-v1016 {
    width: min(920px, 100%) !important;
    max-width: 920px !important;
    justify-self: center !important;
    border-radius: 26px !important;
    padding: 20px 24px 24px !important;
  }

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-workspace-v1016
    .card-section-title,
  html:not([data-app-theme="dark"]) .ui-v109 .card-layout-v1016 {
    width: min(790px, 100%) !important;
    max-width: 790px !important;
  }

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-workspace-v1016
    .card-section-title {
    margin-bottom: 12px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .card-layout-v1016 {
    grid-template-columns: minmax(300px, 350px) minmax(280px, 350px) !important;
    justify-content: center !important;
    gap: 26px !important;
  }

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-primary-column-v1016 {
    max-width: 350px !important;
  }

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-primary-column-v1016
    .alpina-card-face-wrap,
  html:not([data-app-theme="dark"])
    .ui-v109
    .card-primary-column-v1016
    .card-overview-v1016 {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
  }

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-usage-info-v1016 {
    align-self: start !important;
    border-radius: 17px !important;
  }
}

@media (max-width: 760px) {
  html:not([data-app-theme="dark"]) body:has(.ui-v109) {
    background-color: #eef3fa !important;
    background-image:
      radial-gradient(
        ellipse 34rem 22rem at 50% -11rem,
        rgba(91, 105, 234, 0.2),
        transparent 72%
      ),
      radial-gradient(
        circle at 1px 1px,
        rgba(54, 72, 104, 0.055) 0.7px,
        transparent 0.85px
      ),
      linear-gradient(180deg, #edf2fb 0%, #f5f7fb 28rem, #f2f5fa 100%) !important;
    background-size: auto, 22px 22px, auto !important;
    background-repeat: no-repeat, repeat, no-repeat !important;
    background-attachment: scroll !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .pay-home-topbar {
    top: max(8px, env(safe-area-inset-top)) !important;
    min-height: 50px !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .pay-brand {
    min-height: 44px !important;
    border-radius: 15px !important;
    padding: 0 11px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109.ui-v10 .services-home {
    border-radius: 23px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .card-workspace-v1016 {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 23px !important;
    padding: 16px 13px 15px !important;
  }

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-primary-column-v1016 {
    max-width: 334px !important;
  }

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-primary-column-v1016
    .alpina-card-face-wrap,
  html:not([data-app-theme="dark"])
    .ui-v109
    .card-primary-column-v1016
    .card-overview-v1016 {
    max-width: 326px !important;
  }
}