.packages-shell{width:min(1120px,calc(100% - 28px));margin:0 auto;padding:44px 0 110px}
.package-customer-banner,.package-payment-box{padding:16px 18px;border-radius:16px;background:#edf8ef;border:1px solid #b9ddbf}
.package-customer-banner{display:flex;flex-direction:column;gap:10px;margin:18px 0 24px}
.package-customer-banner span,#package-payment-info span{display:block;color:var(--muted)}
.package-customer-banner a,.customer-booking-banner-actions a{color:var(--green-800);font-weight:800;text-decoration:underline}
.package-grid,.my-package-grid,.admin-package-grid{display:grid;gap:18px}
.package-card{overflow:hidden;border-radius:22px;background:var(--white);box-shadow:var(--shadow)}
.package-poster{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.package-card-body{padding:22px}
.package-card h2{margin:5px 0 12px;font-size:27px;line-height:1.05}
.package-price{font-size:31px;font-weight:900}
.package-hours{margin:4px 0 20px;color:var(--muted);font-weight:700}
.package-buy-form{display:grid;gap:14px}
.package-rules-note{margin-top:24px;padding:18px;border-radius:16px;background:rgba(217,239,85,.2)}
.package-payment-box{margin:22px 0 0}
.package-payment-box.package-insufficient{background:#fff5e5;border-color:#f1cf98}
#package-payment-info strong{display:block}
.package-payment-options{display:grid;gap:9px;margin-top:14px}
.package-payment-options label{display:flex;gap:12px;padding:13px;border-radius:14px;background:#fff;border:1px solid rgba(13,43,32,.12)}
.package-payment-options input{width:20px;min-width:20px;min-height:20px;margin:2px 0 0}
.package-payment-options strong,.package-payment-options small{display:block}
.package-payment-options small{color:var(--muted)}
.customer-booking-banner-actions{display:flex;flex-wrap:wrap;gap:12px}
.my-package-card{padding:18px;border-radius:18px;background:#fff;border:1px solid rgba(13,43,32,.12)}
.my-package-card.is-active{border-color:#8fbd96;background:#edf8ef}
.package-balance strong{display:block;font-size:31px}
.package-balance span{color:var(--muted)}
.package-balance.unlimited{font-size:30px;font-weight:900}
.package-status-row{display:flex;justify-content:space-between;gap:10px;margin-top:14px;color:var(--muted);font-size:13px}
.admin-package-card{display:grid;gap:15px}
.status-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mobile-nav{grid-template-columns:repeat(4,1fr)}
@media(min-width:700px){
  .package-customer-banner{flex-direction:row;justify-content:space-between;align-items:center}
  .package-grid,.my-package-grid,.admin-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1050px){.package-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}


/* Permanent Membership */
.membership-shell{width:min(1050px,calc(100% - 28px));margin:0 auto;padding:44px 0 110px}
.membership-hero-card{display:grid;gap:22px;overflow:hidden;border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.membership-hero-copy{padding:24px}
.membership-hero-copy h1{margin:7px 0 14px;font-size:clamp(38px,8vw,70px);line-height:.96}
.membership-price{font-size:34px;font-weight:900;color:var(--green-950)}
.membership-price small{font-size:15px;color:var(--muted)}
.membership-benefits{padding-left:20px;line-height:1.8}
.membership-poster{width:100%;height:100%;max-height:620px;object-fit:cover;display:block}
.membership-buy-card,.membership-not-eligible{max-width:680px;margin:24px auto 0;padding:22px;border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.membership-buy-form{display:grid;gap:16px}
.membership-checkout-total{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:14px;background:#edf8ef}
.membership-checkout-total strong{font-size:24px}
.membership-calendar-note{margin-bottom:0;color:var(--muted);font-size:13px}
.membership-payment-box{margin:22px 0 0;padding:18px;border-radius:18px;background:#e9f7ee;border:2px solid #7eb38a}
.membership-payment-box strong,.membership-payment-box span{display:block}
.membership-payment-box span{color:var(--muted)}
.my-membership-grid{display:grid;gap:14px;margin-bottom:14px}
.my-membership-card{padding:18px;border-radius:18px;background:#fff;border:1px solid rgba(13,43,32,.12)}
.my-membership-card.is-active{background:#e9f7ee;border-color:#7eb38a}
.membership-dashboard-status{display:inline-block;margin:7px 0;padding:7px 10px;border-radius:999px;background:#0e4d37;color:#fff;font-size:12px;font-weight:900}
.membership-settings-card{margin-bottom:20px}
.membership-settings-form{display:grid;gap:12px}
.customer-search-bar{display:grid;gap:10px;margin:18px 0}
.admin-customer-list{display:grid;gap:14px}
.admin-customer-card.is-member{border:2px solid #89b690}
.customer-admin-head{display:flex;flex-direction:column;gap:14px}
.customer-admin-head a,.customer-admin-head span{display:block}
.customer-member-badge{display:inline-block!important;width:max-content;padding:5px 8px;border-radius:999px;background:#ececea;font-size:11px;font-weight:900}
.customer-member-badge.active{background:#0e4d37;color:#fff}
.customer-membership-current{padding:12px;border-radius:14px;background:#f5f6f3}
.customer-membership-current strong,.customer-membership-current span{display:block}
.customer-member-form{display:grid;gap:12px;margin-top:15px;padding-top:15px;border-top:1px solid rgba(13,43,32,.1)}
.member-approval-toggle{display:flex;gap:10px;align-items:flex-start}
.member-approval-toggle input{width:20px;min-width:20px;min-height:20px;margin-top:2px}
.member-approval-toggle strong,.member-approval-toggle small{display:block}
.member-approval-toggle small{color:var(--muted)}
@media(min-width:760px){
  .membership-hero-card{grid-template-columns:1.05fr .95fr}
  .membership-settings-form{grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
  .customer-search-bar{grid-template-columns:2fr 1fr auto auto}
  .customer-admin-head{flex-direction:row;justify-content:space-between}
  .my-membership-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Compact booking + mobile navigation fix */
@media (max-width: 699px) {
    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: minmax(48px, auto);
        gap: 0;
        width: calc(100% - 22px);
        left: 11px;
        right: 11px;
        bottom: 10px;
        overflow: hidden;
        border-radius: 22px;
    }

    .mobile-nav a {
        min-width: 0;
        width: 100%;
        padding: 14px 8px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-nav .mobile-nav-primary {
        border-radius: 14px;
        margin: 4px;
        width: calc(100% - 8px);
        padding: 10px 8px;
    }

    body {
        padding-bottom: 118px;
    }
}


/* Final mobile nav height fix */
@media (max-width: 699px) {
    .mobile-nav {
        height: auto !important;
        min-height: 104px !important;
        max-height: none !important;
        overflow: visible !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    .mobile-nav a {
        min-height: 48px !important;
        height: auto !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .mobile-nav .mobile-nav-primary {
        min-height: 40px !important;
        height: auto !important;
        align-self: center;
    }

    body {
        padding-bottom: 130px !important;
    }
}


/* FINAL mobile bottom navigation geometry fix */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 699px) {
    .mobile-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 10px !important;

        /* Important: no explicit width when both left and right are set */
        width: auto !important;
        max-width: none !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-auto-flow: row !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 6px !important;
        gap: 4px !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        z-index: 9999 !important;
    }

    .mobile-nav a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;

        margin: 0 !important;
        padding: 8px 6px !important;
        box-sizing: border-box !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 14px !important;
    }

    .mobile-nav .mobile-nav-primary {
        width: auto !important;
        height: 46px !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 8px 6px !important;
    }

    body {
        padding-bottom: 125px !important;
    }

    .booking-date-control {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: end;
    }

    .booking-date-control input[type="date"] {
        min-width: 0;
        width: 100%;
    }

    .booking-date-picker-button {
        min-width: 48px;
        height: 52px;
        padding: 0 12px;
        border: 1px solid rgba(13,43,32,.18);
        border-radius: 14px;
        background: #fff;
        color: inherit;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }
}


/* Absolute final mobile-nav viewport sizing.
   Do not let body/parent/link intrinsic width influence the fixed nav. */
@media (max-width: 699px) {
    .mobile-nav {
        position: fixed !important;

        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;

        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;

        bottom: 10px !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, 46px) !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;

        gap: 4px !important;
        padding: 6px !important;
        margin: 0 !important;

        height: auto !important;
        min-height: 104px !important;
        max-height: none !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        z-index: 99999 !important;
    }

    .mobile-nav > a,
    .mobile-nav > .mobile-nav-primary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;

        margin: 0 !important;
        padding: 6px 4px !important;

        box-sizing: border-box !important;
        flex: none !important;

        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}


/* FINAL EDGE-ANCHORED MOBILE NAV
   Explicitly cancels the previous centered/transform version. */
@media (max-width: 699px) {
    .mobile-nav {
        position: fixed !important;

        inset: auto 12px 10px 12px !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 10px !important;
        top: auto !important;

        transform: none !important;
        translate: none !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: 46px 46px !important;
        grid-auto-flow: row !important;

        gap: 4px !important;
        padding: 6px !important;
        margin: 0 !important;

        height: 104px !important;
        min-height: 104px !important;
        max-height: 104px !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 22px !important;
        z-index: 99999 !important;
    }

    .mobile-nav > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;

        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;

        margin: 0 !important;
        padding: 6px 4px !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-align: center !important;
    }

    .mobile-nav > .mobile-nav-primary {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 46px !important;
        margin: 0 !important;
    }

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}


/* Mobile navigation replacement: one button + bottom sheet */
.mobile-menu-trigger,.mobile-menu-sheet,.mobile-menu-backdrop{display:none}

@media (max-width:699px){
  .mobile-nav{display:none!important}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body{padding-bottom:82px!important}

  .mobile-menu-trigger{
    position:fixed!important;
    display:inline-flex!important;
    align-items:center;justify-content:center;gap:8px;
    left:50%!important;right:auto!important;bottom:12px!important;
    transform:translateX(-50%)!important;
    width:132px!important;min-width:132px!important;max-width:132px!important;height:48px!important;
    margin:0!important;padding:0 18px!important;box-sizing:border-box!important;
    border:0;border-radius:999px;background:var(--green-950);color:#fff;
    font:inherit;font-weight:800;font-size:16px;line-height:1;
    box-shadow:0 10px 28px rgba(0,0,0,.22);z-index:10001;cursor:pointer
  }

  .mobile-menu-trigger-icon{font-size:20px;line-height:1}

  .mobile-menu-backdrop{
    position:fixed;display:block;inset:0;background:rgba(0,0,0,.42);
    z-index:10002
  }
  .mobile-menu-backdrop[hidden]{display:none!important}

  .mobile-menu-sheet{
    position:fixed!important;display:block!important;
    left:10px!important;right:10px!important;bottom:10px!important;top:auto!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    max-height:calc(100dvh - 28px);
    margin:0!important;padding:8px 14px 14px!important;box-sizing:border-box!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    border-radius:24px;background:var(--green-950);color:#fff;
    box-shadow:0 20px 55px rgba(0,0,0,.35);z-index:10003;
    transform:translateY(calc(100% + 24px))!important;
    transition:transform .22s ease
  }
  .mobile-menu-sheet.is-open{transform:translateY(0)!important}
  .mobile-menu-sheet-handle{width:42px;height:4px;margin:2px auto 10px;border-radius:999px;background:rgba(255,255,255,.34)}
  .mobile-menu-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 12px}
  .mobile-menu-sheet-head strong{font-size:17px}
  .mobile-menu-close{
    display:flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;
    border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
    font:inherit;font-size:26px;line-height:1;cursor:pointer
  }
  .mobile-menu-links{display:grid;gap:7px}
  .mobile-menu-links a{
    display:flex;align-items:center;width:100%;min-width:0;min-height:48px;
    padding:11px 14px;box-sizing:border-box;border-radius:14px;
    background:rgba(255,255,255,.07);color:#fff;text-decoration:none;font-weight:700
  }
  .mobile-menu-links .mobile-menu-book{
    justify-content:center;margin-top:3px;background:var(--yellow);color:var(--green-950);font-weight:900
  }
  body.mobile-menu-open{overflow:hidden!important}
}


/* Bottom-sheet viewport width fix */
@media (max-width:699px) {
    .mobile-menu-sheet {
        left: 12px !important;
        right: auto !important;

        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;

        box-sizing: border-box !important;
        transform: translateY(calc(100% + 24px)) !important;
    }

    .mobile-menu-sheet.is-open {
        transform: translateY(0) !important;
    }

    .mobile-menu-sheet *,
    .mobile-menu-links,
    .mobile-menu-links a {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* Mobile header cleanup: branding only, navigation lives in bottom menu */
@media (max-width: 699px) {
    .site-header {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .site-header .header-actions {
        display: none !important;
    }

    .site-header .brand {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* The Menu button must always remain visible on mobile. */
    .mobile-menu-trigger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Hide trigger only while the sheet itself is open to avoid overlap. */
    body.mobile-menu-open .mobile-menu-trigger {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* Mobile Menu Button: fixed top-right */
@media (max-width: 699px) {
    .mobile-menu-trigger {
        position: fixed !important;
        top: 14px !important;
        right: 14px !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: auto !important;
        min-width: 92px !important;
        max-width: none !important;
        height: 44px !important;

        padding: 0 14px !important;
        margin: 0 !important;

        border-radius: 999px !important;
        z-index: 10001 !important;
    }

    .mobile-menu-trigger-icon {
        font-size: 18px !important;
    }

    /* No longer reserve large bottom space for the trigger. */
    body {
        padding-bottom: 24px !important;
    }

    /* Keep the sheet above page content and independent of trigger location. */
    .mobile-menu-sheet {
        bottom: 10px !important;
    }
}


/* STRUCTURAL MOBILE MENU BUTTON FIX
   Trigger now lives inside .site-header next to the brand. */
@media (max-width: 699px) {
    .site-header {
        position: relative !important;
        min-height: 88px !important;
        padding-right: 112px !important;
        overflow: visible !important;
    }

    .site-header .mobile-menu-trigger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        position: fixed !important;
        top: 18px !important;
        right: 16px !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 12px !important;

        box-sizing: border-box !important;
        border: 0 !important;
        border-radius: 999px !important;

        background: var(--green-950) !important;
        color: #fff !important;

        font: inherit !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 1 !important;

        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        z-index: 2147483000 !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.18) !important;
    }

    .site-header .mobile-menu-trigger-icon {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    body.mobile-menu-open .site-header .mobile-menu-trigger {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Keep normal desktop/header links hidden on mobile. */
    .site-header .header-actions {
        display: none !important;
    }
}

/* Explicitly keep the mobile trigger hidden on desktop. */
@media (min-width: 700px) {
    .site-header .mobile-menu-trigger {
        display: none !important;
    }
}


/* =========================================================
   MOBILE STRUCTURE FIX
   Header is the viewport anchor; Menu is NOT position:fixed.
   Also eliminate document-width overflow at the source.
   ========================================================= */
@media (max-width: 699px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }

    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    main,
    .booking-shell,
    .booking-card,
    .form-step,
    .form-grid,
    .customer-login-hint,
    .customer-booking-banner,
    .booking-date-control,
    .time-slots,
    .segmented {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .booking-shell {
        width: calc(100% - 28px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Header itself stays pinned to the top. */
    .site-header {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        min-height: 84px !important;
        padding: 14px 118px 14px 18px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        overflow: visible !important;
        z-index: 10000 !important;
    }

    .site-header .brand {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .site-header .header-actions {
        display: none !important;
    }

    /* Menu is positioned inside the sticky header, not against the document. */
    .site-header .mobile-menu-trigger {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        bottom: auto !important;
        left: auto !important;

        transform: translateY(-50%) !important;

        width: 92px !important;
        min-width: 92px !important;
        max-width: 92px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 12px !important;

        border-radius: 999px !important;
        z-index: 2 !important;
    }

    body.mobile-menu-open .site-header .mobile-menu-trigger {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Bottom sheet remains viewport sized. */
    .mobile-menu-sheet {
        left: 12px !important;
        right: auto !important;
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
    }
}