*{box-sizing:border-box}
body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f4f6fb;
    margin:0;
    color:#1d2a34;
}
a{text-decoration:none}
img{max-width:100%}
body.login-body{
    min-height:100vh;
    background:
        radial-gradient(circle at top right, rgba(255,214,0,.25), transparent 28%),
        linear-gradient(135deg,#e31b1b 0%, #f44a2f 48%, #0c39d8 100%);
}
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}
.login-card{
    width:100%;
    max-width:470px;
}
.login-brand{
    text-align:center;
    margin-bottom:14px;
}
.login-brand img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:18px;
    background:#fff;
    padding:6px;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.login-brand-title{
    color:#fff;
    font-weight:bold;
    font-size:30px;
    margin-top:12px;
}
.login-brand-sub{
    color:rgba(255,255,255,.92);
    font-size:13px;
}
.wrap{
    width:94%;
    max-width:1300px;
    margin:0 auto;
}
.topbar{
    position:sticky;
    top:0;
    z-index:30;
    background:linear-gradient(90deg,#e31b1b 0%, #f44336 48%, #1746df 100%);
    color:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.14);
}
.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 0;
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
}
.brand-logo{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:14px;
    background:#fff;
    padding:4px;
    box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.brand-title{
    font-size:24px;
    font-weight:bold;
    line-height:1.1;
}
.brand-subtitle{
    font-size:12px;
    opacity:.95;
    margin-top:4px;
}
.topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
}
.user-chip{
    background:rgba(255,255,255,.14);
    padding:10px 14px;
    border-radius:999px;
    font-size:13px;
}
.btn{
    display:inline-block;
    padding:10px 15px;
    border-radius:10px;
    text-decoration:none;
    background:#e9edf6;
    color:#18344b;
    border:0;
    cursor:pointer;
    font-weight:bold;
}
.btn:hover{opacity:.95}
.btn.primary{
    background:#e31b1b;
    color:#fff;
}
.btn.secondary{
    background:#1746df;
    color:#fff;
}
.btn.warning{
    background:#ffd600;
    color:#5f4600;
}
.btn.danger{
    background:#bf2f45;
    color:#fff;
}
.small-btn{padding:8px 10px;font-size:12px}
.full-btn{width:100%}
.enterprise-shell{
    display:flex;
    min-height:calc(100vh - 86px);
}
.sidebar{
    width:260px;
    background:#10233f;
    color:#fff;
    padding:24px 18px;
    flex:0 0 260px;
}
.sidebar-logo{
    text-align:center;
    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.10);
    margin-bottom:18px;
}
.sidebar-logo img{
    width:88px;
    height:88px;
    border-radius:18px;
    object-fit:cover;
    background:#fff;
    padding:5px;
}
.sidebar-title{
    font-size:16px;
    font-weight:bold;
    margin-top:12px;
}
.sidebar-sub{
    font-size:12px;
    color:rgba(255,255,255,.75);
}
.nav-menu{display:flex;flex-direction:column;gap:8px}
.nav-link{
    color:#fff;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    transition:.15s ease;
}
.nav-link:hover,
.nav-link.active{
    background:linear-gradient(90deg,#e31b1b,#1746df);
    transform:translateX(2px);
}
.content-area{
    flex:1;
    padding:24px;
}
.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
}
.page-head h1{
    margin:0;
    font-size:32px;
    color:#1746df;
}
.page-head p{
    margin:6px 0 0;
    color:#667587;
}
.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-bottom:18px;
}
.stat-card{
    background:#fff;
    border-radius:18px;
    padding:18px;
    box-shadow:0 10px 28px rgba(18,35,63,.08);
    border-top:5px solid #ffd600;
}
.stat-label{
    color:#6d7a89;
    font-size:13px;
}
.stat-value{
    font-size:28px;
    color:#e31b1b;
    font-weight:bold;
    margin-top:8px;
}
.card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 28px rgba(18,35,63,.08);
    margin-bottom:18px;
}
.section-header,
.filter-bar,
.navlinks{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}
label{
    display:block;
    font-weight:bold;
    margin-bottom:7px;
}
.form-group{margin-bottom:14px}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1.25fr 1fr}
.grid.two-equal,.form-inline-grid{grid-template-columns:1fr 1fr}
input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=password], select, textarea{
    width:100%;
    padding:11px 12px;
    border:1px solid #d4dbea;
    border-radius:10px;
    box-sizing:border-box;
    font-size:14px;
    background:#fff;
}
.table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}
.table th,.table td{
    border-bottom:1px solid #e7ecf3;
    padding:11px 10px;
    text-align:left;
    vertical-align:top;
}
.table th{
    background:#f8faff;
    color:#1746df;
}
.alert{
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:16px;
}
.alert.success{background:#e4f8ea;color:#14683b}
.alert.error{background:#ffe4e8;color:#98253a}
.summary-box,.info-box,.muted-box{
    background:#f8fbff;
    border:1px solid #dde7f3;
    border-radius:14px;
    padding:14px;
    margin:14px 0;
}
.price-tag{color:#e31b1b;font-weight:bold;margin:8px 0}
.small{font-size:12px;color:#6a7988}
.badge,.pill{
    display:inline-block;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:bold;
    margin-bottom:4px;
}
.pending,.pending-verification{background:#fff5cc;color:#7b6000}
.confirmed,.paid,.completed{background:#e3f7e9;color:#17693d}
.cancelled,.refunded,.unpaid{background:#ffe4e8;color:#98253a}
.court-thumb{
    width:78px;
    height:78px;
    object-fit:cover;
    border-radius:12px;
    border:2px solid #ffd600;
    cursor:pointer;
    display:block;
}
.court-list-photo{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:14px;
    border:2px solid #ffd600;
    margin-bottom:12px;
    cursor:pointer;
}
.thumb-placeholder{
    width:78px;
    height:78px;
    border-radius:12px;
    border:1px dashed #c5d0df;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#728191;
    font-size:11px;
    background:#f8fbff;
}
.thumb-placeholder.large{
    width:100%;
    height:180px;
    border-radius:14px;
    font-size:14px;
    margin-bottom:12px;
}
.photo-modal{position:fixed;inset:0;z-index:9999}
.photo-modal-backdrop{position:absolute;inset:0;background:rgba(9,16,25,.76)}
.photo-modal-content{
    position:relative;
    z-index:2;
    width:92%;
    max-width:820px;
    margin:34px auto;
    background:#fff;
    border-radius:18px;
    padding:18px;
    box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.photo-modal-title{font-size:20px;font-weight:bold;margin-bottom:14px;padding-right:40px;color:#1746df}
.photo-modal-image{width:100%;max-height:75vh;object-fit:contain;border-radius:12px;background:#f7fbff}
.photo-modal-close{
    position:absolute;top:6px;right:12px;border:0;background:transparent;font-size:34px;line-height:1;cursor:pointer;color:#1d2a34
}
.preview-image{
    width:220px;
    max-width:100%;
    height:150px;
    object-fit:cover;
    border-radius:14px;
    border:1px solid #dbe5ee;
}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.slot-btn{
    border:0;
    border-radius:22px;
    padding:9px 12px;
    cursor:pointer;
}
.slot-btn.free{background:#e4f8ea;color:#14683b}
.slot-btn.reserved{background:#ffe4e8;color:#98253a;cursor:not-allowed}
.receipt-page{background:#fff}
.receipt-wrap{
    width:760px;
    max-width:96%;
    margin:20px auto;
    border:2px solid #1d2a34;
    padding:20px;
}
.receipt-header{
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-bottom:2px solid #1d2a34;
    padding-bottom:12px;
}
.receipt-no-box{text-align:right}
.receipt-table{width:100%;border-collapse:collapse;margin-top:16px}
.receipt-table td{border:1px solid #1d2a34;padding:10px}
.signature-line{border-top:1px solid #1d2a34;padding-top:8px;margin-top:26px}
.hero-banner{
    background:linear-gradient(135deg,#ffffff,#fff5cc);
    border-radius:22px;
    box-shadow:0 12px 28px rgba(18,35,63,.08);
    overflow:hidden;
    margin:18px auto;
}
.hero-banner-inner{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:12px;
    align-items:center;
    padding:26px;
}
.hero-banner h1{
    margin:0 0 8px;
    font-size:38px;
    color:#e31b1b;
}
.hero-banner p{
    margin:0;
    color:#495869;
    line-height:1.6;
}
.hero-badges{margin-top:14px}
.hero-badge{
    display:inline-block;
    margin-right:8px;
    margin-bottom:8px;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:bold;
}
.hero-badge.red{background:#ffe4e8;color:#98253a}
.hero-badge.yellow{background:#fff5cc;color:#7b6000}
.hero-badge.blue{background:#e3ebff;color:#1746df}
.hero-side{
    text-align:center;
}
.hero-side img{
    max-width:240px;
    border-radius:22px;
    background:#fff;
    padding:8px;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.mobile-menu-toggle{display:none}
@media print{
    .receipt-wrap{border:0;width:100%;max-width:100%;margin:0}
}
@media (max-width:980px){
    .enterprise-shell{display:block}
    .sidebar{width:100%;padding:16px}
    .content-area{padding:18px}
    .hero-banner-inner,.grid.two,.grid.two-equal,.form-inline-grid{grid-template-columns:1fr}
    .sidebar-logo{display:none}
}
@media (max-width:720px){
    .topbar-inner{padding:10px 0}
    .brand-title{font-size:18px}
    .brand-logo{width:48px;height:48px}
    .page-head h1{font-size:26px}
    .hero-banner h1{font-size:28px}
    .table{display:block;overflow-x:auto}
}

@media (max-width:768px){
.table{font-size:12px}
.btn{padding:10px;font-size:14px}
input,select{font-size:16px;padding:8px}
}

.fb-btn{background:#1877f2;color:#fff;margin-right:8px;} .fb-btn:hover{background:#0f5dc2;}


.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.calendar-day{background:#fff;border:1px solid #dfe6ef;border-radius:12px;min-height:130px;padding:8px}
.calendar-day .day-num{font-weight:bold;color:#1746df;margin-bottom:8px}
.cal-item{font-size:12px;padding:6px 8px;border-radius:8px;margin-bottom:6px;background:#eef3ff;border-left:4px solid #1746df}
.cal-block{background:#ffe4e8;border-left-color:#c62828}
.cal-maint{background:#fff3cd;border-left-color:#b8860b}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chart-box{height:320px}
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.receipt-actions{display:flex;gap:8px;flex-wrap:wrap}
.qr-box{padding:8px;background:#fff;border:1px solid #ddd;display:inline-block;border-radius:10px}


.slot-btn.free-slot{background:#e8f8ec;border:1px solid #72c48a;color:#17693d}
.slot-btn.booked-slot{background:#ffe5e7;border:1px solid #e08a92;color:#a32836}
.slot-btn.blocked-slot{background:#eceff3;border:1px solid #b6c0ca;color:#4f5f70}
.slot-btn.drag-selected{background:#fff3cd !important;border-color:#d8b454 !important;color:#7a5c00 !important}
.calendar-legend{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.legend-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px}
.legend-dot{width:12px;height:12px;border-radius:999px;display:inline-block}
.legend-free{background:#72c48a}
.legend-booked{background:#e08a92}
.legend-blocked{background:#9aa7b4}
.drag-help{margin-top:8px;font-size:12px;color:#5b6775}


.gcash-box{text-align:center;background:#fff;border-radius:20px;padding:12px;box-shadow:0 12px 24px rgba(0,0,0,.08);border:none}
.gcash-qr{max-width:220px;width:100%;border-radius:14px;background:#fff}
.gcash-name{margin-top:10px;font-size:14px;color:#1746df}
.gcash-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0 8px 0}


.slot-btn.open-play-slot{background:#e3f2fd;border:1px solid #64b5f6;color:#0d47a1}
.legend-open-play{background:#64b5f6}


/* PWA / Mobile enhancements */
.safe-top{padding-top:env(safe-area-inset-top)}
.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}
@media (max-width: 768px){
  .wrap{padding-left:12px;padding-right:12px}
  .topbar-inner{flex-wrap:wrap;gap:10px}
  .topbar-right{display:flex;gap:8px;flex-wrap:wrap}
  .brand{align-items:center}
  .brand-logo{width:44px;height:44px;object-fit:cover}
  .hero-banner-inner{grid-template-columns:1fr !important}
  .grid.two,.grid.two-equal,.form-inline-grid{grid-template-columns:1fr !important}
  .card{padding:14px}
  .btn{min-height:44px;padding:10px 14px}
  input,select,textarea{min-height:44px;font-size:16px}
  .summary-box div{margin-bottom:6px}
  .court-card{padding:12px}
  .photo-modal-content,.reservation-modal-content.large{width:96% !important}
}


/* POS mobile touch UI */
.pos-touch-page .btn,
.pos-touch-body .btn{min-height:46px}
.pos-touch-row td,
.pos-touch-row th{vertical-align:middle}
.pos-qty-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.qty-chip{
    min-width:48px;height:42px;border:none;border-radius:12px;
    background:#eef2ff;color:#1746df;font-weight:700;cursor:pointer;
    box-shadow:0 2px 8px rgba(23,70,223,.12)
}
.pos-mobile-totalbar{
    position:sticky;bottom:0;z-index:40;padding:10px 0 0;
}
.pos-mobile-totalbar-inner{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:#ffffff;border:1px solid #dbe3f0;border-radius:16px;
    box-shadow:0 10px 30px rgba(15,23,42,.12);padding:12px 14px;
}
.pos-total-label{font-weight:700;color:#0f172a}
.pos-total-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width: 768px){
    .pos-touch-page table,
    .pos-touch-page thead,
    .pos-touch-page tbody,
    .pos-touch-page th,
    .pos-touch-page td,
    .pos-touch-page tr{display:block;width:100%}
    .pos-touch-page thead{display:none}
    .pos-touch-page tr.pos-touch-row,
    .pos-touch-page tbody tr{
        background:#fff;border:1px solid #e5e7eb;border-radius:16px;
        padding:12px;margin-bottom:12px;box-shadow:0 8px 24px rgba(0,0,0,.05)
    }
    .pos-touch-page td{
        border:none !important;padding:6px 0 !important
    }
    .pos-touch-page input[type="text"],
    .pos-touch-page input[type="number"],
    .pos-touch-page select,
    .pos-touch-page textarea{
        min-height:48px;font-size:16px;border-radius:12px
    }
    .pos-touch-page .btn{
        min-height:48px;padding:12px 16px;border-radius:14px
    }
    .pos-touch-page .table,
    .pos-touch-page table{background:transparent}
    .pos-mobile-totalbar{padding-bottom:env(safe-area-inset-bottom)}
}


/* Reservation lookup modal fix */
.reservation-lookup-modal,
#reservationLookupModal{
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;
    align-items:center;
    justify-content:center;
}
#reservationLookupModal .reservation-modal-backdrop{
    position:absolute !important;
    inset:0 !important;
    background:rgba(15,23,42,.70) !important;
}
#reservationLookupModal .reservation-lookup-modal-content,
#reservationLookupModal .reservation-modal-content{
    position:relative !important;
    z-index:2 !important;
    width:min(1100px, 96vw) !important;
    max-height:88vh !important;
    overflow:auto !important;
    margin:0 auto !important;
    background:#fff !important;
    border-radius:18px !important;
    padding:22px !important;
    box-shadow:0 20px 80px rgba(0,0,0,.28) !important;
}
#reservationLookupModal .reservation-modal-close{
    position:absolute !important;
    top:10px !important;
    right:14px !important;
    border:none !important;
    background:transparent !important;
    font-size:32px !important;
    line-height:1 !important;
    cursor:pointer !important;
}
#reservationLookupModal .photo-modal-title{
    margin-right:32px;
}


/* Court multi-image enterprise slider */
.court-gallery-admin{display:flex;flex-wrap:wrap;gap:12px}
.gallery-check-item{display:flex;flex-direction:column;gap:8px;width:120px}
.gallery-check-item img{width:120px;height:92px;object-fit:cover;border-radius:12px;border:2px solid #dbe4ff}
.court-slider{position:relative;margin-bottom:12px;border-radius:18px;overflow:hidden;background:#f8fafc;border:1px solid #e2e8f0}
.court-slider-track{position:relative}
.court-slider .court-list-photo{display:none;margin:0;width:100%;height:240px;object-fit:cover;cursor:pointer}
.court-slider .court-list-photo.active{display:block}
.court-slider-btn{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:none;
    width:42px;height:42px;border-radius:50%;cursor:pointer;background:rgba(15,23,42,.72);color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.18);font-size:20px
}
.court-slider-btn.prev{left:12px}
.court-slider-btn.next{right:12px}
.court-slider-dots{display:flex;justify-content:center;gap:8px;padding:10px;background:#fff}
.court-slider-dot{
    width:10px;height:10px;border-radius:50%;border:none;background:#cbd5e1;cursor:pointer;padding:0;
}
.court-slider-dot.active{background:#1746df}
.photo-modal-content.enterprise-preview{position:relative;padding-top:46px}
.photo-modal-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:4;border:none;
    width:44px;height:44px;border-radius:50%;cursor:pointer;background:rgba(15,23,42,.72);color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.18);font-size:22px
}
.photo-modal-nav.prev{left:12px}
.photo-modal-nav.next{right:12px}
@media (max-width: 768px){
    .court-slider .court-list-photo{height:200px}
    .court-slider-btn,.photo-modal-nav{width:38px;height:38px}
}


/* Card-style reservation date picker */
.card-datepicker-wrap{
    border:1px solid #d7dfef;
    border-radius:20px;
    background:#fff;
    padding:16px;
    box-shadow:0 6px 24px rgba(15,23,42,.06);
}
.card-datepicker-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}
.card-datepicker-title{
    font-size:22px;
    font-weight:800;
    color:#163a7a;
    text-align:center;
    flex:1;
}
.card-datepicker-nav{
    width:42px;
    height:42px;
    border:1px solid #cfd9ee;
    border-radius:12px;
    background:#fff;
    color:#1746df;
    font-size:20px;
    cursor:pointer;
}
.card-datepicker-row{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px;
}
.date-card-item{
    border:1px solid #cfd9ee;
    border-radius:16px;
    background:#fff;
    padding:14px 8px;
    min-height:122px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    transition:.18s ease;
}
.date-card-item:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(23,70,223,.08);
}
.date-card-item.active{
    border-color:#2d6cdf;
    box-shadow:0 0 0 2px rgba(45,108,223,.08) inset;
    background:#f8fbff;
}
.date-card-dow{
    font-size:16px;
    color:#1e3a8a;
    font-weight:700;
}
.date-card-day{
    font-size:40px;
    line-height:1;
    color:#1e63d6;
    font-weight:800;
}
.date-card-item:not(.active) .date-card-day{
    color:#163a7a;
}
.date-card-slots{
    font-size:15px;
    color:#1d4ed8;
    display:flex;
    align-items:center;
    gap:6px;
}
.date-card-slots .dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#22c55e;
    display:inline-block;
}
@media (max-width: 900px){
    .card-datepicker-row{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 640px){
    .card-datepicker-wrap{padding:12px}
    .card-datepicker-title{font-size:18px}
    .card-datepicker-row{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .date-card-item{
        min-height:108px;
        padding:12px 6px;
    }
    .date-card-day{font-size:34px}
}


/* Court cards theme blend */
.court-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:18px;
}
.court-card{
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border:1px solid #d8e3f5;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(23,70,223,.08);
}
.court-card-top{
    padding:12px 12px 0;
}
.court-card-body{
    padding:14px 14px 16px;
}
.court-card-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.court-name{
    font-size:22px;
    font-weight:800;
    color:#0f2d68;
    line-height:1.15;
}
.court-desc-card{
    color:#425466;
    background:linear-gradient(135deg, rgba(230,240,255,.8), rgba(255,245,247,.88));
    border:1px solid #e4ebfa;
    border-radius:16px;
    padding:12px 14px;
    min-height:72px;
    line-height:1.5;
}
.court-meta-row{
    margin-top:12px;
}
.court-meta-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:999px;
    background:#eef4ff;
    color:#1746df;
    font-size:14px;
    font-weight:700;
}
.meta-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ef1d26;
    display:inline-block;
}
.price-tag.theme-blend{
    background:linear-gradient(90deg, #ef1d26 0%, #1746df 100%);
    color:#fff;
    font-weight:800;
    border-radius:999px;
    padding:10px 12px;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(23,70,223,.18);
}
.thumb-placeholder.large.theme-blend{
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:linear-gradient(135deg, #eef4ff, #fff1f3);
    border:1px dashed #bfd1ee;
    color:#6b7280;
}
.court-slider.theme-blend{
    border:1px solid #d7e3f7;
    background:linear-gradient(180deg, #fefefe 0%, #f7fbff 100%);
    box-shadow:0 10px 26px rgba(23,70,223,.08);
}
.court-slider.theme-blend .court-slider-btn{
    background:linear-gradient(135deg, rgba(239,29,38,.92), rgba(23,70,223,.92));
}
.court-slider.theme-blend .court-slider-dot.active{
    background:#ef1d26;
}
.themed-small-note{
    color:#1746df;
    font-weight:600;
}
.card-datepicker-title{
    color:#0f2d68;
}
.date-card-item.active{
    border-color:#ef1d26;
    box-shadow:0 0 0 2px rgba(239,29,38,.08) inset, 0 12px 20px rgba(23,70,223,.08);
}
.date-card-day{
    color:#1746df;
}
.date-card-item.active .date-card-day{
    color:#ef1d26;
}
.date-card-slots{
    color:#1746df;
}
@media (max-width: 768px){
    .court-card-title-row{
        flex-direction:column;
        align-items:flex-start;
    }
    .price-tag.theme-blend{
        align-self:flex-start;
    }
}


/* Court selector cards */
.court-select-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
}
.court-select-card{
    border:1px solid #d8e3f5;
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    padding:14px;
    text-align:left;
    cursor:pointer;
    transition:.18s ease;
    box-shadow:0 8px 20px rgba(23,70,223,.06);
}
.court-select-card:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(23,70,223,.10);
}
.court-select-card.active{
    border-color:#ef1d26;
    background:linear-gradient(135deg, rgba(255,245,247,.98), rgba(240,246,255,.98));
    box-shadow:0 0 0 2px rgba(239,29,38,.08) inset, 0 14px 28px rgba(23,70,223,.12);
}
.court-select-card-name{
    font-size:18px;
    font-weight:800;
    color:#0f2d68;
    margin-bottom:6px;
}
.court-select-card-desc{
    color:#53657a;
    font-size:14px;
    line-height:1.4;
    min-height:38px;
    margin-bottom:10px;
}
.court-select-card-meta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:999px;
    background:#eef4ff;
    color:#1746df;
    font-weight:700;
    font-size:13px;
}
.court-select-card.active .court-select-card-meta{
    background:linear-gradient(90deg, #ef1d26 0%, #1746df 100%);
    color:#fff;
}


/* Enhanced court selector UX */
.court-select-cards{
    margin-top:4px;
}
.court-select-card{
    position:relative;
    overflow:hidden;
}
.court-select-card::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:18px;
    pointer-events:none;
    box-shadow:inset 0 0 0 0 rgba(239,29,38,0);
    transition:.18s ease;
}
.court-select-card.active{
    transform:translateY(-2px) scale(1.01);
}
.court-select-card.active::after{
    box-shadow:inset 0 0 0 2px rgba(239,29,38,.18);
}
.court-select-card-name{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.court-select-card.active .court-select-card-name::after{
    content:'Selected';
    font-size:12px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(90deg, #ef1d26 0%, #1746df 100%);
    padding:6px 10px;
    border-radius:999px;
}
.court-select-card-status{
    margin-top:10px;
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
}
.court-select-card-status.open{
    background:#ecfdf5;
    color:#166534;
}
.court-select-card-status.booked{
    background:#fef2f2;
    color:#991b1b;
}
.court-fully-booked{
    opacity:.72;
    border-color:#f0c8cb;
    background:linear-gradient(180deg, #fff 0%, #fff8f8 100%);
}
.court-fully-booked .court-select-card-meta{
    background:#e5e7eb !important;
    color:#6b7280 !important;
}
.court-selected-helper{
    color:#1746df;
    font-weight:600;
}


/* Restore Available Courts look */
.available-courts-card h2{
    font-size:24px;
    font-weight:800;
    color:#0f2d68;
    margin-bottom:16px;
}
.available-courts-card .court-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}
.available-courts-card .court-card{
    background:#fff;
    border:1px solid #d8e3f5;
    border-radius:22px;
    overflow:hidden;
    box-shadow:none;
}
.available-courts-card .court-card-top{
    padding:0;
}
.available-courts-card .court-card-body{
    padding:12px 4px 14px;
}
.available-courts-card .court-name{
    font-size:20px;
    font-weight:800;
    color:#0f2d68;
    margin-bottom:2px;
}
.available-courts-card .court-desc-plain{
    color:#111827;
    font-size:15px;
    line-height:1.35;
    margin-bottom:8px;
}
.available-courts-card .price-tag.plain-red{
    display:block;
    background:none;
    color:#ef1d26;
    padding:0;
    border-radius:0;
    box-shadow:none;
    font-size:16px;
    font-weight:800;
    margin-bottom:6px;
}
.available-courts-card .court-hours-line{
    color:#64748b;
    margin-bottom:0;
}
.available-courts-card .court-preview-note{
    color:#64748b;
    margin-top:0;
}
.available-courts-card .thumb-placeholder.large.theme-blend{
    min-height:180px;
    border-radius:18px;
    margin:0;
}
.available-courts-card .court-slider.theme-blend{
    border:2px solid #f0c400;
    border-radius:18px;
    box-shadow:none;
}
.available-courts-card .court-slider.theme-blend .court-list-photo{
    height:240px;
    object-fit:cover;
}
.available-courts-card .court-slider-dots{
    padding:8px 0 10px;
}
.available-courts-card .court-slider-dot{
    width:10px;
    height:10px;
}
.available-courts-card .court-slider-dot.active{
    background:#1d4ed8;
}
.available-courts-card .court-slider-btn{
    width:44px;
    height:44px;
    background:rgba(30,41,59,.78);
}
@media (max-width: 768px){
    .available-courts-card .court-slider.theme-blend .court-list-photo{
        height:220px;
    }
}


/* Restore helper cards */
.how-it-works-card h2,
.reservation-lookup-card h2{
    font-size:24px;
    font-weight:800;
    color:#0f2d68;
    margin-bottom:12px;
}
.how-it-works-list{
    margin:0;
    padding-left:22px;
    color:#1f2937;
    line-height:1.5;
}
.reservation-lookup-card{
    margin-top:14px;
}


/* Enterprise reservation lookup modal */
#reservationLookupModal .reservation-lookup-modal-content{
    max-width:980px !important;
    padding:24px !important;
    border-radius:22px !important;
}
#reservationLookupModal .reservation-modal-title-row{
    border-bottom:1px solid #e5eaf3;
    padding-bottom:14px;
    margin-bottom:16px;
}
#reservationLookupModal .photo-modal-title{
    font-size:34px;
    font-weight:800;
    color:#1746df;
    line-height:1.1;
}
#reservationLookupModal .modal-subtitle{
    font-size:14px;
    color:#64748b;
    margin-top:6px;
}
.lookup-results-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}
.lookup-result-card{
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border:1px solid #dde6f5;
    border-radius:18px;
    padding:16px;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.lookup-result-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
.lookup-client-name{
    font-size:22px;
    font-weight:800;
    color:#0f2d68;
    line-height:1.15;
}
.lookup-mobile{
    font-size:13px;
    color:#64748b;
    margin-top:4px;
}
.lookup-result-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
}
.lookup-meta-box{
    background:#fff;
    border:1px solid #e6edf8;
    border-radius:14px;
    padding:12px 14px;
}
.lookup-meta-box.amount{
    background:linear-gradient(135deg, rgba(239,29,38,.06), rgba(23,70,223,.06));
}
.lookup-label{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#64748b;
    margin-bottom:6px;
}
.lookup-value{
    font-size:16px;
    color:#1f2937;
    line-height:1.35;
}
#reservationLookupModal .status-badge{
    font-size:13px;
    padding:8px 12px;
}
@media (max-width: 768px){
    #reservationLookupModal .photo-modal-title{font-size:26px}
    .lookup-result-top{flex-direction:column}
    .lookup-result-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
    .lookup-result-grid{grid-template-columns:1fr}
    .lookup-client-name{font-size:19px}
}


/* Mobile header fit fix */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .wrap,
    .container,
    .page-wrap,
    .main-wrap {
        width: 100%;
        max-width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    .topbar,
    .hero-banner,
    .hero-section,
    .banner-wrap,
    .header-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        border-radius: 0 0 16px 16px !important;
    }

    .topbar-inner,
    .hero-banner-inner,
    .brand-row,
    .header-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .brand,
    .hero-brand {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    .brand-logo,
    .hero-logo,
    .topbar .logo,
    .brand img {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        object-fit: contain !important;
        border-radius: 10px !important;
    }

    .brand-text,
    .hero-copy,
    .brand-copy {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: calc(100% - 62px) !important;
    }

    .brand-text h1,
    .hero-copy h1,
    .brand-copy h1,
    .topbar h1 {
        font-size: 18px !important;
        line-height: 1.18 !important;
        margin: 0 0 4px !important;
        word-break: break-word !important;
    }

    .brand-text p,
    .hero-copy p,
    .brand-copy p,
    .topbar p {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        word-break: break-word !important;
    }

    .topbar-right,
    .hero-actions,
    .banner-actions,
    .header-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 4px !important;
    }

    .topbar-right .btn,
    .hero-actions .btn,
    .banner-actions .btn,
    .header-actions .btn,
    #pwaInstallBtn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .grid.two,
    .grid.two-equal,
    .form-inline-grid {
        grid-template-columns: 1fr !important;
    }

    .court-select-cards {
        grid-template-columns: 1fr !important;
    }

    .court-select-card,
    .card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .card {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    .card h2 {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }

    .court-slider .court-list-photo {
        height: 190px !important;
    }
}

@media (max-width: 430px) {
    .wrap,
    .container,
    .page-wrap,
    .main-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .brand-logo,
    .hero-logo,
    .topbar .logo,
    .brand img {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .brand-text,
    .hero-copy,
    .brand-copy {
        width: calc(100% - 56px) !important;
    }

    .brand-text h1,
    .hero-copy h1,
    .brand-copy h1,
    .topbar h1 {
        font-size: 16px !important;
    }

    .brand-text p,
    .hero-copy p,
    .brand-copy p,
    .topbar p {
        font-size: 11px !important;
    }

    .topbar-right .btn,
    .hero-actions .btn,
    .banner-actions .btn,
    .header-actions .btn,
    #pwaInstallBtn {
        font-size: 13px !important;
        padding: 10px 8px !important;
    }
}


/* Reservation success modal */
#reservationSuccessModal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    align-items: center;
    justify-content: center;
}
.success-modal-content{
    max-width: 520px !important;
    width: min(92vw, 520px) !important;
    text-align: center;
    padding: 28px 24px !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 24px 80px rgba(15,23,42,.22) !important;
    position: relative !important;
    z-index: 2 !important;
}
.success-modal-icon{
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 14px 30px rgba(34,197,94,.28);
}
.success-modal-title{
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    color: #0f2d68;
    margin-bottom: 8px;
}
.success-modal-subtitle{
    color: #64748b;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 18px;
}
.success-modal-actions{
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 520px){
    .success-modal-title{font-size: 24px;}
    .success-modal-actions{flex-direction: column;}
    .success-modal-actions .btn{width: 100%;}
}


/* Pricing UX + clear button */
.form-actions-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}
.btn.secondary{
    background:#e5e7eb;
    color:#111827;
}
.btn.secondary:hover{
    background:#d1d5db;
}
#summaryPricingBreakdown{
    color:#1746df;
    font-weight:700;
}
@media (max-width: 768px){
    .form-actions-row{
        flex-direction:column;
    }
    .form-actions-row .btn{
        width:100%;
    }
}


/* Smart payment UX */
.smart-payment-box{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid #d8e3f5;
    border-radius:22px;
    box-shadow:0 14px 34px rgba(23,70,223,.08);
    padding:14px;
}
.smart-payment-tabs{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}
.smart-pay-tab{
    flex:1;
    border:none;
    border-radius:999px;
    padding:10px 12px;
    font-weight:800;
    cursor:pointer;
    background:#eef4ff;
    color:#1746df;
}
.smart-pay-tab.active{
    background:linear-gradient(90deg,#ef1d26 0%,#1746df 100%);
    color:#fff;
}
.smart-pay-panel{
    display:none;
    opacity:0;
    transform:translateY(6px);
    transition:.2s ease;
    text-align:center;
}
.smart-pay-panel.active{
    display:block;
    opacity:1;
    transform:translateY(0);
}
.smart-actions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin:10px 0 6px;
}
.inline-payment-helper{
    margin-top:12px;
    border:1px solid #d8e3f5;
    border-radius:18px;
    background:#f8fbff;
    padding:12px 14px;
}
.inline-payment-title{
    font-weight:800;
    color:#0f2d68;
    margin-bottom:10px;
}
.inline-payment-panels{
    display:grid;
    grid-template-columns:1fr;
}
.inline-pay-panel{
    display:none;
}
.inline-pay-panel.active{
    display:block;
}
.inline-pay-badge{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    margin-bottom:8px;
}
.inline-pay-badge.cash{background:#ecfdf5;color:#166534;}
.inline-pay-badge.gcash{background:#dbeafe;color:#1d4ed8;}
.inline-pay-badge.maya{background:#dcfce7;color:#15803d;}
.inline-pay-badge.bank{background:#fef3c7;color:#92400e;}
.payment-method-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin-bottom:16px;
}
.payment-method-card{
    background:#fff;
    border:1px solid #dbe3f0;
    border-radius:16px;
    padding:14px;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.payment-method-card .label{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:8px;
}
.payment-method-card .value{
    font-size:24px;
    font-weight:800;
    color:#0f2d68;
}
.payment-method-card .sub{
    font-size:13px;
    color:#64748b;
    margin-top:4px;
}
@media (max-width:768px){
    .smart-actions{flex-direction:column;}
    .smart-actions .btn{width:100%;}
}


/* Premium dual payment hover UI */
.dual-payment-box.premium-payment-ui{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
    align-items:stretch;
}
.payment-card{
    --mx: 50%;
    --my: 50%;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid #dbe5f5;
    border-radius:24px;
    padding:16px 16px 14px;
    text-align:center;
    box-shadow:0 16px 36px rgba(15,23,42,.08);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    isolation:isolate;
}
.payment-card::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:24px;
    background:radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.95), rgba(255,255,255,0) 38%);
    opacity:.0;
    transition:opacity .22s ease;
    z-index:0;
}
.payment-card:hover,
.payment-card.is-hovered{
    transform:translateY(-5px) scale(1.01);
    box-shadow:0 24px 54px rgba(15,23,42,.14);
}
.payment-card:hover::before,
.payment-card.is-hovered::before{
    opacity:.9;
}
.payment-card-gcash:hover,
.payment-card-gcash.is-hovered{
    border-color:#7db2ff;
}
.payment-card-maya:hover,
.payment-card-maya.is-hovered{
    border-color:#86d9a7;
}
.payment-card-glow{
    position:absolute;
    inset:auto;
    width:180px;
    height:180px;
    left:50%;
    top:-70px;
    transform:translateX(-50%);
    filter:blur(40px);
    opacity:.18;
    z-index:0;
    pointer-events:none;
}
.payment-card-gcash .payment-card-glow{
    background:radial-gradient(circle, rgba(29,78,216,.9) 0%, rgba(29,78,216,0) 70%);
}
.payment-card-maya .payment-card-glow{
    background:radial-gradient(circle, rgba(22,163,74,.9) 0%, rgba(22,163,74,0) 70%);
}
.payment-card > *{
    position:relative;
    z-index:1;
}
.payment-card-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.payment-card-gcash .payment-card-badge{
    color:#1d4ed8;
    background:#dbeafe;
}
.payment-card-maya .payment-card-badge{
    color:#15803d;
    background:#dcfce7;
}
.payment-qr{
    width:100%;
    max-width:220px;
    margin:0 auto 10px;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(15,23,42,.10);
    transition:transform .22s ease, box-shadow .22s ease;
}
.payment-card:hover .payment-qr,
.payment-card.is-hovered .payment-qr{
    transform:scale(1.02);
    box-shadow:0 18px 34px rgba(15,23,42,.16);
}
.payment-name{
    font-size:14px;
    color:#334155;
    line-height:1.45;
    margin-bottom:10px;
}
.payment-name strong{
    color:#0f172a;
}
.payment-actions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}
.payment-actions .btn{
    min-width:96px;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.payment-actions .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(15,23,42,.12);
}
@media (max-width: 900px){
    .dual-payment-box.premium-payment-ui{
        grid-template-columns:1fr;
    }
}


/* FULL ENTERPRISE MAYA HERO PAYMENT */
.dual-hero-payment.premium-payment-ui,
.dual-payment-box.premium-payment-ui{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
    align-items:stretch;
}
.hero-payment-card,
.payment-card{
    --mx:50%;
    --my:50%;
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid #dbe5f5;
    border-radius:24px;
    padding:16px 16px 14px;
    text-align:center;
    box-shadow:0 16px 36px rgba(15,23,42,.08);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    isolation:isolate;
    cursor:pointer;
}
.hero-payment-card:hover,
.payment-card:hover{
    transform:translateY(-5px) scale(1.01);
    box-shadow:0 24px 54px rgba(15,23,42,.14);
}
.hero-payment-card.active,
.payment-card.active{
    transform:translateY(-3px);
    border-color:#ef1d26;
    box-shadow:0 0 0 3px rgba(239,29,38,.10), 0 24px 54px rgba(15,23,42,.14);
}
.hero-payment-card.active::after,
.payment-card.active::after{
    content:'Selected';
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    padding:6px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    color:#fff;
    background:linear-gradient(90deg,#ef1d26 0%,#1746df 100%);
    box-shadow:0 8px 18px rgba(23,70,223,.18);
}
.payment-card-glow{
    position:absolute;
    width:180px;
    height:180px;
    left:50%;
    top:-70px;
    transform:translateX(-50%);
    filter:blur(40px);
    opacity:.18;
    z-index:0;
    pointer-events:none;
}
.payment-card-gcash .payment-card-glow{
    background:radial-gradient(circle, rgba(29,78,216,.9) 0%, rgba(29,78,216,0) 70%);
}
.payment-card-maya .payment-card-glow{
    background:radial-gradient(circle, rgba(22,163,74,.9) 0%, rgba(22,163,74,0) 70%);
}
.hero-payment-card > *,
.payment-card > *{
    position:relative;
    z-index:1;
}
.payment-card-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:12px;
}
.payment-card-gcash .payment-card-badge{
    color:#1d4ed8;
    background:#dbeafe;
}
.payment-card-maya .payment-card-badge{
    color:#15803d;
    background:#dcfce7;
}
.hero-payment-card .payment-qr,
.payment-card .payment-qr,
.hero-payment-card .gcash-qr{
    width:100%;
    max-width:220px;
    margin:0 auto 10px;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(15,23,42,.10);
    transition:transform .22s ease, box-shadow .22s ease;
}
.hero-payment-card:hover .payment-qr,
.hero-payment-card.active .payment-qr,
.payment-card:hover .payment-qr,
.payment-card.active .payment-qr{
    transform:scale(1.02);
    box-shadow:0 18px 34px rgba(15,23,42,.16);
}
.payment-name{
    font-size:14px;
    color:#334155;
    line-height:1.45;
    margin-bottom:10px;
}
.payment-name strong{
    color:#0f172a;
}
.payment-actions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}
.payment-actions .btn{
    min-width:96px;
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.payment-actions .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(15,23,42,.12);
}
.payment-card-ripple{
    position:absolute;
    border-radius:50%;
    transform:scale(0);
    background:rgba(23,70,223,.20);
    pointer-events:none;
    z-index:2;
}
.payment-card-maya .payment-card-ripple{
    background:rgba(22,163,74,.22);
}
.payment-card-ripple.animate{
    animation:paymentRipple .62s ease-out forwards;
}
@keyframes paymentRipple{
    from{transform:scale(0);opacity:.65;}
    to{transform:scale(2.4);opacity:0;}
}
.inline-payment-helper{
    margin-top:12px;
    border:1px solid #d8e3f5;
    border-radius:18px;
    background:#f8fbff;
    padding:12px 14px;
}
.inline-payment-title{
    font-weight:800;
    color:#0f2d68;
    margin-bottom:10px;
}
.inline-pay-panel{display:none;}
.inline-pay-panel.active{display:block;}
.inline-pay-badge{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    margin-bottom:8px;
}
.inline-pay-badge.cash{background:#ecfdf5;color:#166534;}
.inline-pay-badge.gcash{background:#dbeafe;color:#1d4ed8;}
.inline-pay-badge.maya{background:#dcfce7;color:#15803d;}
.inline-pay-badge.bank{background:#fef3c7;color:#92400e;}
.payment-method-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin-bottom:16px;
}
.payment-method-card{
    background:#fff;
    border:1px solid #dbe3f0;
    border-radius:16px;
    padding:14px;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
}
.payment-method-card .label{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    color:#64748b;
    margin-bottom:8px;
}
.payment-method-card .value{
    font-size:24px;
    font-weight:800;
    color:#0f2d68;
}
.payment-method-card .sub{
    font-size:13px;
    color:#64748b;
    margin-top:4px;
}
@media (max-width:900px){
    .dual-hero-payment.premium-payment-ui,
    .dual-payment-box.premium-payment-ui{
        grid-template-columns:1fr;
    }
}


/* Hero payment placement fix: put QR cards below intro text */
.hero-banner-inner{
    align-items:center;
}
.hero-payment-below{
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:22px !important;
}
.hero-payment-below .dual-hero-payment,
.hero-payment-below .dual-payment-box,
.hero-payment-below .gcash-box.dual-hero-payment{
    width:100% !important;
    max-width:760px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(220px, 1fr)) !important;
    gap:18px !important;
    padding:18px !important;
    box-sizing:border-box !important;
}
.hero-payment-below .hero-payment-card,
.hero-payment-below .payment-card{
    min-height:auto !important;
    height:auto !important;
    padding:16px !important;
}
.hero-payment-below .payment-qr,
.hero-payment-below .gcash-qr{
    max-width:190px !important;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
}
.hero-payment-below .payment-name,
.hero-payment-below .gcash-name{
    min-height:auto !important;
}
@media (min-width: 901px){
    .hero-banner-inner{
        display:grid !important;
        grid-template-columns:1fr !important;
    }
}
@media (max-width: 768px){
    .hero-payment-below .dual-hero-payment,
    .hero-payment-below .dual-payment-box,
    .hero-payment-below .gcash-box.dual-hero-payment{
        grid-template-columns:1fr !important;
        max-width:320px !important;
        padding:14px !important;
    }
    .hero-payment-below .payment-qr,
    .hero-payment-below .gcash-qr{
        max-width:210px !important;
    }
}


/* FINAL Apple-clean public UI polish */
:root{
    --apple-bg:#f5f7fb;
    --apple-card:#ffffff;
    --apple-text:#0f172a;
    --apple-muted:#64748b;
    --brand-red:#ef1d26;
    --brand-blue:#1746df;
}
body{
    background:radial-gradient(circle at top, #ffffff 0%, var(--apple-bg) 46%, #eef2f7 100%);
}
.hero-banner{
    background:linear-gradient(135deg, #ffffff 0%, #fffaf0 100%) !important;
    border:1px solid rgba(226,232,240,.85);
    box-shadow:0 24px 70px rgba(15,23,42,.08);
}
.hero-banner-inner{
    display:block !important;
}
.hero-copy,
.brand-copy{
    max-width:780px;
}
.hero-copy h1{
    letter-spacing:-.04em;
    color:var(--brand-red);
}
.hero-copy p{
    color:#334155;
    line-height:1.7;
}
.apple-clean-section{
    width:min(1220px, calc(100% - 32px));
    margin:18px auto 0;
}
.payment-shell{
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(18px);
    border:1px solid rgba(226,232,240,.9);
    border-radius:28px;
    box-shadow:0 24px 70px rgba(15,23,42,.08);
    padding:28px;
}
.payment-heading{
    text-align:center;
    margin-bottom:22px;
}
.payment-heading .eyebrow{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    background:#eef4ff;
    color:var(--brand-blue);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:12px;
}
.payment-heading h2{
    margin:0;
    font-size:clamp(28px, 4vw, 44px);
    line-height:1.05;
    letter-spacing:-.04em;
    color:var(--apple-text);
}
.payment-heading p{
    margin:12px auto 0;
    max-width:620px;
    color:var(--apple-muted);
    line-height:1.6;
}
.payment-container.premium-payment-ui{
    display:grid;
    grid-template-columns:repeat(2, minmax(260px, 1fr));
    gap:18px;
    max-width:760px;
    margin:0 auto;
}
.payment-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    border:1px solid #dbe5f5;
    border-radius:26px;
    padding:18px;
    text-align:center;
    box-shadow:0 18px 44px rgba(15,23,42,.08);
    cursor:pointer;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    isolation:isolate;
}
.payment-card:hover{
    transform:translateY(-5px);
    box-shadow:0 28px 65px rgba(15,23,42,.14);
}
.payment-card.active{
    border-color:var(--brand-red);
    box-shadow:0 0 0 4px rgba(239,29,38,.10), 0 28px 65px rgba(15,23,42,.14);
}
.payment-card.active::after{
    content:'Selected';
    position:absolute;
    top:14px;
    right:14px;
    z-index:4;
    padding:7px 11px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--brand-red),var(--brand-blue));
    color:white;
    font-weight:900;
    font-size:11px;
}
.payment-card-topline{
    display:flex;
    justify-content:center;
    gap:8px;
    min-height:34px;
    margin-bottom:10px;
}
.payment-card-badge,
.payment-status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}
.payment-card-badge{
    color:#1d4ed8;
    background:#dbeafe;
}
.payment-card-badge.maya{
    color:#15803d;
    background:#dcfce7;
}
.payment-status-pill{
    color:#be123c;
    background:#ffe4e6;
}
.payment-status-pill.subtle{
    color:#64748b;
    background:#f1f5f9;
}
.payment-qr{
    width:100%;
    max-width:230px;
    height:auto;
    object-fit:contain;
    border-radius:22px;
    box-shadow:0 14px 32px rgba(15,23,42,.10);
    transition:transform .22s ease, box-shadow .22s ease;
}
.payment-card:hover .payment-qr,
.payment-card.active .payment-qr{
    transform:scale(1.018);
    box-shadow:0 22px 44px rgba(15,23,42,.16);
}
.payment-name{
    color:#0f172a;
    font-weight:900;
    font-size:15px;
    line-height:1.45;
    margin:14px 0 10px;
}
.payment-actions{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}
.payment-actions .btn{
    min-width:94px;
    border-radius:14px;
    transition:transform .18s ease, box-shadow .18s ease;
}
.payment-actions .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(15,23,42,.12);
}
.payment-card-glow{
    position:absolute;
    width:220px;
    height:220px;
    left:50%;
    top:-90px;
    transform:translateX(-50%);
    filter:blur(48px);
    opacity:.16;
    z-index:0;
    pointer-events:none;
}
.payment-card-gcash .payment-card-glow{background:radial-gradient(circle, rgba(29,78,216,.95), rgba(29,78,216,0) 70%);}
.payment-card-maya .payment-card-glow{background:radial-gradient(circle, rgba(22,163,74,.95), rgba(22,163,74,0) 70%);}
.payment-card > *{position:relative;z-index:1;}
.payment-card-ripple{
    position:absolute;
    border-radius:50%;
    transform:scale(0);
    background:rgba(23,70,223,.20);
    pointer-events:none;
    z-index:2;
}
.payment-card-maya .payment-card-ripple{background:rgba(22,163,74,.22);}
.payment-card-ripple.animate{animation:paymentRipple .62s ease-out forwards;}
@keyframes paymentRipple{
    from{transform:scale(0);opacity:.65;}
    to{transform:scale(2.4);opacity:0;}
}
.card{
    box-shadow:0 18px 44px rgba(15,23,42,.07);
}
@media (max-width:900px){
    .payment-container.premium-payment-ui{
        grid-template-columns:1fr;
        max-width:360px;
    }
    .payment-shell{
        padding:22px 16px;
    }
}


/* 7-day reservation date limit */
.date-card-item.disabled,
.date-card-item.unavailable,
.date-card-item:disabled{
    background:#f1f5f9 !important;
    border-color:#cbd5e1 !important;
    color:#94a3b8 !important;
    cursor:not-allowed !important;
    opacity:.72 !important;
    box-shadow:none !important;
    transform:none !important;
}
.date-card-item.disabled .date-card-dow,
.date-card-item.unavailable .date-card-dow,
.date-card-item:disabled .date-card-dow,
.date-card-item.disabled .date-card-day,
.date-card-item.unavailable .date-card-day,
.date-card-item:disabled .date-card-day,
.date-card-item.disabled .date-card-slots,
.date-card-item.unavailable .date-card-slots,
.date-card-item:disabled .date-card-slots{
    color:#94a3b8 !important;
}
.date-card-item.disabled .date-card-slots .dot,
.date-card-item.unavailable .date-card-slots .dot,
.date-card-item:disabled .date-card-slots .dot{
    background:#94a3b8 !important;
}
.date-card-item.disabled:hover,
.date-card-item.unavailable:hover,
.date-card-item:disabled:hover{
    transform:none !important;
    box-shadow:none !important;
}


/* Strong mobile/tablet disabled date-card styling */
.date-card-item.mobile-disabled,
.date-card-item.disabled,
.date-card-item.unavailable,
.date-card-item[disabled]{
    background:#eef2f7 !important;
    border-color:#cbd5e1 !important;
    color:#94a3b8 !important;
    cursor:not-allowed !important;
    pointer-events:auto !important;
    opacity:.68 !important;
    filter:grayscale(1) !important;
    box-shadow:none !important;
}
.date-card-item.mobile-disabled *,
.date-card-item.disabled *,
.date-card-item.unavailable *,
.date-card-item[disabled] *{
    color:#94a3b8 !important;
}
.date-card-item.mobile-disabled .dot,
.date-card-item.disabled .dot,
.date-card-item.unavailable .dot,
.date-card-item[disabled] .dot{
    background:#94a3b8 !important;
}
@media (hover:none), (pointer:coarse){
    .date-card-item.mobile-disabled,
    .date-card-item.disabled,
    .date-card-item.unavailable,
    .date-card-item[disabled]{
        background:#e5e7eb !important;
        border-color:#cbd5e1 !important;
        transform:none !important;
    }
}


/* PUBLIC INDEX MOBILE STAFF-LIKE LAYOUT */
@media (max-width: 768px){
    body{background:#f5f7fb !important;overflow-x:hidden !important;}

    .container,.main-container,.page-wrap,.client-wrap,.reservation-wrapper{
        width:100% !important;max-width:100% !important;
        padding-left:12px !important;padding-right:12px !important;
        box-sizing:border-box !important;
    }

    .hero-banner,.payment-section,.payment-shell,.client-reservation-card,.reservation-card,.available-courts-card,.card{
        width:100% !important;max-width:100% !important;border-radius:18px !important;
        margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important;
    }

    .hero-banner{padding:18px 14px !important;}

    .hero-copy h1,.brand-copy h1{
        font-size:28px !important;line-height:1.1 !important;letter-spacing:-.03em !important;
    }

    .hero-copy p,.brand-copy p{font-size:14px !important;line-height:1.55 !important;}

    .court-select-grid,.court-selector-grid,.court-cards,.court-card-grid,.client-court-grid{
        display:grid !important;grid-template-columns:1fr !important;gap:16px !important;width:100% !important;
    }

    .court-select-card,.court-option-card,.client-court-card{
        width:100% !important;max-width:100% !important;min-height:auto !important;
        padding:18px !important;border-radius:20px !important;
        background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
        border:1px solid #cbdaf2 !important;box-shadow:none !important;box-sizing:border-box !important;
    }

    .court-select-card.active,.court-option-card.active,.client-court-card.active,
    .court-select-card.selected,.court-option-card.selected,.client-court-card.selected{
        border:2px solid #ef1d26 !important;box-shadow:0 0 0 4px rgba(239,29,38,.08) !important;
    }

    .court-select-card h3,.court-option-card h3,.client-court-card h3,.court-card-title,.court-name{
        font-size:23px !important;line-height:1.18 !important;font-weight:900 !important;
        color:#0f2d68 !important;margin-bottom:10px !important;
        white-space:normal !important;overflow:visible !important;text-overflow:unset !important;
    }

    .court-select-card p,.court-option-card p,.client-court-card p,.court-description,.court-desc,.court-desc-plain{
        font-size:17px !important;line-height:1.42 !important;color:#475569 !important;
        max-height:none !important;height:auto !important;overflow:visible !important;
        display:block !important;-webkit-line-clamp:unset !important;white-space:normal !important;
    }

    .court-price,.price-tag,.court-rate,.rate-badge{
        display:inline-flex !important;font-size:20px !important;font-weight:900 !important;
        padding:10px 16px !important;border-radius:999px !important;
        background:#eef4ff !important;color:#1746df !important;margin-top:12px !important;
    }

    .date-card-row,.date-cards-row,.date-picker-cards{
        display:grid !important;grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:12px !important;width:100% !important;
    }

    .date-card-item{
        width:100% !important;min-height:118px !important;border-radius:18px !important;
        padding:14px 8px !important;box-sizing:border-box !important;
    }

    .date-card-dow{font-size:16px !important;font-weight:900 !important;}
    .date-card-day{font-size:42px !important;line-height:1 !important;font-weight:900 !important;}
    .date-card-slots{font-size:16px !important;}

    .form-grid,.client-info-grid,.payment-grid,.reservation-form-grid,.two-col{
        display:grid !important;grid-template-columns:1fr !important;gap:14px !important;
    }

    input,select,textarea{min-height:44px !important;font-size:16px !important;border-radius:11px !important;}
    label{font-size:14px !important;font-weight:800 !important;}

    .summary-box,.pricing-summary{border-radius:16px !important;padding:14px !important;font-size:15px !important;}

    .btn,button,input[type="submit"]{min-height:44px !important;border-radius:12px !important;font-size:14px !important;}

    .reservation-actions,.form-actions{display:flex !important;flex-direction:column !important;gap:10px !important;}
    .reservation-actions .btn,.form-actions .btn,.reservation-actions button,.form-actions button{width:100% !important;}

    .available-courts-card .court-card,.available-courts-card .court-card-body{
        width:100% !important;max-width:100% !important;box-sizing:border-box !important;
    }

    .available-courts-card .court-grid{
        display:grid !important;grid-template-columns:1fr !important;gap:16px !important;
    }

    .available-courts-card .court-slider,.available-courts-card .thumb-placeholder{border-radius:18px !important;}
}

@media (max-width: 420px){
    .court-select-card h3,.court-option-card h3,.client-court-card h3,.court-card-title,.court-name{font-size:21px !important;}
    .court-select-card p,.court-option-card p,.client-court-card p,.court-description,.court-desc,.court-desc-plain{font-size:16px !important;}
    .date-card-row,.date-cards-row,.date-picker-cards{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
    .date-card-day{font-size:38px !important;}
}