/* ════════════════════════════════════════════════════════════════
   assets/farmstays/farmstays.css · Delight — the cottages at Ayana

   Two halves. The listing itself (.fs-*) is its own thing: a photo
   mosaic, a long read, and a booking rail pinned beside it. The
   payment flow underneath (.bk-*, .qrlb-*, .hmod-*) is the community
   module's, copied here so this page needs exactly one stylesheet
   and cannot break when the events page changes.
   ════════════════════════════════════════════════════════════════ */
:root{
  --paper:#F5F4EC;--paper-2:#FFFFFF;--paper-3:#EFEEE3;--ink:#141810;--ink-soft:#4B5142;--stone:#7C8271;
  --lime:#5FE002;--lime-ink:#2C6B08;--noir:#0B0F0C;--line:#E1DFD1;--rust:#B4402C;
  --maxw:1280px;--gutter:clamp(22px,5vw,72px);
  --disp:"Bricolage Grotesque",system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);--eo:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime-ink);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.05;letter-spacing:-.025em}
.ser{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:0;color:var(--lime-ink)}
.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-ink);
  display:inline-flex;align-items:center;gap:.7em}
.tag::before{content:"◈";font-size:.7em;color:var(--lime)}
.sec{padding:clamp(42px,6.5vh,80px) 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);
  font-weight:600;font-size:.9rem;padding:14px 24px;border-radius:999px;cursor:pointer;border:0;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s,background .3s}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:0 6px 22px rgba(95,224,2,.4)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(95,224,2,.5)}
.btn-lime[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ── masthead ── */


/* ── body ── */
.fs-grid{display:grid;grid-template-columns:1fr minmax(300px,368px);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:960px){.fs-grid{grid-template-columns:1fr}}
.fs-main h2{font-size:clamp(1.5rem,2.8vw,2.1rem);max-width:22ch}
.fs-main h3{font-size:clamp(1.2rem,2.1vw,1.55rem)}
.fs-host{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lime-ink);margin-top:10px}
.fs-lede p{margin-top:14px;color:var(--ink-soft);font-size:1.03rem;line-height:1.75;max-width:62ch}
.fs-what,.fs-amen,.fs-rules,.fs-where{margin-top:clamp(30px,4.5vh,50px);padding-top:clamp(26px,4vh,40px);
  border-top:1px solid var(--line)}
.fs-what-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:20px}
@media (max-width:620px){.fs-what-grid{grid-template-columns:1fr}}
.fs-w{display:block;min-width:0}
.fs-w .n{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--lime-ink)}
.fs-w b{display:block;font-family:var(--disp);font-size:1.05rem;margin-top:7px}
.fs-w p{margin-top:6px;font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.fs-amen ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 22px;margin-top:18px}
@media (max-width:620px){.fs-amen ul{grid-template-columns:1fr}}
.fs-amen li{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:var(--ink-soft)}
.fs-tick{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:rgba(95,224,2,.16);
  color:var(--lime-ink);display:grid;place-items:center;margin-top:1px}
.fs-note{margin-top:18px;font-size:.88rem;color:var(--stone);background:var(--paper-3);
  border-radius:10px;padding:12px 15px}
.fs-rules-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:18px}
@media (max-width:700px){.fs-rules-grid{grid-template-columns:1fr 1fr}}
.fs-rules-grid > div{background:var(--paper);padding:13px 15px}
.fs-rules-grid span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--stone)}
.fs-rules-grid b{display:block;font-size:.94rem;margin-top:4px}
.fs-rlist{list-style:none;margin-top:18px}
.fs-rlist li{position:relative;padding-left:22px;margin-bottom:9px;font-size:.94rem;color:var(--ink-soft);line-height:1.6}
.fs-rlist li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 3px rgba(95,224,2,.16)}
.fs-where p{margin-top:12px;color:var(--ink-soft);line-height:1.7;max-width:56ch}
.fs-where .btn{margin:16px 8px 0 0}

/* ── the booking rail ── */
.fs-side{position:sticky;top:calc(var(--dg-hd-h,106px) + 16px);display:flex;flex-direction:column;gap:14px}
@media (max-width:960px){.fs-side{position:static}}
.fs-card{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,2.2vw,24px);box-shadow:0 24px 50px -34px rgba(20,24,16,.45)}
.fs-price{display:flex;align-items:baseline;gap:8px}
.fs-price b{font-family:var(--disp);font-weight:700;font-size:1.85rem;letter-spacing:-.03em}
.fs-price span{font-size:.88rem;color:var(--stone)}
.fs-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.fs-dates label{display:block;padding:10px 12px}
.fs-dates label + label{border-left:1px solid var(--line)}
.fs-dates span,.fs-f > span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--stone);margin-bottom:5px}
.fs-i{width:100%;font-family:var(--sans);font-size:.92rem;color:var(--ink);background:transparent;border:0;padding:0}
.fs-i:focus{outline:none}
.fs-dates label:focus-within{background:rgba(95,224,2,.07)}
.fs-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.fs-f{display:block}
.fs-qty{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.fs-qty:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px rgba(95,224,2,.15)}
.fs-q{width:36px;flex:0 0 auto;border:0;background:var(--paper-3);color:var(--ink);font-size:1rem;cursor:pointer;transition:.2s}
.fs-q:hover{background:var(--lime)}
.fs-qn{text-align:center;font-family:var(--disp);font-weight:600;padding:9px 0;-moz-appearance:textfield}
.fs-qn::-webkit-outer-spin-button,.fs-qn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fs-quote{margin-top:16px}
.fs-quote:empty{display:none}
.fs-quote .l{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:.9rem;color:var(--ink-soft)}
.fs-quote .l u{text-decoration:none;border-bottom:1px dotted var(--line)}
.fs-quote .tot{display:flex;justify-content:space-between;gap:14px;margin-top:8px;padding-top:12px;
  border-top:1px solid var(--line);font-family:var(--disp);font-weight:700;font-size:1.1rem}
.fs-quote .left{margin-top:9px;font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone)}
.fs-quote .left.low{color:#9A6212}
.fs-err{margin-top:12px;background:rgba(180,64,44,.09);border:1px solid rgba(180,64,44,.3);
  color:#8A3020;border-radius:10px;padding:10px 13px;font-size:.86rem;line-height:1.5}
.fs-err[hidden]{display:none!important}
.fs-go{width:100%;margin-top:14px}
.fs-small{margin-top:11px;font-size:.76rem;color:var(--stone);text-align:center;line-height:1.5}
.fs-shut{margin-top:14px;font-size:.9rem;color:var(--ink-soft);line-height:1.6}
.fs-shut a{color:var(--lime-ink);font-weight:600}
.fs-help{background:var(--paper-3);border-radius:16px;padding:16px 18px;font-size:.88rem}
.fs-help b{display:block;font-family:var(--disp);margin-bottom:8px}
.fs-help a{display:block;color:var(--lime-ink);font-weight:600;padding:3px 0}

/* ── payment section ── */
.fs-pay{background:var(--paper-3);scroll-margin-top:calc(var(--dg-hd-h,106px) + 12px)}
.fs-pay[hidden]{display:none!important}
.fs-head{margin-bottom:clamp(20px,3vh,30px)}
.fs-head h2{font-size:clamp(1.5rem,3vw,2.3rem);margin-top:10px}
.fs-head p{margin-top:9px;color:var(--ink-soft);max-width:60ch}
.fs-recap{background:var(--paper-3);border-radius:12px;padding:14px 16px;margin-bottom:18px;
  display:flex;flex-wrap:wrap;gap:6px 24px;font-size:.88rem}
.fs-recap b{font-family:var(--disp)}
.fs-recap span{color:var(--stone)}

/* ── the community payment flow, verbatim ── */
.bk{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3vw,34px);max-width:940px}
.bk-rail{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:clamp(20px,3vw,30px);
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.bk-rail li{display:inline-flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;
  color:var(--stone);padding:7px 14px 7px 7px;border-radius:999px;transition:.25s var(--ease)}
.bk-rail li span{width:24px;height:24px;border-radius:50%;background:var(--paper-3);color:var(--stone);
  display:grid;place-items:center;font-family:var(--mono);font-size:.72rem;font-weight:600;flex:0 0 auto}
.bk-rail li.on{background:var(--ink);color:var(--paper)}
.bk-rail li.on span{background:var(--lime);color:var(--ink)}
.bk-rail li.done{color:var(--lime-ink);cursor:pointer}
.bk-rail li.done span{background:var(--lime);color:var(--ink)}
.bk-step{display:none;animation:bkIn .35s var(--eo)}
.bk-step.is-on{display:block}
@keyframes bkIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bk-step{animation:none}}
.bk-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.bk-row2{grid-template-columns:1fr}}
.bk-f{display:block;margin-bottom:16px}
.bk-f > span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--stone);margin-bottom:7px}
.bk-f > span b{font-weight:400;color:var(--lime-ink);letter-spacing:.06em}
.bk-i{width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line);border-radius:11px;padding:13px 14px;transition:.2s}
.bk-i::placeholder{color:#A9AE9E}
.bk-i:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(95,224,2,.16)}
.bk-i.bad{border-color:var(--rust);box-shadow:0 0 0 3px rgba(180,64,44,.12)}
textarea.bk-i{resize:vertical;line-height:1.6;min-height:64px}
.bk-e{display:block;font-style:normal;font-size:.79rem;color:var(--rust);margin-top:6px}
.bk-e:empty{display:none}
.bk-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.bk-nav .btn-ghost{order:-1}
.bk-pay{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(18px,3vw,34px);align-items:start}
@media (max-width:760px){.bk-pay{grid-template-columns:1fr}}
.bk-qr{background:var(--paper-3);border-radius:16px;padding:16px;text-align:center}
.bk-qr > img{width:100%;max-width:280px;margin:0 auto;border-radius:12px;background:#fff;padding:10px}
.bk-qrbig{width:100%;justify-content:center;margin-top:14px}
.bk-qr-none{padding:26px 14px}
.bk-qr-none b{font-family:var(--disp);font-size:1rem;display:block;margin-bottom:6px}
.bk-qr-none p{font-size:.86rem;color:var(--stone);line-height:1.6}
.bk-upi{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.bk-upi span{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--stone);width:100%}
.bk-upi code{font-family:var(--mono);font-size:.86rem;color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line);padding:7px 11px;border-radius:8px;word-break:break-all}
.bk-copy{border:1px solid var(--line);background:var(--paper-2);color:var(--lime-ink);font-family:var(--sans);
  font-weight:600;font-size:.76rem;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.2s}
.bk-copy:hover{border-color:var(--lime);background:rgba(95,224,2,.12)}
.bk-paytx h3{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.bk-paytx h3 span{color:var(--lime-ink)}
.bk-steps{margin:16px 0 0;padding-left:20px;color:var(--ink-soft)}
.bk-steps li{margin-bottom:9px;font-size:.95rem;line-height:1.6}
.bk-steps li::marker{color:var(--lime-ink);font-weight:700}
.bk-steps b{color:var(--ink)}
.bk-note{margin:16px 0 20px;font-size:.84rem;color:var(--stone);line-height:1.6;background:var(--paper-3);border-radius:10px;padding:12px 14px}
.bk-note a{color:var(--lime-ink);font-weight:600}
.bk-drop{position:relative;border:2px dashed var(--line);border-radius:14px;background:var(--paper-3);transition:.25s var(--ease);overflow:hidden}
.bk-drop:hover{border-color:var(--lime)}
.bk-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.bk-drop-in{padding:30px 20px;text-align:center;color:var(--stone);pointer-events:none}
.bk-drop-in svg{margin:0 auto 10px;color:var(--lime-ink)}
.bk-drop-in b{display:block;font-family:var(--disp);font-size:.98rem;color:var(--ink);margin-bottom:4px}
.bk-drop-in span{font-size:.8rem}
/* An author display value beats the browser's own [hidden] rule, so without
   the guard below this box rendered before any file was chosen — an <img>
   with no src, which paints as a broken-image icon with its alt text beside
   it. That is what the empty preview was. */
.bk-prev{display:flex;align-items:center;gap:14px;padding:12px;position:relative;z-index:3;
  background:var(--paper-2);border-radius:12px;margin:8px}
.bk-prev[hidden],.bk-drop-in[hidden]{display:none!important}
/* the tick that says "this is attached", over the corner of the thumbnail */
.bk-prev::before{content:"";position:absolute;left:calc(12px + 68px);top:14px;width:20px;height:20px;
  border-radius:50%;background:var(--lime);z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141810' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
  box-shadow:0 2px 8px rgba(20,24,16,.3)}
.bk-prev img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line);
  flex:0 0 auto;background:var(--paper-3)}
.bk-prev > div{min-width:0;flex:1}
.bk-prev .ok{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--lime-ink);margin-bottom:4px}
.bk-prev b{display:block;font-size:.9rem;word-break:break-all;line-height:1.4}
.bk-prev span{display:block;font-family:var(--mono);font-size:.7rem;color:var(--stone);margin-top:3px}
.bk-rm{margin-top:8px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-soft);
  font-family:var(--sans);font-size:.76rem;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer}
.bk-rm:hover{border-color:var(--ink);color:var(--ink)}
.bk-review{background:var(--paper-3);border-radius:13px;padding:6px 18px 12px;margin:4px 0 20px}
.bk-review-h{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);padding:12px 0 8px}
.bk-review div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px solid var(--line);font-size:.9rem}
.bk-review div span{color:var(--stone)}
.bk-review div b{text-align:right;word-break:break-all}
.bk-fail{margin-top:16px;background:rgba(180,64,44,.09);border:1px solid rgba(180,64,44,.3);
  color:#8A3020;border-radius:11px;padding:13px 16px;font-size:.9rem;line-height:1.6}
.bk-fail[hidden]{display:none!important}

/* done */
.fs-done{padding:clamp(46px,7vh,90px) 0}
.fs-done[hidden]{display:none!important}
.fs-done-c{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
  padding:clamp(26px,4vw,42px);max-width:640px;text-align:center;margin-inline:auto}
.bk-tick{width:60px;height:60px;border-radius:50%;background:var(--lime);color:var(--ink);
  display:grid;place-items:center;margin:0 auto 18px;box-shadow:0 10px 30px -10px rgba(95,224,2,.7)}
.fs-done-c h3{font-size:clamp(1.4rem,3vw,2rem)}
.fs-done-c p{margin-top:12px;color:var(--ink-soft);line-height:1.7}
.bk-ref{margin:22px auto;display:inline-flex;flex-direction:column;gap:4px;background:var(--paper-3);
  border-radius:13px;padding:14px 26px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}
.bk-ref b{font-family:var(--disp);font-size:1.35rem;letter-spacing:.02em;color:var(--ink);text-transform:none}
.bk-done-sub{font-size:.88rem;color:var(--stone);max-width:46ch;margin-inline:auto}
.bk-done-sub a{color:var(--lime-ink);font-weight:600}
.fs-done-c .btn{margin-top:22px}

/* ── photo lightbox ── */
.fslb{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,8vh,80px) 16px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.fslb.open{opacity:1;pointer-events:auto}
.fslb-bd{position:absolute;inset:0;background:rgba(8,12,7,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer}
.fslb-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:1040px;width:100%;
  transform:scale(.96);transition:transform .32s var(--eo)}
.fslb.open .fslb-stage{transform:none}
.fslb-img{max-width:100%;max-height:78vh;width:auto;border-radius:10px;box-shadow:0 30px 70px -22px rgba(0,0,0,.7);background:#0e1a12}
.fslb-ct{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:rgba(245,244,236,.6)}
.fslb-x,.fslb-p,.fslb-n{position:absolute;z-index:3;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.25s var(--ease)}
.fslb-x:hover,.fslb-p:hover,.fslb-n:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.fslb-x{top:18px;right:18px}
.fslb-p{left:18px;top:50%;transform:translateY(-50%)}
.fslb-n{right:18px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.fslb{padding:56px 10px}.fslb-p{left:6px}.fslb-n{right:6px}.fslb-img{max-height:66vh}}

/* ── QR lightbox ── */
.qrlb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vh,32px) 14px;opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.qrlb.open{opacity:1;pointer-events:auto}
.qrlb-bd{position:absolute;inset:0;background:rgba(8,12,7,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer}
.qrlb-card{position:relative;z-index:2;background:var(--paper-2);border-radius:22px;
  padding:clamp(22px,3.4vw,34px);width:100%;max-width:min(460px,94vw);max-height:92vh;overflow:auto;
  text-align:center;transform:scale(.95);transition:transform .32s var(--eo);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.qrlb.open .qrlb-card{transform:none}
.qrlb-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:.22s}
.qrlb-x:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qrlb-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--lime-ink)}
.qrlb-card h3{font-size:clamp(1.5rem,4vw,2rem);margin-top:8px}
.qrlb-card h3 span{color:var(--lime-ink)}
.qrlb-img{width:100%;max-width:360px;margin:18px auto 0;display:block;border-radius:14px;background:#fff;padding:12px;border:1px solid var(--line)}
.qrlb-note{margin-top:14px;font-size:.86rem;color:var(--ink-soft);line-height:1.6}
.qrlb-note b{color:var(--ink)}
.qrlb-upi{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.qrlb-upi span{width:100%;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.qrlb-upi code{font-family:var(--mono);font-size:.8rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:7px 11px;border-radius:8px;word-break:break-all;max-width:100%}
.qrlb-done{width:100%;margin-top:20px}
@media (max-height:640px){.qrlb-img{max-width:230px;margin-top:12px}.qrlb-note{display:none}}

/* ── sending / thank-you ── */
.hmod{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;transition:opacity .25s var(--ease)}
.hmod.is-on{opacity:1}
.hmod[hidden]{display:none!important}
.hmod-bd{position:absolute;inset:0;background:rgba(6,10,7,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hmod.is-done .hmod-bd{cursor:pointer}
.hmod-card{position:relative;z-index:2;background:#101c14;border:1px solid rgba(95,224,2,.26);border-radius:20px;
  padding:clamp(26px,4vw,38px) clamp(24px,3.4vw,36px);text-align:center;width:100%;max-width:min(400px,92vw);
  color:var(--paper);box-shadow:0 40px 90px -34px rgba(0,0,0,.85);
  transform:scale(.94) translateY(10px);transition:transform .32s var(--eo)}
.hmod.is-on .hmod-card{transform:none}
.hmod-spin{display:block;width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  border:2.5px solid rgba(95,224,2,.2);border-top-color:var(--lime);animation:hmodSpin .8s linear infinite}
@keyframes hmodSpin{to{transform:rotate(360deg)}}
.hmod-tick{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:var(--lime);color:var(--ink);box-shadow:0 12px 34px -12px rgba(95,224,2,.75);animation:hmodPop .42s var(--eo)}
@keyframes hmodPop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.hmod-spin[hidden],.hmod-tick[hidden],.hmod .btn[hidden]{display:none!important}
.hmod-card h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.hmod-card p{margin-top:11px;color:rgba(245,244,236,.66);font-size:.93rem;line-height:1.6}
.hmod-card .btn{margin-top:20px;width:100%}
@media (prefers-reduced-motion:reduce){.hmod,.hmod-card{transition:none}.hmod-spin{animation-duration:1.6s}.hmod-tick{animation:none}}

/* ── mobile dock ── */
.fs-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:180;display:none;align-items:center;gap:14px;
  background:rgba(11,15,12,.94);color:var(--paper);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 9px 9px 20px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.7)}
.fs-dock b{display:block;font-family:var(--disp);font-size:1rem;letter-spacing:-.02em;line-height:1.2}
.fs-dock span{display:block;font-size:.72rem;color:rgba(245,244,236,.55)}
.fs-dock .btn{margin-left:auto;padding:11px 20px;font-size:.86rem}
@media (max-width:960px){.fs-dock:not([hidden]){display:flex}}
.fs-dock[hidden]{display:none!important}

/* ── the date picker ───────────────────────────────────────────────
   Replaces the native <input type="date">, which is drawn by the OS and
   cannot be themed, cannot show a range, and — the real reason — cannot
   grey out the nights we are already full on.

   Two layouts, one set of rules: a popover anchored under the fields on a
   wide screen, a bottom sheet on a phone. The sheet is not a shrunk
   popover — it is the only shape that gives a thumb 40px targets without
   the calendar running off the side of the card. */
/* margin-top belongs here now that the old joined-box rule is gone.
   That rule also carried overflow:hidden — harmless when this held two
   native inputs, fatal now that the calendar popover is a child of it. */
.fs-dates{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.fs-dbtn{display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--fs-paper,#fff);border:1.5px solid var(--line);border-radius:12px;
  padding:11px 14px;transition:border-color .2s,box-shadow .2s}
.fs-dbtn:hover{border-color:var(--stone)}
.fs-dbtn.is-live{border-color:var(--lime);box-shadow:0 0 0 3px rgba(95,224,2,.16)}
.fs-dbtn > span{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone)}
.fs-dbtn > b{display:block;font-size:.95rem;font-weight:600;margin-top:3px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Anchored to the RIGHT edge, not the left. The booking card lives in the
   right-hand rail, so a 600px panel opening leftwards from left:0 ran off the
   screen — which is why half of September was missing. Opening right-to-left
   keeps it over the page instead of over the edge. */
.fs-cal{position:absolute;z-index:9990;top:calc(100% + 10px);right:0;left:auto;
  width:min(600px,calc(100vw - 40px));background:var(--paper-2,#fff);
  border:1px solid var(--line);border-radius:18px;padding:14px;
  box-shadow:0 34px 70px -30px rgba(20,24,16,.5);animation:fsCalIn .2s var(--ease)}
@keyframes fsCalIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fs-cal[hidden]{display:none!important}

.fs-cal-hd{display:flex;align-items:center;gap:10px;padding:2px 4px 12px}
.fs-cal-t{flex:1;text-align:center;font-family:var(--disp);font-weight:600;font-size:.92rem}
.fs-cnav,.fs-cal-x{width:34px;height:34px;flex:0 0 auto;border:1px solid var(--line);
  background:var(--paper-2,#fff);border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--ink-soft);transition:.2s}
.fs-cnav:hover,.fs-cal-x:hover{border-color:var(--ink);color:var(--ink)}
.fs-cal-x{display:none}

.fs-cal-months{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
/* the second month gets a hairline so the pair never reads as one wide grid */
.fs-cal-months > .fs-m + .fs-m{border-left:1px solid var(--line);padding-left:clamp(16px,2vw,26px)}
/* each month names itself — without this the two grids butt together and a
   date in the right-hand column looks like it belongs to the left month */
.fs-m-t{display:block;font-family:var(--disp);font-weight:600;font-size:.85rem;
  text-align:center;margin-bottom:10px;color:var(--ink)}
.fs-m-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
/* fs-cwd, not fs-w: the page already had .fs-w on the four "What you get"
   blocks. This rule came later in the file, won, and forced each of those
   blocks to 26px tall — which is why they printed on top of each other. */
.fs-cwd{display:grid;place-items:center;height:26px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.06em;color:var(--stone)}
.fs-d{height:38px;border:0;background:transparent;border-radius:9px;cursor:pointer;
  font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--ink);
  transition:background .15s,color .15s}
.fs-d:hover:not(:disabled){background:rgba(95,224,2,.16)}
.fs-pad{pointer-events:none}
/* struck through, not merely dimmed — "full" has to read as a fact, not a hint */
.fs-fullday{color:var(--stone);text-decoration:line-through;cursor:not-allowed;opacity:.55}
.fs-past{color:#C7CBBE;cursor:not-allowed}
.fs-mid{background:rgba(95,224,2,.15);border-radius:0}
.fs-prov{background:rgba(95,224,2,.1)}
.fs-on{background:var(--lime)!important;color:var(--ink)!important;font-weight:700}
.fs-start{border-radius:9px 0 0 9px}
.fs-end{border-radius:0 9px 9px 0}
.fs-start.fs-end{border-radius:9px}

/* one button now that the key and the running commentary are gone — the
   struck-out days and the lime range say those things without a legend */
.fs-cal-ft{display:flex;justify-content:flex-end;
  border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.fs-cal-ok{padding:9px 20px;font-size:.84rem}

@media (max-width:720px){
  /* a bottom sheet, not a squeezed popover */
  .fs-cal{position:fixed;inset:auto 0 0 0;width:100%;max-height:88vh;overflow-y:auto;
    border-radius:20px 20px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -20px 60px -20px rgba(20,24,16,.55);animation:fsSheetIn .26s var(--eo)}
  @keyframes fsSheetIn{from{transform:translateY(100%)}to{transform:none}}
  .fs-cal::before{content:"";display:block;width:40px;height:4px;border-radius:99px;
    background:var(--line);margin:0 auto 10px}
  .fs-cal-x{display:grid}
  .fs-cal-months{grid-template-columns:1fr}
  .fs-d{height:44px;font-size:.95rem}      /* thumb-sized */
  .fs-cal-ft{position:sticky;bottom:0;background:var(--paper-2,#fff);padding-bottom:4px}
  .fs-cal-ok{margin-left:auto}
  .fs-dates{grid-template-columns:1fr 1fr;gap:8px}
  .fs-dbtn > b{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){.fs-cal{animation:none}}

/* ── hero ──────────────────────────────────────────────────────────
   One rounded card carrying the photograph, the headline, the facts and
   the price. It replaces a cream text band with a separate photo grid
   under it — an arrangement where nothing said "farmstay" until you had
   already scrolled past the only words on the screen.

   Short on purpose: capped near half the viewport so the booking card
   and the description are in play immediately. A hero that fills the
   screen on a listing page is a hero that delays the booking. */
/* the header is fixed and transparent over this section, so the card has to
   start below it — otherwise the logo and the nav land on the photograph */
.fs-hero{padding:calc(var(--dg-hd-h,104px) + clamp(10px,1.4vw,18px)) 0 clamp(18px,2.4vw,30px)}
/* height, not min-height, and that distinction is the whole bug: the tiles
   size their images with height:100%, which against an auto-height parent
   resolves to auto — so each tile grew to its photograph's intrinsic height
   and dragged the card to nine hundred pixels with a void beside it. A
   definite height gives the percentages something to be a percentage of. */
.fs-hcard{position:relative;display:grid;grid-template-columns:1fr minmax(200px,300px);
  gap:9px;padding:9px;border-radius:clamp(20px,2.2vw,28px);background:#0a120d;
  height:clamp(360px,52vh,486px);overflow:hidden;
  box-shadow:0 34px 70px -40px rgba(20,24,16,.6)}

.fsg-t{position:relative;padding:0;border:0;border-radius:clamp(12px,1.3vw,18px);
  overflow:hidden;background:#101c14;cursor:pointer;display:block;
  transition:transform .5s var(--ease),filter .4s}
.fsg-t img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.fsg-t:hover img{transform:scale(1.045)}
.fs-hbig{grid-row:1;height:100%;min-height:0}
.fs-hthumbs .fsg-t{height:100%}
/* the scrim is weighted into the bottom-left corner, where the words are —
   a flat wash over the whole frame would flatten the photograph for nothing */
.fs-hbig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(72deg,rgba(6,10,7,.9) 0%,rgba(6,10,7,.72) 34%,rgba(6,10,7,.24) 62%,rgba(6,10,7,.05) 100%),
    linear-gradient(0deg,rgba(6,10,7,.78),transparent 56%)}
.fs-hthumbs{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:9px;min-height:0}
.fs-hthumbs .fsg-t{min-height:0}

.fs-hover{position:absolute;left:0;bottom:0;z-index:3;pointer-events:none;
  padding:clamp(20px,2.6vw,38px);max-width:min(660px,72%);color:var(--paper)}
.fs-hover > *{pointer-events:auto}
.fs-hcrumb{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,244,236,.7)}
.fs-hcrumb a{color:var(--lime)}
.fs-hcrumb a:hover{text-decoration:underline}
.fs-hcrumb i{font-style:normal;opacity:.5}
.fs-hover h1{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(1.9rem,4vw,3.15rem);margin-top:10px;text-shadow:0 4px 34px rgba(0,0,0,.5)}
.fs-hover h1 .ser{color:var(--lime)}
.fs-facts{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px;
  font-size:.85rem;color:rgba(245,244,236,.76)}
.fs-facts b{color:var(--paper);font-weight:700}
.fs-hgo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.fs-hgo .btn em{font-style:normal;font-weight:400;opacity:.7}
.fs-hnote{font-size:.76rem;color:rgba(245,244,236,.6);max-width:26ch;line-height:1.4}

.fsg-all{position:absolute;right:clamp(16px,1.8vw,22px);bottom:clamp(16px,1.8vw,22px);z-index:4;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.8rem;color:var(--ink);
  background:rgba(245,244,236,.94);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:9px 15px;border-radius:999px;transition:.25s var(--ease)}
.fsg-all:hover{background:var(--lime);transform:translateY(-2px)}

@media (max-width:940px){
  .fs-hcard{grid-template-columns:1fr;grid-template-rows:1fr 74px;height:clamp(360px,58vh,450px)}
  /* four squares in a row read as "there are more photographs" without
     stealing height from the picture that is doing the selling */
  .fs-hthumbs{grid-template-rows:1fr;grid-template-columns:repeat(4,1fr);height:74px}
  .fs-hover{max-width:100%;padding:clamp(18px,4vw,26px)}
  .fsg-all{bottom:auto;top:16px;right:16px;font-size:.74rem;padding:8px 13px}
}
@media (max-width:620px){
  .fs-hthumbs{display:none}          /* the strip is the first thing to go */
  .fs-hcard{grid-template-rows:1fr;height:clamp(400px,66vh,530px)}
  .fs-hbig::after{background:linear-gradient(0deg,rgba(6,10,7,.92) 8%,rgba(6,10,7,.55) 46%,rgba(6,10,7,.1) 100%)}
  .fs-hover h1{font-size:clamp(1.75rem,8vw,2.3rem)}
  .fs-facts{gap:4px 14px;font-size:.78rem}
  .fs-hgo{gap:10px;margin-top:16px}
  .fs-hgo .btn{width:100%;justify-content:center}
  .fs-hnote{max-width:none}
}
@media (prefers-reduced-motion:reduce){.fsg-t img,.fsg-all{transition:none}}

/* ── while the calendar is open ──
   The chat dock is fixed at z-index 9998 and the nudge bubble at 9997, both
   well above anything in the page flow. On a phone the sheet fills the lower
   half of the screen and they land squarely on top of it. */
body.fs-cal-open .dgb-dock,
body.fs-cal-open .dgb-nudge{opacity:0!important;pointer-events:none!important;visibility:hidden!important}

/* ── the chat buttons vs the booking dock ──────────────────────────
   The floating dock from bot-widget.php is fixed at z-index 9998, bottom
   18px. The booking bar sits at bottom 12px and is only ~60px tall, so on
   a phone the two occupy the same corner and the leaf button lands on top
   of "Check dates" — the one control on this page that must be reachable.

   Lifting the buttons is the right way round: the booking bar is the
   page's own primary action, and it spans the full width, so it cannot
   move sideways out of the way.

   Only while the dock is actually showing, and only on the widths where
   it shows — .fs-dock-on is set by the same observer that reveals it. */
@media (max-width:960px){
  body.fs-dock-on .dgb-dock{
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
    transition:bottom .32s cubic-bezier(.22,.61,.36,1)}
  body.fs-dock-on .dgb-nudge{
    bottom:calc(86px + env(safe-area-inset-bottom, 0px))}
  /* the panel is tall and anchored to the bottom; shifting it would cost
     more height than it gains, so it stays put and simply covers the dock */
  body.fs-dock-on .dgb-panel{z-index:9999}
}