/* Ridge Dine — shared styling.
   Brand carried over from the guest WiFi portal so a guest moving from the
   website to the booking page never feels they have left the venue.
   Fonts are self-hosted: the page makes no external requests at all. */

@font-face{font-family:Montserrat;src:url(/static/fonts/montserrat-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Montserrat;src:url(/static/fonts/montserrat-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/static/fonts/dmsans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/static/fonts/dmsans-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --burgundy:#620613; --pink:#F49AC1; --orange:#D35E27; --olive:#544F2B;
  --green:#4F7A41; --sage:#ADBEBB; --paper:#F0E9DA; --ink:#1D1A0C; --grey:#6E6D68;
  --blush:#F4D7CE;
  --card:#FBF7EF;
  --line:#DCD2BF;
  --shadow:0 1px 2px rgba(29,26,12,.06), 0 8px 24px -12px rgba(29,26,12,.18);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:Montserrat,system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;margin:0}
a{color:var(--burgundy)}

.wrap{max-width:640px;margin:0 auto;padding:20px 18px 64px}
.wrap.wide{max-width:1180px}

/* ------------------------------------------------------------------ header */
.masthead{text-align:center;padding:26px 0 18px}
.masthead img{height:52px;width:auto}
.masthead .eyebrow{
  font-family:Montserrat;font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey);margin-top:14px
}
.masthead h1{font-size:30px;margin-top:6px;color:var(--burgundy)}
.masthead p{color:var(--grey);margin:8px 0 0;font-size:15px}

/* ------------------------------------------------------------------- cards */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin-bottom:16px
}
.card > h2{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  font-weight:600;margin-bottom:14px
}
.card.quiet{background:transparent;box-shadow:none;border-style:dashed}

/* ------------------------------------------------------------------ chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:10px 16px;font:inherit;font-weight:500;cursor:pointer;
  min-width:48px;transition:.12s ease
}
.chip:hover{border-color:var(--burgundy)}
.chip[aria-pressed="true"],.chip.on{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.chip:disabled{opacity:.35;cursor:not-allowed}
.chip.ghost{background:transparent;border-style:dashed}
/* Room names are words, not numbers: let them keep their own width, and wrap
   to one per line on a phone rather than squeezing to three illegible pills. */
.chip.wide{min-width:0;padding:10px 18px;flex:1 1 auto;text-align:center}
.chip[hidden]{display:none}

/* A second question inside a numbered step — "where would you like to sit?"
   under "how many of you?" — subordinate to the step heading above it. */
.sub{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  font-weight:600;margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--line)
}

/* ------------------------------------------------------------------ times */
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.time{
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 6px;
  font:inherit;font-weight:500;cursor:pointer;text-align:center;transition:.12s ease
}
.time:hover{border-color:var(--burgundy);transform:translateY(-1px)}
.time.on{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.time.full{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.service-name{
  font-family:Montserrat;font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--olive);margin:16px 0 8px
}
.service-name:first-child{margin-top:0}

/* --------------------------------------------------------------- calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head strong{font-family:Montserrat;font-size:16px}

/* ------------------------------------------------- the diary, 1-7 days */
/* One day per block when more than one is on screen, so a week reads as a
   week rather than as one very long list of names. */
.spanpick{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--grey)}
.spanpick select{width:auto;padding:7px 10px}
.dayblock{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.dayblock.shut{opacity:.72;background:transparent;border-style:dashed;box-shadow:none}
.dayhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.015)}
.dayblock.shut .dayhead{border-bottom:0}
.dayhead .btn{font-family:Montserrat;font-weight:700;font-size:15px;padding:4px 8px}
.dayhead .meta{font-size:13px;color:var(--grey)}
/* The month heading IS the month picker. The native input sits invisibly on
   top of the words, so the heading stays the heading and the whole of it is
   the target — which matters on a phone. */
.monthjump{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.monthjump::after{content:"▾";margin-left:6px;font-size:12px;color:var(--grey)}
.monthjump input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  border:0;padding:0;cursor:pointer;font:inherit}
.monthjump:focus-within strong{text-decoration:underline;text-underline-offset:3px}
.cal-nav{
  border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;
  font-size:18px;line-height:1;cursor:pointer;color:var(--ink)
}
.cal-nav:disabled{opacity:.3;cursor:not-allowed}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dow{
  text-align:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey);padding-bottom:6px
}
.day{
  aspect-ratio:1;border:1px solid transparent;background:#fff;border-radius:9px;
  font:inherit;font-weight:500;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:.12s ease
}
.day:hover:not(:disabled){border-color:var(--burgundy)}
.day:disabled{background:transparent;color:#C3BBA8;cursor:not-allowed}
.day.shut{background:transparent;color:#C3BBA8;text-decoration:line-through}
.day.on{background:var(--burgundy);color:#fff}
.day.today{border-color:var(--sage)}
.day.blank{background:none;border:none}

/* ------------------------------------------------------------------ forms */
label.field{display:block;margin-bottom:14px}
label.field span{
  display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);font-weight:500;margin-bottom:6px
}
input,select,textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:11px 12px
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--burgundy);outline-offset:-1px;border-color:var(--burgundy)}
textarea{min-height:80px;resize:vertical}
.row{display:flex;gap:12px}
.row > *{flex:1}
.hint{font-size:13px;color:var(--grey);margin:6px 0 0}

/* --------------------------------------------------------------- buttons */
.btn{
  appearance:none;border:1px solid var(--burgundy);background:var(--burgundy);color:#fff;
  font:inherit;font-weight:500;border-radius:10px;padding:13px 22px;cursor:pointer;
  text-decoration:none;transition:.12s ease
}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.secondary{background:transparent;color:var(--burgundy)}
.btn.plain{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.danger{background:#8A1224;border-color:#8A1224}
.btn.sm{padding:7px 12px;font-size:14px;border-radius:8px}
.btn.block{width:100%}
/* The call-us line under the party chips: the number is the next step. */
#party-hint .btn{display:inline-block;margin-top:9px}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------------------------------------------------------------- notices */
.notice{border-radius:10px;padding:12px 14px;font-size:15px;margin:0 0 14px}
.notice.info{background:#EDF1EC;border:1px solid #CBDAC6;color:#33502A}
.notice.warn{background:#FBEEE3;border:1px solid #EBCDB2;color:#7A4212}
.notice.bad{background:#F8E4E6;border:1px solid #E7BFC5;color:#7A1220}
.notice:empty{display:none}

/* --------------------------------------------------------------- summary */
.summary{
  display:flex;flex-wrap:wrap;gap:8px 18px;background:var(--blush);
  border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:15px
}
.summary b{font-family:Montserrat;font-weight:600}

.ref{
  font-family:Montserrat;font-weight:700;font-size:28px;letter-spacing:.04em;
  color:var(--burgundy)
}

.muted{color:var(--grey)}
.small{font-size:13px}
.center{text-align:center}
.stack > * + *{margin-top:12px}
footer.site{text-align:center;color:var(--grey);font-size:13px;padding:24px 0 8px}

.spinner{
  width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--burgundy);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-3px
}
@keyframes spin{to{transform:rotate(360deg)}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:10;border-radius:8px}

/* ------------------------------------------------------------------- QR */
/* Rendered at a fixed pixel grid: crisp edges beat smooth ones for a camera,
   so no smoothing, and a white plate under it whatever the page background. */
.qr{
  image-rendering:pixelated;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px;max-width:min(300px,72vw);height:auto;display:block;margin:0 auto
}

/* --------------------------------------------------------- scan verdict */
.verdict{
  border-radius:var(--radius);padding:26px 20px;text-align:center;color:#fff;
  margin-bottom:16px
}
.verdict.green{background:#3E6B33}
.verdict.amber{background:#B4761B}
.verdict.red{background:#8A1224}
.verdict .mark{font-size:52px;line-height:1;margin-bottom:8px}
.verdict h2{
  font-size:26px;color:#fff;letter-spacing:-.01em;margin:0 0 6px;
  text-transform:none
}
.verdict p{margin:0;font-size:16px;opacity:.92}
.door dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.door dt{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  font-weight:600;padding-top:3px
}
.door dd{margin:0;font-family:Montserrat;font-weight:600;font-size:17px}
.door dd.plain{font-family:'DM Sans',sans-serif;font-weight:400;font-size:15px}

/* ----------------------------------------------------------- courtesy bus */
fieldset.bus{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:14px 16px 4px;margin:0 0 16px
}
label.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0 0 12px}
label.check input{width:auto;margin:4px 0 0;flex:none}

/* -------------------------------------------------------- card guarantee */
.guarantee{
  border:1px solid #E7BFC5;background:#FDF4F4;border-radius:12px;
  padding:14px 16px;margin:0 0 16px
}
.guarantee h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--burgundy);margin:0 0 8px}
.guarantee p{margin:0 0 12px;font-size:15px}
.cardline{display:flex;align-items:center;gap:10px;font-weight:500}

/* ------------------------------------------------- today / "please call us" */
/* Today stays tappable so the guest can find out why, rather than meeting a
   greyed-out square with no explanation. */
.day.call{
  background:#FBEEE3;border-color:#EBCDB2;color:#7A4212;font-weight:600
}
.day.call:hover{border-color:var(--orange)}
.callout{
  background:var(--blush);border-radius:12px;padding:20px 18px;text-align:center
}
.callout .display{font-size:19px;margin:0 0 14px;color:var(--burgundy)}
.callout .hint{margin-top:12px}