/* ===========================================================================
   Meltemi booking — Resos-matched theme
   Terracotta background, dark charcoal card, white text, Comic Sans font.
   Re-theme by editing the variables in :root below.
   ========================================================================= */
:root{
  --brand:        #c0461f;   /* terracotta — accent, active step, buttons */
  --brand-dark:   #a63b18;   /* button hover */
  --page-bg:      #c0461f;   /* page background (same terracotta) */
  --card:         #3a3a3a;   /* dark charcoal booking card */
  --card-soft:    #474747;   /* inset panels (summary, success card) */
  --circle:       #565656;   /* guest number circles */
  --circle-step:  #7a7a7a;   /* inactive step circles */
  --text:         #ffffff;   /* primary text on the dark card */
  --muted:        #bdb7b3;   /* inactive labels / secondary text */
  --line:         #585352;   /* dividers on the dark card */
  --field-bg:     #ffffff;   /* form inputs */
  --field-text:   #2b2b2b;
  --ok:           #3ba776;
  --err:          #ffb1a8;
  --radius:       16px;
  --radius-sm:    12px;
  --shadow:       0 14px 44px rgba(0,0,0,.28);
  --font:         "Comic Sans MS", "Comic Sans", "Comic Neue", "Chalkboard SE", cursive;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:#ffe1d4}

.page{max-width:560px;margin:0 auto;padding:0 0 40px}

/* ---- cover ---------------------------------------------------------- */
.cover{
  position:relative;height:200px;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.cover__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.40))}
.cover__logo{position:relative;max-height:92px;max-width:74%;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}

/* ---- intro (title + address on the brand background) ---------------- */
.intro{text-align:center;padding:20px 18px 8px;color:#fff}
.intro__title{font-size:1.55rem;font-weight:400;margin:0 0 6px}
.intro__title strong{font-weight:700}
.intro__addr{margin:0;color:#ffd9cb;font-size:.95rem;letter-spacing:.01em}

/* ---- card ----------------------------------------------------------- */
.card{
  position:relative;background:var(--card);margin:14px 14px 0;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 22px 20px;
}

/* ---- steps progress (People / Date / Time / Submit) ----------------- */
.steps{display:flex;list-style:none;padding:0;margin:4px 0 24px}
.steps__item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
  font-size:.82rem;color:var(--muted);
}
.steps__item span{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--circle-step);color:#fff;font-weight:700;font-size:.85rem;
  position:relative;z-index:2;transition:.2s;
}
/* connector line between circles */
.steps__item::before{
  content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;
  background:var(--circle-step);z-index:1;
}
.steps__item:first-child::before{display:none}
.steps__item.is-active span,.steps__item.is-done span{background:var(--brand)}
.steps__item.is-active{color:#fff}
.steps__item.is-done::before{background:var(--brand)}

/* ---- generic step --------------------------------------------------- */
.step{display:none;animation:fade .25s ease}
.step.is-active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lead{text-align:center;color:#e9e4e0;font-size:.95rem;margin:0 0 18px}
.step__h{font-size:1.45rem;font-weight:700;margin:0 0 18px;text-align:center;color:#fff}

/* ---- guest number grid ---------------------------------------------- */
.guestgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;justify-items:center;margin:6px 0 6px}
.guest-btn{
  width:62px;height:62px;border-radius:50%;border:none;background:var(--circle);
  color:#fff;font-family:inherit;font-size:1.25rem;cursor:pointer;transition:.15s;
}
.guest-btn:hover{background:var(--brand);transform:translateY(-2px)}
.guest-btn.is-selected{background:var(--brand)}
.guest-more{
  grid-column:1 / -1;justify-self:center;margin-top:8px;background:none;border:none;
  color:var(--muted);font-family:inherit;font-size:1rem;cursor:pointer;display:flex;
  align-items:center;gap:6px;
}
.guest-more:hover{color:#fff}

/* ---- calendar ------------------------------------------------------- */
.calendar{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-bottom:12px}
.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:1.05rem}
.calendar__nav button{
  width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:transparent;
  font-size:1.3rem;cursor:pointer;color:#fff
}
.calendar__nav button:disabled{opacity:.3;cursor:not-allowed}
.calendar__dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:.72rem;color:var(--muted);margin-bottom:8px}
.calendar__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-day{
  aspect-ratio:1;border:none;background:#4a4a4a;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:.95rem;color:#fff;transition:.12s;
}
.cal-day:hover:not(:disabled){background:var(--brand)}
.cal-day.is-empty{background:transparent;cursor:default}
.cal-day:disabled{color:#7c7c7c;background:#404040;cursor:not-allowed}
.cal-day.is-selected{background:var(--brand);font-weight:700}
.cal-day.is-today{box-shadow:inset 0 0 0 2px var(--brand)}

/* ---- time chips ----------------------------------------------------- */
.selected-date{text-align:center;color:var(--muted);font-size:.95rem;margin:0 0 14px}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.time-chip{
  padding:13px 6px;border:none;border-radius:11px;background:var(--circle);
  cursor:pointer;font-family:inherit;font-size:1.05rem;color:#fff;transition:.12s;text-align:center;
}
.time-chip:hover{background:var(--brand)}
.time-chip.is-selected{background:var(--brand)}

/* ---- summary -------------------------------------------------------- */
.summary{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--card-soft);
  border-radius:var(--radius-sm);padding:14px;margin-bottom:18px;font-size:.95rem;color:#fff;
}
.summary .sep{color:var(--line)}

/* ---- form ----------------------------------------------------------- */
.field{display:block;margin-bottom:14px}
.field__label{display:block;font-size:.85rem;color:#e9e4e0;margin-bottom:6px}
.field__label small{color:var(--muted)}
.field__input{
  width:100%;padding:13px 14px;border:1.5px solid transparent;border-radius:11px;
  font-size:1rem;font-family:inherit;background:var(--field-bg);color:var(--field-text);transition:.12s;
}
.field__input:focus{outline:none;border-color:#ffd9cb;box-shadow:0 0 0 3px rgba(192,70,31,.35)}
.field__input.is-invalid{border-color:var(--brand);box-shadow:0 0 0 3px rgba(192,70,31,.4)}
.field__err{display:block;color:var(--err);font-size:.82rem;margin-top:5px}
textarea.field__input{resize:vertical}

.check{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:#e9e4e0;margin:4px 0 12px}
.check input{margin-top:3px}
.terms{font-size:.8rem;color:var(--muted);margin:0 0 14px}

/* ---- buttons -------------------------------------------------------- */
.btn{
  display:block;width:100%;padding:15px;border:none;border-radius:12px;font-size:1.05rem;
  font-weight:700;cursor:pointer;font-family:inherit;transition:.15s;margin-top:8px;
}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark)}
.btn--primary:disabled{opacity:.6;cursor:wait}
.btn--ghost{background:transparent;color:var(--muted);box-shadow:none;font-weight:400}
.btn--ghost:hover{color:#fff}

.hint{font-size:.88rem;color:var(--muted);text-align:center;margin:14px 0 4px}
.hint a{color:#ffd9cb}
.form-error{background:rgba(192,70,31,.18);color:#ffd2cb;border:1px solid var(--brand);
  border-radius:9px;padding:11px 13px;font-size:.9rem;margin-bottom:12px}

/* ---- success -------------------------------------------------------- */
.step--success .success{text-align:center;padding:6px 0}
.success__tick{
  width:66px;height:66px;border-radius:50%;background:var(--ok);color:#fff;font-size:2rem;
  display:grid;place-items:center;margin:4px auto 16px
}
.success__sub{color:#e9e4e0;margin:0 0 18px}
.success__card{
  text-align:left;background:var(--card-soft);border-radius:var(--radius-sm);padding:16px;margin:0 auto 16px;font-size:1rem;
}
.success__card .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.success__card .row:last-child{border-bottom:none}
.success__card .row span{color:var(--muted)}
.success__note{font-size:.85rem;color:var(--muted);margin:0 0 18px}

/* ---- footer --------------------------------------------------------- */
.card__foot{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;
  margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);text-align:center;
}
.card__foot a{color:var(--muted);text-decoration:none}
.card__foot a:hover{color:#fff}
.powered{text-align:center;color:#ffd0c0;font-size:.74rem;margin:16px 0 0;opacity:.8}

/* ---- responsive ----------------------------------------------------- */
@media(max-width:480px){
  .cover{height:170px}
  .intro__title{font-size:1.3rem}
  .step__h{font-size:1.25rem}
  .guestgrid{gap:12px}
  .guest-btn{width:56px;height:56px;font-size:1.15rem}
}