/*
 * Alpina Pay v10.18 — desktop shell geometry.
 *
 * Several legacy layers still carry an `!important` square/transparent
 * topbar and a 1440px cabinet.  Keep this release last in index.html so the
 * header is a compact floating surface and the complete desktop cabinet has
 * one centred optical axis.  Mobile geometry intentionally stays owned by
 * the existing v10.16 rules.
 */

@media (min-width: 761px) {
  html,
  body,
  #root {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .ui-v109.pay-home {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: min(1280px, calc(100% - 48px)) !important;
    max-width: 1280px !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 18px 0 80px !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .ui-v109 .pay-home-topbar {
    position: sticky !important;
    z-index: 80 !important;
    top: 14px !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 62px !important;
    justify-self: center !important;
    margin: 0 0 6px !important;
    overflow: visible !important;
    border: 1px solid color-mix(in srgb, var(--v109-line) 78%, transparent) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--v109-surface) 86%, transparent) !important;
    padding: 8px 10px 8px 16px !important;
    box-shadow:
      0 18px 48px -36px rgba(31, 42, 67, 0.5),
      inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent) !important;
    box-sizing: border-box !important;
    transform: none !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
  }

  .ui-v109 .pay-dashboard-greeting,
  .ui-v109 .pay-side-nav,
  .ui-v109 .services-home,
  .ui-v109 .card-workspace-v1016,
  .ui-v109 .pay-card-screen {
    left: auto !important;
    right: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .ui-v109 .pay-dashboard-greeting {
    width: 100% !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
  }

  .ui-v109 .services-home,
  .ui-v109 .card-workspace-v1016,
  .ui-v109 .pay-card-screen {
    width: 100% !important;
  }
}

@media (min-width: 961px) {
  .ui-v109.pay-home {
    grid-template-columns: minmax(184px, 204px) minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }

  .ui-v109.pay-home.has-card {
    grid-template-areas:
      "header header"
      "card card"
      "greeting greeting"
      "sidebar services" !important;
  }

  .ui-v109.pay-home.needs-card {
    grid-template-areas:
      "header header"
      "greeting greeting"
      "sidebar offer"
      "sidebar services" !important;
  }
}

@media (min-width: 761px) and (max-width: 960px) {
  .ui-v109.pay-home {
    width: min(900px, calc(100% - 32px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .ui-v109.pay-home.has-card {
    grid-template-areas:
      "header"
      "card"
      "greeting"
      "services" !important;
  }

  .ui-v109.pay-home.needs-card {
    grid-template-areas:
      "header"
      "greeting"
      "offer"
      "services" !important;
  }

  .ui-v109 .pay-side-nav {
    display: none !important;
  }
}

@media (min-width: 761px) {
  html:not([data-app-theme="dark"]) .ui-v109 .pay-home-topbar {
    border-color: rgba(116, 133, 162, 0.18) !important;
    background: rgba(250, 252, 255, 0.86) !important;
    box-shadow:
      0 20px 52px -38px rgba(40, 56, 84, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  }

  html[data-app-theme="dark"] .ui-v109 .pay-home-topbar {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: rgba(18, 22, 29, 0.86) !important;
    box-shadow:
      0 22px 56px -38px rgba(0, 0, 0, 0.72),
      inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  }
}