/* ===== Base & brand ===== */
:root{
  --maxw: 960px;
  --brand-green: #1b8f4c;
}

*{ box-sizing: border-box; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; color:#111;
  background: url("https://www.suriyakantha.org/images/data/image/slider/44/custom_ori_44-1800-900-c.jpg")
              center / cover no-repeat fixed;
}
@media (max-width:800px){
  body{ background-attachment:scroll; background-position:center top; }
}

.container{ max-width:var(--maxw); margin:0 auto; padding:24px; }

header{ position:relative; display:flex; justify-content:space-between; align-items:center; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:56px; width:auto; display:block; }
h1{ font-size:28px; margin:0; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.6); }

.lang-switch{
  position:absolute; right:0; top:0; display:flex; gap:6px; align-items:center;
  padding:6px; border-radius:18px; background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
}
.lang-switch a{
  font-weight:700; text-decoration:none; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.7); color:#fff; background:rgba(255,255,255,.1); font-size:12px;
}
.lang-switch a.active{ background:#fff; color:#111; border-color:#fff; }
.lang-switch a:hover{ opacity:.9; }

/* ===== Cards / form ===== */
.card{
  background: rgba(255,255,255,.88);
  border:1px solid rgba(226,226,234,.60);
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:16px; margin-bottom:16px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:800px){ .grid{ grid-template-columns:1fr; } }

label{ display:block; font-weight:600; margin:8px 0 6px; }
input,select,textarea{
  width:100%; padding:10px 12px; border:1px solid #e2e2ea; border-radius:10px; background:#fff;
}
button,.btn{ display:inline-block; padding:10px 16px; border:0; border-radius:999px; background:#111; color:#fff; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-secondary{ background:#525252; }
.note{ color:#555; font-size:14px; }
footer{ padding:24px; text-align:center; color:#777; }
.step h2{ margin-top:0; color:#111; }

@media (max-width:820px){
  .container{ padding:16px; }
  .card{ padding:14px; border-radius:12px; }
  .brand img{ height:44px; }
  h1{ font-size:22px; line-height:1.1; }
}

/* ===== Calendar ===== */
.calendar{ display:grid; gap:8px; }

.cal-controls{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cal-title{ font-size:clamp(18px,5.5vw,24px); font-weight:800; letter-spacing:.2px; }
.cal-controls .btn,.cal-controls .btn-secondary{
  width:36px; height:36px; padding:0; border-radius:999px; line-height:36px; font-size:18px;
}

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{
  padding:10px; border-radius:10px; background:#fff; text-align:center; cursor:pointer;
  border:1px solid #eee; min-height:64px; display:flex; flex-direction:column; justify-content:center;
  transition:transform .06s ease, background-color .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cal-cell .small{ font-size:12px; color:#666; }
.cal-cell.muted{ color:#bbb; background:#fcfcfc; }
.cal-cell.disabled{ color:#bbb; background:#f2f2f2; pointer-events:none; }
.cal-cell:not(.disabled):hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); background:#f7fff9; }
.cal-cell.selected{
  background:var(--brand-green); color:#fff; border-color:var(--brand-green);
}
.cal-cell.selected .small{ color:#eaffef; }

@media (max-width:480px){
  .cal-grid{ gap:4px; }
  .cal-cell{ min-height:48px; padding:6px 4px; border-radius:10px; }
  .cal-cell > div:first-child{ font-size:15px; }
  .cal-cell .small{ font-size:11px; }
}
@media (max-width:360px){
  .cal-cell{ min-height:44px; padding:5px 3px; }
  .cal-cell > div:first-child{ font-size:14px; }
  .cal-cell .small{ font-size:10px; }
}

/* ===== Step-1 experience cards ===== */
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:820px){ .exp-grid{ grid-template-columns:1fr; } }

.opt-card{
  display:block; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:14px; border:1px solid #e2e2ea; background:rgba(255,255,255,.92);
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  transition:transform .06s ease, background-color .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.opt-card:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); background:#f7fff9; }
.opt-card.selected{ background:var(--brand-green); border-color:var(--brand-green); color:#fff; }
.opt-card.selected:hover{ transform:none; box-shadow:none; }
.opt-card:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(27,143,76,.25); }
.opt-title{ font-weight:800; font-size:16px; margin-bottom:4px; color:#111; }
.opt-card.selected .opt-title{ color:#fff; }

/* ===== Time slots (Step-2) ===== */
.slot{
  padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px;
  display:flex; align-items:center; justify-content:space-between; margin:6px 0;
  transition:transform .06s ease, background-color .12s ease, box-shadow .12s ease, border-color .12s ease;
  background:#fff;
}
.slot:not(.full):hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); background:#f7fff9; }
.slot.full{ opacity:.5; pointer-events:none; }
.slot.selected{ background:var(--brand-green); border-color:var(--brand-green); color:#fff; }
.slot.selected label{ color:#fff; }

/* ===== Summary: only dynamic values pop ===== */
.summary{ color:#111; text-transform:none; font-weight:inherit; letter-spacing:normal; }
.summary .sel-hi{
  color:var(--brand-green); text-transform:uppercase; font-weight:900; letter-spacing:.3px;
}
/* --- Calendar fail-safe (forces layout even if something overrides it) --- */
#cal{ display:block !important; }
#cal > .cal-controls{
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important;
}
#cal > .cal-grid{
  display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:6px !important;
}
#cal .cal-cell{
  display:flex !important; flex-direction:column !important; justify-content:center !important;
  min-height:64px; text-align:center; background:#fff; border:1px solid #eee; border-radius:10px; cursor:pointer;
}
#cal .cal-cell.muted{ color:#bbb; background:#fcfcfc; }
#cal .cal-cell.disabled{ color:#bbb; background:#f2f2f2; pointer-events:none; }

/* --- Fix: keep selected states green even on hover --- */

/* Calendar */
.cal-cell.selected{
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color:#fff !important;
}
.cal-cell.selected:hover{
  background: var(--brand-green) !important;   /* don't fade back to white */
  box-shadow:none !important;
  transform:none !important;
}

/* Time slots */
.slot.selected{
  background: var(--brand-green) !important;
  border-color: var(--brand-green) !important;
  color:#fff !important;
}
.slot.selected *{ color:#fff !important; }      /* label text, etc. */
.slot.selected:hover{
  background: var(--brand-green) !important;    /* don't fade on hover */
  box-shadow:none !important;
  transform:none !important;
}

/* Nicer hover when NOT selected */
.slot:not(.full):not(.selected):hover{
  background:#f7fff9 !important;
}

/* Make the whole row behave like a big radio label */
.slot label{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  cursor:pointer;
}

/* Brand the native radio and remove the blue ring */
.slot input[type="radio"]{
  accent-color: var(--brand-green); /* supported in modern browsers */
  outline:none;
}
.slot input[type="radio"]:focus{ outline:none; }

/* Provide an accessible focus style on the row instead */
.slot:focus-within{
  box-shadow: 0 0 0 3px rgba(27,143,76,.25);
  border-color: var(--brand-green);
}
/* --- Time-slot row layout fix: keep radio + time on the left --- */
.slot{ justify-content: flex-start !important; }        /* override any space-between */
.slot label{
  display:flex;
  align-items:center;
  justify-content:flex-start !important;               /* ensure left aligned */
  gap:12px;
  width:100%;
  cursor:pointer;
  text-align:left;
}
.slot label input[type="radio"]{ margin-right:12px; }

/* Brand radio + remove blue ring; show row focus instead */
.slot input[type="radio"]{ accent-color: var(--brand-green); outline:none; }
.slot input[type="radio"]:focus{ outline:none; }
.slot:focus-within{
  box-shadow: 0 0 0 3px rgba(27,143,76,.25);
  border-color: var(--brand-green);
}
/* Hide native radio; the whole row is the control */
.slot input[type="radio"]{
  position: absolute;           /* keep in DOM for form submit */
  left: -9999px;                /* visually hidden */
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Tidy row layout with no dot */
.slot{ justify-content:flex-start !important; }
.slot label{
  display:flex; align-items:center; gap:0;     /* no gap since no dot */
  width:100%; cursor:pointer; text-align:left;
}

/* Accessible row focus (replaces browser blue ring) */
.slot:focus-visible,
.slot:focus-within{
  box-shadow: 0 0 0 3px rgba(27,143,76,.25);
  border-color: var(--brand-green);
}
/* Hide native radio; the whole row is the control */
.slot input[type="radio"]{
  position:absolute; left:-9999px; width:1px; height:1px;
  opacity:0; pointer-events:none;
}
/* --- Flat selected time-slot (no outline/ring) --- */
.slot.selected{
  background: var(--brand-green) !important;
  color:#fff !important;
  border-color: var(--brand-green) !important; /* same as bg -> looks flat */
  box-shadow:none !important;
}
.slot.selected *{ color:#fff !important; }

/* remove the green focus ring on rows */
.slot:focus-within,
.slot:focus-visible{
  box-shadow:none !important;
  outline:none !important;
}
/* Step 3: smaller sub-labels for Adults / Children / Notes */
#step3 .ticket-label,
#step3 label.label-sm{
  font-size: 14px;
  font-weight: 600;   /* lighter than section titles */
  color: #333;
}

/* (optional) tidy structure if you add the classes below */
#step3 .ticket-row{
  display:flex; align-items:center; gap:10px; margin:6px 0;
}
#step3 .ticket-label{ min-width:180px; }

#step2 .note.muted { display: none !important; }

/* === Calendar: add spacing + localized weekday row ======================= */
.cal-controls{ margin-bottom:14px; } /* more space above the grid */

/* Row of localized weekday labels (requires .cal-head from JS) */
.cal-head{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:6px;
  margin:4px 0 10px;          /* extra breathing room above dates */
  color:#555;
  font-weight:700;
}
.cal-head div{
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
@media (max-width:480px){
  .cal-head div{ font-size:11px; }
}

/* Fail-safe in case something overrides #cal layout */
#cal > .cal-head{
  display:grid !important;
  grid-template-columns:repeat(7,1fr) !important;
  gap:6px !important;
  margin:4px 0 10px !important;
}

/* === Step 3: consent checkbox layout & styling =========================== */
/* If your HTML wraps the checkbox + text in a .consent-wrap container,
   this grid will align them nicely. */
#step3 .consent-wrap{
  display:grid;
  grid-template-columns:22px 1fr; /* checkbox | text */
  align-items:flex-start;
  gap:12px;
  margin:12px 0 4px;
}
#step3 .consent-wrap input[type="checkbox"]{
  width:18px; height:18px;
  margin:3px 0 0 0;
  accent-color: var(--brand-green);
}
#step3 .consent-wrap .consent-text{
  margin:0;
  color:#111;
  font-size:15px;
  line-height:1.45;
}
@media (max-width:600px){
  #step3 .consent-wrap .consent-text{ font-size:14px; }
}

/* --- Safari fix: consent label (checkbox + long text) --- */
#step3 .consent-label{
  display: grid !important;            /* override earlier flex */
  grid-template-columns: 1.25rem 1fr;  /* checkbox | text */
  column-gap: 10px;
  align-items: start;
  line-height: 1.35;
  max-width: 100%;
  white-space: normal !important;      /* just in case something sets nowrap */
  overflow-wrap: anywhere;             /* wrap long words on small screens */
}

#step3 .consent-label input[type="checkbox"]{
  /* makes the box crisp on iOS/Safari */
  -webkit-appearance: checkbox;
  appearance: checkbox;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;                           /* avoid weird right-hand offset */
  accent-color: var(--brand-green);    /* supported on modern Safari */
}

/* if accent-color isn't supported, keep a decent fallback */
@supports not (accent-color: var(--brand-green)) {
  #step3 .consent-label input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid var(--brand-green);
    border-radius: 4px;
    position: relative;
  }
  #step3 .consent-label input[type="checkbox"]:checked{
    background: var(--brand-green);
  }
  #step3 .consent-label input[type="checkbox"]:checked::after{
    content: "";
    position: absolute;
    left: 4px; top: 0px;
    width: 6px; height: 10px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
  }
}