:root{--navy:#0B1F33;--blue:#2E6F95;--sage:#71866A;--olive:#8C956E;--cream:#F6F3EA;--paper:#FFFEFB;--bg:#F1F3EF;--line:#D7DDD4;--ink:#162133;--muted:#6C776F;--accent:#6F8F72}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{text-decoration:none;color:inherit}.container{width:min(1120px,92%);margin:auto}
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
nav{height:72px;display:flex;justify-content:space-between;align-items:center;gap:18px}.brand{font-weight:900;display:flex;align-items:center;gap:10px}.mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--blue),var(--accent),var(--sage))}
.btn{border:0;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer}.primary{background:var(--accent);color:#fff}.dark{background:var(--navy);color:#fff}.light{background:#eef2f8;color:var(--navy)}
.hero{background:linear-gradient(135deg,#071a39,#0d4e9f);color:white;padding:72px 0}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}.hero h1{font-size:clamp(2.8rem,7vw,5.5rem);line-height:.95;margin:0 0 18px}.hero img{width:100%;border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
section{padding:70px 0}.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 14px 40px rgba(9,37,80,.08)}
.grid2{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
label{display:block;font-weight:800;font-size:.9rem;margin:11px 0 6px}input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;font:inherit;background:#fff}
textarea{min-height:90px}.ratebar{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.pill{padding:9px 12px;border-radius:999px;background:#eef6ff;border:1px solid #d5e6f4;font-weight:800}
.slot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:520px;overflow:auto}.slot{padding:13px;border:1px solid #cfe1ed;border-radius:13px;background:#eaf7ff;color:#1472a8;font-weight:900;cursor:pointer}.slot.selected{background:var(--olive);color:#17380b}.slot.booked,.slot.pending,.slot.blocked{cursor:not-allowed}.slot.booked{background:#125b35;color:#fff}.slot.pending{background:#fff3dd;color:#9a5a00}.slot.blocked{background:#e6e6e6;color:#777}
.summary-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #edf1f5}.total{font-size:1.3rem;font-weight:950}
.notice{padding:13px;border-radius:12px;background:#fff7fb;border-left:4px solid var(--accent);margin-top:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px}
.status{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:900;font-size:.8rem}.status.pending{background:#fff3dd;color:#9a5a00}.status.confirmed{background:#dff7e8;color:#145d36}.status.rejected{background:#ffe4e7;color:#a51e31}.status.completed{background:#e8eef7;color:#40516c}.status.cancelled{background:#eee;color:#666}
table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:16px}
footer{padding:25px;background:#071a39;color:#cbd8eb;text-align:center}
.hidden{display:none!important}.error{color:#b42318;font-weight:700}.success{color:#137333;font-weight:700}
@media(max-width:850px){.hero-grid,.grid2,.grid3{grid-template-columns:1fr}.slot-grid{grid-template-columns:1fr}section{padding:52px 0}}

.brand-logo{display:flex;align-items:center;flex-shrink:0}
.brand-logo img{display:block;width:150px;max-height:62px;object-fit:contain}
#bookMsg{display:block;margin-top:14px;padding:12px;border-radius:10px;min-height:1px}
#bookMsg.error{background:#ffe8e8;color:#a51e31;border:1px solid #ffc8cf}
#bookMsg.success{background:#e4f8eb;color:#145d36;border:1px solid #b7e8ca}
button:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:560px){.brand-logo img{width:105px;max-height:54px}nav{height:auto;min-height:72px;padding:10px 0;gap:8px}nav>div:last-child{display:flex;gap:6px;align-items:center}nav .btn{padding:10px 12px;font-size:.85rem}}
.cutoff-note{margin:10px 0 14px;color:var(--muted);font-size:.9rem;font-weight:700}

/* Dink Point customer aesthetic theme */
body{
  background:linear-gradient(180deg,#F7F5EF 0%,#EEF2ED 100%);
  min-height:100vh;
}
header{
  background:rgba(255,254,251,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(11,31,51,.06);
}
nav{height:84px}
.brand-logo{display:flex;align-items:center;flex-shrink:0}
.brand-logo img{
  width:150px;
  max-height:64px;
  object-fit:contain;
}
.hero{
  background:
    radial-gradient(circle at 80% 10%, rgba(113,134,106,.20), transparent 34%),
    linear-gradient(135deg,#0B1F33 0%,#173A57 60%,#2E6F95 100%);
}
.hero h1{color:#fff}
.hero p{color:#E9EFEA}
.hero img{
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.panel{
  background:rgba(255,254,251,.97);
  border:1px solid rgba(113,134,106,.20);
  box-shadow:0 18px 48px rgba(11,31,51,.08);
}
.primary{background:var(--accent);color:#fff}
.dark{background:var(--navy);color:#fff}
.light{background:#E9EEE7;color:var(--navy)}
.btn{transition:.18s ease}
.btn:hover{transform:translateY(-1px)}
.pill{
  background:#EDF2EC;
  border-color:#D6DED3;
  color:var(--navy);
}
input,select,textarea{
  background:#FFFEFB;
  border:1px solid #D6DDD3;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(113,134,106,.12);
}
.slot{
  background:#EDF4F7;
  color:#2E6F95;
  border-color:#D2E1E8;
}
.slot.selected{
  background:#DCE7D8;
  color:#294C2F;
  border-color:#A9BDA3;
}
.slot.pending{
  background:#F7EFD8;
  color:#7B651C;
}
.slot.booked{
  background:#48685B;
  color:#fff;
}
.slot.blocked{
  background:#ECEDE9;
  color:#767A72;
}
.notice{
  background:#F4F1E8;
  border-left-color:var(--sage);
}
.status.pending{background:#F7EFD8;color:#7B651C}
.status.confirmed{background:#E2EFE3;color:#2D6237}
.status.rejected{background:#ECE9E4;color:#6F5A50}
.status.completed{background:#E7EEF3;color:#315A72}
.status.cancelled{background:#EEEDEA;color:#67645E}
footer{background:var(--navy);color:#D8E1DE}
h2,h3{color:var(--navy)}
@media(max-width:560px){
  nav{height:76px}
  .brand-logo img{
    width:105px;
    max-height:52px;
  }
}

.booking-success-card{
  margin-top:14px;
  padding:18px;
  border-radius:16px;
  background:#F4F7F1;
  border:1px solid #D6E0D2;
}
.booking-success-card h3{margin:0 0 8px}
.booking-success-card p{margin:6px 0}
.screenshot-note{
  margin-top:12px !important;
  color:var(--navy);
  font-weight:700;
}
.message-page-btn{
  display:inline-flex;
  margin-top:12px;
  background:var(--navy);
  color:#fff;
}

/* Open Play slots are intentionally unavailable for normal court booking. */
.slot.openplay{
  cursor:not-allowed;
  background:#dce7d8;
  color:#294c2f;
  border-color:#a9bda3;
  box-shadow:inset 0 0 0 1px rgba(41,76,47,.08);
}