:root{
  /* Sampled from the supplied colour-code reference. */
  --navy-950:#04233C; --navy-800:#073A62; --navy-600:#0B4E73;
  --teal-500:#0B7C90; --orange-500:#2A5DDA; --amber-400:#00D3C5; --purple-600:#5959E9;
  --sand-50:#F2F2F2; --ink-900:#0B1B2B; --ink-500:#4C6577; --line:#DCE6EA;
  --red-500:#D64545; --green-600:#1E8E5A;
  --font-head:'Space Grotesk',sans-serif; --font-body:'Inter',sans-serif;
  --container:1100px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-body);color:var(--ink-900);background:var(--sand-50);line-height:1.55;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-head);font-weight:600;line-height:1.2;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px;}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:9px;font-weight:600;font-size:0.92rem;border:1px solid transparent;cursor:pointer;transition:background .2s ease,transform .15s ease,box-shadow .2s ease,filter .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:linear-gradient(90deg,var(--orange-500),var(--purple-600));color:#fff;border-radius:999px;box-shadow:0 6px 16px rgba(42,93,218,0.25);}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 10px 22px rgba(42,93,218,0.35);}
.btn-outline{background:transparent;border:1px solid var(--navy-800);color:var(--navy-800);}
.btn-outline:hover{background:var(--navy-800);color:#fff;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ---- top bar ---- */
.topbar{background:var(--navy-800);color:#fff;padding:20px 0;animation:fadeUp .5s ease both;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.topbar .brand{font-family:var(--font-head);font-weight:700;font-size:1.05rem;}
.topbar a.back{color:#CBD6E4;font-size:0.88rem;transition:color .15s ease;}
.topbar a.back:hover{color:#fff;}

/* ---- page shell ---- */
.page{padding:36px 0 72px;}
.page h1{font-size:1.9rem;color:var(--navy-800);margin-bottom:8px;animation:fadeUp .55s ease .05s both;}
.page > .wrap > p.sub{color:var(--ink-500);max-width:60ch;margin-bottom:32px;animation:fadeUp .55s ease .12s both;}
@media (max-width:600px){ .page h1{font-size:1.5rem;} .page{padding:26px 0 56px;} }

/* ---- booking layout ---- */
.booking-grid{display:grid;gap:24px;grid-template-columns:1fr;}
@media (min-width:700px) and (max-width:959px){ .booking-grid{gap:20px;} }
@media (min-width:960px){.booking-grid{grid-template-columns:1.1fr 1fr;align-items:start;}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;
  animation:fadeUp .55s ease .12s both;
  transition:box-shadow .25s ease,transform .25s ease;
}
.booking-grid .card:nth-child(2){ animation-delay:.22s; }
@media (min-width:700px){ .card:hover{ box-shadow:0 16px 32px rgba(4,35,60,0.08); } }
.card h2{font-size:1.15rem;color:var(--navy-800);margin-bottom:16px;}
@media (max-width:600px){ .card{padding:18px;border-radius:12px;} }

/* ---- form ---- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:0.85rem;font-weight:600;color:var(--navy-800);margin-bottom:6px;}
.field small{display:block;color:var(--ink-500);font-size:0.78rem;margin-top:4px;}
.field input, .field select, .field textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-family:var(--font-body);font-size:0.92rem;background:#fff;color:var(--ink-900);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--amber-400);box-shadow:0 0 0 3px rgba(0,211,197,0.18);
}
.row-2{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:560px){ .row-2{grid-template-columns:1fr 1fr;} }
.checkbox-field{display:flex;gap:10px;align-items:flex-start;background:var(--sand-50);border:1px solid var(--line);border-radius:10px;padding:14px;margin:18px 0;}
.checkbox-field input{width:auto;margin-top:3px;flex:none;}
.checkbox-field label{font-size:0.85rem;color:var(--ink-500);font-weight:400;}
.checkbox-field a{color:var(--orange-500);font-weight:600;transition:color .15s ease;}
.checkbox-field a:hover{color:var(--purple-600);}

/* ---- duration toggle (Full Day / Half Day) ---- */
.duration-toggle{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.duration-half-options{
  margin-top:0; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.duration-half-options.show{ max-height:140px; opacity:1; margin-top:10px; }
.duration-option{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
  cursor:pointer; background:#fff; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.duration-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.duration-option .duration-title{ font-weight:600; font-size:0.92rem; color:var(--navy-800); }
.duration-option .duration-sub{ font-size:0.78rem; color:var(--ink-500); white-space:nowrap; }
.duration-option input{
  flex:none; margin:0; width:18px; height:18px; accent-color: var(--purple-600);
}
.duration-option:has(input:checked), .duration-option.is-checked{
  border-color: var(--purple-600);
  background: linear-gradient(0deg, rgba(89,89,233,0.06), rgba(89,89,233,0.06));
  box-shadow:0 0 0 3px rgba(89,89,233,0.12);
}
.duration-option.small{ padding:10px 12px; }
.duration-summary{ display:block; margin-top:10px; color:var(--ink-500); font-size:0.82rem; min-height:1.2em; }
@media (max-width:480px){
  .duration-toggle{ grid-template-columns:1fr; }
  .duration-option .duration-sub{ white-space:normal; }
}

.alert{padding:14px 16px;border-radius:10px;font-size:0.88rem;margin-bottom:20px;animation:fadeUp .4s ease both;}
.alert-error{background:#FDEDED;border:1px solid #F2B8B8;color:#8A2020;}
.alert-success{background:#EAF7EF;border:1px solid #B7E3C6;color:var(--green-600);}

/* ---- calendar widget ---- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-head button{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:0.9rem;transition:background .15s ease,border-color .15s ease,transform .15s ease;}
.cal-head button:hover{background:var(--sand-50);border-color:var(--navy-600);}
.cal-head button:active{transform:scale(0.94);}
.cal-head span{font-weight:600;font-family:var(--font-head);color:var(--navy-800);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;transition:opacity .18s ease;}
.cal-grid.fading{opacity:0.35;}
.cal-grid .dow{font-size:0.72rem;color:var(--ink-500);padding:4px 0;}
.cal-day{padding:9px 0;border-radius:8px;font-size:0.85rem;background:var(--sand-50);cursor:pointer;border:1px solid transparent;transition:background .15s ease,color .15s ease,transform .12s ease;}
.cal-day.empty{background:transparent;cursor:default;}
.cal-day.past, .cal-day.lead-blocked{color:#C8CDD3;background:#F1F0EC;cursor:not-allowed;}
.cal-day.holiday{background:#FDEDED;color:#B14343;cursor:not-allowed;}
.cal-day.booked{background:#FBEBD6;color:#A15C10;cursor:not-allowed;}
.cal-day.available:hover{background:var(--amber-400);color:var(--navy-950);transform:scale(1.08);}
.cal-day.selected{background:var(--navy-800);color:#fff;transform:scale(1.05);}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:0.76rem;color:var(--ink-500);}
.cal-legend span{display:inline-flex;align-items:center;gap:6px;}
.cal-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.leg-avail{background:var(--sand-50);border:1px solid var(--line);}
.leg-booked{background:#FBEBD6;}
.leg-holiday{background:#FDEDED;}
.leg-selected{background:var(--navy-800);}

/* ---- tables (admin) ---- */
table{width:100%;border-collapse:collapse;font-size:0.88rem;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);}
th{color:var(--ink-500);font-weight:600;font-size:0.78rem;text-transform:uppercase;letter-spacing:.03em;}
tr{transition:background .15s ease;}
tr:hover td{background:#FAF9F6;}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:0.75rem;font-weight:600;}
.badge-pending{background:#FBEBD6;color:#A15C10;}
.badge-quoted{background:#E5EEFB;color:#28518C;}
.badge-confirmed{background:#E1F3E6;color:var(--green-600);}
.badge-rejected, .badge-cancelled{background:#FDEDED;color:#B14343;}

/* ---- admin login ---- */
.login-wrap{max-width:380px;margin:80px auto;padding:0 20px;}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;animation:fadeUp .5s ease both;}
.login-card h1{font-size:1.3rem;color:var(--navy-800);margin-bottom:6px;}
.login-card p{color:var(--ink-500);font-size:0.88rem;margin-bottom:22px;}
@media (max-width:480px){ .login-wrap{margin:48px auto;} .login-card{padding:24px;} }

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;animation:fadeUp .5s ease .08s both;}
.filters select, .filters input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:0.85rem;transition:border-color .15s ease;}
.filters select:focus, .filters input:focus{outline:none;border-color:var(--amber-400);}

/* ---- animated modal (Terms & Conditions, etc.) ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(4,35,60,0.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal-box{
  background:#fff; border-radius:14px; max-width:560px; width:100%;
  max-height:80vh; overflow:auto; padding:28px;
  transform:translateY(16px) scale(0.97); transition:transform .22s ease;
}
.modal-overlay.open .modal-box{ transform:translateY(0) scale(1); }
@media (max-width:600px){
  .modal-box{ padding:20px; border-radius:12px; max-height:85vh; }
}

/* ---- responsive polish: tables & filters on small/medium screens ---- */
@media (max-width:700px){
  .table-cards thead{display:none;}
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td{display:block;width:100%;}
  .table-cards tr{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:6px 4px;}
  .table-cards td{border-bottom:none;padding:8px 12px;}
  .table-cards td:before{content:attr(data-label);display:block;font-size:0.72rem;color:var(--ink-500);text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px;}
  .filters{flex-direction:column;align-items:stretch;}
  .filters select, .filters input, .filters .btn{width:100%;}
  .cal-grid{gap:3px;}
  .cal-day{padding:7px 0;font-size:0.8rem;}
}
@media (max-width:380px){
  .cal-day{padding:6px 0;font-size:0.75rem;border-radius:6px;}
  .cal-grid{gap:2px;}
}
@media (min-width:701px) and (max-width:959px){
  /* tablet: give the calendar a little more breathing room than mobile */
  .cal-day{padding:10px 0;}
}