/* Customer app: shared navigation, desktop/tablet layout and booking details.
   Presentation only — every control keeps its IDs, forms and scripts. */

/* --- Shared navigation --------------------------------------------------- */
.customer-side-nav { display: none; }
.customer-side-nav__brand img { display: block; width: 132px; height: auto; }
.customer-side-nav__group { display: flex; flex-direction: column; gap: 4px; }
.customer-side-nav__group--bottom { margin-top: auto; }
.customer-side-nav__group form { margin: 0; }
.customer-side-nav__link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: #a9bfcd; font-size: 14px; text-align: left; text-decoration: none; }
.customer-side-nav__link .aoc-icon { width: 20px; height: 20px; }
.customer-side-nav__link:hover { background: #072a3b; color: #e4f4fa; }
.customer-side-nav__link.is-active { background: linear-gradient(90deg, #0b3a4f, #06283a); color: #30d7f3; box-shadow: inset 2px 0 0 #30d7f3; }
.customer-side-nav__link--danger { color: #e693a6; }
.customer-side-nav__locales { display: flex; gap: 6px; padding: 10px 12px 0; }
.customer-side-nav__locales a { padding: 4px 8px; border: 1px solid #1a4153; border-radius: 6px; color: #8fb0c1; font-size: 12px; text-decoration: none; }
.customer-side-nav__locales a[aria-current] { color: #30d7f3; border-color: #30d7f3; }
.customer-app .dashboard-bottom-nav__item.is-active .aoc-icon { filter: drop-shadow(0 0 6px #30d7f350); }

/* --- Booking: product cards as in the reference ---------------------------- */
.customer-app #comboButtons .product-glass-card { position: relative; }
.customer-app #comboButtons .product-card-title { margin-right: 64px; }
.customer-app #comboButtons .product-card-price { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 5px; border: 1px solid #1c4a5e; border-radius: 999px; background: #03131d; color: #e8f4fa; font-size: 12px; font-weight: 500; white-space: nowrap; }
.customer-app #comboButtons .product-card-price::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, #e0a526 70%); box-shadow: 0 0 6px #e7ad2f55; }
.customer-app #comboButtons .product-card-price--free::before { display: none; }
.customer-app #comboButtons .contra-badge { top: auto; bottom: 10px; right: 10px; }
.customer-app #comboButtons .product-glass-card.active .contra-badge { right: 10px; }
.customer-app #comboButtons .product-glass-card.active::after { top: 16px; left: 16px; right: auto; width: 26px; height: 26px; box-shadow: 0 0 10px #30d7f380; }
.customer-app #comboButtons .product-glass-card.is-blocked { opacity: .55; }
.customer-app .contra-notice { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid #6b4a1f; border-radius: 10px; background: #1d1a12; color: #f1d7a3; text-align: left; box-shadow: none; }
.customer-app .contra-notice.d-none { display: none; }
.customer-app .contra-notice-icon, .customer-app .contra-notice-more { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; background: none; color: #f0c064; font-size: 12px; }
.customer-app .contra-notice-more { margin-left: auto; color: #9fbfcd; }
.customer-app .date-picker { padding: 14px; border: 1px solid #143747; border-radius: 12px; background: #031b29; }
.customer-app .date-slot-card:disabled { color: #4d6676; }
.customer-app .time-slot-chip-status { display: none; }
.customer-app #bookNowBtn { width: 100%; }

/* --- Appointments --------------------------------------------------------- */
.customer-app .booking-tile { border: 1px solid #143747; border-radius: 12px; background: linear-gradient(110deg, #052332, #021824); overflow: hidden; }
.customer-app .booking-tile-head { width: 100%; padding: 14px; background: none; border: 0; color: #e8f4fa; text-align: left; }
.customer-app .booking-tile-time { color: #30d7f3; font-size: 13px; }
.customer-app .booking-tile-body { padding: 0 14px 14px; color: #c3d6e1; }
.customer-app .booking-qr-img { max-width: 160px; border-radius: 10px; background: #fff; padding: 8px; }
.customer-app .dashboard-past-panel .list-group-item { background: transparent; border-color: #143747; color: #c3d6e1; }

/* --- Wallet: voucher redeem as an entry row ------------------------------- */
.customer-app .wallet-page .wallet-method-row + p { margin-top: 8px; }
.customer-app .wallet-page .wallet-history-table { --bs-table-bg: transparent; --bs-table-color: #c3d6e1; }
.customer-app .wallet-page .wallet-history-table th { color: #8fb0c1; font-weight: 500; border-color: #143747; }
.customer-app .wallet-page .wallet-history-table td { border-color: #143747; }

/* --- Original artwork cut from the approved mockups (img/customer/) --------
   Replaces the earlier CSS sprite windows; !important because the sprite rules use it. */
.customer-app .reference-wordmark { background: url('../img/customer/wordmark.png') left center / contain no-repeat !important; }
.customer-app .reference-wallet-mark { background: url('../img/customer/wallet-cube.png') center / contain no-repeat !important; }
.customer-app .reference-mountain-banner { background: url('../img/customer/banner-home.png') center / cover no-repeat !important; }
.customer-app .reference-product--v1 { background: url('../img/customer/prod-v1.png') center / cover no-repeat !important; }
.customer-app .reference-product--v3 { background: url('../img/customer/prod-v3.png') center / cover no-repeat !important; }
.customer-app .reference-product--bodyscan { background: url('../img/customer/prod-bodyscan.png') center / cover no-repeat !important; }
.customer-app .reference-product--flow { background: url('../img/customer/prod-flow.png') 60% center / cover no-repeat !important; }
.customer-app .reference-product--beauty { background: url('../img/customer/prod-beauty.png') center / cover no-repeat !important; }
.customer-app .dashboard-home-action > .reference-icon--calendar,
.customer-app .dashboard-home-action > .reference-icon--gift { width: 46px; height: 46px; background-color: transparent !important; background-position: center !important; background-size: contain !important; background-repeat: no-repeat !important; -webkit-mask: none !important; mask: none !important; filter: none; }
.customer-app .dashboard-home-action > .reference-icon--calendar { background-image: url('../img/customer/act-calendar.png') !important; }
.customer-app .dashboard-home-action > .reference-icon--gift { background-image: url('../img/customer/act-gift.png') !important; }
.customer-app .dashboard-home-action .dashboard-action-arrow { width: 30px; height: 30px; padding: 0; border: 0; background: url('../img/customer/act-chevron.png') center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; }
.customer-app .dashboard-home-action .dashboard-action-arrow::after { display: none; }
/* Coins have one symbol everywhere: the white ice cube from the wallet card. */
.customer-app #comboButtons .product-card-price::before { width: 20px; height: 20px; background: url('../img/customer/wallet-cube.png') center / contain no-repeat; box-shadow: none; border-radius: 50%; }
.customer-app #comboButtons .product-glass-card.active::after { width: 30px; height: 30px; background: url('../img/customer/check-circle.png') center / contain no-repeat !important; box-shadow: none; border-radius: 0; }
/* Wallet header: the cube logo. The navigation keeps a line pictogram like its other icons
   (m-coins.png = cube outline from the brand sheet, coloured via currentColor). */
html .customer-app .dashboard-screenbar .reference-icon--coins { background: url('../img/customer/wallet-cube.png') center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; border-radius: 50%; filter: drop-shadow(0 0 6px #30d7f366); }
/* Operator choice (tenancy/tenant_choose.php): light text on glass; the operator's accent
   stays on the left edge (inline border-left). */
.customer-app .tenant-choice { min-height: 56px; padding: 12px 16px; color: #e8f4fa !important; background: #041b29cc !important; border-top: 1px solid #1d5068; border-right: 1px solid #1d5068; border-bottom: 1px solid #1d5068; border-radius: 10px !important; box-shadow: none; }
.customer-app .tenant-choice:hover { color: #ffffff !important; background: #073145 !important; box-shadow: 0 0 18px #30d7f32e; }
.customer-app .tenant-choice .badge { color: #cfe7f1; background: #03131d !important; border: 1px solid #1c4a5e; }
.customer-app .wallet-page .wallet-pkg-chip::before, .customer-app .wallet-page .wallet-pkg-chip.is-selected::before { content: ''; grid-row: 1 / 3; align-self: center; width: 38px; height: 38px; background: url('../img/customer/wallet-cube.png') center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; }
.customer-app #chatModalContent .modal-title::before { border: 0 !important; background: url('../img/customer/studio-avatar.png') center / contain no-repeat !important; }
.customer-app .dashboard-screenbar__icon { width: 34px; height: 34px; }
.customer-app .wallet-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 18px 8px 16px; border: 1px solid #143747; border-radius: 11px; background: #031b29; text-align: center; }
.customer-app .wallet-features img { display: block; width: 42px; height: 42px; margin: 0 auto 8px; object-fit: contain; }
.customer-app .wallet-features span { color: #c6dae6; font-size: 12px; line-height: 1.35; }
.customer-app .wallet-page .wallet-features-section { order: -1; }
.customer-app .wallet-redeem .card-body { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.customer-app .wallet-redeem .card-body::before { content: ''; grid-row: 1 / 3; width: 42px; height: 42px; background: url('../img/customer/voucher.png') center / contain no-repeat; }
.customer-app .wallet-redeem .card-body > h2, .customer-app .wallet-redeem .card-body > p { grid-column: 2; margin: 0 !important; }
.customer-app .wallet-redeem .card-body > form { grid-column: 1 / -1; margin-top: 12px; }

/* --- Pages without the customer navigation (operator choice, guest legal pages) ----
   Same backdrop and controls; the site header and footer stay; one reading column. */
.customer-app.customer-bare .site-nav { display: flex; background: transparent; border: 0; box-shadow: none; }
.customer-app.customer-bare .site-footer { display: block; background: transparent; border: 0; }
.customer-app.customer-bare .site-footer a { color: #8fb0c1; }
html body.customer-app.customer-bare.area-user .site-main { display: block; max-width: 760px; min-height: 0; padding: 24px 20px 40px !important; border-radius: 16px; }
.customer-app.customer-bare .card, .customer-app.customer-bare .surface-panel, .customer-app.customer-bare .legal-card {
  background: linear-gradient(150deg, #0b3043d9 0%, #04192ae6 55%, #021320f0 100%) !important; border: 1px solid #1d5068 !important;
  border-radius: 14px; box-shadow: inset 0 1px 0 #8eeaff1f, 0 12px 32px #0007; color: #e2eef5;
}

/* --- Chat (reference screen "Chat"): the same modal, scripts and endpoints ------- */
html .customer-app #chatModal .modal-dialog { width: min(100%, 460px); max-width: 460px; height: 100dvh; min-height: 100dvh; margin: 0 auto; }
html .customer-app #chatModalContent { height: 100%; background: radial-gradient(120% 55% at 100% 0, #0d3f5733, transparent 60%), linear-gradient(180deg, #021420, #010c14) !important; }
html .customer-app #chatModalContent .modal-header { padding: 14px 16px; background: #021622e8; border-bottom: 1px solid #143747; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html .customer-app #chatModalContent .modal-title { gap: 12px !important; font-size: 17px; font-weight: 500; color: #f0f7fb; }
html .customer-app #chatModalContent .modal-title > .chat-back-btn { order: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #3dd7ea; }
html .customer-app #chatModalContent .modal-title > .chat-back-btn.d-none { display: none; }
html .customer-app #chatModalContent .modal-title::before { order: 1; width: 46px; height: 46px; margin: 0; border: 1px solid #2a8ba3 !important; border-radius: 50%; background: #021622 url('../img/customer/studio-avatar.png') center / cover no-repeat !important; box-shadow: 0 0 16px #30d7f344; }
html .customer-app #chatModalContent .chat-online-dot { order: 2; align-self: flex-end; width: 11px; height: 11px; margin: 0 0 2px -22px; border: 2px solid #021622; border-radius: 50%; background: #5d7482; }
html .customer-app #chatModalContent .chat-online-dot[data-state="online"] { background: #30d7f3; box-shadow: 0 0 8px #30d7f3; }
html .customer-app #chatModalContent .modal-title > .d-flex { order: 3; }
html .customer-app #chatModalContent .chat-header-sub { color: #8fb0c1; font-size: 13px; font-weight: 400; }
html .customer-app #chatModalContent .chat-online-dot[data-state="online"] ~ .d-flex .chat-header-sub { color: #30d7f3; }
html .customer-app #chatMessages { padding: 20px 14px 12px; background: transparent !important; }
html .customer-app #chatMessages .chat-msg { gap: 10px; margin-bottom: 14px; animation: aoc-in .35s ease both; }
html .customer-app #chatMessages .chat-msg.justify-content-start::before { content: ''; flex: none; width: 36px; height: 36px; border: 1px solid #2a8ba3; border-radius: 50%; background: #021622 url('../img/customer/studio-avatar.png') center / cover no-repeat; box-shadow: 0 0 10px #30d7f326; }
html .customer-app #chatMessages .chat-bubble { max-width: 78%; padding: 12px 14px 8px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
html .customer-app #chatMessages .chat-bubble--admin { background: linear-gradient(150deg, #0e2c3d, #08202e) !important; border: 1px solid #1b4558 !important; color: #e2eef5 !important; border-top-left-radius: 6px; box-shadow: inset 0 1px 0 #8eeaff14, 0 8px 22px #0006; }
html .customer-app #chatMessages .chat-bubble--user { background: linear-gradient(110deg, #22d6ec, #46dcf6) !important; color: #012532 !important; border-top-right-radius: 6px; box-shadow: 0 0 20px #30d7f333; }
html .customer-app #chatMessages .chat-bubble__meta { margin-top: 4px; font-size: 11px; text-align: right; color: #8fb0c1; }
html .customer-app #chatMessages .chat-bubble--user .chat-bubble__meta { color: #1d5a6b; }
html .customer-app #chatMessages .chat-attachment--image img { border-radius: 10px; }
html .customer-app #chatMessages .chat-day-divider { display: table; margin: 4px auto 16px; padding: 3px 12px; border: 1px solid #173b4c; border-radius: 999px; background: #031824; color: #8fb0c1; font-size: 11px; }
html .customer-app #chatModalContent .chat-empty-hint { margin: auto; padding: 24px; color: #8fb0c1; text-align: center; }
html .customer-app #chatInputWrap { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #143747; background: #021622e8; }
html .customer-app #chatSendForm { position: relative; align-items: center; gap: 10px; padding: 0 !important; }
html .customer-app #chatSendForm #chatInput { min-height: 48px; padding: 13px 54px 13px 18px; border: 1px solid #1f4a5e !important; border-radius: 26px !important; background: #041b29 !important; color: #e3f0f7; resize: none; }
html .customer-app #chatSendForm #chatSendBtn { position: absolute; top: 50%; right: 6px; width: 40px; height: 40px; min-height: 0; transform: translateY(-50%); }
html .customer-app #chatSendForm #chatSendBtn::before { display: none; }
@media (min-width: 768px) {
  /* Outranks body.area-user:has(.dashboard-shell) #chatModal .modal-dialog (full height). */
  html body.customer-app #chatModal .modal-dialog.chat-modal-dialog { height: min(860px, 92dvh); min-height: 0; margin: 4dvh auto; }
  html .customer-app #chatModalContent { overflow: hidden; border: 1px solid #1d5068 !important; border-radius: 22px !important; box-shadow: 0 30px 90px #000c, 0 0 60px #30d7f322; }
}

/* --- Profile in the app's card language ----------------------------------------
   Header as a glass card like the wallet card, rows transparent on the glass list
   (opaque rows hid it), cyan icons, logout as a red glass row, languages as pills. */
.customer-app .profile-hero {
  margin-bottom: 16px; padding: 18px; border: 1px solid #1d5068; border-radius: 16px;
  background: radial-gradient(120% 90% at 0 0, #11789a33, transparent 60%), linear-gradient(150deg, #0b3043d9 0%, #04192ae6 55%, #021320f0 100%);
  box-shadow: inset 0 1px 0 #8eeaff1f, 0 12px 32px #0007;
}
.customer-app .profile-hero > .reference-icon { width: 56px; height: 56px; color: #30d7f3; filter: drop-shadow(0 0 10px #30d7f366); }
.customer-app .profile-menu { gap: 0; border-radius: 16px; }
.customer-app .profile-menu-link, .customer-app .profile-menu summary { background: transparent; border-bottom: 1px solid #143747; }
.customer-app .profile-menu > a:last-child { border-bottom: 0; }
.customer-app .profile-menu-link:hover, .customer-app .profile-menu summary:hover { background: #30d7f312; }
.customer-app .profile-menu-link > .reference-icon, .customer-app .profile-menu summary > .reference-icon { color: #30d7f3; }
.customer-app .profile-menu details > .card-body { background: #021622cc; border-bottom: 1px solid #143747; }
.customer-app form .profile-logout {
  width: 100%; margin-top: 16px; border: 1px solid #5a2a3a; border-radius: 16px;
  background: linear-gradient(150deg, #2a101acc, #140810e6); color: #f09aae;
}
.customer-app form .profile-logout:hover { background: #3a1522; }
.customer-app .profile-languages { gap: 8px; }
.customer-app .profile-languages a { padding: 6px 16px; border: 1px solid #1a4153; border-radius: 999px; color: #8fb0c1; font-size: 13px; text-decoration: none; }
.customer-app .profile-languages a[aria-current] { color: #30d7f3; border-color: #30d7f3; box-shadow: 0 0 12px #30d7f333; }

/* --- Wallet transactions on phones: one compact card per entry -----------------
   Type and coins on top, the note in full below, date last. Desktop keeps the table. */
@media (max-width: 767.98px) {
  .customer-app .wallet-page .table-responsive:has(.wallet-history-table) { overflow: visible; }
  .customer-app .wallet-page .wallet-history-table thead { display: none; }
  .customer-app .wallet-page .wallet-history-table,
  .customer-app .wallet-page .wallet-history-table tbody { display: block; }
  .customer-app .wallet-page .wallet-history-table tr {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "type amount" "note note" "date date";
    gap: 6px 12px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid #143747; border-radius: 12px;
    background: linear-gradient(150deg, #0b3043b3, #031a28e6);
  }
  .customer-app .wallet-page .wallet-history-table td { display: block; padding: 0 !important; border: 0 !important; background: none !important; }
  .customer-app .wallet-page .wallet-history-table td:nth-child(1) { grid-area: date; font-size: 12px; }
  .customer-app .wallet-page .wallet-history-table td:nth-child(2) { grid-area: type; align-self: center; }
  .customer-app .wallet-page .wallet-history-table td:nth-child(3) { grid-area: amount; align-self: center; font-size: 18px; text-align: right; }
  .customer-app .wallet-page .wallet-history-table td:nth-child(4) { grid-area: note; color: #c3d6e1 !important; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
}

/* --- Wallet transaction pages: glass buttons, clearly visible ------------------ */
.customer-app .wallet-pager { gap: 8px; margin-top: 14px !important; }
.customer-app .wallet-pager .page-item .page-link {
  display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1px solid #1d5068; border-radius: 999px !important;
  background: linear-gradient(150deg, #0b3043d9, #04192ae6); color: #30d7f3; font-size: 14px; text-decoration: none;
}
.customer-app .wallet-pager .page-item:not(.disabled) .page-link:hover { border-color: #33c4df; box-shadow: 0 0 16px #30d7f333; }
.customer-app .wallet-pager .page-item.disabled .page-link { color: #6f8e9e; background: transparent; border-color: #143747; }
.customer-app .wallet-pager .page-item:nth-child(2) .page-link { color: #c3d6e1; border-color: transparent; background: transparent; }
.customer-app #transactions { scroll-margin-top: 16px; }

/* --- Tablet & desktop: sidebar + wide content ----------------------------- */
@media (min-width: 992px) {
  /* html body… outranks the older body.area-user:has(.dashboard-shell) .site-main rule. */
  html body.customer-app.area-user .site-main { width: 100%; display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; align-content: start; max-width: 1240px; min-height: 100dvh; margin: 0 auto; padding: 28px 32px 40px 0 !important; background: #00111ce6; box-shadow: 0 0 80px #0008; }
  .customer-app .site-main > * { grid-column: 2; min-width: 0; }
  .customer-app .customer-side-nav { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 0; display: flex; flex-direction: column; gap: 28px; height: 100dvh; margin-top: -28px; padding: 28px 14px 22px; border-right: 1px solid #10303f; background: #001019; }
  .customer-app .dashboard-bottom-nav { display: none; }
  .customer-app #chatToggleBtn { bottom: 24px; right: 24px; }

  /* Screen headers: the sidebar replaces the back arrow. */
  .customer-app .dashboard-screenbar { justify-content: flex-start; }
  .customer-app .dashboard-screenbar > div { flex: 0 1 auto; text-align: left; }
  .customer-app .dashboard-screenbar h2, .customer-app .dashboard-screenbar h1 { font-size: 22px; }
  .customer-app .dashboard-screenbar__back, .customer-app .dashboard-screenbar__icon { display: none; }

  /* Home: greeting, wallet and actions left; brand visual right. */
  .customer-app .dashboard-home-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px 28px; align-items: start; }
  .customer-app .dashboard-hero { display: contents; }
  .customer-app .dashboard-hero__content, .customer-app .dashboard-summary, .customer-app .dashboard-home-actions { grid-column: 1; }
  .customer-app .dashboard-kicker__brand { visibility: hidden; }
  .customer-app .dashboard-hero h1 { font-size: 32px; }
  .customer-app .dashboard-hero__visual { display: block; position: relative; grid-column: 2; grid-row: 1 / span 3; align-self: stretch; min-height: 440px; border: 1px solid #17465b; border-radius: 14px; overflow: hidden; }
  .customer-app .dashboard-hero__visual-image, .customer-app .dashboard-hero__visual-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .customer-app .dashboard-hero__visual-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, #00111cf0 5%, #00111c33 55%, transparent); }
  .customer-app .dashboard-hero__visual-copy { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; flex-direction: column; gap: 4px; }
  .customer-app .dashboard-hero__visual-copy span, .customer-app .dashboard-hero__visual-copy strong { font-size: 30px; line-height: 1.15; font-weight: 400; color: #f2f7fa; }
  .customer-app .dashboard-hero__visual-copy strong { color: #30d7f3; }
  .customer-app .dashboard-hero__visual-copy small { margin-top: 8px; color: #b6c7d2; font-size: 14px; }
  .customer-app .dashboard-home-action { padding: 26px 16px 18px; }
  .customer-app .dashboard-hero__visual { background: #02101a; }
  .customer-app .dashboard-hero__visual-image img { object-position: center 30%; }
  /* The desktop reference ends with the action cards; the banner stays a phone element. The
     flyer is different: `.dashboard-brand-banner--flyer` always beat this rule on specificity
     (0,3,0 vs 0,2,0) and was visible on desktop next to the hero visual — the carousel keeps
     that behaviour, capped to a sane width below. */
  .customer-app .dashboard-brand-banner { display: none; }

  /* Booking: products as a card grid, date and time side by side. */
  .customer-app #comboButtons { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
  .customer-app #comboButtons .product-glass-card { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; padding: 0 0 14px; }
  .customer-app #comboButtons .product-card-img { grid-row: auto; width: 100%; height: 190px; border-radius: 10px 10px 0 0; }
  .customer-app #comboButtons .product-card-title, .customer-app #comboButtons .product-card-desc, .customer-app #comboButtons .product-card-block-reason { grid-column: 1; margin-inline: 14px; }
  .customer-app #comboButtons .product-card-price { top: 12px; right: 12px; }
  .customer-app .dashboard-booking-panel { max-width: 980px; }

  /* Wallet & profile: two readable columns instead of one stretched strip. */
  .customer-app .wallet-page { max-width: 880px; }
  .customer-app .wallet-page > .row > .col-lg-6 { width: 50%; }
  .customer-app .customer-profile { max-width: 720px; }
}

/* Voucher code arriving from a scanned voucher QR: brief ice glow on the prefilled field. */
body.customer-app .wallet-redeem .form-control.is-prefilled { border-color: #3cdef5; box-shadow: 0 0 0 3px #30d7f333, 0 0 22px #30d7f340; animation: voucher-prefill 1.6s ease-out 2; }
@keyframes voucher-prefill { 50% { box-shadow: 0 0 0 5px #30d7f355, 0 0 34px #30d7f366; } }
@media (prefers-reduced-motion: reduce) { body.customer-app .wallet-redeem .form-control.is-prefilled { animation: none; } }

/* Paged lists: anchors (#past, #vouchers) land below the sticky screen bar, not under it. */
.customer-app #past, .customer-app #vouchers, .customer-app #transactions { scroll-margin-top: 84px; }

/* Chat back arrow: same arrow, size and colour as the screen bars on every other page. */
html .customer-app #chatModalContent .modal-title > .chat-back-btn { width: 32px; height: 36px; margin-left: -6px; }
html .customer-app #chatModalContent .chat-back-btn__icon { display: block; width: 24px; height: 24px; }
html .customer-app #chatModalContent .chat-back-btn__svg { display: none; }
@media (max-width: 767.98px) {
  /* On phones the arrow is the way back, as on the other screens — no extra ×. */
  html .customer-app #chatModalContent .modal-header .btn-close { display: none; }
}

/* Chat button in every screen bar (Termine, Buchen, Coins, Profil): right end, like on Home. */
.customer-app .dashboard-screenbar .dashboard-icon-button--chat { flex: none; margin-left: auto; }
/* Where a page has the header button, the floating one goes away … */
body.customer-app:has(.dashboard-icon-button--chat) #chatToggleBtn { display: none; }
/* … and on pages without a screen bar (e.g. legal pages) it sits top right instead of low. */
body.customer-app:not(:has(.dashboard-icon-button--chat)) #chatToggleBtn { top: 14px; bottom: auto; }

/* Receipts list (Meine Belege). */
.customer-app .receipt-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 0; border-top: 1px solid #16394a; }
.customer-app .receipt-item:first-child { border-top: 0; padding-top: 0; }
.customer-app .receipt-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.customer-app .receipt-item__main strong { color: #eaf3f8; font-weight: 500; }
.customer-app .receipt-item__side { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.customer-app .receipt-item__amount { color: #3cdef5; font-weight: 600; white-space: nowrap; }

/* Bare customer pages (legal texts, Betreiber): transparent top bar without blur, as on login. */
.customer-app.customer-bare .site-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Screen bars: install icon (only while the app is not installed) sits right before the chat
   button; together they take the right end of the bar. */
.customer-app .dashboard-screenbar .dashboard-icon-button--install { flex: none; margin-left: auto; }
.customer-app .dashboard-screenbar .dashboard-icon-button--install:not([hidden]) + .dashboard-icon-button--chat { margin-left: 4px; }

/* Startseiten-Flyer: fester Rahmen im Format des Bildes — 4:5 auf dem Handy, 16:9 ab Tablet.
   Bilder im richtigen Format füllen ihn exakt (cover schneidet dann nichts ab); ältere Bilder
   im falschen Format werden über .is-legacy eingepasst, ein Flyer mit nur einem der beiden
   Bilder über .is-landscape-only / .is-portrait-only, sobald sein Rahmen vom Bild abweicht. */
.customer-app .dashboard-flyers { position: relative; width: 100%; aspect-ratio: 4 / 5; margin-inline: auto; border-radius: 16px; overflow: hidden; background: #070d18; }
/* max-height hält den Rahmen im Hochformat kurz; im Querformat (Handy gedreht) würde dieselbe
   Grenze den 4:5-Rahmen quetschen — dort gilt sie nicht. */
@media (orientation: portrait) { .customer-app .dashboard-flyers { max-height: 70vh; } }
@media (min-width: 768px) {
  /* Ab Tablet/Desktop 16:9, aber nicht mehr randlos — sonst würde der Rahmen neben dem
     Hero-Visual auf breiten Bildschirmen unangenehm hoch. */
  .customer-app .dashboard-flyers { aspect-ratio: 16 / 9; max-width: 960px; }
}
.customer-app .dashboard-flyers__track { position: absolute; inset: 0; }
.customer-app .dashboard-flyer { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .6s ease; }
.customer-app .dashboard-flyer.is-active { opacity: 1; z-index: 1; }
.customer-app .dashboard-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.customer-app .dashboard-flyer.is-legacy img { object-fit: contain; }
/* Fehlt eines der beiden Formate, füllt das vorhandene Bild notgedrungen den fremden Rahmen —
   cover schneidet es dann zu. contain statt cover in genau der Breite, in der das passiert. */
@media (max-width: 767.98px) { .customer-app .dashboard-flyer.is-landscape-only img { object-fit: contain; } }
@media (min-width: 768px) { .customer-app .dashboard-flyer.is-portrait-only img { object-fit: contain; } }
.customer-app .dashboard-flyer:focus-visible { outline: 2px solid #3cdef5; outline-offset: -3px; }
.customer-app .dashboard-flyers__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.customer-app .dashboard-flyers__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: rgba(7,13,24,.5); padding: 0; }
.customer-app .dashboard-flyers__dot.is-active { background: #3cdef5; border-color: #3cdef5; }
@media (prefers-reduced-motion: reduce) { .customer-app .dashboard-flyer { transition: none; } }

/* Connection invite: code and QR side by side (stacked on narrow phones); prefilled field glows. */
.customer-app .link-code-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.customer-app .link-code-qr { width: 160px; height: 160px; padding: 6px; background: #fff; border-radius: 10px; box-shadow: 0 0 18px #30d7f333; }
.customer-app .link-accept .form-control.is-prefilled { border-color: #3cdef5; box-shadow: 0 0 0 3px #30d7f333, 0 0 22px #30d7f340; }

/* Voucher redeem card: stays compact at the top even beside the tall buy card (tablets) —
   it no longer stretches to that height with the grid rows spread apart. */
.customer-app .wallet-redeem { height: auto !important; }
.customer-app .wallet-redeem .card-body { align-content: start; }
.customer-app .wallet-redeem .card-body > form { flex-wrap: nowrap !important; }
.customer-app .wallet-redeem .card-body > form .form-control { min-width: 0; }
.customer-app .wallet-redeem .card-body > form .btn { flex: none; white-space: nowrap; }

/* === Coins kaufen (mockup): package cards, big amount field, payment cards, ice checkout === */
.customer-app .wallet-buy-head { margin-bottom: 12px; }
.customer-app .wallet-buy-head h2 { color: #f2f7fa; font-weight: 500; }

/* Package cards: coin motif | text | price | round go/check. */
.customer-app .wallet-pkg-grid--cards { gap: 12px; }
.customer-app .wallet-pkg-chip.wallet-pkg-card {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 38px; align-items: center; gap: 4px 14px;
  min-height: 92px; padding: 14px 14px 14px 12px; text-align: left; border-radius: 14px;
  border: 1px solid #1d4a5e; background: linear-gradient(160deg, #0a2433f2, #051722f2);
}
.customer-app .wallet-pkg-card::before, .customer-app .wallet-pkg-card::after { display: none !important; }
.customer-app .wallet-pkg-card__coin { width: 64px; height: 64px; background: url('../img/customer/wallet-cube.png') center / 78% no-repeat; filter: drop-shadow(0 0 10px #30d7f366); }
.customer-app .wallet-pkg-card__coin--stack-s { background-size: 88%; }
.customer-app .wallet-pkg-card__coin--stack-l { background-size: 96%; }
.customer-app .wallet-pkg-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.customer-app .wallet-pkg-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.customer-app .wallet-pkg-card .wallet-pkg-chip__coins { font-size: 18px; font-weight: 500; color: #f2f7fa; }
.customer-app .wallet-pkg-card .wallet-pkg-chip__label { font-size: 13px; color: #b9cfdb; }
.customer-app .wallet-pkg-card__tagline { position: relative; margin-top: 6px; padding-top: 6px; font-size: 11.5px; color: #8fa9b8; }
.customer-app .wallet-pkg-card__tagline::before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 2px; border-radius: 2px; background: #30d7f3; opacity: .8; }
.customer-app .wallet-pkg-badge { padding: 2px 9px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3cdef5; border: 1px solid #2aa9c3; border-radius: 999px; background: #062c3b; }
.customer-app .wallet-pkg-card .wallet-pkg-chip__price { grid-column: 3; grid-row: auto; font-size: 17px; font-weight: 500; color: #f2f7fa; white-space: nowrap; }
.customer-app .wallet-pkg-card__go { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid #6f93a6; border-radius: 50%; color: #d6eef6; font-size: 15px; }
.customer-app .wallet-pkg-card__go .bi-check-lg { display: none; }
.customer-app .wallet-pkg-card.is-selected {
  border-color: #3cdef5; background: linear-gradient(160deg, #0b3446f2, #062130f2);
  box-shadow: 0 0 0 1px #3cdef5, 0 0 26px #30d7f355, inset 0 0 22px #30d7f322;
}
.customer-app .wallet-pkg-card.is-selected .wallet-pkg-card__go { border-color: #3cdef5; background: #3cdef5; color: #002432; box-shadow: 0 0 14px #30d7f388; }
.customer-app .wallet-pkg-card.is-selected .wallet-pkg-card__go .bi-chevron-right { display: none; }
.customer-app .wallet-pkg-card.is-selected .wallet-pkg-card__go .bi-check-lg { display: block; }

/* Big custom amount field. */
.customer-app .wallet-amount { margin-top: 18px; }
.customer-app .wallet-amount .form-label { font-size: 17px; color: #f2f7fa; }
.customer-app .wallet-amount__field {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  min-height: 84px; padding: 12px 16px; border: 1px solid #1d4a5e; border-radius: 14px;
  background: linear-gradient(160deg, #0a2433f2, #051722f2);
}
.customer-app .wallet-amount__field:focus-within { border-color: #3cdef5; box-shadow: 0 0 0 3px #30d7f324; }
.customer-app .wallet-amount__coin { width: 48px; height: 48px; background: url('../img/customer/wallet-cube.png') center / contain no-repeat; filter: drop-shadow(0 0 8px #30d7f366); }
.customer-app .wallet-amount__input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: #f2f7fa; font-size: 40px; font-weight: 600; line-height: 1.1; -moz-appearance: textfield; appearance: textfield; }
.customer-app .wallet-amount__input::-webkit-outer-spin-button, .customer-app .wallet-amount__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.customer-app .wallet-amount__input::placeholder { color: #4f7486; font-weight: 400; font-size: 22px; }
.customer-app .wallet-amount__input:focus { outline: none; }
.customer-app .wallet-amount__unit { padding-left: 16px; border-left: 1px solid #245066; color: #d6e5ee; font-size: 17px; }
.customer-app .wallet-amount__step { display: flex; flex-direction: column; }
.customer-app .wallet-amount__step button { padding: 0 2px; border: 0; background: none; color: #8fd9ea; font-size: 16px; line-height: 1; }
.customer-app .wallet-amount__step button:hover { color: #3cdef5; }
.customer-app .wallet-amount__eur { margin: 8px 0 0 4px; color: #b9cfdb; font-size: 14px; }
.customer-app .wallet-amount__eur .wallet-eur-preview { display: inline; padding: 0; border: 0; background: none; color: #b9cfdb; font-size: inherit; }

/* Payment method cards. */
.customer-app .wallet-method-row--cards { gap: 10px; }
.customer-app .wallet-method-chip.wallet-method-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 108px; padding: 14px 14px 12px; text-align: left; border-radius: 12px;
  border: 1px solid #1d4a5e; background: linear-gradient(160deg, #0a2433f2, #051722f2); color: #d6e5ee;
}
.customer-app .wallet-method-card strong { margin-top: 10px; font-size: 14.5px; font-weight: 500; color: #f2f7fa; }
.customer-app .wallet-method-card small { font-size: 11.5px; color: #8fa9b8; line-height: 1.3; }
.customer-app .wallet-method-card__icon { display: block; width: 28px; height: 28px; font-size: 26px; line-height: 1; }
.customer-app .wallet-method-card__icon--onsite { background: #3cdef5; mask: url('../img/customer/m-location.png') center / contain no-repeat; -webkit-mask: url('../img/customer/m-location.png') center / contain no-repeat; }
.customer-app .wallet-method-card__icon--card { background: #3cdef5; mask: url('../img/customer/m-card.png') center / contain no-repeat; -webkit-mask: url('../img/customer/m-card.png') center / contain no-repeat; }
.customer-app .wallet-method-card__icon--paypal { color: #0070e0; background: linear-gradient(135deg, #003087 30%, #0070e0 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.customer-app .wallet-method-card__check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #6f93a6; border-radius: 50%; font-size: 13px; color: transparent; }
.customer-app .btn-check:checked + .wallet-method-card { background: linear-gradient(160deg, #0b3446f2, #062130f2); color: #d6e5ee; border-color: #3cdef5; box-shadow: 0 0 0 1px #3cdef5, 0 0 22px #30d7f355, inset 0 0 18px #30d7f322; }
.customer-app .btn-check:checked + .wallet-method-card .wallet-method-card__check { border-color: #3cdef5; background: #3cdef5; color: #002432; }

/* Ice checkout button (texture image can be layered in later). */
.customer-app .wallet-checkout-btn.wallet-checkout-btn--ice {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; padding: 8px 64px;
  border: 2px solid transparent; border-radius: 999px; color: #f2fbff; font-size: 19px; font-weight: 500; letter-spacing: .01em; overflow: hidden;
  background:
    linear-gradient(180deg, #0f4458, #07293a) padding-box,
    linear-gradient(90deg, #30d7f3, #b8f6ff 50%, #30d7f3) border-box;
  box-shadow: 0 0 26px #30d7f355, inset 0 0 22px #30d7f333;
}
.customer-app .wallet-checkout-btn--ice::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background:
    linear-gradient(115deg, transparent 20%, #d8fbff55 22%, transparent 24%),
    linear-gradient(70deg, transparent 58%, #d8fbff44 59.5%, transparent 61%),
    linear-gradient(160deg, transparent 72%, #d8fbff33 73%, transparent 75%),
    radial-gradient(120% 90% at 50% 0%, #b8f6ff33, transparent 60%);
}
.customer-app .wallet-checkout-btn--ice:hover { color: #fff; box-shadow: 0 0 34px #30d7f377, inset 0 0 26px #30d7f344; }
.customer-app .wallet-checkout-btn__go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #8ceeff; border-radius: 50%; background: #062130; color: #d8fbff; font-size: 20px; box-shadow: 0 0 14px #30d7f366; }
.customer-app .wallet-secure-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 12px 0 0; font-size: 12px; color: #8fa9b8; }
.customer-app .wallet-secure-note__sep { color: #3b6477; }
@media (max-width: 420px) {
  .customer-app .wallet-pkg-chip.wallet-pkg-card { grid-template-columns: 52px minmax(0, 1fr) auto 32px; gap: 4px 10px; }
  .customer-app .wallet-pkg-card__coin { width: 52px; height: 52px; }
  .customer-app .wallet-method-chip.wallet-method-card { padding: 12px 10px 10px; }
}

/* Coins kaufen on phones: badge stays on one line next to the title; tighter card grid. */
.customer-app .wallet-pkg-badge { white-space: nowrap; }
@media (max-width: 480px) {
  .customer-app .wallet-pkg-chip.wallet-pkg-card { grid-template-columns: 50px minmax(0, 1fr) auto 30px; gap: 3px 9px; padding: 12px 10px; min-height: 86px; }
  .customer-app .wallet-pkg-card__coin { width: 50px; height: 50px; }
  .customer-app .wallet-pkg-card .wallet-pkg-chip__coins { font-size: 16.5px; }
  .customer-app .wallet-pkg-card .wallet-pkg-chip__price { font-size: 15.5px; }
  .customer-app .wallet-pkg-badge { padding: 1px 7px; font-size: 9px; letter-spacing: .06em; }
  .customer-app .wallet-pkg-card__go { width: 30px; height: 30px; font-size: 13px; }
  .customer-app .wallet-amount__input { font-size: 34px; }
  .customer-app .wallet-method-card small { font-size: 10.5px; }
}

/* Gift voucher form in the Coins kaufen design: the max-value hint next to the EUR preview. */
.customer-app .wallet-amount__hint { color: #8fa9b8; font-size: 12px; }