/*
 * Alpina Pay v10.20 — restore the restrained cabinet geometry.
 *
 * v10.19 introduced page-sized rounded surfaces and left the transparent
 * sticky header above the card workspace.  This light-only layer restores
 * the catalogue to its original open layout and keeps the card in the main
 * cabinet flow, below the greeting and next to the navigation.
 */

/* The account controls belong to document flow; they must never cover card UI. */
html:not([data-app-theme="dark"]) .ui-v109 .pay-home-topbar {
  position: relative !important;
  top: auto !important;
  margin-bottom: 0 !important;
}

/* Restore the original open catalogue instead of a page-sized rounded card. */
html:not([data-app-theme="dark"]) .ui-v109.ui-v10 .services-home {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 14px 0 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

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

/* Keep secondary surfaces on one calmer radius scale. */
html:not([data-app-theme="dark"]) .ui-v109 .pay-side-nav nav {
  border-radius: 18px !important;
}

html:not([data-app-theme="dark"]) .ui-v109 .pay-side-nav button {
  border-radius: 12px !important;
}

/* The wallet is a regular section, not a full-width hero above the cabinet. */
html:not([data-app-theme="dark"]) .ui-v109 .card-workspace-v1016 {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: visible !important;
  justify-self: stretch !important;
  border-radius: 20px !important;
  background: rgba(250, 252, 255, 0.96) !important;
  padding: 20px 22px 22px !important;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.025),
    0 22px 54px -44px rgba(32, 51, 84, 0.32) !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: 100% !important;
  max-width: 100% !important;
}

html:not([data-app-theme="dark"])
  .ui-v109
  .card-primary-column-v1016
  .card-deck-track {
  padding-block: 8px 10px !important;
}

@media (min-width: 961px) {
  html:not([data-app-theme="dark"]) .ui-v109.pay-home.has-card {
    grid-template-areas:
      "header header"
      "greeting greeting"
      "sidebar card"
      "sidebar services" !important;
    align-items: start !important;
    row-gap: 18px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .card-workspace-v1016 {
    grid-area: card !important;
    margin: 0 !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .card-layout-v1016 {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    justify-content: stretch !important;
    gap: 24px !important;
  }

  html:not([data-app-theme="dark"]) .ui-v109 .card-primary-column-v1016 {
    width: 100% !important;
    max-width: 360px !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%, 350px) !important;
    max-width: 350px !important;
  }

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

@media (min-width: 761px) and (max-width: 960px) {
  html:not([data-app-theme="dark"]) .ui-v109.pay-home.has-card {
    grid-template-areas:
      "header"
      "greeting"
      "card"
      "services" !important;
  }
}

@media (max-width: 760px) {
  html:not([data-app-theme="dark"]) .ui-v109.pay-home.has-card {
    grid-template-areas:
      "header"
      "greeting"
      "card"
      "services" !important;
  }

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

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

  html:not([data-app-theme="dark"])
    .ui-v109
    .card-primary-column-v1016
    .card-deck-track {
    padding-block: 6px 8px !important;
  }
}