/* ---------------------------------------------------------------
   Compatibility notes
   - No CSS nesting, :has(), container queries, or aspect-ratio in
     load-bearing positions: those exclude Safari < 15 / older Android.
   - Flex/grid gap has a margin fallback where it would break layout.
   - Inputs are 16px on mobile so iOS Safari does not zoom on focus.
   - Uses -webkit- prefixes for sticky and backface on older Safari.
   - Icons are inline SVG, not emoji: emoji render inconsistently
     across Windows / Android / iOS and some render as boxes.
   --------------------------------------------------------------- */

:root {
  --ink: #222222;
  --ink-soft: #6a6a6a;
  --border: #dddddd;
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  /* Pulled from the Canva logo: its blue, darkened to pass WCAG AA on white. */
  --accent: #2f66b5;
  --accent-hover: #24518f;
  --sun: #e8a020;
  --radius: 14px;
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.12);
  /* Widened from 1120 when the contact panel became a third column: at 1120
     the text column fell to ~390px, which is too narrow to read. */
  --maxw: 1280px;
  --pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
               sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
}

img { max-width: 100%; height: auto; border: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; margin: 0 0 12px; }
h1 { font-size: 26px; line-height: 1.2; }
h2 { font-size: 21px; }
h3 { font-size: 16px; margin-top: 22px; margin-bottom: 6px; }
p { margin: 0 0 12px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13.5px; }
.lede { font-size: 16.5px; }
.divider { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

/* `hidden` must beat the display rules on .btn etc. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Topbar ---------- */

.topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--pad);
  gap: 12px;
}
.logo { display: flex; align-items: center; flex-shrink: 1; min-width: 0; }
.logo img { height: 42px; width: auto; display: block; }
@media (max-width: 640px) { .logo img { height: 34px; } }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Flag shortcuts. Inactive flags are dimmed so the current language reads as
   the one selected state rather than six competing colour blocks. */
.lang-flags { display: flex; align-items: center; gap: 4px; }
.lang-flag {
  width: 27px; height: 19px; padding: 0; line-height: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 3px; background: none;
  cursor: pointer; opacity: 0.5; transition: opacity 0.15s ease;
}
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-flag:hover { opacity: 0.85; }
.lang-flag.is-active { opacity: 1; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lang-flag:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lang-flag { transition: none; } }
/* Below this the header cannot hold logo + 6 flags + dropdown + CTA;
   the dropdown alone still reaches every language. */
@media (max-width: 720px) { .lang-flags { display: none; } }

.lang-switch {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
  max-width: 130px;
}

.btn {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  min-height: 44px;   /* touch target */
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-small { padding: 10px 14px; font-size: 14px; min-height: 40px; }
.btn-full { display: block; width: 100%; margin-top: 16px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-ghost {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-soft); }
/* The contact block no longer uses .btn-ghost — it is per-channel rows now.
   Kept only so the admin header's Sign out button never picks up the old
   equal-width stretch rule that once lived here. */

/* ---------- Gallery ---------- */

.gallery { max-width: var(--maxw); margin: 16px auto 0; padding: 0 var(--pad); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 190px 190px;
  gap: 8px;
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-cell { overflow: hidden; background: var(--bg-soft); }
.gallery-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* object-fit is unsupported on very old browsers; the image still shows,
     just letterboxed rather than cropped. Acceptable degradation. */
}
.gallery-main { grid-row: 1 / 3; grid-column: 1 / 3; }

@media (max-width: 899px) {
  .gallery-grid { grid-template-rows: 150px 150px; }
}
@media (max-width: 640px) {
  .gallery { padding: 0; margin-top: 0; }
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 260px;
    border-radius: 0;
    gap: 0;
  }
  .gallery-main { grid-row: 1; grid-column: 1; }
  .gallery-grid > .gallery-cell:not(.gallery-main) { display: none; }
}

/* ---------- Layout ---------- */

.page { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 60px; }

.title-block { padding: 24px 0 14px; border-bottom: 1px solid var(--border); }
.tagline { color: var(--accent); font-weight: 600; margin: 0 0 6px; }
.subtitle { color: var(--ink-soft); font-size: 15px; margin: 0; }
.sep { margin: 0 6px; }

/* Two panels flanking the text: dates on the right, everything date-free on
   the left. Source order is contact, details, booking; the columns below place
   them explicitly, so the narrow layouts can reorder without touching markup. */
.content-grid {
  display: grid;
  /* Was 236 + 372. The two asides took 608px of the layout and left the
     text a guest actually reads with barely half the page. The calendar is
     the widest thing in the booking card and fits at 336. */
  grid-template-columns: 176px minmax(0, 1fr) 296px;
  gap: 36px;
  padding-top: 28px;
  align-items: start;
}
.contact-column { grid-column: 1; grid-row: 1; min-width: 0; }
.details-column { grid-column: 2; grid-row: 1; min-width: 0; }
.booking-column { grid-column: 3; grid-row: 1; }

/* Below this the text column would drop under ~460px, which is too narrow to
   read comfortably. The contact panel folds under the text and goes wide. */
@media (max-width: 1239px) {
  .content-grid { grid-template-columns: minmax(0, 1fr) 296px; gap: 40px; }
  .details-column { grid-column: 1; grid-row: 1; }
  .booking-column { grid-column: 2; grid-row: 1 / span 2; }
  .contact-column { grid-column: 1; grid-row: 2; margin-top: 28px; }
}
@media (max-width: 959px) {
  .content-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .details-column, .booking-column, .contact-column {
    grid-column: 1;
    grid-row: auto;
  }
  /* Reachable before the calendar on a phone, where the whole card is a scroll. */
  .contact-column { order: -1; margin-top: 0; }
}

/* ---------- Highlights ---------- */

.highlights { display: grid; gap: 18px; }
.highlight { display: flex; gap: 14px; align-items: flex-start; }
.highlight h3 { margin: 0 0 2px; font-size: 15.5px; }
.highlight p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.hl-icon {
  width: 26px; height: 26px; flex: 0 0 26px; margin-top: 2px;
  fill: none; stroke: var(--ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Sleeping ---------- */

.sleeping-card {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; max-width: 340px;
}
.sleeping-card h3 { margin: 0 0 2px; font-size: 15.5px; }
.sleeping-card p { margin: 0; font-size: 14px; }
.sleep-icon {
  width: 26px; height: 26px; flex: 0 0 26px;
  fill: none; stroke: var(--ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Amenities ---------- */

.amenities-grid {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
@media (max-width: 520px) { .amenities-grid { grid-template-columns: 1fr; } }
.amenities-grid li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.amenities-grid svg {
  width: 22px; height: 22px; flex: 0 0 22px;
  fill: none; stroke: var(--ink); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.amenities-more { margin-top: 4px; }

.rules-list {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; gap: 9px; font-size: 15px;
}
.registration { margin: 0; }

.map {
  display: block; position: relative; margin: 12px 0;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
}
.map img { display: block; width: 100%; height: auto; }
/* Sits over the image rather than beside it, so the map keeps its full width. */
.map-open {
  position: absolute; left: 10px; bottom: 10px;
  background: #fff; color: var(--ink);
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}
.map:hover .map-open { background: var(--bg-soft); }

/* ---------- Reviews ---------- */

.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 780px) { .reviews-grid { grid-template-columns: minmax(0, 1fr); } }
.review-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.review-stars { color: #b8860b; font-size: 14px; margin-bottom: 8px; letter-spacing: 1px; }
.review-quote { font-size: 14.5px; margin: 0 0 10px; }
.review-author { font-size: 13px; color: var(--ink-soft); margin: 0; }
.hide-reviews #reviews-section, .hide-reviews #reviews-divider { display: none; }

/* ---------- Booking card ---------- */

.booking-column { position: relative; min-width: 0; }
.booking-card {
  position: -webkit-sticky;
  position: sticky;
  top: 84px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  background: var(--bg);
}
@media (max-width: 959px) {
  /* Sticky inside a non-scrolling single column just pins awkwardly. */
  .booking-card { position: static; box-shadow: none; }
}

.pricing-indicator {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
}
/* Estimated total, revealed once both dates are picked. */
.quote { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.quote-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; margin-bottom: 6px;
}
.quote-total {
  font-weight: 600; font-size: 15px;
  margin-top: 10px; padding-top: 10px; margin-bottom: 0;
  border-top: 1px solid var(--border);
}
.quote-fee-note { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 6px; line-height: 1.4; }
.quote-rule-error { font-size: 13.5px; color: #c0392b; margin: 0; line-height: 1.4; }

/* Area guide */
.area-list { margin: 14px 0 0; }
.area-list dt { font-weight: 600; margin-top: 14px; }
.area-list dd { margin: 4px 0 0; color: var(--ink-soft); }

.pricing-rate { font-size: 16px; margin: 0 0 6px; }
.pricing-amount { font-size: 19px; }
.pricing-note { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.45; }
/* Two distinct points; without the gap they read as one run-on paragraph. */
.pricing-discount { margin-top: 10px; color: var(--ink); }

/* Stacks the per-channel rows; it used to lay three buttons out side by side. */
.contact-alt { display: flex; flex-direction: column; }

/* Left panel. Sticky like the booking card, but offset slightly lower so the
   two do not read as one bar pinned across the whole page. */
.contact-card {
  position: -webkit-sticky;
  position: sticky;
  top: 84px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--bg);
}
.contact-card-title { font-size: 15px; margin: 0 0 4px; }
.contact-note { margin: 12px 0 0; font-size: 13px; }
.contact-note a { color: var(--accent); }

/* Narrow column: the name and its actions cannot share a line at 236px, so
   the row becomes name-over-actions with the mark alongside. */
@media (min-width: 1240px) {
  .contact-row { flex-wrap: wrap; row-gap: 8px; }
  /* Mark and name share the first line; the actions take the second and
     split it evenly, so Viber's two buttons stay equal. */
  .contact-name { flex: 1 1 auto; }
  .contact-actions { flex: 1 1 100%; }
  .contact-action { flex: 1 1 0%; }
}
@media (max-width: 1239px) {
  /* Folded under the text: plenty of width, so it can go back to one line. */
  .contact-card { position: static; }
}
@media (max-width: 959px) {
  .contact-card { box-shadow: none; }
}

/* ---------- Calendar ---------- */

/* Arrows are overlaid on the month-title row rather than sitting in the flex
   flow, so the day grid gets the card's full width. On a 320px phone that is
   the difference between 27px and 41px day cells. */
.calendar { position: relative; }
.calendar-header { position: relative; margin-bottom: 6px; }
.cal-nav {
  position: absolute; top: 0; z-index: 2;
  border: 1px solid var(--border); background: var(--bg);
  border-radius: 50%; width: 34px; height: 34px;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none;
}
#cal-prev { left: 0; }
#cal-next { right: 0; }
.cal-nav svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cal-nav:hover { background: var(--bg-soft); }

.cal-months { display: flex; width: 100%; min-width: 0; justify-content: center; }
.cal-month { flex: 1 1 0%; min-width: 0; max-width: 340px; }
.cal-month-title {
  text-align: center; font-weight: 600; font-size: 14px;
  margin-bottom: 8px; padding: 6px 40px 0;  /* clears the overlaid arrows */
  min-height: 28px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-size: 11px; color: var(--ink-soft); text-align: center; padding: 3px 0; }

.cal-day {
  /* Square cells without aspect-ratio, which older Safari lacks. */
  position: relative;
  height: 0;
  padding-bottom: 100%;
  border: 0; background: none; padding-top: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  font-family: inherit;
}
.cal-day > span {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink); border-radius: 50%;
}
.cal-day.empty { visibility: hidden; cursor: default; }
.cal-day.past > span, .cal-day.blocked > span {
  color: #b9b9b9; text-decoration: line-through;
}
.cal-day.past, .cal-day.blocked { cursor: not-allowed; }
.cal-day.selectable:hover > span { background: var(--bg-soft); }
.cal-day.in-range > span { background: var(--bg-soft); border-radius: 0; }
.cal-day.selected > span { background: var(--ink); color: #fff; }

.calendar-legend {
  display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft);
  margin: 10px 0 0; flex-wrap: wrap;
}
.calendar-legend > span { display: inline-flex; align-items: center; }
.lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.lg-available { background: #fff; border: 1px solid #bbb; }
.lg-selected { background: var(--ink); }
.lg-blocked { background: #cccccc; }

.selected-dates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; margin: 14px 0;
}
.sd-label {
  display: block; font-size: 10.5px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px;
}
.sd-value { display: block; font-size: 14px; }

/* ---------- Form ---------- */

#inquiry-form { display: flex; flex-direction: column; }
#inquiry-form label { font-size: 13px; font-weight: 600; margin-top: 12px; margin-bottom: 4px; }
#inquiry-form input, #inquiry-form textarea {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 16px;   /* keep >=16px: iOS Safari zooms on smaller */
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
#inquiry-form textarea { resize: vertical; min-height: 96px; }

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-status { font-size: 14px; margin: 10px 0 0; min-height: 20px; }
.form-status.success { color: #14683a; }
.form-status.error { color: #a52318; }

/* ---------- Footer & mobile bar ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: 26px var(--pad);
  text-align: center; color: var(--ink-soft); font-size: 14px;
}

.mobile-bar { display: none; }
@media (max-width: 640px) {
  .mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 10px var(--pad);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  }
  .mobile-bar-price { font-size: 15px; min-width: 0; }
  .mobile-price-note { color: var(--ink-soft); font-size: 13px; }
  .mobile-bar:not([hidden]) ~ .footer { padding-bottom: 84px; }
  body { padding-bottom: 68px; }
  .topbar-cta { display: none; }   /* the fixed bottom bar covers this */
  :root { --pad: 16px; }
  h1 { font-size: 23px; }
  .booking-card { padding: 16px 0; border: 0; }
  .page { padding-bottom: 30px; }
}

@media (max-width: 380px) {
  .cal-months { gap: 10px; }
  .lang-switch { max-width: 104px; }
}

/* Tablets in portrait: single column but keep the card framed. */
@media (min-width: 641px) and (max-width: 959px) {
  .booking-card { max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
  .topbar, .mobile-bar, .contact-alt, #inquiry-form, .calendar { display: none !important; }
  .booking-card { box-shadow: none; border: 0; }
}

/* ---------- Photo lightbox ---------- */
.gallery-cell {
  padding: 0; border: 0; background: var(--bg-soft);
  cursor: zoom-in; overflow: hidden; display: block;
}
.gallery-cell img { transition: transform 0.35s ease; }
.gallery-cell:hover img { transform: scale(1.04); }
.gallery-cell:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .gallery-cell img, .gallery-cell:hover img { transition: none; transform: none; }
}

.gallery-more {
  position: absolute; right: 16px; bottom: 16px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 8px;
  padding: 7px 13px; font-size: 13px; font-weight: 600;
  /* A link now, not a label: it jumps to the full photo tour, so it has to
     take the click itself rather than pass it to the cell beneath. */
  text-decoration: none;
}
.gallery-more:hover { background: var(--bg-soft); }
.gallery-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-grid { position: relative; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-image {
  max-width: 92vw; max-height: 82vh;
  object-fit: contain; border-radius: 4px;
}
.lb-close, .lb-nav {
  position: absolute; background: rgba(255,255,255,0.12); color: #fff;
  border: 0; cursor: pointer; line-height: 1;
  border-radius: 50%; width: 46px; height: 46px;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,0.25); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { top: 16px; right: 16px; font-size: 30px; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 30px; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-caption {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,0.85); font-size: 13px; margin: 0;
  padding: 0 70px;
}
/* Touch targets need to stay clear of the image edges on a phone. */
@media (max-width: 600px) {
  .lb-nav { width: 40px; height: 40px; font-size: 24px; }
  .lb-caption { padding: 0 12px; }
}

/* Ask-a-question form, in the contact panel.
   It replaced a checkbox that reconfigured the booking form — which rendered
   as an unlabelled full-width box, because the form's generic `input` rule
   stretched it and `width: auto` on the checkbox never won. A separate form
   has no such conflict, and does not make one form mean two things. */
.question-form { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
.question-heading { font-size: 14px; margin: 0 0 10px; }
.question-form textarea,
.question-form input[type="text"],
.question-form input[type="email"] {
  width: 100%;
  margin-bottom: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  /* 16px stops iOS Safari zooming the page when the field takes focus. */
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
}
.question-form textarea { resize: vertical; min-height: 74px; }
.question-form .btn-full { margin-top: 4px; }
.question-form .form-status { margin-top: 8px; font-size: 13px; }
/* The honeypot must be unreachable, not merely invisible. */
.question-form .honeypot { position: absolute; left: -9999px; }

/* ---------- Photo tour ---------- */

.photo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 26px;
}
.photo-nav a {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.photo-nav a:hover { border-color: var(--ink); background: var(--bg-soft); }
.photo-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.photo-group { margin-bottom: 34px; }
.photo-group h3 {
  margin-top: 0;
  font-size: 18px;
  /* Cleared so an anchor jump does not tuck the heading under the topbar. */
  scroll-margin-top: 78px;
}
.photo-group-note {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 0 0 14px;
}

/* A strip of thumbnails per category, and a viewer that opens under it.
   Sized so the whole tour is six short strips rather than twelve tall rows —
   the tour was a third of the page and about nine phone screens on its own. */
.photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* A button, not a div: it opens the viewer, so it must be reachable and
   announced as activatable by a keyboard or screen reader. */
.photo-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 57px;          /* 4:3, matching the photos */
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.12s ease, box-shadow 0.12s ease;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb:hover { opacity: 1; }
.photo-thumb.is-current { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.photo-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.photo-viewer { margin-top: 12px; }
.pv-frame { position: relative; }

/* The image is itself a button — clicking it goes full screen, where the
   arrow keys walk the whole house instead of one room. */
.pv-image {
  display: block; width: 100%; padding: 0; border: 0;
  background: var(--bg-soft); cursor: zoom-in; border-radius: 10px; overflow: hidden;
}
.pv-image img {
  width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
}

.pv-nav, .pv-close {
  position: absolute;
  /* 44px is the smallest thing a thumb reliably hits. These sit over the
     image, so they cost no vertical space on a phone. */
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  color: #111; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pv-nav:hover, .pv-close:hover { background: #fff; }
.pv-nav:focus-visible, .pv-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pv-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.pv-next { right: 8px; top: 50%; transform: translateY(-50%); }
.pv-close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 20px; }

.pv-caption { font-size: 14px; color: var(--ink-soft); margin: 10px 2px 0; line-height: 1.45; }
.pv-count { font-size: 12.5px; color: var(--ink-soft); margin: 4px 2px 0; }

@media (max-width: 520px) {
  /* Smaller thumbs so a category of eight still fits two rows on a phone,
     and the strip never becomes the thing you scroll past. */
  .photo-thumb { width: 62px; height: 47px; }
  .photo-thumbs { gap: 5px; }
  /* Arrows tight to the edges, where a thumb reaches without shifting grip. */
  .pv-prev { left: 6px; }
  .pv-next { right: 6px; }
  .pv-caption { font-size: 13.5px; }
}


/* ---------- Admin shortcut ---------- */

/* Sits beside the logo, visible only to a signed-in owner. Deliberately quiet:
   it is a tool, not a call to action, and must not compete with the booking
   button a guest is meant to press. */
.admin-link {
  margin-left: 12px;
  /* The topbar is space-between, so as a third child this would float to the
     middle. Soaking up the free space on its right keeps it against the logo. */
  margin-right: auto;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-link:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-soft); }
.admin-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The header is tight on a phone; the logo and booking CTA win. */
@media (max-width: 520px) { .admin-link { display: none; } }

/* ---------- Link bar ---------- */

/* One strip of chips: the listing platforms and every way to reach me, on the
   same line. Rendered into both the topbar and the footer from one definition
   in app.js, so a channel added in config appears in both. */
.linkbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.linkchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  background: var(--bg);
  min-height: 40px;
  white-space: nowrap;
}
.linkchip:hover { border-color: var(--ink); background: var(--bg-soft); }
.linkchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Brand marks are drawn inline rather than hotlinked: no external request, no
   dependency on someone else's CDN, and they stay crisp at any density. */
.chip-icon,
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chip-icon svg,
.platform-icon svg { width: 22px; height: 22px; display: block; }

/* Every one of these is sampled from the app's own current iOS icon, pulled
   from the App Store and read pixel by pixel — not from a brand guide or a
   website logo. Those disagree with the icons, and the icon is what a guest
   recognises on their phone. Each rule declares a flat colour first as the
   fallback for anything that cannot paint a gradient.
     Airbnb   #FF385C  (NOT #FF5A5F — that is the pre-2020 "Rausch")
     Booking  #003680  (their web blue #003B95 is lighter)
     WhatsApp #01E459  (their web green #25D366 is duller and darker)
     Viber    #806AFF  (their website logo SVG is a flat, indigo #7360F2) */
.chip-airbnb, .platform-airbnb {
  background: #ff385c;
  background: linear-gradient(180deg, #fe4566 0%, #fe365b 100%);
}
.chip-booking, .platform-booking { background: #003680; border-radius: 6px; }
.chip-whatsapp, .platform-whatsapp {
  background: #01e459;
  background: linear-gradient(180deg, #00ea6d 0%, #00dc44 100%);
}
.chip-viber, .chip-viber-call, .platform-viber {
  background: #806aff;
  background: linear-gradient(180deg, #9a85fe 0%, #775ffb 100%);
}
/* The Viber call chip keeps Viber's gradient with a handset glyph (set above) —
   in the header the labels are hidden, and two identical dark handsets side by
   side were impossible to tell apart. The plain phone chip stays neutral,
   because an ordinary call belongs to no company. */
.chip-call, .platform-call { background: var(--ink); }
.chip-icon svg, .platform-icon svg { fill: #ffffff; }

/* Compact variant for the header, which already carries the logo, the language
   controls and the booking button. The name stays in the DOM for screen
   readers and as the hover title. */
.linkbar-compact {
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 0 14px;
}
.linkbar-compact .linkchip {
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
}
.linkbar-compact .linkchip:hover { background: none; }
.linkbar-compact .chip-icon { width: 26px; height: 26px; opacity: 0.85; }
.linkbar-compact .linkchip:hover .chip-icon { opacity: 1; }
.linkbar-compact .chip-name { display: none; }

/* Below this the header cannot hold logo + six chips + language + CTA. The
   footer strip still carries every one of them. */
@media (max-width: 1120px) {
  .linkbar-compact { display: none; }
}
@media (max-width: 420px) {
  .linkchip { font-size: 13px; padding-right: 11px; }
}

/* One row per channel: brand mark, channel name, then only the actions that
   channel actually supports. Rows rather than three equal buttons because
   Viber needs Message and Call side by side, and a third of a 372px card
   cannot hold both — which is also what made the old label wrap to three
   lines in Greek. */
.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 2px;
}
.contact-row + .contact-row { border-top: 1px solid var(--border); }
.contact-alt .platform-icon { width: 30px; height: 30px; flex-shrink: 0; }
.contact-alt .platform-icon svg { width: 24px; height: 24px; }
.contact-name { font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.contact-actions { display: flex; gap: 6px; flex-shrink: 0; }
.contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.contact-action:hover { border-color: var(--ink); background: var(--bg-soft); }
.contact-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Neutral rather than branded: a phone number belongs to no company. */
.platform-call { background: var(--ink); }
.platform-call svg { fill: #ffffff; }

/* Travel section. The airport-works notice is the one paragraph on the page
   that can cost a guest money if they skip it, so it gets a rule down the side
   rather than sitting in the run of text. No background tint — the page has no
   dark-mode palette to keep it in step with. */
.travel-notice {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 10px 0 0;
}
.travel-discount { font-weight: 600; margin-top: 22px; }
.travel-updated { font-size: 13px; margin-top: 14px; }

/* Car hire, built by renderRentals() from car-rentals.json.
   A compact list rather than cards: this is a courtesy to a guest who needs a
   car, not something being sold, and four bordered boxes with a bulleted list
   each took more of the page than the description of the house. */
.rental-list { margin: 12px 0 0; }
.rental-row {
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.rental-row:first-child { border-top: 0; padding-top: 0; }
.rental-top { margin: 0; font-size: 14.5px; }
.rental-top strong { font-weight: 600; }
.rental-meta {
  margin: 1px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.rental-links { display: inline; }
.rental-links a { margin-left: 12px; white-space: nowrap; }

@media (max-width: 520px) {
  /* Links drop to their own line rather than wrapping mid-number. */
  .rental-links { display: block; margin-top: 2px; }
  .rental-links a:first-child { margin-left: 0; }
}


/* "You can still book on Airbnb" note, directly under the title. */
.platforms-note {
  margin: 10px 0 0; font-size: 14px; color: var(--ink-soft);
  border-left: 3px solid var(--border); padding-left: 12px;
}
.platforms-note p { margin: 0; }
.platforms-pitch {
  font-weight: 600; color: var(--accent); margin-bottom: 2px !important;
}
.rentals-chains { font-size: 14px; margin: 0 0 10px; }

/* ---------- Figures ---------- */

/* The numbers are what a guest is actually looking for on this page, and they
   were set at roughly body size and weight. Larger and heavier so the eye
   lands on them before the prose around them. */
.pricing-amount { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; }
.pricing-indicator .pricing-per { font-size: 14.5px; font-weight: 600; }

.quote-line { font-size: 15px; }
.quote-line span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.quote-total {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.quote-total span:last-child { font-variant-numeric: tabular-nums; }

/* Dates in the calendar and the selected range read as data too. */
.cal-day { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-month-label { font-weight: 700; }

/* The contact panel is narrower now, so its names need the weight to hold
   their own against the icons beside them. */
.contact-name { font-weight: 600; font-size: 14.5px; }
.contact-action { font-weight: 600; }

@media (max-width: 959px) {
  /* Nothing is competing for width on a phone, so the figures can go further. */
  .pricing-amount { font-size: 30px; }
  .quote-total { font-size: 20px; }
}

/* The chains line and the freshness stamp are footnotes to the list. */
.rentals-chains { font-size: 13px; margin: 10px 0 0; }
#rentals .travel-updated { font-size: 12.5px; margin-top: 8px; }

/* ---------- Calendar and contact panels ---------- */

/* Second pass. 200 + 336 was still 536px of chrome around a 624px column.
   The calendar is the binding constraint: seven cells plus the card padding.
   At 296 the card holds a 260px grid of ~36px cells, which is still a
   comfortable target, and the contact card has nothing in it that needs 200. */
.booking-card { padding: 14px; }
.contact-card { padding: 12px; }
.cal-day { width: auto; }

/* Bigger and heavier where it is read: dates, names, and the figures. The
   panels lost width, so what is left in them has to work harder. */
.cal-day { font-size: 15.5px; font-weight: 700; }
.cal-dow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }
.contact-name { font-size: 15px; font-weight: 700; }
.contact-action { font-size: 14px; font-weight: 700; }
.contact-card-title { font-size: 15px; font-weight: 700; }
.booking-card label, .booking-card .admin-label { font-weight: 700; }
.quote-line { font-size: 14.5px; }
.quote-line span:last-child { font-weight: 700; }

/* Pointer to the travel section from where the question is first asked. */
.area-jump { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; }

/* Live timetables. Laid out as a run of links so it reads as a resource row
   rather than a paragraph someone skims past. */
.travel-live { margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }
.travel-live a { margin-left: 12px; white-space: nowrap; font-weight: 600; }
@media (max-width: 520px) {
  .travel-live a { display: inline-block; margin: 4px 12px 0 0; }
}

/* Pointer to the travel section from the top of the page. The section itself
   sits ~4,500px down, which is past everything a guest reads first. */
.title-jump { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; }

/* Auto-published sailing figures. Set apart from the hand-written paragraph
   above them, because one updates itself weekly and the other does not. */
.ferry-facts {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  border-left: 3px solid var(--border);
  padding-left: 12px;
}
.ferry-facts-note { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

/* The arrivals board. A list, not a table — it is one day off a live board,
   and a table would imply a timetable it is not. */
.arrivals-board { margin: 10px 0 0; }
.arrivals-head { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.arrivals-list { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.arrivals-list li {
  padding: 3px 0 3px 12px;
  border-left: 3px solid var(--border);
  color: var(--ink-soft);
}
.arrivals-list strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Arrivals beside departures. Two columns where there is room, stacked on a
   phone — side-by-side columns of times at 170px each are unreadable. */
.board-pair { margin: 10px 0 0; }
.board-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 620px) { .board-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.board-title { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; }
.board-summary { margin: 0 0 5px; font-size: 12.5px; color: var(--ink-soft); }

/* Operators' own booking pages. Grouped by how you would actually travel --
   by air, from Piraeus, from Çeşme -- rather than as one undifferentiated row,
   because which list you need depends on where you are coming from. */
.book-direct { margin: 16px 0 0; }
.book-heading { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.book-row { margin: 0 0 4px; font-size: 14px; }
.book-label {
  display: inline-block; min-width: 150px; color: var(--ink-soft); font-size: 13px;
}
.book-row a { margin-right: 14px; white-space: nowrap; font-weight: 600; }
@media (max-width: 520px) {
  .book-label { display: block; min-width: 0; margin-bottom: 2px; }
  .book-row a { display: inline-block; margin: 2px 14px 2px 0; }
}