:root {
     /* Smash Club brand system - matched to the light landing page */
     --ink: #121512;
     --ink-strong: #0b0d0b;
     --text-on-dark: #ffffff;
     --muted: #657064;
     --muted-dark: #4f5b4d;
     --line: rgba(18, 21, 18, .11);
     --line-strong: rgba(120, 166, 0, .38);
     --brand: #b8ef00;
     --brand-dark: #78a600;
     --brand-deep: #121712;
     --brand-soft: #f5f8f1;
     --brand-pale: #efffc0;
     --pink: #ff5b08;
     --pink-soft: #ff9a58;
     --red: #df4438;
     --amber: #ff5b08;
     --blue: #b8ef00;
     --green: #78a600;
     --bg: #f7f9f2;
     --card: #ffffff;
     --shadow-red: rgba(223, 68, 56, .16);
     --shadow-pink: rgba(255, 91, 8, .18);
     --shadow-deep: rgba(24, 38, 14, .12);
 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     margin: 0;
     min-height: 100%;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
     background:
         radial-gradient(circle at 8% 0%, rgba(31, 90, 60, .18) 0, transparent 31rem),
         radial-gradient(circle at 98% 8%, rgba(181, 122, 36, .18) 0, transparent 30rem),
         radial-gradient(circle at 45% 100%, rgba(199, 149, 60, .12) 0, transparent 34rem),
         linear-gradient(180deg, #100c10 0%, #171116 48%, #241923 100%);
     color: var(--ink);
 }

 body::before {
     content: '';
     position: fixed;
     inset: 0;
     pointer-events: none;
     background-image:
         linear-gradient(rgba(22, 68, 47, .055) 1px, transparent 1px),
         linear-gradient(90deg, rgba(22, 68, 47, .055) 1px, transparent 1px);
     background-size: 30px 30px;
     mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .06));
 }

 body::after {
     content: '';
     position: fixed;
     inset: 0;
     pointer-events: none;
     background:
         linear-gradient(120deg, rgba(255, 255, 255, .42), transparent 28%, rgba(255, 255, 255, .2) 54%, transparent 76%);
     opacity: .55;
 }

 a {
     color: var(--brand-dark);
     font-weight: 800;
     text-decoration-color: rgba(31, 90, 60, .35);
 }

 a:hover {
     color: var(--pink);
     text-decoration-color: var(--pink);
 }

 .content {
     padding: 0 !important;
 }

 .top-row,
 .sidebar {
     display: none !important;
 }

 .page {
     display: block !important;
 }

 .booking-shell {
     width: min(1240px, 100%);
     margin: 0 auto;
     padding: 24px;
     position: relative;
     z-index: 1;
 }

 .hero-panel {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 18px;
     padding: 30px;
     border-radius: 32px;
     background:
         radial-gradient(circle at 82% 18%, rgba(216, 199, 170, .32) 0, transparent 18rem),
         radial-gradient(circle at 12% 80%, rgba(234, 219, 194, .24) 0, transparent 16rem),
         linear-gradient(135deg, #100c10 0%, #b83c75 48%, #ef5e9d 76%, #dbe400 100%);
     color: white;
     box-shadow: 0 28px 78px rgba(22, 68, 47, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
     overflow: hidden;
     position: relative;
     border: 1px solid rgba(255, 255, 255, .28);
 }

 .hero-panel::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
         linear-gradient(90deg, rgba(255, 255, 255, .16), transparent 42%),
         linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 60%);
     pointer-events: none;
 }

 .hero-panel::after {
     content: '';
     position: absolute;
     width: 270px;
     height: 270px;
     border: 36px solid rgba(255, 255, 255, .16);
     border-radius: 50%;
     right: -82px;
     top: -82px;
 }

 .eyebrow {
     margin: 0 0 8px;
     letter-spacing: .18em;
     font-size: .78rem;
     opacity: 1;
     font-weight: 950;
     color: #241923;
     text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
     position: relative;
     z-index: 1;
 }

 h1 {
     margin: 0;
     font-size: clamp(2.2rem, 6vw, 4.9rem);
     line-height: .92;
     letter-spacing: -0.06em;
     color: #fffafc;
     text-shadow: 0 5px 22px rgba(0, 0, 0, .42), 0 1px 0 rgba(255, 255, 255, .15);
     position: relative;
     z-index: 1;
 }


 h1 span {
     color: #171116;
     display: inline-block;
     text-shadow: 0 5px 22px rgba(0, 0, 0, .4);
 }

 h1,
 h1:focus,
 h1:focus-visible,
 h1:active,
 h1 span,
 h1 span:focus,
 h1 span:focus-visible {
     outline: none !important;
     border: none !important;
     box-shadow: none !important;
 }

 .hero-copy {
     max-width: 650px;
     margin: 16px 0 0;
     color: rgba(255, 255, 255, .92);
     font-size: 1.05rem;
     position: relative;
     z-index: 1;
 }

 .hero-card {
     min-width: 150px;
     padding: 20px;
     border-radius: 24px;
     background: rgba(255, 255, 255, .18);
     border: 1px solid rgba(255, 255, 255, .28);
     backdrop-filter: blur(14px);
     text-align: center;
     z-index: 1;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 18px 44px rgba(11, 36, 24, .22);
 }

 .hero-card strong {
     display: block;
     font-size: 3rem;
     line-height: 1;
     color: #fffafc;
     text-shadow: 0 4px 18px rgba(0, 0, 0, .28);
 }

 .hero-card small {
     color: rgba(255, 255, 255, .88);
 }

 .booking-grid {
     display: grid;
     grid-template-columns: 1fr 340px;
     gap: 22px;
     margin-top: 22px;
     align-items: start;
 }

 .glass-card {
     background: linear-gradient(180deg, rgba(255, 255, 255, .93), rgba(255, 244, 232, .86));
     border: 1px solid rgba(216, 199, 170, .9);
     border-radius: 26px;
     box-shadow: 0 20px 58px rgba(22, 68, 47, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
     backdrop-filter: blur(14px);
 }

 .control-card {
     padding: 22px;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 18px;
     align-items: end;
 }

 h2 {
     margin: 0;
     font-size: 1.35rem;
     letter-spacing: -.03em;
     color: #fffafc;
 }

 p {
     color: var(--muted);
 }

 .control-card p,
 .section-title p,
 .cart-head p {
     margin: 6px 0 0;
 }

 .controls-row {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     align-items: end;
 }

 label {
     display: grid;
     gap: 8px;
     color: var(--muted-dark);
     font-size: .9rem;
     font-weight: 900;
 }

 select,
 input {
     min-height: 46px;
     border: 1px solid var(--line);
     border-radius: 14px;
     padding: 0 14px;
     min-width: 150px;
     background: linear-gradient(180deg, #fffafc, #100c10);
     color: var(--ink);
     font: inherit;
     font-weight: 750;
     outline: none;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px rgba(22, 68, 47, .08);
 }

 select:hover,
 input:hover {
     border-color: var(--line-strong);
 }

 select:focus,
 input:focus {
     border-color: var(--brand);
     box-shadow: 0 0 0 4px rgba(31, 90, 60, .16), 0 12px 24px rgba(22, 68, 47, .12);
 }

 select::placeholder,
 input::placeholder {
     color: #9f929a;
 }

 button {
     font: inherit;
 }

 .refresh-btn,
 .checkout-btn {
     border: 0;
     border-radius: 15px;
     min-height: 46px;
     padding: 0 18px;
     background: linear-gradient(135deg, #b83c75 0%, #ef5e9d 58%, #dbe400 100%);
     color: white;
     font-weight: 950;
     cursor: pointer;
     box-shadow: 0 12px 30px rgba(31, 90, 60, .25), inset 0 1px 0 rgba(255, 255, 255, .22);
     transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
 }

 .refresh-btn:hover,
 .checkout-btn:hover {
     transform: translateY(-1px);
     filter: saturate(1.08);
     box-shadow: 0 17px 38px rgba(181, 122, 36, .33), inset 0 1px 0 rgba(255, 255, 255, .24);
 }

 .week-strip {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 18px 8px;
 }

 .week-strip button {
     width: 44px;
     height: 44px;
     border: 1px solid var(--line);
     border-radius: 15px;
     background: linear-gradient(180deg, #fffafc, #171116);
     color: var(--brand-dark);
     font-size: 1.6rem;
     font-weight: 950;
     cursor: pointer;
     box-shadow: 0 9px 22px rgba(22, 68, 47, .1);
     transition: all .18s ease;
 }

 .week-strip button:hover {
     border-color: var(--brand);
     background: #241923;
     transform: translateY(-1px);
 }

 .week-strip div {
     text-align: center;
     display: grid;
     gap: 4px;
 }

 .week-strip span {
     color: var(--muted);
     font-size: .9rem;
 }

 .days-row {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 10px;
     margin-bottom: 14px;
 }

 .day-pill {
     min-height: 82px;
     border: 1px solid var(--line);
     background: linear-gradient(180deg, #fffafc, #100c10);
     border-radius: 20px;
     cursor: pointer;
     display: grid;
     place-items: center;
     gap: 0;
     color: var(--muted);
     box-shadow: 0 10px 24px rgba(22, 68, 47, .08);
     transition: all .18s ease;
 }

 .day-pill strong {
     color: var(--ink);
     font-size: 1.45rem;
 }

 .day-pill:hover {
     border-color: var(--brand);
     transform: translateY(-1px);
     box-shadow: 0 14px 28px rgba(22, 68, 47, .13);
 }

 .day-pill.active {
     background: linear-gradient(135deg, #b83c75 0%, #ef5e9d 45%, #dbe400 100%);
     color: white;
     border-color: transparent;
     box-shadow: 0 16px 36px rgba(31, 90, 60, .3);
 }

 .day-pill.active strong {
     color: white;
 }

 .slots-card {
     padding: 10px;
 }

 .section-title,
 .cart-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 14px;
 }

 .loading-dot {
     color: var(--brand-dark);
     font-weight: 950;
 }

 .notice {
     margin: 16px 0;
     padding: 14px;
     border-radius: 16px;
     font-weight: 900;
 }

 .notice.warning {
     color: #f2f56d;
     background: #171116;
     border: 1px solid rgba(219, 228, 0, .35);
 }

 .slot-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
     gap: 12px;
     margin-top: 18px;
 }

 .slot-tile {
     min-height: 136px;
     text-align: left;
     border: 1px solid rgba(255, 255, 255, .12);
     background: linear-gradient(180deg, #fffafc 0%, #171116 100%);
     border-radius: 22px;
     padding: 16px;
     display: grid;
     gap: 4px;
     cursor: pointer;
     color: var(--ink);
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
     box-shadow: 0 10px 26px rgba(22, 68, 47, .08);
 }

 .slot-tile:hover:not(:disabled) {
     transform: translateY(-3px);
     border-color: var(--brand);
     box-shadow: 0 18px 38px rgba(31, 90, 60, .18);
 }

 .slot-time {
     font-size: .98rem;
     font-weight: 950;
     color: #fffafc;
 }

 .slot-court {
     color: #cabdc5;
     font-weight: 900;
 }

 .slot-meta {
     color: var(--muted);
     font-size: .86rem;
 }

 .slot-price {
     font-weight: 950;
     color: var(--brand-dark);
 }

 .slot-status {
     margin-top: 8px;
     width: fit-content;
     border-radius: 999px;
     padding: 5px 10px;
     background: #241923;
     color: #b83c75;
     font-size: .78rem;
     font-weight: 950;
     text-transform: capitalize;
     border: 1px solid rgba(31, 90, 60, .16);
 }

 .slot-tile.booked,
 .slot-tile.locked,
 .slot-tile.not-available,
 .slot-tile.disabled {
     border-color: rgba(255, 107, 122, .35);
     background: linear-gradient(180deg, #1d151c, rgba(255, 107, 122, .14));
     opacity: .82;
     cursor: not-allowed;
 }

 .slot-tile.booked .slot-status,
 .slot-tile.locked .slot-status,
 .slot-tile.not-available .slot-status,
 .slot-tile.disabled .slot-status {
     background: rgba(255, 107, 122, .14);
     color: #ef5e9d;
     border-color: rgba(255, 107, 122, .35);
 }

 .slot-tile.selected {
     border-color: #ef5e9d;
     background: linear-gradient(135deg, #100c10 0%, #ef5e9d 52%, #dbe400 100%);
     color: white;
     opacity: 1;
     box-shadow: 0 18px 42px rgba(31, 90, 60, .35);
 }

 .slot-tile.selected .slot-time,
 .slot-tile.selected .slot-court,
 .slot-tile.selected .slot-meta,
 .slot-tile.selected .slot-price {
     color: rgba(255, 255, 255, .94);
 }

 .slot-tile.selected .slot-status {
     background: rgba(255, 255, 255, .18);
     color: white;
     border-color: rgba(255, 255, 255, .28);
 }

 .cart-card {
     position: sticky;
     top: 18px;
     padding: 22px;
     background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 244, 232, .9));
 }

 .cart-badge {
     width: 42px;
     height: 42px;
     display: grid;
     place-items: center;
     border-radius: 14px;
     background: linear-gradient(135deg, #241923, rgba(255, 255, 255, .12));
     color: #b83c75;
     font-weight: 950;
     border: 1px solid rgba(31, 90, 60, .16);
 }

 .empty-cart {
     margin-top: 20px;
     padding: 28px;
     border: 1px dashed rgba(255, 255, 255, .18);
     border-radius: 20px;
     color: var(--muted);
     text-align: center;
     background: rgba(255, 244, 232, .78);
 }

 .cart-items {
     display: grid;
     gap: 12px;
     margin: 18px 0;
 }

 .cart-item {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     padding: 14px;
     border: 1px solid var(--line);
     border-radius: 18px;
     background: #fffafc;
     box-shadow: 0 8px 20px rgba(22, 68, 47, .08);
 }

 .cart-item div {
     display: grid;
     gap: 4px;
 }

 .cart-item span,
 .cart-item small {
     color: var(--muted);
 }

 .cart-item button {
     width: 34px;
     height: 34px;
     border: 0;
     border-radius: 11px;
     background: rgba(255, 107, 122, .14);
     color: #ff7c88;
     font-size: 1.3rem;
     font-weight: 950;
     cursor: pointer;
     transition: all .18s ease;
 }

 .cart-item button:hover {
     background: #ff6b7a;
     color: #fffafc;
 }

 .checkout-btn,
 .clear-btn {
     width: 100%;
     margin-top: 10px;
 }

 .clear-btn {
     min-height: 44px;
     border-radius: 14px;
     background: #fffafc;
     border: 1px solid #cbd400;
     color: #b83c75;
     font-weight: 950;
     cursor: pointer;
     box-shadow: 0 8px 20px rgba(22, 68, 47, .08);
     transition: all .18s ease;
 }

 .clear-btn:hover,
 .clear-btn:focus {
     background: linear-gradient(135deg, #b83c75, #ef5e9d, #dbe400);
     border-color: #ef5e9d;
     color: #fffafc;
     box-shadow: 0 14px 32px rgba(31, 90, 60, .3);
     transform: translateY(-1px);
 }

 .clear-btn:active {
     transform: translateY(0);
 }

 .cart-price {
     color: #fffafc;
     font-weight: 950;
 }

 .cart-total {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 0;
     margin-top: 10px;
     border-top: 1px solid rgba(31, 90, 60, .16);
     font-size: 1rem;
     color: #fffafc;
     font-weight: 950;
 }

 .qty-field {
     display: flex;
     align-items: center;
     gap: .5rem;
     margin-top: .35rem;
 }

 .qty-field input {
     width: 70px;
     padding: .3rem .45rem;
     border-radius: .5rem;
     border: 1px solid var(--line);
     background: #fffafc;
 }

 .court-select-box {
     display: grid;
     gap: 10px;
 }

 .court-select-title {
     color: var(--muted-dark);
     font-size: .9rem;
     font-weight: 950;
 }

 .court-row {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
 }

 .court-pill {
     min-height: 46px;
     border: 1px solid var(--line);
     background: linear-gradient(180deg, #fffafc, #100c10);
     border-radius: 16px;
     padding: 0 18px;
     cursor: pointer;
     font-weight: 950;
     color: var(--ink);
     box-shadow: 0 8px 20px rgba(22, 68, 47, .08);
     transition: all .18s ease;
 }

 .court-pill:hover {
     border-color: var(--brand);
     background: #171116;
     transform: translateY(-1px);
 }

 .court-pill.active {
     background: linear-gradient(135deg, #b83c75, #ef5e9d 52%, #dbe400);
     color: white;
     border-color: transparent;
     box-shadow: 0 14px 32px rgba(31, 90, 60, .28);
 }

 .vertical-controls {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center !important;
 }

 .court-select-box {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center !important;
 }

 .court-row {
     width: 100%;
     display: flex;
     justify-content: center !important;
     flex-wrap: wrap;
 }

 .date-refresh-row {
     width: 100%;
     display: flex;
     justify-content: center !important;
     align-items: center;
     gap: 10px;
 }

 .date-refresh-row input {
     width: 170px !important;
     min-width: 170px;
     flex: 0 0 170px;
 }

 .date-refresh-row .refresh-btn {
     width: auto !important;
     min-width: 120px;
     flex: 0 0 auto;
 }

 @media (max-width: 960px) {
     .booking-grid {
         grid-template-columns: 1fr;
     }

     .cart-card {
         position: static;
     }

     .control-card {
         grid-template-columns: 1fr;
     }

     .hero-panel {
         align-items: flex-start;
         flex-direction: column;
     }
 }

 @media (max-width: 620px) {
     .booking-shell {
         padding: 12px;
     }

     .hero-panel {
         padding: 22px;
         border-radius: 22px;
         width: 100%;
     }

     .days-row {
         /*display: flex;*/
         overflow-x: auto;
         padding-bottom: 6px;
     }

     .day-pill {
         /*min-width: 76px;*/
         border-radius: 10px;
     }

     .slot-list {
         grid-template-columns: 1fr;
     }

     .controls-row,
     .controls-row label,
     select,
     input,
     .refresh-btn {
         width: 100%;
     }

     .court-row {
         grid-template-columns: repeat(2, 1fr);
     }

     .date-refresh-row {
         justify-content: center !important;
         flex-wrap: nowrap;
     }

     .date-refresh-row input {
         width: 160px !important;
         min-width: 160px;
     }

     .date-refresh-row .refresh-btn {
         width: auto !important;
     }
 }

 @media (max-width: 500px) {
     .hero-panel {
         padding: 22px;
         border-radius: 22px;
         width: 100%;
         margin-left: auto;
         margin-right: auto;
     }

     .slot-list {
         grid-template-columns: repeat(3, 1fr);
         gap: 8px;
     }

     .slot-tile {
         min-height: 105px;
         padding: 10px;
         border-radius: 16px;
     }

     .slot-time {
         font-size: .95rem;
     }

     .slot-court {
         font-size: .78rem;
     }

     .slot-meta {
         font-size: .70rem;
     }

     .slot-price {
         font-size: .75rem;
     }

     .slot-status {
         margin-top: 4px;
         padding: 4px 7px;
         font-size: .65rem;
     }
 }

 @media (max-width: 380px) {
     .hero-panel {
         padding: 22px;
         border-radius: 22px;
         width: 100%;
     }

     .slot-list {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .player-counter {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 5px;
 }

 .counter-btn {
     width: 42px;
     height: 42px;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 8px;
     background: #fff;
     font-size: 24px;
     font-weight: bold;
     cursor: pointer;
 }

 .counter-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

 .counter-input {
     width: 70px;
     height: 42px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 8px;
     font-size: 18px;
     font-weight: 600;
 }


 .app-loading {
     height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background:
         radial-gradient(circle at 8% 0%, rgba(31, 90, 60, .24) 0, transparent 31rem),
         radial-gradient(circle at 100% 12%, rgba(181, 122, 36, .18) 0, transparent 28rem),
         linear-gradient(135deg, #0b090b 0%, #100c10 38%, #b83c75 70%, #dbe400 100%);
     color: #fffafc;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
     text-align: center;
     overflow: hidden;
     position: relative;
 }

 .app-loading::before {
     content: '';
     position: fixed;
     inset: 0;
     pointer-events: none;
     background-image:
         linear-gradient(rgba(234, 219, 194, .08) 1px, transparent 1px),
         linear-gradient(90deg, rgba(234, 219, 194, .08) 1px, transparent 1px);
     background-size: 28px 28px;
     mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .14));
 }

 .app-loading::after {
     content: '';
     position: absolute;
     width: 270px;
     height: 270px;
     border: 36px solid rgba(234, 219, 194, .16);
     border-radius: 50%;
     right: -82px;
     top: -82px;
     pointer-events: none;
 }

 .loading-ball {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: linear-gradient(135deg, #241923 0%, #cbd400 45%, #dbe400 100%);
     animation: bounce 0.7s infinite alternate;
     margin-bottom: 22px;
     box-shadow:
         0 0 24px rgba(199, 149, 60, .78),
         0 14px 34px rgba(22, 68, 47, .42),
         inset 0 1px 0 rgba(255, 255, 255, .45);
     position: relative;
     z-index: 1;
 }

 .loading-title {
     font-size: 24px;
     font-weight: 900;
     margin-bottom: 8px;
     color: #fffafc;
     letter-spacing: -.03em;
     text-shadow: 0 5px 24px rgba(0, 0, 0, .38);
     position: relative;
     z-index: 1;
 }

 .loading-subtitle {
     font-size: 14px;
     color: rgba(255, 244, 232, .88);
     font-weight: 600;
     position: relative;
     z-index: 1;
 }

 @keyframes bounce {
     from {
         transform: translateY(0) scale(1);
     }

     to {
         transform: translateY(-22px) scale(1.08);
     }
 }

 #blazor-error-ui {
     display: none;
     position: fixed;
     top: 20px;
     right: 20px;
     bottom: auto;
     left: auto;
     width: auto;
     max-width: calc(100vw - 40px);
     background: linear-gradient(135deg, #5c1421 0%, #ef5e9d 55%, #dbe400 100%);
     color: #fffafc;
     padding: 12px 18px;
     border-radius: 14px;
     border: 1px solid rgba(216, 199, 170, .7);
     box-shadow:
         0 16px 34px rgba(31, 90, 60, .30),
         0 10px 26px rgba(15, 23, 42, .24),
         inset 0 1px 0 rgba(255, 255, 255, .18);
     z-index: 9999;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
     font-weight: 800;
 }

 #blazor-error-ui .reload,
 #blazor-error-ui .dismiss {
     color: #fffafc;
     margin-left: 10px;
     text-decoration: none;
     cursor: pointer;
     font-weight: 900;
 }

 #blazor-error-ui .reload:hover,
 #blazor-error-ui .dismiss:hover {
     text-decoration: underline;
 }

 @media (max-width: 620px) {
     .app-loading {
         padding: 24px;
     }

     .loading-title {
         font-size: 22px;
     }

     .loading-subtitle {
         font-size: 13px;
     }

     #blazor-error-ui {
         top: 12px;
         right: 12px;
         max-width: calc(100vw - 24px);
         padding: 11px 14px;
         border-radius: 12px;
     }
 }

 /* =========================================================
   Mobile layout hardening patch
   Purpose: keep hero-panel and booking content full-width on
   mobile without changing the existing red-pink visual theme.
   ========================================================= */

 html,
 body,
 .page,
 .content {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
 }

 body {
     min-width: 0;
 }

 .booking-shell {
     width: 100%;
     max-width: 1240px;
     min-width: 0;
 }

 .hero-panel,
 .hero-panel>div,
 .booking-grid,
 .booking-grid>main,
 .glass-card,
 .control-card,
 .slots-card,
 .cart-card {
     max-width: 100%;
     min-width: 0;
 }

 .hero-panel {
     width: 100%;
 }

 .hero-business {
     display: block;
 }

 .hero-panel h1,
 .hero-copy {
     overflow-wrap: anywhere;
 }

 .court-row {
     max-width: 100%;
 }

 .date-refresh-row span {
     color: var(--muted-dark);
     font-size: .9rem;
     font-weight: 950;
 }

 @media (max-width: 960px) {
     .booking-shell {
         padding-inline: 16px;
     }

     .hero-panel {
         width: 100%;
         flex-direction: column;
         align-items: stretch;
     }

     .hero-card {
         align-self: flex-start;
     }
 }

 @media (max-width: 620px) {
     .booking-shell {
         width: 100%;
         padding: 10px;
     }

     .hero-panel {
         width: 100%;
         max-width: 100%;
         padding: 22px 18px;
         border-radius: 22px;
         gap: 16px;
     }

     .hero-panel::after {
         width: 210px;
         height: 210px;
         right: -96px;
         top: -96px;
         border-width: 28px;
     }

     .eyebrow,
     .hero-business {
         margin-bottom: 10px;
         font-size: .72rem;
         line-height: 1.25;
     }

     h1 {
         font-size: clamp(1.9rem, 10vw, 2.75rem);
         line-height: 1;
         letter-spacing: -.045em;
     }

     .hero-copy {
         margin-top: 12px;
         font-size: .95rem;
         line-height: 1.55;
     }

     .hero-card {
         /*width: 100%;*/
         max-width: none;
         min-width: 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 12px;
         text-align: left;
         padding: 16px 18px;
         border-radius: 20px;
     }

     .hero-card strong {
         font-size: 2.25rem;
     }

     .control-card,
     .slots-card,
     .cart-card {
         padding: 18px;
         border-radius: 22px;
     }

     .date-refresh-row {
         width: 100%;
         flex-wrap: wrap;
         justify-content: center !important;
         gap: 10px;
     }

     .date-refresh-row span {
         width: 100%;
         text-align: center;
     }

     .date-refresh-row input,
     .date-refresh-row .refresh-btn {
         /*
        flex: 1 1 100%;
        width: 100% !important;
        */
         min-width: 0;
     }

     .court-row {
         display: flex;
         justify-content: center !important;
         flex-wrap: wrap;
         gap: 8px;
     }

     .court-pill {
         /*flex: 1 1 calc(50% - 8px);*/
         min-width: 128px;
         padding-inline: 12px;
     }

     .week-strip {
         padding-inline: 0;
     }

     .week-strip div {
         min-width: 0;
     }

     .week-strip strong,
     .week-strip span {
         overflow-wrap: anywhere;
     }

     .slot-list {
         grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
     }
 }

 @media (max-width: 420px) {
     .booking-shell {
         padding: 8px;
     }

     .hero-panel {
         padding: 20px 16px;
         border-radius: 20px;
     }

     h1 {
         font-size: clamp(1.75rem, 10.5vw, 2.35rem);
     }

     .court-pill {
         /*flex-basis: 100%;*/
     }

     .slot-list {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 8px;
     }

     .slot-tile {
         min-width: 0;
     }
 }

 @media (max-width: 340px) {
     .slot-list {
         grid-template-columns: 1fr;
     }
 }

 /* =========================================================
   Slot Display Switch
   ========================================================= */

 .slot-section-title {
     align-items: flex-start;
 }

 .slot-header-actions {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 12px;
     flex-wrap: wrap;
 }

 .slot-view-switch {
     display: inline-grid;
     grid-template-columns: repeat(2, minmax(110px, 1fr));
     padding: 4px;
     border: 1px solid var(--line);
     border-radius: 16px;
     background: #171116;
 }

 .slot-view-button {
     min-height: 42px;
     padding: 0 14px;
     border: 0;
     border-radius: 12px;
     background: transparent;
     color: #cabdc5;
     font-weight: 800;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     white-space: nowrap;
 }

 .slot-view-button:hover {
     background: #241923;
 }

 .slot-view-button.active {
     color: white;
     background: linear-gradient(135deg, var(--brand), var(--blue));
     box-shadow: 0 8px 20px rgba(37, 99, 235, .2);
 }

 .slot-view-icon {
     font-size: 1rem;
     line-height: 1;
 }


 /* =========================================================
   Slot Schedule Grid
   ========================================================= */

 .slot-grid-help {
     margin-top: 16px;
     padding: 10px 12px;
     border-radius: 14px;
     background: var(--brand-soft);
     border: 1px solid var(--line);
     color: var(--brand-dark);
     font-size: .84rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .slot-grid-scroll {
     width: 100%;
     max-width: 100%;
     margin-top: 12px;
     overflow-x: auto;
     overflow-y: hidden;
     border: 1px solid var(--line);
     border-radius: 18px;
     background: var(--card);
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
     overscroll-behavior-x: contain;
 }

 .slot-grid-scroll::-webkit-scrollbar {
     height: 10px;
 }

 .slot-grid-scroll::-webkit-scrollbar-track {
     background: var(--brand-pale);
     border-radius: 999px;
 }

 .slot-grid-scroll::-webkit-scrollbar-thumb {
     background: var(--line-strong);
     border-radius: 999px;
 }

 .slot-schedule-grid {
     display: grid;
     width: max-content;
     min-width: 100%;
     align-items: stretch;
     align-content: start;
     grid-auto-flow: row;
     grid-auto-rows: 86px;
 }

 .slot-grid-corner,
 .slot-grid-time,
 .slot-grid-court,
 .slot-grid-cell {
     height: 86px;
     border-right: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
 }

 .slot-grid-corner {
     position: sticky;
     left: 0;
     top: 0;
     z-index: 8;
     min-width: 100px;
     background: var(--brand-soft);
     color: var(--ink);
     font-weight: 900;
     display: grid;
     place-items: center;
 }

 .slot-grid-time {
     position: sticky;
     top: 0;
     z-index: 6;
     padding: 12px 8px;
     min-width: 112px;
     min-height: 64px;
     background: var(--brand-soft);
     color: var(--muted-dark);
     text-align: center;
     font-size: .79rem;
     font-weight: 900;
     display: grid;
     place-items: center;
     line-height: 1.25;
 }

 .slot-grid-court {
     position: sticky;
     left: 0;
     z-index: 5;
     min-width: 100px;
     padding: 10px;
     background: var(--card);
     color: var(--ink);
     display: grid;
     place-items: center;
     text-align: center;
 }

 .slot-grid-cell {
     min-width: 112px;
     padding: 8px;
 }

 .slot-grid-empty {
     background: var(--brand-soft);
     color: var(--muted);
     display: grid;
     place-items: center;
 }

 .slot-grid-booking {
     width: 100%;
     min-height: 86px;
     border-top: 0;
     border-left: 0;
     border-right: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
     border-radius: 0;
     background: linear-gradient(180deg, var(--card), var(--brand-soft));
     color: var(--ink);
     cursor: pointer;
     display: grid;
     place-content: center;
     justify-items: center;
     gap: 5px;
     text-align: center;
 }

 .slot-grid-booking:hover:not(:disabled) {
     box-shadow: inset 0 0 0 2px var(--shadow-pink);
 }

 .slot-grid-booking:disabled {
     cursor: not-allowed;
 }

 .slot-grid-status {
     color: var(--brand-dark);
     font-size: .82rem;
     font-weight: 900;
     text-transform: capitalize;
 }

 .slot-grid-price {
     color: var(--muted-dark);
     font-size: .75rem;
     font-weight: 800;
 }

 .slot-grid-type {
     font-size: .92rem;
     font-weight: 900;
 }

 .slot-grid-detail {
     font-size: .75rem;
     font-weight: 700;
     opacity: .86;
 }

 .slot-grid-booking.booked,
 .slot-grid-booking.locked,
 .slot-grid-booking.not-available,
 .slot-grid-booking.disabled {
     background: var(--pink-soft);
     color: var(--red);
     opacity: .78;
 }

 .slot-grid-booking.booked .slot-grid-status,
 .slot-grid-booking.locked .slot-grid-status,
 .slot-grid-booking.not-available .slot-grid-status,
 .slot-grid-booking.disabled .slot-grid-status {
     color: var(--red);
 }

 .slot-grid-booking.slot-grid-spanning {
     position: relative;
     z-index: 2;
     width: 100%;
     min-width: 0;
     max-width: none;
     height: 100%;
     justify-self: stretch;
     align-self: stretch;
     background: linear-gradient(135deg, var(--brand-pale), var(--pink-soft));
     color: var(--brand-deep);
     border: 1px solid var(--line-strong);
 }

 .slot-grid-booking.slot-grid-spanning:hover:not(:disabled) {
     box-shadow: inset 0 0 0 2px var(--shadow-deep);
 }

 .slot-grid-booking.selected {
     background: linear-gradient(135deg, var(--brand-deep), var(--brand));
     color: var(--text-on-dark);
     opacity: 1;
     box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .48);
 }

 .slot-grid-booking.selected .slot-grid-status,
 .slot-grid-booking.selected .slot-grid-price,
 .slot-grid-booking.selected .slot-grid-detail {
     color: var(--text-on-dark);
 }

 .slot-grid-legend {
     margin-top: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 18px;
     flex-wrap: wrap;
     color: var(--muted);
     font-size: .78rem;
     font-weight: 700;
 }

 .slot-grid-legend>span {
     display: inline-flex;
     align-items: center;
     gap: 7px;
 }

 .slot-legend-color {
     width: 17px;
     height: 17px;
     border-radius: 5px;
     border: 1px solid var(--line);
     display: inline-block;
 }

 .slot-legend-color.available {
     background: var(--brand-pale);
     border-color: var(--line-strong);
 }

 .slot-legend-color.booked {
     background: color-mix(in srgb, var(--red) 14%, var(--card));
     border-color: color-mix(in srgb, var(--red) 42%, var(--line));
 }

 .slot-legend-color.openplay {
     background: linear-gradient(135deg, var(--brand-pale), var(--pink-soft));
     border-color: #dbe400;
 }

 .slot-legend-color.selected {
     background: linear-gradient(135deg, var(--brand-deep), var(--brand));
     border: 2px solid var(--brand-dark);
 }


 /* =========================================================
   Mobile Slot Grid
   ========================================================= */

 @media (max-width: 620px) {
     .slot-section-title {
         display: grid;
         grid-template-columns: 1fr;
         gap: 14px;
     }

     .slot-header-actions {
         width: 100%;
         justify-content: stretch;
     }

     .slot-view-switch {
         width: 100%;
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .slot-view-button {
         width: 100%;
         min-width: 0;
         padding: 0 8px;
         font-size: .82rem;
     }

     .slot-grid-scroll {
         border-radius: 14px;
     }

     .slot-grid-corner,
     .slot-grid-court {
         min-width: 68px;
         width: 68px;
         padding: 5px;
         font-size: .68rem;
     }

     .slot-grid-time,
     .slot-grid-cell {
         min-width: 78px;
         width: 78px;
     }

     .slot-grid-booking {
         width: 100%;
         min-width: 0;
         max-width: none;
     }


     .slot-grid-cell {
         padding: 3px;
     }

     .slot-grid-corner,
     .slot-grid-time,
     .slot-grid-court,
     .slot-grid-cell,
     .slot-grid-booking {
         height: 68px;
         min-height: 68px;
     }

     .slot-grid-time {
         padding: 5px 3px;
         font-size: .60rem;
         line-height: 1.15;
         white-space: normal;
     }

     .slot-grid-booking {
         padding: 6px;
     }

     .slot-grid-status,
     .slot-grid-type {
         font-size: .72rem;
     }

     .slot-grid-booking {
         padding: 4px 2px;
         gap: 2px;
     }

     .slot-grid-status,
     .slot-grid-type {
         font-size: .67rem;
         line-height: 1.1;
     }

     .slot-grid-price,
     .slot-grid-detail {
         font-size: .60rem;
         line-height: 1.1;
     }

     .slot-grid-court strong {
         font-size: .68rem;
         line-height: 1.1;
     }


     .slot-grid-legend {
         justify-content: flex-start;
         gap: 10px 14px;
     }

     .slot-schedule-grid {
         grid-auto-rows: 78px;
     }
 }

 @media (max-width: 380px) {
     .slot-view-button {
         font-size: .76rem;
     }

     .slot-grid-corner,
     .slot-grid-court {
         min-width: 62px;
         width: 62px;
     }

     .slot-grid-time,
     .slot-grid-cell {
         min-width: 72px;
         width: 72px;
     }

     .slot-grid-booking {
         width: 100%;
         min-width: 0;
         max-width: none;
     }

     .slot-schedule-grid {
         grid-auto-rows: 78px;
     }
 }

 .booking-grid>* {
     min-width: 0;
 }

 .slots-card {
     min-width: 0;
     max-width: 100%;
     overflow: hidden;
 }

 .slot-grid-scroll {
     width: 100%;
     max-width: 100%;
     min-width: 0;
     overflow-x: auto;
     overflow-y: hidden;
 }

 .slot-schedule-grid {
     --slot-court-width: 100px;
     --slot-time-width: 112px;
 }

 @media (max-width: 620px) {
     .slot-schedule-grid {
         --slot-court-width: 68px;
         --slot-time-width: 78px;
     }
 }

 @media (max-width: 380px) {
     .slot-schedule-grid {
         --slot-court-width: 62px;
         --slot-time-width: 72px;
     }
 }

 .slot-grid-corner,
 .slot-grid-court {
     width: var(--slot-court-width);
     min-width: var(--slot-court-width);
 }

 .slot-grid-time,
 .slot-grid-cell {
     width: var(--slot-time-width);
     min-width: var(--slot-time-width);
 }

 .slot-grid-booking {
     width: 100%;
     min-width: 0;
     max-width: none;
     height: 100%;
     justify-self: stretch;
     align-self: stretch;
 }

 .slot-grid-time,
 .slot-grid-cell {
     width: var(--slot-time-width);
     min-width: var(--slot-time-width);
 }

 .slot-grid-booking {
     width: 100%;
     min-width: 0;
     max-width: none;
     height: 100%;
     justify-self: stretch;
     align-self: stretch;
 }

 /* Game Yard visibility refinements */
 .glass-card,
 .slot-tile,
 .cart-item,
 .court-pill,
 select,
 input {
     color: var(--ink);
 }

 .glass-card p,
 .slot-meta,
 .cart-item span,
 .cart-item small,
 .empty-cart,
 .week-strip span {
     color: #cabdc5;
 }

 .hero-panel p,
 .hero-panel small,
 .hero-panel .hero-copy {
     color: rgba(255, 255, 255, .94);
 }

 .slot-view-button.active,
 .day-pill.active,
 .court-pill.active,
 .slot-tile.selected,
 .slot-grid-booking.selected,
 .refresh-btn,
 .checkout-btn {
     color: #fffafc;
 }

 .slot-view-button.active {
     background: linear-gradient(135deg, var(--brand-dark), var(--brand), #dbe400);
     box-shadow: 0 8px 20px rgba(31, 90, 60, .24);
 }

 .slot-grid-booking.booked,
 .slot-grid-booking.locked,
 .slot-grid-booking.not-available,
 .slot-grid-booking.disabled {
     background: rgba(255, 107, 122, .12);
     color: #ff8b99;
 }

 .slot-grid-scroll,
 .slot-grid-corner,
 .slot-grid-time,
 .slot-grid-court {
     color: var(--ink);
 }

 /* =========================================================
   Smash Club Theme Override
   Light-mode sports theme matched to the Smash Club landing page.
   Brand palette: lime, orange, charcoal, warm white.
   Layout and booking behavior are intentionally unchanged.
   ========================================================= */

 html,
 body {
     color: var(--ink);
     background:
         radial-gradient(circle at 8% 0%, rgba(184, 239, 0, .16), transparent 30rem),
         radial-gradient(circle at 96% 10%, rgba(255, 91, 8, .10), transparent 26rem),
         radial-gradient(circle at 48% 100%, rgba(120, 166, 0, .06), transparent 34rem),
         linear-gradient(180deg, #fbfcf8 0%, var(--bg) 58%, #f1f5ec 100%);
 }

 body::before {
     background-image:
         linear-gradient(rgba(18, 21, 18, .035) 1px, transparent 1px),
         linear-gradient(90deg, rgba(18, 21, 18, .035) 1px, transparent 1px);
     opacity: .7;
 }

 body::after {
     background:
         linear-gradient(120deg, rgba(255, 255, 255, .66), transparent 30%, rgba(184, 239, 0, .035) 56%, transparent 80%);
     opacity: .9;
 }

 a {
     color: var(--brand-dark);
     text-decoration-color: rgba(120, 166, 0, .30);
 }

 a:hover {
     color: var(--pink);
     text-decoration-color: var(--pink);
 }

 /* Hero: a controlled dark brand zone keeps white branding readable. */
 .hero-panel {
     background:
         radial-gradient(circle at 86% 12%, rgba(184, 239, 0, .22), transparent 18rem),
         radial-gradient(circle at 10% 92%, rgba(255, 91, 8, .16), transparent 18rem),
         linear-gradient(135deg, #101510 0%, #172016 44%, #25331a 72%, #485b12 100%);
     color: #ffffff;
     border-color: rgba(255, 255, 255, .15);
     box-shadow:
         0 28px 78px rgba(24, 38, 14, .22),
         0 0 0 1px rgba(184, 239, 0, .04),
         inset 0 1px 0 rgba(255, 255, 255, .09);
 }

 .hero-panel::before {
     background:
         linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 46%),
         linear-gradient(180deg, rgba(184, 239, 0, .04), transparent 62%);
 }

 .hero-panel::after {
     border-color: rgba(184, 239, 0, .18);
 }

 .eyebrow,
 .hero-business {
     color: var(--brand);
     text-shadow: none;
 }

 h1 {
     color: #ffffff;
     text-shadow: 0 5px 24px rgba(0, 0, 0, .30);
 }

 h1 span {
     color: var(--brand);
     text-shadow: 0 0 24px rgba(184, 239, 0, .08);
 }

 .hero-copy,
 .hero-panel p,
 .hero-panel small {
     color: rgba(255, 255, 255, .84);
 }

 .hero-card {
     background: rgba(7, 10, 7, .34);
     border-color: rgba(184, 239, 0, .22);
     box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, .10),
         0 18px 44px rgba(0, 0, 0, .18);
 }

 .hero-card strong {
     color: var(--brand);
 }

 .hero-card small {
     color: rgba(255, 255, 255, .74);
 }

 /* Primary cards */
 .glass-card,
 .cart-card {
     background:
         radial-gradient(circle at 100% 0%, rgba(184, 239, 0, .045), transparent 16rem),
         linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 252, 247, .96));
     border-color: rgba(18, 21, 18, .10);
     box-shadow:
         0 20px 58px rgba(24, 38, 14, .09),
         inset 0 1px 0 rgba(255, 255, 255, .95);
 }

 h2,
 .cart-price,
 .cart-total,
 .slot-time,
 .slot-grid-corner,
 .slot-grid-court,
 .slot-grid-scroll {
     color: var(--ink);
 }

 p,
 .control-card p,
 .section-title p,
 .cart-head p,
 .week-strip span,
 .slot-meta,
 .cart-item span,
 .cart-item small,
 .empty-cart {
     color: var(--muted);
 }

 label,
 .court-select-title,
 .date-refresh-row span {
     color: var(--muted-dark);
 }

 /* Inputs and selectors */
 select,
 input,
 .qty-field input,
 .counter-input {
     background: #ffffff;
     color: var(--ink);
     border-color: rgba(18, 21, 18, .13);
     color-scheme: light;
     box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, .95),
         0 8px 20px rgba(24, 38, 14, .06);
 }

 select:hover,
 input:hover {
     border-color: rgba(120, 166, 0, .48);
 }

 select:focus,
 input:focus {
     border-color: var(--brand-dark);
     box-shadow:
         0 0 0 4px rgba(184, 239, 0, .17),
         0 12px 24px rgba(24, 38, 14, .08);
 }

 select::placeholder,
 input::placeholder {
     color: #8b9589;
 }

 /* Main actions */
 .refresh-btn,
 .checkout-btn {
     background: linear-gradient(135deg, var(--brand) 0%, #d0ff18 100%);
     color: #141a0d;
     box-shadow:
         0 12px 30px rgba(120, 166, 0, .18),
         inset 0 1px 0 rgba(255, 255, 255, .42);
 }

 .refresh-btn:hover,
 .checkout-btn:hover {
     box-shadow:
         0 17px 38px rgba(120, 166, 0, .24),
         inset 0 1px 0 rgba(255, 255, 255, .46);
 }

 /* Date, court and slot controls */
 .week-strip button,
 .day-pill,
 .slot-tile,
 .court-pill,
 .cart-item,
 .clear-btn,
 .counter-btn {
     background: linear-gradient(180deg, #ffffff, #f8faf5);
     color: var(--ink);
     border-color: rgba(18, 21, 18, .11);
     box-shadow: 0 10px 24px rgba(24, 38, 14, .07);
 }

 .week-strip button {
     color: var(--brand-dark);
 }

 .week-strip button:hover,
 .day-pill:hover,
 .court-pill:hover {
     border-color: rgba(120, 166, 0, .52);
     background: #f8ffea;
 }

 .day-pill strong,
 .court-pill,
 .slot-tile {
     color: var(--ink);
 }

 .day-pill.active,
 .court-pill.active,
 .slot-tile.selected {
     background: linear-gradient(135deg, #d0ff18 0%, var(--brand) 64%, #a8d900 100%);
     color: #151a10;
     border-color: rgba(120, 166, 0, .26);
     box-shadow: 0 16px 36px rgba(120, 166, 0, .20);
 }

 .day-pill.active strong,
 .slot-tile.selected .slot-time,
 .slot-tile.selected .slot-court,
 .slot-tile.selected .slot-meta,
 .slot-tile.selected .slot-price {
     color: #151a10;
 }

 .slot-tile:hover:not(:disabled) {
     border-color: rgba(120, 166, 0, .48);
     box-shadow: 0 18px 38px rgba(120, 166, 0, .12);
 }

 .slot-time {
     color: var(--ink-strong);
 }

 .slot-court {
     color: var(--pink);
 }

 .slot-meta {
     color: var(--muted);
 }

 .slot-price {
     color: var(--brand-dark);
 }

 .slot-status,
 .cart-badge {
     background: var(--brand-pale);
     color: #5f8000;
     border-color: rgba(120, 166, 0, .22);
 }

 .notice.warning {
     color: #704017;
     background: #fff4e8;
     border-color: rgba(255, 91, 8, .28);
 }

 /* Booked / unavailable states */
 .slot-tile.booked,
 .slot-tile.locked,
 .slot-tile.not-available,
 .slot-tile.disabled {
     background: linear-gradient(180deg, #fff9f8, #fff0ee);
     border-color: rgba(223, 68, 56, .25);
     color: #6e312b;
 }

 .slot-tile.booked .slot-status,
 .slot-tile.locked .slot-status,
 .slot-tile.not-available .slot-status,
 .slot-tile.disabled .slot-status {
     background: rgba(223, 68, 56, .09);
     color: #bd3b31;
     border-color: rgba(223, 68, 56, .22);
 }

 /* Cart */
 .empty-cart {
     background: #fafcf8;
     border-color: rgba(18, 21, 18, .14);
 }

 .cart-item {
     background: #ffffff;
 }

 .cart-item button {
     background: rgba(223, 68, 56, .09);
     color: #c43e34;
 }

 .cart-item button:hover {
     background: var(--red);
     color: #ffffff;
 }

 .clear-btn {
     color: var(--pink);
     border-color: rgba(255, 91, 8, .34);
 }

 .clear-btn:hover,
 .clear-btn:focus {
     background: linear-gradient(135deg, var(--pink), #ff7a1a);
     border-color: var(--pink);
     color: #ffffff;
     box-shadow: 0 14px 32px rgba(255, 91, 8, .20);
 }

 .cart-total {
     border-top-color: rgba(18, 21, 18, .12);
 }

 /* Slot view switch */
 .slot-view-switch {
     background: #f2f6ed;
     border-color: rgba(18, 21, 18, .10);
 }

 .slot-view-button {
     color: var(--muted);
 }

 .slot-view-button:hover {
     background: #ffffff;
     color: var(--ink);
 }

 .slot-view-button.active {
     color: #151a10;
     background: linear-gradient(135deg, var(--brand), #d0ff18);
     box-shadow: 0 8px 20px rgba(120, 166, 0, .16);
 }

 /* Schedule grid */
 .slot-grid-help {
     background: #f8fbf4;
     border-color: rgba(120, 166, 0, .18);
     color: var(--muted-dark);
 }

 .slot-grid-scroll {
     background: #ffffff;
     border-color: rgba(18, 21, 18, .10);
     box-shadow: 0 12px 34px rgba(24, 38, 14, .06);
 }

 .slot-grid-scroll::-webkit-scrollbar-track {
     background: #eef3e7;
 }

 .slot-grid-scroll::-webkit-scrollbar-thumb {
     background: #a7d000;
 }

 .slot-grid-corner,
 .slot-grid-time {
     background: #eef4e8;
 }

 .slot-grid-time {
     color: #54604f;
 }

 .slot-grid-court {
     background: #f9fbf7;
 }

 .slot-grid-empty {
     background: #f4f7f0;
     color: var(--muted);
 }

 .slot-grid-booking {
     background: linear-gradient(180deg, #ffffff, #f8faf5);
     color: var(--ink);
     border-color: rgba(18, 21, 18, .08);
 }

 .slot-grid-booking:hover:not(:disabled) {
     box-shadow: inset 0 0 0 2px rgba(120, 166, 0, .42);
 }

 .slot-grid-status {
     color: var(--brand-dark);
 }

 .slot-grid-price {
     color: var(--pink);
 }

 .slot-grid-booking.booked,
 .slot-grid-booking.locked,
 .slot-grid-booking.not-available,
 .slot-grid-booking.disabled {
     background: #fff0ee;
     color: #bd3b31;
     opacity: .82;
 }

 .slot-grid-booking.booked .slot-grid-status,
 .slot-grid-booking.locked .slot-grid-status,
 .slot-grid-booking.not-available .slot-grid-status,
 .slot-grid-booking.disabled .slot-grid-status {
     color: #bd3b31;
 }

 .slot-grid-booking.slot-grid-spanning {
     background: linear-gradient(135deg, var(--brand-pale), var(--smash-openplay-orange, #fff0e4));
     color: var(--ink);
     border-color: rgba(255, 91, 8, .34);
 }

 .slot-grid-booking.slot-grid-spanning:hover:not(:disabled) {
     box-shadow: inset 0 0 0 2px rgba(255, 91, 8, .22);
 }

 .slot-grid-booking.selected {
     background: linear-gradient(135deg, #d0ff18, var(--brand));
     color: #151a10;
     opacity: 1;
     box-shadow: inset 0 0 0 3px rgba(120, 166, 0, .18);
 }

 .slot-grid-booking.selected .slot-grid-status,
 .slot-grid-booking.selected .slot-grid-price,
 .slot-grid-booking.selected .slot-grid-detail {
     color: #151a10;
 }

 .slot-grid-legend {
     color: var(--muted);
 }

 .slot-legend-color.available {
     background: #ffffff;
     border-color: rgba(120, 166, 0, .48);
 }

 .slot-legend-color.booked {
     background: #fff0ee;
     border-color: rgba(223, 68, 56, .28);
 }

 .slot-legend-color.openplay {
     background: linear-gradient(135deg, var(--brand-pale), #fff0e4);
     border-color: rgba(255, 91, 8, .48);
 }

 .slot-legend-color.selected {
     background: linear-gradient(135deg, #d0ff18, var(--brand));
     border-color: var(--brand-dark);
 }

 /* Player counter */
 .counter-btn {
     background: #ffffff;
     color: var(--ink);
     border-color: rgba(18, 21, 18, .12);
 }

 .counter-btn:hover:not(:disabled) {
     border-color: var(--brand-dark);
     background: var(--brand-pale);
 }

 /* Loading screen */
 .app-loading {
     background:
         radial-gradient(circle at 8% 0%, rgba(184, 239, 0, .26) 0, transparent 31rem),
         radial-gradient(circle at 100% 12%, rgba(255, 91, 8, .16) 0, transparent 28rem),
         linear-gradient(135deg, #101510 0%, #172016 46%, #293817 78%, #5e7610 100%);
     color: #ffffff;
 }

 .app-loading::before {
     background-image:
         linear-gradient(rgba(184, 239, 0, .06) 1px, transparent 1px),
         linear-gradient(90deg, rgba(184, 239, 0, .06) 1px, transparent 1px);
 }

 .app-loading::after {
     border-color: rgba(184, 239, 0, .18);
 }

 .loading-ball {
     background: linear-gradient(135deg, #d0ff18, var(--brand) 55%, #8dbb00 100%);
     box-shadow:
         0 0 24px rgba(184, 239, 0, .42),
         0 14px 34px rgba(0, 0, 0, .32),
         inset 0 1px 0 rgba(255, 255, 255, .46);
 }

 .loading-title {
     color: #ffffff;
 }

 .loading-subtitle {
     color: rgba(255, 255, 255, .72);
 }

 /* Blazor error banner stays high contrast but carries Smash orange. */
 #blazor-error-ui {
     background: linear-gradient(135deg, #a43022 0%, var(--pink) 58%, #32130b 100%);
     color: #ffffff;
     border-color: rgba(255, 255, 255, .18);
     box-shadow:
         0 16px 34px rgba(69, 24, 12, .28),
         inset 0 1px 0 rgba(255, 255, 255, .12);
 }

 #blazor-error-ui .reload,
 #blazor-error-ui .dismiss {
     color: #ffffff;
 }

 /* Final text-visibility safeguards for the light theme. */
 .glass-card,
 .slot-tile,
 .cart-item,
 .court-pill,
 select,
 input,
 .slot-grid-booking,
 .slot-grid-court,
 .slot-grid-time,
 .slot-grid-corner {
     color: var(--ink);
 }

 .hero-panel,
 .hero-panel h1,
 .hero-panel .hero-copy,
 .hero-panel small {
     color: #ffffff;
 }

 .hero-panel .eyebrow,
 .hero-panel .hero-business,
 .hero-panel h1 span,
 .hero-card strong {
     color: var(--brand);
 }

 .day-pill.active,
 .court-pill.active,
 .slot-tile.selected,
 .slot-grid-booking.selected,
 .slot-view-button.active,
 .refresh-btn,
 .checkout-btn {
     color: #151a10;
 }

/* =========================================================
   THE PICKLE PROJECT THEME OVERRIDE
   Light-mode booking theme matched to The Pickle Project
   landing page and logo.
   Palette: deep navy, royal blue, aqua, pickle green, yellow.
   Layout / booking behavior intentionally unchanged.
   ========================================================= */

:root {
    --ink: #0b2548;
    --ink-strong: #071a32;
    --text-on-dark: #ffffff;
    --muted: #5e7390;
    --muted-dark: #405b78;
    --line: rgba(11, 37, 72, .10);
    --line-strong: rgba(31, 102, 194, .34);

    --brand: #63dff4;
    --brand-dark: #1f66c2;
    --brand-deep: #0b2548;
    --brand-soft: #f3fbff;
    --brand-pale: #e5f8ff;

    --pink: #7bcf35;
    --pink-soft: #eaf9df;

    --red: #d94f46;
    --amber: #f3dd2e;
    --blue: #327de3;
    --green: #7bcf35;

    --bg: #f8fcff;
    --card: #ffffff;

    --shadow-red: rgba(217, 79, 70, .15);
    --shadow-pink: rgba(123, 207, 53, .18);
    --shadow-deep: rgba(16, 66, 120, .12);

    --pp-blue: #1f66c2;
    --pp-blue-2: #327de3;
    --pp-aqua: #63dff4;
    --pp-aqua-2: #8beaf7;
    --pp-green: #7bcf35;
    --pp-green-2: #95e24f;
    --pp-yellow: #f3dd2e;
}

/* Overall page */
html,
body {
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(99, 223, 244, .18), transparent 30rem),
        radial-gradient(circle at 96% 10%, rgba(123, 207, 53, .12), transparent 28rem),
        radial-gradient(circle at 50% 100%, rgba(31, 102, 194, .07), transparent 34rem),
        linear-gradient(180deg, #fbfdff 0%, #f8fcff 58%, #eef9ff 100%);
}

body::before {
    background-image:
        linear-gradient(rgba(11, 37, 72, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 37, 72, .028) 1px, transparent 1px);
    opacity: .78;
}

body::after {
    background:
        linear-gradient(120deg,
            rgba(255,255,255,.70),
            transparent 30%,
            rgba(99,223,244,.035) 56%,
            transparent 80%);
    opacity: .9;
}

a {
    color: var(--brand-dark);
    text-decoration-color: rgba(31, 102, 194, .28);
}

a:hover {
    color: var(--green);
    text-decoration-color: var(--green);
}

/* =========================================================
   HERO
   Fully light mode to match The Pickle Project landing page.
   ========================================================= */

.hero-panel {
    background:
        radial-gradient(circle at 86% 10%, rgba(99, 223, 244, .22), transparent 17rem),
        radial-gradient(circle at 10% 92%, rgba(123, 207, 53, .16), transparent 18rem),
        linear-gradient(135deg, #ffffff 0%, #eef9ff 52%, #f5fff0 100%);
    color: var(--ink);
    border: 1px solid rgba(31, 102, 194, .14);
    box-shadow:
        0 28px 78px rgba(16, 66, 120, .12),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}

.hero-panel::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,.65), transparent 46%),
        linear-gradient(180deg, rgba(99,223,244,.04), transparent 62%);
}

.hero-panel::after {
    border-color: rgba(99, 223, 244, .18);
}

.eyebrow,
.hero-business {
    color: var(--brand-dark);
    text-shadow: none;
}

h1 {
    color: var(--ink);
    text-shadow: none;
}

h1 span {
    color: var(--green);
    text-shadow: none;
}

.hero-copy,
.hero-panel p,
.hero-panel small {
    color: var(--muted);
}

.hero-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(99,223,244,.08), transparent 10rem),
        rgba(255, 255, 255, .82);
    border-color: rgba(31, 102, 194, .14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 18px 44px rgba(16, 66, 120, .10);
}

.hero-card strong {
    color: var(--brand-dark);
    text-shadow: none;
}

.hero-card small {
    color: var(--muted);
}

/* =========================================================
   CARDS
   ========================================================= */

.glass-card,
.cart-card {
    background:
        radial-gradient(circle at 100% 0%, rgba(99,223,244,.055), transparent 16rem),
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,252,255,.98));
    border-color: rgba(11, 37, 72, .10);
    box-shadow:
        0 20px 58px rgba(16, 66, 120, .08),
        inset 0 1px 0 rgba(255,255,255,.96);
}

h2,
.cart-price,
.cart-total,
.slot-time,
.slot-grid-corner,
.slot-grid-court,
.slot-grid-scroll {
    color: var(--ink);
}

p,
.control-card p,
.section-title p,
.cart-head p,
.week-strip span,
.slot-meta,
.cart-item span,
.cart-item small,
.empty-cart {
    color: var(--muted);
}

label,
.court-select-title,
.date-refresh-row span {
    color: var(--muted-dark);
}

/* =========================================================
   INPUTS
   ========================================================= */

select,
input,
.qty-field input,
.counter-input {
    background: #ffffff;
    color: var(--ink);
    border-color: rgba(11, 37, 72, .13);
    color-scheme: light;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 8px 20px rgba(16, 66, 120, .05);
}

select:hover,
input:hover {
    border-color: rgba(31, 102, 194, .42);
}

select:focus,
input:focus {
    border-color: var(--brand-dark);
    box-shadow:
        0 0 0 4px rgba(99, 223, 244, .20),
        0 12px 24px rgba(16, 66, 120, .08);
}

select::placeholder,
input::placeholder {
    color: #8da0b4;
}

/* =========================================================
   MAIN BUTTONS
   ========================================================= */

.refresh-btn,
.checkout-btn {
    background: linear-gradient(135deg, var(--pp-green-2) 0%, var(--pp-green) 100%);
    color: #09203f;
    box-shadow:
        0 12px 30px rgba(123, 207, 53, .20),
        inset 0 1px 0 rgba(255,255,255,.46);
}

.refresh-btn:hover,
.checkout-btn:hover {
    box-shadow:
        0 17px 38px rgba(123, 207, 53, .26),
        inset 0 1px 0 rgba(255,255,255,.50);
}

/* =========================================================
   WEEK / DAY / COURT / SLOT CONTROLS
   ========================================================= */

.week-strip button,
.day-pill,
.slot-tile,
.court-pill,
.cart-item,
.clear-btn,
.counter-btn {
    background: linear-gradient(180deg, #ffffff, #f6fbff);
    color: var(--ink);
    border-color: rgba(11, 37, 72, .10);
    box-shadow: 0 10px 24px rgba(16, 66, 120, .06);
}

.week-strip button {
    color: var(--brand-dark);
}

.week-strip button:hover,
.day-pill:hover,
.court-pill:hover {
    border-color: rgba(31, 102, 194, .42);
    background: #eef9ff;
}

.day-pill strong,
.court-pill,
.slot-tile {
    color: var(--ink);
}

.day-pill.active,
.court-pill.active,
.slot-tile.selected {
    background: linear-gradient(135deg, #8beaf7 0%, #63dff4 45%, #7bcf35 100%);
    color: #09203f;
    border-color: rgba(31, 102, 194, .18);
    box-shadow: 0 16px 36px rgba(31, 102, 194, .15);
}

.day-pill.active strong,
.slot-tile.selected .slot-time,
.slot-tile.selected .slot-court,
.slot-tile.selected .slot-meta,
.slot-tile.selected .slot-price {
    color: #09203f;
}

.slot-tile:hover:not(:disabled) {
    border-color: rgba(31, 102, 194, .38);
    box-shadow: 0 18px 38px rgba(16, 66, 120, .11);
}

.slot-time {
    color: var(--ink-strong);
}

.slot-court {
    color: var(--brand-dark);
}

.slot-meta {
    color: var(--muted);
}

.slot-price {
    color: var(--green);
}

.slot-status,
.cart-badge {
    background: #e9f8ff;
    color: var(--brand-dark);
    border-color: rgba(31, 102, 194, .18);
}

.notice.warning {
    color: #6e5b00;
    background: #fffbe3;
    border-color: rgba(243, 221, 46, .42);
}

/* =========================================================
   PREMIUM / ORDINARY COURT VISUAL DIFFERENTIATION
   Safe CSS-only differentiation based on existing court controls.
   Courts remain functionally identical.
   ========================================================= */

.court-pill:nth-child(-n+5) {
    border-color: rgba(31, 102, 194, .22);
}

.court-pill:nth-child(-n+5):hover {
    background: #eef6ff;
    border-color: rgba(31, 102, 194, .50);
}

.court-pill:nth-child(n+6):nth-child(-n+8) {
    border-color: rgba(123, 207, 53, .26);
}

.court-pill:nth-child(n+6):nth-child(-n+8):hover {
    background: #f2fde9;
    border-color: rgba(123, 207, 53, .52);
}

/* =========================================================
   BOOKED / LOCKED / UNAVAILABLE
   ========================================================= */

.slot-tile.booked,
.slot-tile.locked,
.slot-tile.not-available,
.slot-tile.disabled {
    background: linear-gradient(180deg, #fffafa, #fff0ef);
    border-color: rgba(217, 79, 70, .24);
    color: #793b36;
}

.slot-tile.booked .slot-status,
.slot-tile.locked .slot-status,
.slot-tile.not-available .slot-status,
.slot-tile.disabled .slot-status {
    background: rgba(217, 79, 70, .09);
    color: #be473f;
    border-color: rgba(217, 79, 70, .20);
}

/* =========================================================
   CART
   ========================================================= */

.empty-cart {
    background: #f9fcff;
    border-color: rgba(11, 37, 72, .13);
}

.cart-item {
    background: #ffffff;
}

.cart-item button {
    background: rgba(217, 79, 70, .09);
    color: #bf463e;
}

.cart-item button:hover {
    background: var(--red);
    color: #ffffff;
}

.clear-btn {
    color: var(--brand-dark);
    border-color: rgba(31, 102, 194, .28);
}

.clear-btn:hover,
.clear-btn:focus {
    background: linear-gradient(135deg, var(--pp-blue), var(--pp-blue-2));
    border-color: var(--pp-blue);
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(31, 102, 194, .18);
}

.cart-total {
    border-top-color: rgba(11, 37, 72, .10);
}

/* =========================================================
   SLOT VIEW SWITCH
   ========================================================= */

.slot-view-switch {
    background: #eef7fb;
    border-color: rgba(11, 37, 72, .10);
}

.slot-view-button {
    color: var(--muted);
}

.slot-view-button:hover {
    background: #ffffff;
    color: var(--ink);
}

.slot-view-button.active {
    color: #09203f;
    background: linear-gradient(135deg, var(--pp-aqua), var(--pp-green));
    box-shadow: 0 8px 20px rgba(31, 102, 194, .14);
}

/* =========================================================
   SCHEDULE GRID
   ========================================================= */

.slot-grid-help {
    background: #f3fbff;
    border-color: rgba(31, 102, 194, .15);
    color: var(--muted-dark);
}

.slot-grid-scroll {
    background: #ffffff;
    border-color: rgba(11, 37, 72, .10);
    box-shadow: 0 12px 34px rgba(16, 66, 120, .06);
}

.slot-grid-scroll::-webkit-scrollbar-track {
    background: #eaf5fb;
}

.slot-grid-scroll::-webkit-scrollbar-thumb {
    background: #79d7e8;
}

.slot-grid-corner,
.slot-grid-time {
    background: #edf8fd;
}

.slot-grid-time {
    color: #48637f;
}

.slot-grid-court {
    background: #f9fcff;
}

.slot-grid-empty {
    background: #f5f9fc;
    color: var(--muted);
}

.slot-grid-booking {
    background: linear-gradient(180deg, #ffffff, #f6fbff);
    color: var(--ink);
    border-color: rgba(11, 37, 72, .08);
}

.slot-grid-booking:hover:not(:disabled) {
    box-shadow: inset 0 0 0 2px rgba(31, 102, 194, .32);
}

.slot-grid-status {
    color: var(--brand-dark);
}

.slot-grid-price {
    color: var(--green);
}

.slot-grid-booking.booked,
.slot-grid-booking.locked,
.slot-grid-booking.not-available,
.slot-grid-booking.disabled {
    background: #fff0ef;
    color: #bf463e;
    opacity: .82;
}

.slot-grid-booking.booked .slot-grid-status,
.slot-grid-booking.locked .slot-grid-status,
.slot-grid-booking.not-available .slot-grid-status,
.slot-grid-booking.disabled .slot-grid-status {
    color: #bf463e;
}

.slot-grid-booking.slot-grid-spanning {
    background: linear-gradient(135deg, #e7f8ff, #eefbdd);
    color: var(--ink);
    border-color: rgba(123, 207, 53, .36);
}

.slot-grid-booking.slot-grid-spanning:hover:not(:disabled) {
    box-shadow: inset 0 0 0 2px rgba(123, 207, 53, .22);
}

.slot-grid-booking.selected {
    background: linear-gradient(135deg, #8beaf7, #63dff4 48%, #7bcf35);
    color: #09203f;
    opacity: 1;
    box-shadow: inset 0 0 0 3px rgba(31, 102, 194, .14);
}

.slot-grid-booking.selected .slot-grid-status,
.slot-grid-booking.selected .slot-grid-price,
.slot-grid-booking.selected .slot-grid-detail {
    color: #09203f;
}

.slot-grid-legend {
    color: var(--muted);
}

.slot-legend-color.available {
    background: #ffffff;
    border-color: rgba(31, 102, 194, .34);
}

.slot-legend-color.booked {
    background: #fff0ef;
    border-color: rgba(217, 79, 70, .26);
}

.slot-legend-color.openplay {
    background: linear-gradient(135deg, #e7f8ff, #eefbdd);
    border-color: rgba(123, 207, 53, .40);
}

.slot-legend-color.selected {
    background: linear-gradient(135deg, #8beaf7, #63dff4 48%, #7bcf35);
    border-color: var(--brand-dark);
}

/* =========================================================
   PLAYER COUNTER
   ========================================================= */

.counter-btn {
    background: #ffffff;
    color: var(--ink);
    border-color: rgba(11, 37, 72, .12);
}

.counter-btn:hover:not(:disabled) {
    border-color: var(--brand-dark);
    background: #eaf8ff;
}

/* =========================================================
   LOADING SCREEN
   Still light mode, but more visually distinct.
   ========================================================= */

.app-loading {
    background:
        radial-gradient(circle at 8% 0%, rgba(99, 223, 244, .24) 0, transparent 31rem),
        radial-gradient(circle at 100% 12%, rgba(123, 207, 53, .16) 0, transparent 28rem),
        linear-gradient(135deg, #fafdff 0%, #eef9ff 52%, #f5fff0 100%);
    color: var(--ink);
}

.app-loading::before {
    background-image:
        linear-gradient(rgba(31, 102, 194, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 102, 194, .05) 1px, transparent 1px);
}

.app-loading::after {
    border-color: rgba(99, 223, 244, .18);
}

.loading-ball {
    background: linear-gradient(135deg, var(--pp-yellow), var(--pp-green) 56%, var(--pp-aqua) 100%);
    box-shadow:
        0 0 24px rgba(99, 223, 244, .28),
        0 14px 34px rgba(16, 66, 120, .14),
        inset 0 1px 0 rgba(255,255,255,.60);
}

.loading-title {
    color: var(--ink);
    text-shadow: none;
}

.loading-subtitle {
    color: var(--muted);
}

/* =========================================================
   BLAZOR ERROR BANNER
   ========================================================= */

#blazor-error-ui {
    background: linear-gradient(135deg, #be473f 0%, #d95a50 58%, #a5362e 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,.22);
    box-shadow:
        0 16px 34px rgba(95, 32, 28, .22),
        inset 0 1px 0 rgba(255,255,255,.12);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: #ffffff;
}

/* =========================================================
   FINAL VISIBILITY SAFEGUARDS
   ========================================================= */

.glass-card,
.slot-tile,
.cart-item,
.court-pill,
select,
input,
.slot-grid-booking,
.slot-grid-court,
.slot-grid-time,
.slot-grid-corner {
    color: var(--ink);
}

.hero-panel,
.hero-panel h1,
.hero-panel .hero-copy,
.hero-panel small {
    color: var(--ink);
}

.hero-panel .eyebrow,
.hero-panel .hero-business {
    color: var(--brand-dark);
}

.hero-panel h1 span {
    color: var(--green);
}

.hero-card strong {
    color: var(--brand-dark);
}

.day-pill.active,
.court-pill.active,
.slot-tile.selected,
.slot-grid-booking.selected,
.slot-view-button.active,
.refresh-btn,
.checkout-btn {
    color: #09203f;
}

/* Small mobile polish for the light theme */
@media (max-width: 620px) {
    .hero-panel {
        background:
            radial-gradient(circle at 100% 0%, rgba(99,223,244,.18), transparent 13rem),
            linear-gradient(145deg, #ffffff 0%, #eef9ff 62%, #f5fff0 100%);
    }

    .hero-card {
        background: rgba(255,255,255,.88);
    }

    .slot-view-switch {
        background: #edf7fb;
    }
}