:root {
  --ink: #1b2727;
  --muted: #5b6b69;
  --deep: #0f3d3e;
  --lagoon: #1c6b64;
  --sand: #f7f2e8;
  --paper: #fffdf8;
  --line: #e2dccd;
  --accent: #c8691c;
  --accent-ink: #fff;
  --ok: #2f7d4a;
  --warn: #b7791f;
  --bad: #b3261e;
  --radius: 14px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--ink); background: var(--paper); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lagoon); }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; color: var(--deep); margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
section { padding: 48px 16px; max-width: 1120px; margin: 0 auto; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.error { color: var(--bad); font-weight: 600; min-height: 1em; }
.note { background: #fff4e0; border: 1px solid #f0d49b; padding: 10px 14px; border-radius: 10px; }
.draft { background: #fff1c1; color: #4a3b00; border-bottom: 1px solid #e5cf73; padding: 10px 16px; font-size: .9rem; text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 20px; border-radius: 999px;
  border: 0; background: var(--accent); color: var(--accent-ink); font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.small { min-height: 38px; padding: 0 14px; font-size: .92rem; }
.btn.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.8); }
.btn.ghost.dark { background: transparent; color: var(--deep); border-color: var(--deep); }
.btn.wa { background: #1f8f4e; }
.linkbtn { background: none; border: 0; color: var(--lagoon); text-decoration: underline; cursor: pointer; font: inherit; padding: 0 4px; }

.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: rgba(255,253,248,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.brand { font: 700 1.05rem var(--serif); color: var(--deep); text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 16px; }
.top nav a:not(.btn) { color: var(--ink); text-decoration: none; font-size: .95rem; }
@media (max-width: 720px) { .top nav a:not(.btn) { display: none; } .brand { font-size: .95rem; } }

.hero { position: relative; padding: 0; max-width: none; min-height: min(78vh, 640px); display: grid; color: #fff; overflow: hidden; }
.hero picture, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,30,30,.15) 30%, rgba(8,30,30,.72)); }
.hero.pos-left img { object-position: 20% 60%; }
.hero.pos-right img { object-position: 78% 60%; }
.hero-text { position: relative; z-index: 1; align-self: end; padding: 32px 16px 40px; max-width: 1120px; width: 100%; margin: 0 auto; }
.hero h1 { color: #fff; font-size: clamp(2rem, 7vw, 3.6rem); margin-bottom: .2em; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
.hero p { font-size: clamp(1.05rem, 2.6vw, 1.3rem); max-width: 40em; margin: 0 0 20px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.book-wrap { margin-top: -28px; position: relative; z-index: 2; padding-top: 0; }
.search, .guest { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 12px 40px rgba(15,61,62,.12); }
.search h2 { font-size: 1.4rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; }
label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; color: var(--deep); }
input, select, textarea { font: 1rem var(--sans); padding: 11px 12px; border: 1.5px solid #cfc7b4; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; min-height: 46px; }
/* iPhone Safari gives date boxes a fixed natural width that pushed check-out past the card (Shibin's screenshot 2026-10-12):
   let the grid cells shrink and draw the date box like the other boxes */
.fields > *, label { min-width: 0; }
label { grid-template-columns: minmax(0, 1fr); }
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
@media (max-width: 600px) { .fields > button { grid-column: 1 / -1; } }   /* phones: "Check availability" on one line, full width */
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(28,107,100,.25); border-color: var(--lagoon); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }

#results { margin-top: 18px; }
.result-head { font-weight: 600; color: var(--deep); }
.results { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.result { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; }
.result img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.result-body { padding: 14px 16px 16px; }
.result.off { opacity: .6; }
.price { font-size: 1.15rem; margin: .2em 0; }
.hurry { color: var(--accent); font-weight: 600; margin: .2em 0 .6em; }

.guest { margin-top: 18px; display: grid; gap: 14px; max-width: 640px; }
.chosen { background: var(--sand); padding: 10px 14px; border-radius: 10px; margin: 0; font-weight: 600; }
fieldset.pay { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: grid; gap: 8px; }
legend { font-weight: 600; color: var(--deep); padding: 0 4px; }
label.radio { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); }
label.radio input { width: 20px; min-height: 20px; margin-top: 3px; flex: none; }

.intro { font-size: 1.12rem; max-width: 760px; }
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.room, .exp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.room img, .exp img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.room-body { padding: 16px 18px 18px; }
.chips { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--sand); border-radius: 999px; padding: 3px 10px; font-size: .85rem; }

.gallery { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 10px; }
.gallery a:first-child { grid-column: span 2; grid-row: span 2; }

.two { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
#location { background: var(--sand); max-width: none; padding-left: max(16px, calc((100% - 1088px) / 2)); padding-right: max(16px, calc((100% - 1088px) / 2)); }
.plain { padding-left: 1.1em; }
.plain li { margin: .3em 0; }
.addr { font-weight: 600; }

.foot { background: var(--deep); color: #e8efe9; padding: 32px 16px 90px; text-align: center; }
.foot a { color: #fff; }
.foot .muted { color: #b7c7c2; }
.wa-float { position: fixed; right: 14px; bottom: 14px; z-index: 30; background: #1f8f4e; color: #fff; text-decoration: none; font-weight: 700;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }

/* booking confirmation */
.page { max-width: 720px; margin: 0 auto; padding: 24px 16px 60px; }
.ref { font-size: 1.1rem; }
.summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }
.steps { padding-left: 1.2em; display: grid; gap: 14px; margin: 24px 0; }
.steps .btn { margin-top: 8px; }

/* owner admin */
.admin { max-width: 1120px; margin: 0 auto; padding: 16px 16px 60px; overflow-wrap: break-word; }   /* long site addresses wrap on phones */
.admin section { padding: 24px 0; border-top: 1px solid var(--line); max-width: none; }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.admin-head h1 { margin: 0; font-size: 1.5rem; }
.inline { display: inline-flex; gap: 6px; align-items: end; margin: 0; }
.inline label { font-weight: 400; }
.inline input { min-height: 38px; padding: 6px 8px; width: 7em; }
.flash { background: #e6f4ea; border: 1px solid #b7dfc2; padding: 10px 14px; border-radius: 10px; }
.flash.bad { background: #fdecea; border: 2px solid #d93025; color: #8a1c14; font-weight: 600; }
.bk { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--warn); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.bk.confirmed { border-left-color: var(--ok); }
.bk.cancelled { border-left-color: #999; opacity: .75; }
.bk header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk p { margin: .3em 0; }
.bk .notes { font-style: italic; }
.tag { font-size: .75rem; font-weight: 700; text-transform: uppercase; background: #eee; border-radius: 6px; padding: 2px 7px; }
.tag.requested { background: #fff1c1; } .tag.confirmed { background: #dcf1e3; } .tag.cancelled { background: #f1dede; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.row label { flex: 1 1 140px; }
.gridwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table.cal { border-collapse: collapse; font-size: .8rem; }
table.cal th, table.cal td { border: 1px solid var(--line); padding: 4px; text-align: center; min-width: 30px; }
table.cal tbody th { text-align: left; white-space: nowrap; position: sticky; left: 0; background: #fff; }
table.cal th.we { background: var(--sand); }
td.free { background: #e3f3e8; } td.part { background: #fff1c1; } td.full { background: #f6d5d2; font-weight: 700; }
table.prices { border-collapse: collapse; margin-bottom: 12px; }
table.prices th, table.prices td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
table.prices input { width: 7em; min-height: 38px; }
.login { max-width: 360px; margin: 10vh auto; display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }

@media (max-width: 720px) {
  .hero { min-height: 60vh; }
  .hero-wa { display: none; }
  .draft { font-size: .8rem; padding: 8px 12px; }
  .wa-float { padding: 10px 14px; font-size: .9rem; }
  .result { grid-template-columns: 112px 1fr; }
  .result.nophoto { grid-template-columns: 1fr; }
  .result img { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .result-body { padding: 10px 12px 12px; }
  .result-body h3 { font-size: 1.05rem; margin-bottom: .2em; }
  .result .btn { min-height: 40px; padding: 0 16px; }
}

/* owners' room */
.roomlink { display: block; margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--deep); color: #fff; font-weight: 700; text-decoration: none; }
.badge { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .82rem; }
.room .feed { max-height: 60vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; margin: 12px 0; }
.msg { padding: 10px 0; border-bottom: 1px solid var(--line); max-width: 560px; }
.msg:last-child { border-bottom: 0; }
.msg.mine { margin-left: auto; text-align: right; }
.msg.mine .needcard { text-align: left; }
.msg header { margin-bottom: 4px; }
.msg p { margin: 4px 0; }
.msg audio { width: 100%; max-width: 320px; height: 40px; }
.needcard, .freecard { background: #fff4e0; border: 1px solid #f0d49b; border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.freecard { background: #eef6f1; border-color: #bfdcc8; }
.composer { display: flex; gap: 14px; align-items: center; margin: 8px 0 16px; }
.mic { flex: none; width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 2rem; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.mic.on { background: #b3261e; animation: pulse 1.2s infinite; }
.mic:disabled { opacity: .6; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(179,38,30,.15); } }
.compose-side { flex: 1; min-width: 0; }
.say { display: flex; gap: 8px; }
.say input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.need summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.need label.wide { flex-basis: 100%; }
.need .row input { font: inherit; }

/* owner photos */
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.ph-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ph-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ph-grid figcaption { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 8px; font-size: .85rem; }
.upload { cursor: pointer; }
.newrow input::placeholder { color: #9aa5a3; }
label.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; }
/* Guests on Instagram (src/instagram.ts): Instagram's own embeds, loaded on tap by /ig.js */
.ig-grid { columns: 300px 2; column-gap: 16px; margin: 16px 0 28px; }
.ig-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; break-inside: avoid; margin-bottom: 16px; }
.ig-item.on a { display: none; }
.ig-item:not(.on) { background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px; }
.ig-item iframe { width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; }
.ig-item a { font-size: .9rem; color: var(--lagoon); }

/* boat sites: the boat type above each trip (Country canoe, Shikara, Kayak...) */
.room-body .kicker { margin: 0 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #0f6b5c) }

/* Photo viewer (stay.js): full screen, swipe or ‹ › between photos */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(8, 14, 14, .94); display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.lb[hidden] { display: none; }
body.lb-on { overflow: hidden; }
.lb-fig { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 16px; box-sizing: border-box; }
.lb-img { max-width: 100%; max-height: calc(100% - 36px); object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.lb-cap { color: #e9e4d8; font: 600 .95rem var(--sans); margin-top: 10px; }
.lb button { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; border-radius: 999px;
  width: 48px; height: 48px; font: 400 2rem/1 var(--sans); display: flex; align-items: center; justify-content: center; }
.lb button:hover, .lb button:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.lb-close { top: 10px; right: 10px; font-size: 1.4rem !important; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; } .lb-cap { margin-bottom: 52px; } }

/* Booking alerts card on the owner page (admin.js + sw.js, src/push.ts) */
.alerts { background: #fff8e8; border: 2px solid #f0c36a; border-radius: 14px; padding: 12px 16px; margin: 14px 0; }
.alerts h2 { margin: 0 0 6px; font-size: 1.15rem; }
.alerts .al-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.alerts .al-msg:empty { display: none; }

/* Busy dates on the owner page (src/peaks.ts, 2026-10-21): the holiday card at the top, the holidays and own dates under Prices */
/* owner page: prices on the website, or "guests call me to book" (config.callToBook, 2026-10-21) */
.callbook { background: var(--sand, #f7f4ec); border: 1px solid #d9d1bf; border-radius: 12px; padding: 10px 14px; margin: 8px 0 14px; }
.callbook.on { background: #fff4d6; border-color: #e8cf85; }
.callbook p { margin: 0 0 6px; }
.busy-top { background: #fff8e8; border: 2px solid #f0c36a; border-radius: 14px; padding: 12px 16px; margin: 14px 0; }
/* the coming holiday once its price is set: one line at the top with the way back to its dates and prices (2026-10-21) */
.busy-done { background: #eef7f0; border: 1px solid #b7dfc2; border-radius: 14px; padding: 10px 16px; margin: 14px 0; }
.busy-done h2 { margin: 0 0 4px; font-size: 1.05rem; }
.busy-done p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.busy-edit { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--deep, #0f3d3e); border: 1px solid currentColor; border-radius: 999px; padding: 1px 10px; margin-left: 4px; }
details.busy-item[open] .busy-edit { display: none; }
.busy-top h2 { margin: 0 0 6px; font-size: 1.15rem; }
.busy-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; margin: 10px 0 6px; }
.busy-room { display: flex; flex-direction: column; gap: 4px; }
.busy-room input { width: 100%; min-height: 42px; padding: 8px 10px; }
.busy-pct { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
.busy-pct[hidden] { display: none; }
.busy-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.busy-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.busy-item.todo { border: 2px solid #f0c36a; background: #fffbf2; }
.busy-item > summary { cursor: pointer; line-height: 1.5; }
.busy-item[open] > summary { margin-bottom: 6px; }
.busy-list li { margin: 6px 0; }
.warn-text { color: #8a1c14; font-weight: 600; }
/* the guest's results when the dates are in a holiday without a price yet */
.busy-note { margin: 8px 0; }

/* Google map in the Location section (2026-10-09) */
.map { margin: 12px 0; border-radius: 12px; overflow: hidden; border: 1px solid #e5dfd2; background: #eee7da; }
.map iframe { display: block; width: 100%; height: 300px; border: 0; }
.addr a { color: inherit; }
.hero-cta .hero-map, .hero-cta .hero-ig { white-space: nowrap; }

/* more than one photo on a "Things to do" card (Dwaraka 2026-10-09): two side by side */
.exp-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.exp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* owners' card photos (2026-10-21): one = the card's big photo as before; three or more = the first big with "📷 N", the rest as tiles */
.exp-photos.one, .exp-photos.many { display: block; }
.exp-photos .rp-main { display: block; position: relative; }
.exp-photos .rp-main img { aspect-ratio: 3 / 2; }
.exp-photos .rp-count { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
.exp-photos .rp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 3px; }
.exp-photos .rp-thumbs a { display: block; }

/* owner page: calendar links (Booking.com / Airbnb sync) */
#ical h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
#ical .calurl, #gbp .calurl { width: 100%; max-width: 34rem; font-size: .8rem; padding: .35rem .5rem; }
#gbp .calurl { width: auto; max-width: 16rem; }
#gbp h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
#gbp ol li { margin: .25rem 0; }
#ical .warn { color: #a23b1d; }

/* a room's own photos (owner page "Photos of each room", 2026-10-11): first big, the rest as tiles; all open the viewer */
.room-photos .rp-main { display: block; position: relative; }
.room-photos .rp-count { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
.room-photos .rp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 3px; }
.room-photos .rp-thumbs img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; }

/* owner page: photos of each room */
.rp-room { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 12px 0; background: #fff; }
.rp-room h3 { margin: 0 0 6px; font-size: 1.02rem; }
.rp-now { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rp-now figure { margin: 0; flex: 0 0 132px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #faf8f3; }
.rp-now img { display: block; width: 132px; height: 99px; object-fit: cover; }
.rp-now figcaption { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 4px 6px; font-size: .8rem; }
.rp-pick summary { cursor: pointer; margin: 8px 0 4px; font-weight: 600; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin: 6px 0 10px; }
.rp-grid label { position: relative; display: block; cursor: pointer; border-radius: 8px; overflow: hidden; border: 3px solid transparent; }
.rp-grid label:has(input:checked) { border-color: var(--accent, #0f6b5c); }
.rp-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rp-grid input { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; margin: 0; }
.rp-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }

/* bills from the owner to a guest: owner forms (admin) + the guest's page /invoice/<code> (src/guest-bills.ts) */
.gb-form fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; }
.gb-form label { display: block; margin: 6px 0; }
.gb-form .row label { display: inline-block; margin-right: 12px; }
.gb-items td input { width: 100%; }
.gb-items td:first-child { min-width: 46%; }
.gb-amt { text-align: right; white-space: nowrap; }
.gb-total { font-size: 1.1rem; margin: 12px 0; }
.gb-list li { margin: 6px 0; }
.gb-settings label { display: block; margin: 8px 0; }
.gb-settings input, .gb-settings select { display: block; max-width: 22rem; width: 100%; }
.invoice { max-width: 860px; }
.inv-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.inv { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.inv h1 { margin: 0 0 4px; font-size: 1.5rem; }
.inv-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.inv-meta { text-align: right; }
.inv-meta h2 { margin: 0 0 4px; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; }
.inv-to { margin: 14px 0; }
.inv-to p { margin: 2px 0; }
.inv-items { width: 100%; border-collapse: collapse; margin: 10px 0; }
.inv-items th, .inv-items td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv-items th:nth-child(n+2), .inv-items td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.inv-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; max-width: 360px; margin: 10px 0 0 auto; }
.inv-sum dt, .inv-sum dd { margin: 0; }
.inv-sum dd { text-align: right; }
.inv-sum .big { font-weight: 700; font-size: 1.08rem; }
.inv-pay { margin: 18px 0 4px; }
.inv-foot { margin-top: 18px; }
.inv-stamp { position: absolute; top: 18px; right: 50%; transform: translateX(50%) rotate(-8deg); margin: 0; padding: 4px 16px; border: 3px solid; border-radius: 8px;
  font-weight: 800; font-size: 1.6rem; letter-spacing: .12em; opacity: .75; }
.inv-stamp.paid { color: #1f8f4e; }
.inv-stamp.cancelled { color: #b3261e; }
@media (max-width: 560px) { .inv { padding: 16px 14px; } .inv-meta { text-align: left; } .inv-stamp { font-size: 1.2rem; } }
@media print {
  .no-print, .draft, header.top { display: none !important; }
  body { background: #fff; }
  .inv { border: 0; padding: 0; }
}
.inv section, .inv .inv-to { padding: 0; margin: 14px 0; max-width: none; }

/* owner page: "Things to do and food" editor (admin.ts experiencesSection) */
.exp-edit{border:1px solid #e5dfd2;border-radius:12px;padding:10px;margin:8px 0;display:grid;gap:6px}.exp-edit.new{border-style:dashed}.exp-edit textarea{width:100%;font:inherit}fieldset.food{border:1px solid #e5dfd2;border-radius:12px;padding:8px 12px;margin:8px 0}fieldset.food .check{display:block;margin:4px 0}

/* UPI choices (util.ts upiMore): app buttons, UPI ID + copy, help line */
.upi-apps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 6px}.upi-apps span{font-size:.9rem;color:#4a5a5a}
.upi-apps a{display:inline-block;border:1.5px solid #0f3d3e;border-radius:999px;padding:7px 14px;font-weight:600;text-decoration:none;color:#0f3d3e;background:#fff}
.upi-id{margin:6px 0;font-size:.95rem;line-height:1.5}.upi-copy{font:inherit;font-size:.85rem;border:1px solid #0f3d3e;background:#e8f1f1;color:#0f3d3e;border-radius:8px;padding:3px 10px;margin:0 4px;cursor:pointer}
.upi-help{font-size:.82rem;color:#5d6b6b;margin:4px 0}

/* Booking form date boxes + Homlystay's own calendar (site.ts dateBox, stay.js) - replaces the phone's own date picker */
.datebox { font: 1rem var(--sans); text-align: left; padding: 11px 12px; border: 1.5px solid #cfc7b4; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; min-height: 46px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.datebox.on { border-color: var(--lagoon); outline: 3px solid rgba(28,107,100,.25); }
.cal { grid-column: 1 / -1; max-width: 440px; border: 1.5px solid var(--lagoon); border-radius: 14px; padding: 12px; background: #fff; }
.cal-say { margin: 0 0 6px; font-weight: 700; color: var(--deep); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-month { font-size: 1.05rem; color: var(--deep); }
.cal-nav { font: 700 1.4rem/1 var(--sans); width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--deep); cursor: pointer; }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; text-align: center; }
.cal-wd { font-size: .72rem; font-weight: 700; color: #6b7a7a; padding: 4px 0; }
.cal-day { font: 600 1rem var(--sans); height: 42px; border: 0; background: none; color: var(--ink); border-radius: 999px; cursor: pointer; padding: 0; }
.cal-day:disabled { color: #c9c9c9; cursor: default; text-decoration: line-through; }
.cal-day.mid { background: #dcefeb; border-radius: 0; }
.cal-day.start, .cal-day.end { background: var(--lagoon); color: #fff; }
.cal-day.start:not(:last-child) { border-radius: 999px; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cal-sum { font-weight: 600; color: var(--deep); font-size: .95rem; }

/* UPI pay block (util.ts upiPay): copy the UPI ID, or the QR; app buttons last (they get blocked for personal UPI IDs) */
.upi-pay{margin:10px 0;display:grid;gap:10px}
.upi-step{margin:0;line-height:1.55}.upi-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#0f3d3e;color:#fff;font-weight:700;font-size:.85rem;margin-right:6px}
.upi-vpa{word-break:break-all}
.upi-copy{font:inherit;font-weight:700;font-size:.95rem;border:0;background:#0f3d3e;color:#fff;border-radius:10px;padding:9px 14px;margin:6px 0 0;cursor:pointer;display:block}
.upi-qr{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px dashed #b9c6c4;border-radius:12px;padding:10px}
.upi-qr img{width:150px;height:150px;image-rendering:pixelated;background:#fff;flex:none}.upi-qr div{flex:1 1 160px}.upi-qr p{margin:0 0 6px}
.upi-small{font-size:.85rem;color:#5d6b6b;margin:0}.upi-small a{color:#0f3d3e;font-weight:600}
.pay-h{font-size:1.1rem;margin:0 0 4px}

/* Search pages (src/seo.ts): rooms, things to do, how to reach */
.crumbs { font-size: .88rem; color: var(--muted); margin: 0 0 12px; }
.crumbs a { color: var(--deep); }
.sub-head { padding-bottom: 8px; }
.sub-head .lead { font-size: 1.1rem; margin: 0; color: var(--muted); }
.sub-photos { padding-top: 8px; padding-bottom: 8px; }
.sub-body { padding-top: 24px; }
.price-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; align-self: start; }
.price-box .hero-cta { margin: 14px 0 8px; }
.seo-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.seo-links a, .more { font-weight: 700; color: var(--deep); }
.exp h2.h3 { font-size: 1.2rem; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 auto 14px; max-width: 900px; }
.foot-links a { color: #fff; font-weight: 600; }.sub-head .kicker { margin: 0 0 2px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #0f6b5c); }

/* Owner tools (2026-10-13): book again (#58), referral codes (#60), welcome guide (#67), nearby partners (#30) */
.again-note { background: var(--sand); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-weight: 600; color: var(--deep); }
.result.again { outline: 2px solid var(--accent); outline-offset: -2px; }
.again-tag { margin: 0 0 4px; font-size: .8rem; font-weight: 700; color: var(--accent); }
.refhint { margin-top: -4px; }
.refbox { background: var(--sand); border-radius: var(--radius); padding: 14px 16px; margin: 18px 0; }
.refbox h2 { font-size: 1.15rem; }
.refcode { font-size: 1.3rem; margin: 6px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.refcode .mono { min-width: 0; overflow-wrap: anywhere; }   /* a long referral link breaks inside the phone width */
.guide .kicker { margin: 14px 0 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lagoon); }
.guide .gd { margin: 20px 0; padding: 0; }
.guide .gd h2 { font-size: 1.2rem; margin-bottom: .3em; }
.guide .gd p { margin: .3em 0; }
.guide .hero-cta { margin: 14px 0; }
a.room.partner { display: block; color: inherit; text-decoration: none; }
a.room.partner:hover h3, a.room.partner:focus-visible h3 { text-decoration: underline; }
.guide-form textarea { width: 100%; }
.guest-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.guest-list li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.guest-list li > div { flex: 1 1 220px; min-width: 0; }
.guest-list p { margin: 2px 0 0; }
label.check input[type="checkbox"], label.check input[type="radio"] { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; }
.row label.check { flex: 0 0 auto; align-self: center; }

/* Website themes (src/looks.ts): the preview bar (?look=...) and the owner page's theme picker */
.lk-preview { position: relative; z-index: 40; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: center; padding: 9px 16px;
  background: #241a3a; color: #f3eefc; font: 500 .88rem/1.4 system-ui, sans-serif; text-align: center; }
.lk-preview a { color: #fff; font-weight: 700; }
#look .lk-tier { margin: 22px 0 8px; font-size: 1.05rem; }
.lk-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lk-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lk-card.on { border: 2px solid var(--ok); }
.lk-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; background: var(--sand); }
.lk-card > div { padding: 10px 12px 12px; display: grid; gap: 4px; }
.lk-card h3 { margin: 0; font-size: 1.1rem; }
.lk-card p { margin: 0; }
.lk-card .actions { margin-top: 6px; }
.lk-price { font-size: .95rem; }

/* Ayurveda centres (src/ayurveda.ts): programmes, treatments, doctors, the day, what is included, consultation */
.ay-prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ay-prog { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.ay-prog h3 { margin: 0; }
.ay-prog p { margin: 0; }
.ay-prog .chips { margin: 4px 0; }
.ay-days { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ay-sample { font-size: .78rem; color: #8a6d1d; background: #fff4d6; border-radius: 6px; padding: 2px 8px; align-self: flex-start; }
.ay-price { font-size: 1.15rem; font-weight: 700; color: var(--deep); margin-top: auto !important; padding-top: 8px; }
.ay-price span { font-size: .85rem; font-weight: 400; color: var(--muted); }
.ay-incl-list, .ay-tick { list-style: none; padding: 0; margin: 4px 0; }
.ay-incl-list li, .ay-tick li { padding-left: 1.4em; position: relative; margin: .25em 0; }
.ay-incl-list li::before, .ay-tick li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.ay-treat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ay-t { border-left: 3px solid var(--accent); background: var(--sand); padding: 12px 14px; border-radius: 0 10px 10px 0; }
.ay-t h3 { font-size: 1.05rem; margin: 0 0 4px; }
.ay-t p { margin: 0; font-size: .93rem; }
.ay-doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.ay-doc { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.ay-doc img, .ay-doc-i { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.ay-doc-i { display: grid; place-items: center; background: var(--sand); color: var(--deep); font: 700 2rem var(--serif); }
.ay-doc h3 { margin: 0; }
.ay-doc p { margin: 4px 0 0; }
.ay-doc-t { color: var(--muted); font-size: .9rem; }
.ay-day-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 680px; }
.ay-day-list li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ay-day-list time { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ay-badges span { border: 1.5px solid var(--deep); color: var(--deep); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 600; }
.ay-consult { display: flex; gap: 22px; align-items: center; background: var(--sand); border-radius: var(--radius); max-width: 1088px; margin: 24px auto; padding: 28px 24px; }
.ay-consult h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0 0 12px; }
.ay-consult .hero-cta { margin: 0; }
.ay-breath { flex: none; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 30%, transparent 31%), radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent) 0 70%, transparent 71%); }
@media (prefers-reduced-motion: no-preference) { .ay-breath { animation: ay-breathe 8s ease-in-out infinite; } }
@keyframes ay-breathe { 0%, 100% { transform: scale(.82); } 45% { transform: scale(1.08); } }
@media (max-width: 600px) { .ay-consult { flex-direction: column; align-items: flex-start; } }
/* owner page: the Ayurveda editor and the extras for the paid looks (src/ayurveda.ts, src/extras.ts) */
.ay-ticks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 8px; }
.ay-ticks label.check { font-weight: 400; color: var(--ink); }
.ay-form h3, .ex-form h3, #extras h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.ay-form fieldset.exp-edit { margin: 10px 0; }
#extras summary, #ayurveda summary { cursor: pointer; padding: 6px 0; }

/* owner page: on a phone the rooms and prices editors show one card per room (2026-10-15: the 6-column rooms table made the whole owner
   page scroll sideways at 375 px). Same inputs and names; each box gets its column name from data-label. */
@media (max-width: 640px) {
  table.own-rooms, table.own-prices, table.own-rooms tbody, table.own-prices tbody { display: block; width: 100%; }
  table.own-rooms thead, table.own-prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.own-rooms tr, table.own-prices tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px 10px; padding: 12px; margin: 0 0 10px;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  table.own-rooms td, table.own-prices td, table.own-prices th { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
  table.own-rooms td[data-label]::before, table.own-prices td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--deep); }
  table.own-rooms input:not([type="checkbox"]), table.own-prices input { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px; }
  table.own-rooms td.own-wide, table.own-prices th { grid-column: 1 / -1; }
  table.own-rooms tr.newrow { background: var(--sand); border-style: dashed; }
  table.own-rooms tr.newrow::before { content: attr(data-title); grid-column: 1 / -1; font-weight: 700; color: var(--deep); }
}

/* room rent by the number of guests (2026-10-27, src/blocks.ts guestRent / ladderLine, owner page Prices): only pages with such a room use these */
.gp-line { margin: 0 0 .4em; font-size: .92rem; color: var(--deep); font-weight: 600; }
.gp-table { width: 100%; max-width: 860px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card, #fff); margin: 10px 0 14px; }
.gp-table th, .gp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.gp-table thead th { background: var(--sand); color: var(--deep); font: 700 .8rem var(--sans); text-transform: uppercase; letter-spacing: .07em; }
.gp-table tbody tr:last-child > * { border-bottom: 0; }
.gp-table tbody th { font: 700 1.1rem var(--serif); color: var(--deep); white-space: nowrap; }
.gp-table td strong { font: 700 1.3rem var(--serif); color: var(--deep); white-space: nowrap; }
@media (max-width: 560px) {
  .gp-table thead { display: none; }
  .gp-table, .gp-table tbody, .gp-table tr, .gp-table th, .gp-table td { display: block; width: 100%; }
  .gp-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .gp-table tbody tr:last-child { border-bottom: 0; }
  .gp-table th, .gp-table td { padding: 2px 0; border: 0; }
  .gp-table td::before { content: attr(data-label) ": "; color: var(--muted); font-size: .88rem; }
}
table.own-prices tr.gp-own td { padding-top: 0; }
.gp-own details { margin: 0 0 6px; }
.gp-own summary { cursor: pointer; font-weight: 600; color: var(--deep); padding: 4px 0; }
.gp-boxes { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 4px; }
.gp-boxes label { display: flex; flex-direction: column; font-size: .85rem; font-weight: 600; color: var(--deep); }
.gp-boxes input { width: 7em; min-height: 38px; }
@media (max-width: 640px) {
  table.own-prices tr.gp-own { display: block; margin-top: -6px; }
  table.own-prices tr.gp-own td { display: block; }
  .gp-boxes input { width: 6.5em; }
}

/* The owner's videos (src/clips.ts, blocks.ts videos), after the photos */
.vid-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.vid { margin: 0; }
.vid video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: #000; border-radius: 12px; }
.vid figcaption { margin-top: 6px; font-size: .9rem; color: var(--muted, #5b6b6b); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vid-lang { font-size: .8rem; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; }
/* A cover photo whose sign or roof is near the top (config.heroPosition 'top'): only the cover, not the photos after it */
.hero.pos-top > picture img { object-position: 50% 18%; }
/* English / Malayalam switch (src/ml.ts langSwitch), bottom left; the WhatsApp button is bottom right */
.hl-lang { position: fixed; left: 12px; bottom: 14px; z-index: 25; display: flex; overflow: hidden; border-radius: 999px; background: #fff;
  border: 1px solid rgba(0,0,0,.12); box-shadow: 0 2px 12px rgba(0,0,0,.18); font: 600 .82rem/1.2 system-ui, sans-serif; }
.hl-lang a { padding: 8px 12px; color: var(--deep, #0f3d3e); text-decoration: none; }
.hl-lang a[aria-current] { background: var(--deep, #0f3d3e); color: #fff; }
.hl-lang a:focus-visible { outline: 2px solid var(--deep, #0f3d3e); outline-offset: -4px; }
@media print { .hl-lang { display: none; } }