/* Waseef Sports Booking - final unified product layer */
:root {
    --waseef-blue:#0067b1; --waseef-magenta:#b1005d; --waseef-gold:#ba8748;
    --brand:var(--waseef-blue); --brand-700:#00518c; --brand-900:#063a5a;
    --aooent:var(--waseef-magenta); --gold:var(--waseef-gold); --ink:#122a3a; --muted:#667d8c;
    --line:#dce7ed; --canvas:#f4f8fb; --surface:#fff;
    --radius-sm:10px; --radius:16px; --radius-lg:22px;
    --shadow-sm:0 5px 16px rgba(13,54,78,.07);
    --shadow:0 18px 48px rgba(13,54,78,.11);
}
* { box-sizing:border-box; }
html { background:var(--canvas); }
body { color:var(--ink)!important; background:linear-gradient(180deg,#f9fbfd 0,#f2f7fa 100%)!important; font-family:"Waseef Neo","Segoe UI",Arial,sans-serif!important; }
body::before { position:fixed; top:0; left:0; right:0; z-index:1000; height:4px; }

/* One header language across Bootstrap 3, Bootstrap 4 and legacy navigation. */
.navbar,.topnav { min-height:72px!important; margin-bottom:24px!important; padding:10px clamp(16px,4vw,44px)!important; border:0!important; border-radius:0 0 16px 16px!important; background:rgba(255,255,255,.98)!important; box-shadow:0 8px 26px rgba(18,55,78,.08)!important; }
.navbar .container-fluid { padding:0!important; }
.navbar-brand { display:flex!important; align-items:center; min-height:50px; color:var(--brand)!important; font-size:15px!important; font-weight:800!important; }
.navbar-brand img,.topnav img { width:auto!important; height:52px!important; object-fit:contain; }
.navbar-nav>li>a,.nav-link { min-height:42px; padding:11px 14px!important; border-radius:9px; color:#3f5868!important; font-size:13px!important; font-weight:700!important; }
.navbar-nav>li>a:hover,.nav-link:hover { color:var(--brand)!important; background:#edf7fd!important; }
.navbar-toggle,.navbar-toggler { border:1px solid var(--line)!important; border-radius:9px!important; background:#fff!important; }

/* Shared page frames and surfaces. */
.container { max-width:1120px; }
.rectangle,.location-container,.panel.panel-default,.form-signin { border:1px solid rgba(220,231,237,.95)!important; border-radius:var(--radius)!important; background:var(--surface)!important; box-shadow:var(--shadow)!important; }
.panel-heading { min-height:64px; display:flex; align-items:center; padding:18px 22px!important; border:0!important; border-radius:var(--radius) var(--radius) 0 0!important; background:linear-gradient(120deg,var(--brand-900),var(--brand))!important; }
.panel-heading h4,.panel-heading .panel-title { margin:0!important; color:#fff!important; font-size:20px!important; font-weight:800!important; }

/* Clear field and action styling. */
.form-control,input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],select,textarea { min-height:46px; border:1px solid #ccdce5!important; border-radius:10px!important; background:#fbfdfe!important; color:var(--ink)!important; }
.form-control:focus,input:focus,select:focus,textarea:focus { border-color:var(--brand)!important; outline:0!important; box-shadow:0 0 0 3px rgba(0,104,179,.12)!important; }
.button,.btn-primary,.btn-submit,.BTM1,input[type=submit].btn,input[type=submit].button { min-height:46px; border:0!important; border-radius:10px!important; background:linear-gradient(120deg,var(--brand-700),var(--brand))!important; color:#fff!important; font-weight:800!important; box-shadow:0 7px 17px rgba(0,104,179,.20)!important; }
.button:hover,.btn-primary:hover,.btn-submit:hover,.BTM1:hover { background:linear-gradient(120deg,var(--brand-900),var(--brand-700))!important; transform:translateY(-1px); }

/* Tables read like modern data products. */
.table-responsive { border:1px solid var(--line)!important; border-radius:12px!important; background:#fff; }
.table,.Tables,.FootballTables { border:0!important; border-radius:12px!important; box-shadow:none!important; }
.table th,.Tables th,.FootballTables th { padding:14px 13px!important; background:var(--brand-900)!important; color:#fff!important; font-size:12px!important; letter-spacing:.02em; }
.table td,.Tables td,.FootballTables td { padding:13px!important; border-bottom:1px solid #e8eff3!important; background:#fff!important; color:var(--ink)!important; }
.table tr:nth-child(even) td,.Tables tr:nth-child(even) td,.FootballTables tr:nth-child(even) td { background:#f7fafc!important; }

/* Dedioated cluster and court chooser. */
.court-screen .rectangle { width:min(calc(100% - 28px),1080px)!important; max-width:1080px!important; margin:32px auto 52px!important; padding:clamp(22px,4vw,38px)!important; }
.court-screen .court-header { margin-bottom:26px; }
.court-screen .court-header .eyebrow { display:block; margin-bottom:7px; color:var(--brand); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.court-screen .court-header h1 { margin:0; color:var(--ink); font-size:clamp(24px,4vw,34px); font-weight:850; }
.court-screen .court-header p { margin:8px 0 0; color:var(--muted); font-size:14px; }
.court-screen .court-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.court-screen .cluster-card { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); transition:.2s ease; }
.court-screen .cluster-card:hover { transform:translateY(-3px); border-color:#afd4ea; box-shadow:0 14px 28px rgba(0,104,179,.12); }
.court-screen .cluster-visual { position:relative; height:150px; padding:14px; overflow:hidden; background:linear-gradient(145deg,#eaf5fb,#f8fbfd); }
.court-screen .cluster-visual img { width:100%; height:100%; object-fit:contain; border-radius:10px; }
.court-screen .cluster-badge { position:absolute; top:13px; left:13px; padding:6px 9px; border-radius:20px; background:rgba(6,58,90,.92); color:#fff; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.court-screen .court-actions { display:grid; gap:8px; padding:14px; }
.court-screen .court-link { position:relative; display:flex; min-height:48px; align-items:center; padding:10px 42px 10px 13px; border:1px solid #cee0ea; border-radius:10px; background:#fff; color:var(--ink)!important; font-size:13px; font-weight:800; text-decoration:none!important; }
.court-screen .court-link::after { content:"\2192"; position:absolute; right:12px; display:flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:50%; background:#eaf5fc; color:var(--brand); }
.court-screen .court-link:hover { border-color:var(--brand); background:#f4faff; color:var(--brand-900)!important; }
.court-screen .court-link:hover::after { background:var(--brand); color:#fff; }

/* Booking progression and selections. */
.booking-screen .slot-grid tr { cursor:pointer; }
.booking-screen .slot-grid tr.slot-selected { border:2px solid var(--brand)!important; background:#f5fbff!important; box-shadow:0 5px 14px rgba(0,104,179,.11)!important; }
.booking-screen .slot-grid tr.slot-selected label { color:var(--ink)!important; }
.booking-screen .slot-grid input[type=checkbox]:checked { border:6px solid var(--brand)!important; }
.booking-screen .panel-button-row .btn-submit { min-height:54px!important; }

@media (max-width:767px) {
    .navbar,.topnav { min-height:62px!important; padding:7px 12px!important; }
    .navbar-brand img,.topnav img { height:44px!important; }
    .panel-heading { min-height:58px; padding:16px!important; }
    .court-screen .rectangle { width:calc(100% - 20px)!important; margin:18px auto 34px!important; padding:20px 14px!important; }
    .court-screen .court-grid { grid-template-columns:1fr; gap:12px; }
    .court-screen .cluster-card { display:grid; grid-template-columns:118px minmax(0,1fr); }
    .court-screen .cluster-visual { height:auto; min-height:128px; padding:10px; }
    .court-screen .cluster-badge { top:8px; left:8px; }
    .court-screen .court-actions { align-content:center; padding:10px; }
    .court-screen .court-link { min-height:44px; font-size:12px; }
}

/* Waseef oorporate color language across the portal */
body::before { background:linear-gradient(90deg,var(--waseef-blue) 0 72%,var(--waseef-magenta) 72% 88%,var(--waseef-gold) 88% 100%)!important; }
.panel-heading { position:relative; }
.panel-heading::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--waseef-magenta) 0 22%,var(--waseef-gold) 22% 34%,transparent 34%); }
.button:focus,.btn-primary:focus,.btn-submit:focus,.BTM1:focus { box-shadow:0 0 0 3px rgba(177,0,93,.18),0 7px 17px rgba(0,103,177,.20)!important; }
input[type=checkbox],input[type=radio] { accent-color:var(--waseef-magenta); }
.booking-screen .slot-grid tr.slot-selected { border-color:var(--waseef-magenta)!important; box-shadow:0 5px 14px rgba(177,0,93,.11)!important; }
.booking-screen .slot-grid input[type=checkbox]:checked { border-color:var(--waseef-magenta)!important; }
.booking-screen .date-section::before,.booking-screen .slots-section::before { border-left:3px solid var(--waseef-gold); padding-left:9px; }
.navbar-nav>li>a:hover,.nav-link:hover { box-shadow:inset 0 -2px 0 var(--waseef-magenta); }
.table th,.Tables th,.FootballTables th { border-bottom:3px solid var(--waseef-gold)!important; }
.status-screen .panel.panel-default::before { background:rgba(0,103,177,.10); color:var(--waseef-blue); box-shadow:0 0 0 4px rgba(186,135,72,.14); }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--waseef-magenta)!important; outline-offset:2px; }
/* Refined cluster directory */
.court-screen .rectangle{width:min(calc(100% - 40px),1100px)!important;max-width:1100px!important;margin:46px auto 70px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}.court-screen .court-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,430px);column-gap:60px;align-items:end;margin:0 0 30px;padding:0 4px}.court-screen .court-header .eyebrow{grid-column:1/-1;margin-bottom:10px}.court-screen .court-header h1{font-size:clamp(32px,4.3vw,50px);letter-spacing:-.035em;line-height:1.05}.court-screen .court-header p{margin:0 0 3px;font-size:15px;line-height:1.65}.court-screen .court-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.court-screen .cluster-card{border:1px solid #d7e5ed;border-radius:22px;box-shadow:0 14px 35px rgba(13,54,78,.075)}.court-screen .cluster-card:hover{transform:translateY(-5px);border-color:#9bc9e2;box-shadow:0 22px 46px rgba(0,103,177,.13)}.court-screen .cluster-visual{height:210px;padding:28px;background:radial-gradient(circle at 50% 52%,#fff 0 34%,transparent 35%),linear-gradient(145deg,#edf7fc,#f8fbfd)}.court-screen .cluster-visual img{object-fit:contain;border-radius:0}.court-screen .court-actions{gap:0;padding:8px 20px 18px}.court-screen .court-link{min-height:58px;padding:14px 48px 14px 2px;border:0;border-bottom:1px solid #e3edf2;border-radius:0;background:transparent;font-size:14px}.court-screen .court-link:last-child{border-bottom:0}.court-screen .court-link:after{right:2px;width:32px;height:32px}.court-screen .court-link:hover{border-color:#e3edf2;background:transparent;color:#0067b1!important}
@media(max-width:760px){.court-screen .rectangle{width:calc(100% - 22px)!important;margin:22px auto 40px!important}.court-screen .court-header{display:block;padding:0 7px;margin-bottom:22px}.court-screen .court-header p{margin-top:12px;font-size:14px;line-height:1.55}.court-screen .court-grid{grid-template-columns:1fr;gap:12px}.court-screen .cluster-card{display:grid;grid-template-columns:132px minmax(0,1fr);border-radius:18px}.court-screen .cluster-visual{height:auto;min-height:145px;padding:16px}.court-screen .court-actions{align-content:center;padding:12px 16px}.court-screen .court-link{min-height:52px;font-size:13px}}