/* Atlantic Road Seaside Housing — booking page
   Loads after css/main.css (tokens, base, header, footer). */
/* Page overrides: booking keeps its solid dark header (no hero image behind it) */
.site-header{background:var(--fjord);color:var(--sand);border-bottom:1px solid var(--line-dark)}
.site-header.scrolled{background:var(--fjord);color:var(--sand)}
.site-header::before{content:none}   /* no hero here — main.css's scrim is a no-op */
/* Small-caps keep --brass in BOTH states (4.6:1 on fjord): the base rule's
   --brass-ink is only 2.9:1 here, and main.css's hero rule would drop the
   brass entirely on a header that never sits over a photo. */
.site-header .brand small,
.site-header:not(.scrolled) .brand small{color:var(--brass)}
body{
  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ---------- page band ---------- */
.band{
  background:var(--fjord);color:var(--sand);
  padding:150px 40px 56px;text-align:center;
}
.band .eyebrow{
  font-family:var(--accent);letter-spacing:.42em;
  text-transform:uppercase;font-size:11px;color:var(--brass-soft);margin-bottom:16px;
}
.band h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(34px,5vw,56px);line-height:1.15;margin-bottom:14px;
}
.band p{max-width:560px;margin:0 auto;color:rgba(237,231,220,.75);font-size:15px}

/* ---------- shared layout bits ---------- */
h2{font-family:var(--display);font-weight:500;font-size:26px;color:var(--fjord)}
.step-sub{color:var(--slate);font-size:14px;margin-bottom:28px;max-width:560px}

/* ---------- calendar ---------- */
.cal-shell{border:1px solid var(--line);background:var(--white)}
.cal-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);background:var(--mist);
}
.cal-toolbar .range{
  font-family:var(--accent);letter-spacing:.24em;text-transform:uppercase;
  font-size:11px;color:var(--fjord);
}
.cal-nav{display:flex;gap:8px}
.cal-nav button{
  width:34px;height:34px;border:1px solid var(--line);background:var(--white);
  color:var(--fjord);font-size:15px;transition:.25s;
}
.cal-nav button:hover:not(:disabled){background:var(--fjord);color:var(--sand)}
.cal-nav button:disabled{opacity:.35;cursor:default}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:0}
.cal-month{padding:22px 22px 26px}
.cal-month + .cal-month{border-left:1px solid var(--line)}
.cal-month h3{
  font-family:var(--display);font-weight:500;font-size:18px;
  color:var(--fjord);text-align:center;margin-bottom:14px;
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 2px}
.cal-grid .dow{
  font-family:var(--accent);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);text-align:center;padding:6px 0;
}
/* Rounded day tile — matches the .dr-day picker used in the search bars.
   The circle carries the number/selection state; price sits below it as a
   caption, since a live nightly rate doesn't fit inside a round button. */
.day{
  position:relative;border:none;background:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  padding:2px 0 0;font-size:13px;color:var(--ink);
}
.day::before{
  content:"";display:block;width:32px;height:32px;margin:0 auto;
  border:1px solid transparent;border-radius:50%;
  background:none;transition:background .2s,border-color .2s,color .2s;
}
.day{isolation:isolate}
.day span:first-child{
  position:absolute;top:2px;left:0;right:0;height:32px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
/* The circle (::before) is already in flow above the price — no extra offset,
   or the caption drops into the next row and the last one falls out of the grid. */
.day .p{font-size:9.5px;color:var(--slate);letter-spacing:.02em}
.day:hover:not(:disabled):not(.sel){background:none}
.day:hover:not(:disabled):not(.sel)::before{background:var(--mist);border-color:var(--fjord)}
.day:disabled{color:rgba(70,86,94,.3);cursor:default}
.day:disabled .p{color:rgba(70,86,94,.35)}
/* No availability — filled circle (the nightly rate still shows, muted) */
.day.unavail::before{background:var(--fjord)}
.day.unavail span:first-child{color:rgba(237,231,220,.55)}
.day.unavail .p{color:rgba(70,86,94,.35);text-decoration:line-through}
/* Minimum stay required / not met — light wash on the circle only */
.day.minstay:not(.sel)::before{background:rgba(19,43,58,.10)}
/* Continuous band across the nights inside the selected range. It bleeds over
   the 2px column gap so the range reads as one stretch, and sits behind the
   circle (.day is isolated, so z-index:-1 stays inside the button). */
.day::after{
  content:"";position:absolute;top:2px;left:-2px;right:-2px;height:32px;
  z-index:-1;background:none;
}
.day.mid::after{background:rgba(177,138,84,.22)}
.day.sel-start::after{left:50%;right:-2px;background:rgba(177,138,84,.22)}
.day.sel-end::after{left:-2px;right:50%;background:rgba(177,138,84,.22)}
/* Selected end points — brass, so they never read as an unavailable (fjord) day */
.day.sel::before{background:var(--brass);border-color:var(--brass)}
.day.sel span:first-child{color:var(--fjord);font-weight:600}
.day.today::before{border-color:var(--brass)}
.cal-legend{
  display:flex;gap:14px 26px;padding:14px 22px;border-top:1px solid var(--line);
  font-size:11px;color:var(--slate);flex-wrap:wrap;
}
.cal-legend span{display:inline-flex;align-items:center}
/* Demo mode has no availability or min-stay markings to explain */
.cal-legend.demo .l-un,.cal-legend.demo .l-min{display:none}
.cal-legend i{
  display:inline-block;width:13px;height:13px;border-radius:50%;
  margin-right:7px;border:1px solid transparent;
}
.cal-legend .l-sel i{background:var(--brass);border-color:var(--brass)}
.cal-legend .l-mid i{background:rgba(177,138,84,.22);border-radius:0;width:18px;height:10px}
.cal-legend .l-un i{background:var(--fjord)}
.cal-legend .l-min i{background:rgba(19,43,58,.10);border-color:var(--line)}

.clear-dates{
  background:none;border:none;color:var(--slate);font-size:12px;
  text-decoration:underline;text-underline-offset:3px;margin-top:18px;
}
.clear-dates:hover{color:var(--fjord)}
.avail-hint{margin-bottom:20px;font-size:13px;color:var(--fjord)}
.avail-hint:empty{display:none}
.avail-hint b{font-family:var(--display);font-weight:600}

/* ---------- homes ---------- */
.homes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.home-card{
  border:1px solid var(--line);background:var(--white);
  display:flex;flex-direction:column;transition:border-color .25s, box-shadow .25s;
  position:relative;
}
.home-card:hover{border-color:rgba(19,43,58,.35)}
.home-card.selected{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.home-card.disabled{opacity:.55}
.home-media{
  aspect-ratio:16/9;overflow:hidden;background:linear-gradient(160deg,var(--petrol),var(--fjord));
}
.home-media img{width:100%;height:100%;object-fit:cover;display:block}
.home-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.home-body h3{
  font-family:var(--display);font-weight:500;font-size:20px;color:var(--fjord);
}
.home-meta{font-size:12.5px;color:var(--slate)}
.badge{
  align-self:flex-start;font-family:var(--accent);font-size:9px;
  letter-spacing:.26em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line);color:var(--slate);
}
.badge.ok{border-color:rgba(46,110,84,.4);color:var(--success)}
.badge.no{border-color:rgba(150,60,50,.35);color:var(--error)}
.badge.soon{border-color:rgba(177,138,84,.5);color:var(--brass-ink)}
.home-price{font-size:13px;color:var(--fjord);min-height:18px}
.home-price b{font-family:var(--display);font-weight:600;font-size:17px}
.home-actions{display:flex;gap:12px;margin-top:auto;padding-top:6px}
.link-quiet{font-size:12px;color:var(--slate);text-decoration:underline;text-underline-offset:3px}
.link-quiet:hover{color:var(--fjord)}

/* ---------- loading skeletons ----------
   Shown while /api/availability is in flight (js/booking.js, mode "loading").
   Every block mirrors the real element it stands in for, so the swap to live
   data never moves the layout. The shimmer is a brass highlight sweeping over
   a linen base — decorative brass, not text, so the AA rule doesn't apply. */
.sk{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(19,43,58,.055),rgba(19,43,58,.085));
}
.sk::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    transparent 20%,
    rgba(255,255,255,.75) 42%,
    rgba(177,138,84,.28) 50%,
    rgba(255,255,255,.75) 58%,
    transparent 80%);
  transform:translateX(-100%);
  animation:sk-sweep 1.9s var(--sk-delay,0s) infinite cubic-bezier(.4,0,.2,1);
}
@keyframes sk-sweep{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(100%)}
}
.sk-line{border-radius:2px;height:11px}
.sk-media{aspect-ratio:16/9;background:linear-gradient(160deg,rgba(31,92,86,.20),rgba(19,43,58,.28))}
.sk-title{height:20px;width:62%}
.sk-meta{height:12px;width:88%}
.sk-badge{height:23px;width:170px;align-self:flex-start}
.sk-price{height:17px;width:46%}
.sk-btn{height:38px;width:160px;border-radius:1px}
.sk-link{height:12px;width:76px;align-self:center}
.sk-quote{height:17px;width:60%;margin-top:4px}
/* The skeleton card itself must not react to hover — it isn't a target yet */
.home-card.sk-card{border-color:var(--line)}
.home-card.sk-card:hover{border-color:var(--line)}

.avail-hint.is-loading{color:var(--slate);opacity:.85}
.avail-hint.is-loading::after{
  content:"";display:inline-block;vertical-align:middle;
  width:34px;height:1px;margin-left:10px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  animation:sk-tick 1.4s infinite ease-in-out;
}
@keyframes sk-tick{0%,100%{opacity:.15}50%{opacity:1}}

/* Unit-view calendar skeleton */
.cal-shell.is-loading .cal-legend{opacity:.35}
.sk-month-title{height:18px;width:56%;margin:0 auto 14px}
.sk-daycell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:2px 0 0}
.sk-day{width:32px;height:32px;border-radius:50%;flex:none}
.sk-daycap{
  width:18px;height:15px;border-radius:3px;flex:none;
  background:linear-gradient(180deg,rgba(19,43,58,.035),rgba(19,43,58,.055));
}

/* Skeleton → live: the real content rises into place, staggered per card. */
.card-in{animation:card-in .5s var(--in-delay,0s) both cubic-bezier(.22,.61,.36,1)}
@keyframes card-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .sk::after,.avail-hint.is-loading::after{animation:none}
  .sk::after{opacity:.35;transform:none}
  .card-in{animation:none}
}

/* ---------- results view ---------- */
.results-bar{
  max-width:1240px;margin:0 auto 30px;background:var(--mist);
  box-shadow:0 10px 34px rgba(19,43,58,.1);
  display:grid;grid-template-columns:1.6fr .8fr auto;
}
.results-field{padding:1.3rem 1.6rem;border-right:1px solid rgba(19,43,58,.1)}
.results-field label,
.results-field .results-field-label{
  display:block;font-family:var(--accent);font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass-ink);margin-bottom:.4rem;
}
.results-field select,.results-field input{
  width:100%;border:none;background:none;font-family:var(--body);
  font-size:.92rem;color:var(--fjord);padding:0;
}
.results-field select:focus,.results-field input:focus{outline:none}

#viewResults,#viewUnit{max-width:1240px;margin:0 auto;padding:44px 40px 110px}

#nearbySection{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
#nearbySection h2{margin-bottom:8px}
.homes-grid.nearby{grid-template-columns:repeat(3,1fr)}
.nearby-card .home-body{padding:18px 20px 20px}
.nearby-card .home-meta{color:var(--fjord)}

/* ---------- unit view ---------- */
.bk-unit-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start;
}
.bk-cal-col h2{margin-bottom:20px}
.bk-sidebar{
  position:sticky;top:110px;background:var(--sand);
  padding:28px 28px 32px;border:1px solid rgba(177,138,84,.25);
  display:flex;flex-direction:column;
}
.bk-sidebar-label{
  display:block;font-family:var(--accent);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass-ink);margin-bottom:8px;
}
#unitSelect{
  width:100%;border:1px solid var(--line);background:var(--white);
  padding:12px 14px;font-family:var(--body);font-size:14px;color:var(--fjord);
  margin-bottom:22px;
}
.date-panel{
  display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);
  background:var(--white);margin-bottom:20px;
}
.date-cell{padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.date-cell + .date-cell{border-left:1px solid var(--line)}
.dp-label{
  font-family:var(--accent);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-ink);
}
.dp-day{font-family:var(--display);font-weight:600;font-size:40px;color:var(--fjord);line-height:1.1}
.dp-month{font-size:12px;color:var(--slate)}
.bk-sidebar-field{margin-bottom:16px}
.bk-sidebar-field label{
  display:block;font-family:var(--accent);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass-ink);margin-bottom:6px;
}
.bk-sidebar-field select{
  width:100%;border:1px solid var(--line);background:var(--white);
  padding:11px 14px;font-family:var(--body);font-size:14px;color:var(--fjord);
}
#bkStatus{font-size:13px;color:var(--fjord);margin:6px 0 4px;line-height:1.5}
#bkQuote{font-size:14px;color:var(--fjord);margin-bottom:18px}
#bkQuote b{font-family:var(--display);font-weight:600;font-size:19px}
#bkQuote:empty{display:none}
.bk-sidebar .btn + .btn{margin-top:10px}
.direct-perks{margin-top:24px;padding-top:18px;border-top:1px solid rgba(19,43,58,.12)}
.direct-perks li{
  list-style:none;font-size:12px;color:var(--slate);padding:4px 0 4px 20px;position:relative;
}
.direct-perks li::before{content:"—";position:absolute;left:0;color:var(--brass)}

/* ---------- enquiry dialog ---------- */
dialog.enquiry{
  border:none;padding:0;max-width:520px;width:calc(100% - 40px);
  background:var(--white);box-shadow:0 30px 80px rgba(10,25,35,.35);
}
dialog.enquiry::backdrop{background:rgba(19,43,58,.55)}
.enq-inner{padding:38px 40px 40px}
.enq-inner h3{font-family:var(--display);font-weight:500;font-size:26px;color:var(--fjord);margin-bottom:6px}
.enq-inner p{font-size:13px;color:var(--slate);margin-bottom:24px}
.enq-field{margin-bottom:16px}
.enq-field label{
  display:block;font-family:var(--accent);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass-ink);margin-bottom:6px;
}
.enq-field input,.enq-field textarea{
  width:100%;border:1px solid var(--line);padding:12px 14px;font-family:var(--body);
  font-size:14px;color:var(--ink);background:var(--white);
}
.enq-field input:focus,.enq-field textarea:focus{outline:2px solid var(--brass);outline-offset:-1px}
.enq-actions{display:flex;gap:12px;margin-top:24px}
.enq-close{background:none;border:none;position:absolute;top:16px;right:18px;font-size:20px;color:var(--slate)}
/* Honeypot field — visually removed, still in the DOM for bots */
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* .enq-inner p (0,1,1) would beat a lone class — scope under .enq-inner */
.enq-inner .enq-status{font-size:13px;color:var(--fjord);margin:12px 0 0}
.enq-inner .enq-status.is-error{color:#8a2f2f}

/* focus visibility */
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
@media (max-width:1280px){
  #viewResults,#viewUnit{padding:36px 24px 90px}
  .bk-unit-layout{grid-template-columns:1fr}
  .bk-sidebar{position:static}
  .homes-grid{grid-template-columns:1fr}
  .homes-grid.nearby{grid-template-columns:1fr 1fr}
  .results-bar{grid-template-columns:1fr 1fr}
  .results-field:nth-child(2){border-right:none}
  .results-bar .dr-pop{left:0}
  .results-field{border-bottom:1px solid rgba(19,43,58,.1)}
  .search-submit{grid-column:1/-1;padding:1.2rem}
}
@media (max-width:820px){
  .band{padding:130px 22px 46px}
  .cal-months{grid-template-columns:1fr}
  .cal-month + .cal-month{border-left:none;border-top:1px solid var(--line)}
  .homes-grid.nearby{grid-template-columns:1fr}
  .date-panel{grid-template-columns:1fr}
  .date-cell + .date-cell{border-left:none;border-top:1px solid var(--line)}
}

/* Kept last: on #viewUnit, this ties in specificity with .bk-unit-layout's
   display:grid (both single-class selectors) — source order decides, so
   .hidden must stay the final display rule in the cascade to actually hide
   the unit view while browsing "Book Your Stay" results. */
.hidden{display:none}