/* ============================================================
   Booking page — the site design system applied over the
   WordPress-era bookings.css. Loaded LAST, so everything here
   wins. bookings.js is reused untouched.
   ============================================================ */

/* ---- Undo the WordPress-era typography bookings.css still sets ----
   bookings.css puts the whole page in Palatino and squares off every
   button. Reassert the site fonts and palette instead. */
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.65}
:root{
  --booking-bg:var(--paper);
  --booking-panel:var(--paper);
  --booking-ink:var(--ink);
  --booking-muted:var(--ink);
  --booking-line:var(--line);
  --booking-olive:var(--khaki);
  --booking-white:#fffef9;
  --booking-available:#dce8d2;
  --booking-unavailable:#efd9d4;
  --booking-closed:#e7e4dd;
}
.booking-search-bar,.booking-details-form,.booking-availability-table,
.booking-availability-grid,.booking-form-message{font-family:var(--body)}
.booking-availability-meta,.booking-availability-price{color:var(--ink)}

/* ---- Hero ---- */
.book-hero{position:relative;color:#fff;text-align:center;padding:8rem var(--pad) 3.2rem;overflow:hidden}
.book-hero__media{position:absolute;inset:0;z-index:-2}
.book-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.book-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,18,14,.5),rgba(20,18,14,.35) 45%,rgba(20,18,14,.65))}
.book-hero .kicker{font-family:var(--display);letter-spacing:.18em;text-transform:uppercase;font-size:.85rem;opacity:.9;margin:0 0 .45rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.book-hero h1{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.8rem);margin:0 0 .3em;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.book-hero p{margin:0 auto;max-width:560px;text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ---- Section rhythm ---- */
.book-section{max-width:var(--maxw);margin-inline:auto;padding:clamp(2rem,5vw,3.5rem) var(--pad)}
.book-step{display:flex;align-items:baseline;gap:.7rem;margin:0 0 .5rem}
.book-step__n{display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:999px;background:var(--khaki);color:#fff;font-family:var(--display);font-size:.9rem;flex:none}
.book-step h2{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,1.05rem + 1.1vw,1.85rem);letter-spacing:.02em;margin:0}
.book-intro{margin:0 0 1.5rem;max-width:62ch}

/* ---- Cottage cards ---- */
.cottages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.cottage{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 34px -26px rgba(0,0,0,.45);transition:transform .2s ease,box-shadow .2s ease}
.cottage:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(0,0,0,.5)}

/* The badge photo is the button that opens that cottage's gallery. */
.cottage__badge{display:block;position:relative;width:100%;aspect-ratio:4/3;padding:0;border:0;background:var(--sand);cursor:pointer;overflow:hidden}
.cottage__badge img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cottage__badge:hover img,.cottage__badge:focus-visible img{transform:scale(1.05)}
.cottage__badge:focus-visible{outline:2px solid var(--khaki);outline-offset:-2px}
.cottage__hint{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:.4rem;padding:1.6rem .9rem .7rem;
  background:linear-gradient(180deg,rgba(20,18,14,0),rgba(20,18,14,.72));
  color:#fff;font-family:var(--display);font-size:.8rem;letter-spacing:.06em}
.cottage__hint svg{width:15px;height:15px;fill:currentColor;flex:none}
.cottage__body{padding:.9rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.cottage__name{font-family:var(--display);font-size:1.15rem;margin:0}
.cottage__occ{color:var(--khaki);font-size:.8rem;letter-spacing:.02em}
.cottage__desc{font-size:.9rem;line-height:1.55;margin:0}
.cottage__cta{margin-top:auto;align-self:flex-start;padding-top:.6rem;font-family:var(--display);font-size:.85rem;border-bottom:1px solid currentColor}

/* Gallery inside the cottage modal */
.cottage-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-top:1.2rem}
.cottage-gallery .shot{aspect-ratio:4/3}
.cottage-modal__meta{color:var(--khaki);font-size:.82rem;letter-spacing:.04em;margin:0 0 .6rem}

/* ---- Search bar ---- */
.booking-search-shell{background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:clamp(1.1rem,3vw,1.6rem)}
.booking-search-bar{display:flex;flex-wrap:wrap;gap:.9rem;align-items:end}
.booking-search-field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 140px}
.booking-search-field--small{flex:1 1 90px}
.booking-search-field span{font-family:var(--display);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.booking-search-field input{min-height:46px;padding:0 .7rem;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.booking-search-field input:focus{outline:2px solid var(--khaki);outline-offset:1px}
.booking-search-options{display:flex;flex-wrap:wrap;gap:.7rem 1.3rem;align-items:center;flex:1 1 100%;margin-top:.2rem}
.booking-inline-note{font-size:.9rem;color:var(--ink)}
.booking-inline-toggle{display:inline-flex;align-items:center;gap:.4rem;font-size:.92rem;color:var(--ink)}
.booking-currency-options{display:inline-flex;gap:.9rem;margin-left:auto}

/* ---- Availability legend + grid ---- */
.book-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.4rem 0 1rem;font-size:.84rem;color:var(--ink)}
.book-legend span{display:inline-flex;align-items:center;gap:.45rem}
.book-legend span::before{content:"";width:14px;height:14px;border-radius:4px;display:inline-block}
.book-legend .lg-av::before{background:#dce8d2;border:1px solid #b9cda8}
.book-legend .lg-sold::before{background:#efd9d4;border:1px solid #d8b3aa}
.book-legend .lg-closed::before{background:#e7e4dd;border:1px solid var(--line)}

.booking-availability-panel{border:1px solid var(--line);border-radius:14px;padding:clamp(1rem,3vw,1.4rem);overflow:auto}
.booking-availability-cell--head{font-family:var(--display);letter-spacing:.06em;color:var(--ink)}
.booking-availability-room{font-family:var(--display);font-weight:400;font-size:.95rem;letter-spacing:.03em}
.booking-availability-price{font-weight:400}
.booking-availability-price.is-available{background:#dce8d2}
.booking-availability-price.is-unavailable{background:#efd9d4}
.booking-availability-price.is-closed{background:#e7e4dd}

/* Buttons: site pills in the display face, not squared uppercase blocks. */
.booking-nav-button,.booking-mode-button{background:#fff;border:1px solid var(--line);border-radius:999px;
  font-family:var(--display);font-weight:400;font-size:.85rem;letter-spacing:.06em;text-transform:none;color:var(--ink)}
.booking-nav-button:hover,.booking-mode-button:hover{background:var(--sand)}
.booking-mode-button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Enquiry form ---- */
.booking-enquiry-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(1.2rem,3vw,1.8rem)}
.booking-details-form{padding:0}
.booking-details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
.booking-details-form label{display:flex;flex-direction:column;gap:.3rem}
.booking-details-form span{font-family:var(--display);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.booking-details-form input,.booking-details-form textarea{min-height:46px;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--sand);font:inherit;font-size:16px;color:var(--ink)}
.booking-details-form input:focus,.booking-details-form textarea:focus{outline:2px solid var(--khaki);outline-offset:1px;background:#fff}
.booking-details-message{display:flex;flex-direction:column;gap:.3rem;margin-top:.9rem}
.booking-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.booking-form-message-wrap{min-height:1.4em;margin:.8rem 0}
.booking-form-message{margin:0;font-size:.92rem}
.booking-form-message.is-error{color:#b00020}
.booking-action--primary{margin-top:.4rem;min-height:48px;padding:0 1.8rem;border:0;border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--display);font-weight:400;letter-spacing:.04em;font-size:1rem;text-transform:none;cursor:pointer}
.booking-action--primary:hover{background:#000}
.booking-action--primary:disabled{opacity:.6;cursor:default}

@media (max-width:600px){
  .booking-currency-options{margin-left:0}
  .book-hero{padding-top:6.5rem}
  /* Two-up on a phone — auto-fill would otherwise drop to one tile per row. */
  .cottage-gallery{grid-template-columns:repeat(2,1fr)}
}