:root { --ink:#1c2b2b; --accent:#2f6d5b; --bg:#f5f3ee; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin:0; background:var(--bg); color:var(--ink); }
.card { max-width:640px; margin:5vh auto; background:#fff; padding:2rem;
  border-radius:14px; box-shadow:0 6px 30px rgba(0,0,0,.08); }
h1 { margin-top:0; }
label { display:block; margin:.6rem 0; font-weight:600; }
input, textarea { width:100%; padding:.6rem; border:1px solid #cfcabb; border-radius:8px; font:inherit; }
.row { display:flex; gap:1rem; } .row label { flex:1; }
button { background:var(--accent); color:#fff; border:0; padding:.8rem 1.4rem;
  border-radius:8px; font-size:1rem; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
.error { color:#b3261e; font-weight:600; }
.quote { background:#eef5f2; padding:.8rem; border-radius:8px; margin:1rem 0; }
.gate .card { text-align:center; }

/* Availability calendar */
.sec { font-size:1.05rem; margin:1.5rem 0 .5rem; }
.selhint { font-weight:600; color:var(--accent); margin:.7rem 0; }
.calendar { border:1px solid #e4e0d5; border-radius:12px; padding:.9rem; }
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem; }
.cal-label { font-weight:700; }
.cal-arrow { background:transparent; color:var(--accent); border:1px solid #d7d2c5;
  padding:.15rem .7rem; font-size:1.1rem; line-height:1; border-radius:8px; }
.cal-arrow:disabled { opacity:.3; cursor:not-allowed; }
.cal-months { display:flex; gap:1.4rem; flex-wrap:wrap; }
.cal-month { flex:1; min-width:230px; }
.cal-month-title { text-align:center; font-weight:600; margin-bottom:.4rem; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow { text-align:center; font-size:.68rem; color:#9a9384; font-weight:700; padding:.2rem 0; }
.cal-day { padding:0; aspect-ratio:1/1; border:1px solid transparent; border-radius:8px;
  background:#f4f2ec; color:var(--ink); font:inherit; font-size:.85rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.cal-day.avail, .cal-day.selectable { background:#eef5f2; border-color:#cfe3da; }
.cal-day.selectable { border-color:var(--accent); }
.cal-day.avail:hover, .cal-day.selectable:hover { background:var(--accent); color:#fff; }
.cal-day.past, .cal-day.booked, .cal-day.dim { background:#f0eee8; color:#c3bdb0; cursor:not-allowed; }
.cal-day.booked { text-decoration:line-through; }
.cal-day.ci, .cal-day.co { background:var(--accent); color:#fff; border-color:var(--accent); text-decoration:none; }
.cal-day.in-range { background:#d7ebe3; color:var(--ink); text-decoration:none; }
.cal-legend { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:#7a7568; margin-top:.7rem; }
.cal-legend span { display:inline-block; width:.8rem; height:.8rem; border-radius:3px; }
.lg-avail { background:#eef5f2; border:1px solid #cfe3da; }
.lg-booked { background:#f0eee8; margin-left:.7rem; }

/* House rules + agreement */
.rules { border:1px solid #e4e0d5; border-radius:12px; padding:.4rem 1.1rem; background:#fbfaf6; }
.rules p { margin:.6rem 0; line-height:1.45; }
.rules p.tagline { text-align:center; font-style:italic; font-weight:700; color:var(--accent); margin:1rem 0 .4rem; }
.agree { display:flex; align-items:flex-start; gap:.6rem; font-weight:600; margin:1.1rem 0; }
.agree input { width:auto; margin-top:.2rem; flex:none; }

/* Payment method choice + field hint */
.hint { font-weight:400; color:#8a8579; font-size:.82rem; }
.paymethods { display:flex; flex-direction:column; gap:.6rem; }
.pm { display:flex; align-items:flex-start; gap:.7rem; border:1px solid #e4e0d5; border-radius:10px;
  padding:.75rem .9rem; font-weight:400; cursor:pointer; margin:0; }
.pm:has(input:checked) { border-color:var(--accent); background:#eef5f2; }
.pm input { width:auto; margin-top:.25rem; flex:none; }
.pm small { color:#7a7568; }

/* Confirmation receipt (mirrors the email) */
.receipt { border:1px solid #e4e0d5; border-radius:12px; padding:.4rem 1.2rem; background:#fbfaf6; margin:1rem 0; }
.receipt h2 { margin-top:.8rem; }
.receipt table { border-collapse:collapse; }
.receipt td { padding:.25rem .6rem .25rem 0; vertical-align:top; }

/* Guest welcome */
.welcome { font-weight:700; color:var(--accent); font-size:1.15rem; margin:.2rem 0 .6rem; }