/* ============================================================================================================
   MRE Network — the interface.

   The layout follows the "Agent Ben Stays" model the owner sent (2026-09-24): a sticky header with a brand block
   and pill navigation, a hero with a search card, property cards with a 4:3 photo and a price line, section cards
   with generous white space, and a dark footer in columns.

   THE COLOURS ARE OURS, and that was the instruction: Moroccan green carries the interface, red is kept for the
   brand mark and for what must stop the eye, everything else is warm neutral. The model's burgundy and ochre are
   not used — they would have made a different company.

   NO WEBFONT: the Content-Security-Policy allows stylesheets from this site only, so Google Fonts cannot load.
   The editorial feel of the model comes instead from a system serif for headings — present everywhere, costs
   nothing, and never leaves a page rendering in Times while a font downloads.

   One file, no framework, no JavaScript: every state below is reachable with the keyboard and with CSS alone.
   ============================================================================================================ */

:root {
  --green: #006233;        /* Moroccan green */
  --green-dark: #004a26;
  --green-soft: #e8f2ea;
  --red: #c1272d;          /* Moroccan red */
  --ink: #1d2721;
  --ink-soft: #3c453f;
  --muted: #6a736d;
  --line: #e4e1d9;
  --line-soft: #efece5;
  --paper: #ffffff;
  --sand: #f8f6f1;
  --sand-deep: #f1eee6;
  --ok-bg: #e8f2ea;
  --danger-bg: #fbecec;
  --warn-bg: #fff4e0;
  --warn-line: #e0a44a;
  --warn-ink: #8a5a13;
  --green-dark-rgb: 0, 74, 38;

  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --pill: 999px;
  --sh-1: 0 1px 2px rgba(29, 39, 33, .05);
  --sh-2: 0 14px 34px -18px rgba(29, 39, 33, .35);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sand); color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:lang(ar) body, [dir="rtl"] body { font-family: system-ui, "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--serif); letter-spacing: -.01em; line-height: 1.22; }
h1 { font-size: 2rem; margin: 0 0 6px; }
h2 { font-size: 1.28rem; margin: 0 0 4px; }
h3 { font-size: 1.04rem; margin: 22px 0 6px; }
a { color: var(--green-dark); }
code { font-size: .86em; background: var(--sand-deep); padding: 1px 5px; border-radius: 5px; }

/* ----------------------------------------------------------------------------------------- the header
   Sticky, as in the model: the way out of a page is always on screen. Everything in it is a real link — the
   only thing that opens and closes is the small-screen menu, and that is a <details>, not a script. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; gap: 12px 18px; min-height: 68px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; background: var(--green); flex: 0 0 auto;
  box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 1px var(--green), var(--sh-1);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 1.16rem; font-weight: 700; color: var(--green-dark); }
.brand-tag { font-size: .73rem; color: var(--muted); }
@media (max-width: 560px) { .brand-tag { display: none; } }

.topbar nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r); text-decoration: none;
  color: var(--ink-soft); font-size: .92rem; font-weight: 500; white-space: nowrap;
}
.topbar nav a:hover, .topbar nav a:focus-visible { background: var(--sand-deep); color: var(--green-dark); }
.topbar nav a[aria-current="page"] { background: var(--green); color: #fff; }
.topbar nav a[aria-current="page"]:hover { background: var(--green-dark); color: #fff; }

.tools { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.langs { list-style: none; display: flex; margin: 0; padding: 2px; gap: 1px;
         border: 1px solid var(--line); border-radius: var(--r); background: var(--sand); }
.langs a {
  display: block; padding: 4px 8px; border-radius: 7px; text-decoration: none;
  font-size: .74rem; font-weight: 600; color: var(--muted); letter-spacing: .04em;
}
.langs a:hover { color: var(--green-dark); }
.langs a[aria-current="true"] { background: var(--ink); color: #fff; }
.logout button {
  width: auto; margin: 0; padding: 7px 13px; font-size: .84rem; font-weight: 600;
  background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line);
}
.logout button:hover { border-color: var(--muted); background: var(--sand); color: var(--ink); }

/* the second strip: the back office. It exists so the client tabs above stay three or four, never eleven. */
.subbar { background: var(--sand-deep); border-bottom: 1px solid var(--line); }
.subbar .wrap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 44px; }
.subbar .staff-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  font-weight: 700; margin-inline-end: 8px;
}
.subbar a {
  padding: 6px 11px; border-radius: var(--pill); text-decoration: none; white-space: nowrap;
  font-size: .85rem; color: var(--ink-soft); border: 1px solid transparent;
}
.subbar a:hover { background: var(--paper); border-color: var(--line); color: var(--green-dark); }
.subbar a[aria-current="page"] { background: var(--paper); border-color: var(--green); color: var(--green-dark); font-weight: 600; }

/* small screens: one button opens the menu, and it is a <details> — no JavaScript anywhere in this interface */
.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer; padding: 7px 12px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); font-size: .86rem; font-weight: 600;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--sand-deep); }
@media (max-width: 860px) {
  /* One button, both groups. The second strip is for a screen wide enough to read it as a strip; below that it
     would be six full-width links standing between the visitor and the page. */
  .topbar nav { display: none; }
  .subbar { display: none; }
  .menu { display: block; }
  .menu nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 0 4px; width: 100%; }
  .menu nav a { width: 100%; }
  .menu .staff-label { margin: 12px 0 4px; padding-inline-start: 12px; }
  .topbar .wrap { padding-top: 10px; padding-bottom: 10px; }
}

/* ----------------------------------------------------------------------------------------- page body */
main.wrap { padding-top: 26px; padding-bottom: 48px; }
.sub { color: var(--muted); margin: -2px 0 18px; font-size: .97rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hint { font-size: .84rem; color: var(--muted); margin-top: 8px; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--sh-1);
}
.card-narrow { max-width: 460px; }
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }

.flash {
  border-radius: var(--r-lg); padding: 13px 16px; margin: 0 0 18px;
  border: 1px solid var(--line); border-inline-start: 4px solid var(--muted); background: var(--paper);
  font-size: .94rem;
}
.flash-success { background: var(--ok-bg); border-color: #b9d8c4; border-inline-start-color: var(--green); color: var(--green-dark); }
.flash-danger { background: var(--danger-bg); border-color: #eccdcd; border-inline-start-color: var(--red); color: #8f1f24; }
.flash-warn { background: var(--warn-bg); border-color: #f0d9ae; border-inline-start-color: var(--warn-line); color: var(--warn-ink); }

/* ----------------------------------------------------------------------------------------- the hero
   The model puts the promise and the search in the same block. Ours says what the page is for, then the fields. */
.hero { margin-bottom: 22px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 5px 12px; border-radius: var(--pill); background: var(--green-soft); color: var(--green-dark);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
}
.hero h1 { font-size: 2.3rem; }
.hero p { color: var(--muted); max-width: 62ch; margin: 8px 0 0; }
@media (max-width: 640px) { .hero h1 { font-size: 1.7rem; } h1 { font-size: 1.6rem; } }

.searchbar { padding: 16px; border-radius: var(--r-xl); box-shadow: var(--sh-2); }
.searchbar .row { gap: 12px; align-items: stretch; }
.searchbar .field {
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 9px 12px 10px;
}
.searchbar .field:focus-within { border-color: var(--green); background: var(--paper); }
.searchbar label {
  display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 2px;
}
.searchbar input, .searchbar select {
  border: 0; background: transparent; padding: 0; font-size: .95rem; font-weight: 500; width: 100%;
}
.searchbar input:focus, .searchbar select:focus { outline: none; }
.searchbar .go { display: flex; align-items: flex-end; flex: 0 0 auto; }
.searchbar .go button { margin: 0; height: 100%; min-height: 54px; padding-inline: 22px; }

.chips-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.chips-row .lbl { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.chip {
  padding: 5px 12px; border-radius: var(--pill); font-size: .82rem; text-decoration: none;
  background: var(--sand-deep); color: var(--ink-soft); border: 1px solid transparent;
}
.chip:hover { background: var(--line-soft); }
.chip[aria-current="true"] { background: var(--ink); color: #fff; }
.chips-row .count { margin-inline-start: auto; font-size: .82rem; font-weight: 600; color: var(--muted); }

/* ----------------------------------------------------------------------------------------- forms */
label { display: block; font-size: .86rem; font-weight: 600; margin: 12px 0 5px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  font: inherit; background: var(--paper); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
input[readonly] { background: var(--sand); color: var(--muted); }
textarea { resize: vertical; min-height: 88px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 4px; }
.field { flex: 1; min-width: 180px; }
.check { display: flex; align-items: center; gap: 9px; margin: 14px 0; }
.check input { width: auto; }
.check .inline, label.inline { margin: 0; font-weight: 500; }
.choice { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.choice input { width: auto; margin-top: 4px; }
.choice .inline { font-weight: 400; }
.choice .inline span { display: block; color: var(--muted); font-size: .86rem; }
.days { display: flex; gap: 10px; flex-wrap: wrap; }
.day-box { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; font-size: .88rem; margin: 0; }
.day-box input { width: auto; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--green); color: #fff; font: inherit; font-weight: 600; font-size: .95rem;
  box-shadow: var(--sh-1);
}
button:hover, .btn:hover { background: var(--green-dark); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button.small { padding: 6px 12px; font-size: .84rem; }
button.danger, .btn-danger {
  background: var(--paper); color: var(--red); border: 1px solid #eccdcd; box-shadow: none; width: auto; margin: 0;
}
button.danger:hover, .btn-danger:hover { background: var(--danger-bg); }
.btn-link { color: var(--green-dark); font-weight: 600; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.inline-form { display: inline; }

/* ----------------------------------------------------------------------------------------- properties */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 22px; margin-top: 18px; }
.prop-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--sh-1);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.prop-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: #cfcabf; }
.prop-photo {
  display: block; position: relative; aspect-ratio: 4 / 3; background: var(--sand-deep); overflow: hidden;
}
.prop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.prop-card:hover .prop-photo img { transform: scale(1.04); }
/* No photograph yet: a zellige-like weave drawn in CSS, so a listing is never an empty grey rectangle. */
.prop-nophoto {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--muted); text-align: center; padding: 10px;
  background:
    repeating-linear-gradient(45deg, rgba(0, 98, 51, .05) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(-45deg, rgba(193, 39, 45, .04) 0 10px, transparent 10px 20px),
    var(--sand-deep);
}
.prop-badges { position: absolute; inset-inline-start: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.prop-badges span {
  padding: 4px 9px; border-radius: 8px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  background: rgba(29, 39, 33, .82); color: #fff; backdrop-filter: blur(6px);
}
.prop-badges .light { background: rgba(255, 255, 255, .92); color: var(--ink); }
.prop-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prop-body h2 { font-size: 1.08rem; margin: 2px 0; }
.prop-body h2 a { text-decoration: none; color: var(--ink); }
.prop-card:hover .prop-body h2 a { color: var(--green-dark); }
.prop-where { font-size: .82rem; color: var(--muted); }
.prop-facts {
  display: flex; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--muted);
  border-top: 1px solid var(--line-soft); margin-top: 10px; padding-top: 10px;
}
.prop-price {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.prop-price strong { font-family: var(--serif); font-size: 1.3rem; }
.prop-price .muted { font-size: .82rem; }
.prop-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.prop-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.prop-status { font-size: .74rem; }

/* ----------------------------------------------------------------------------------------- the stay page */
.stay-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.booking-widget { position: sticky; top: 92px; padding: 20px; }
.booking-widget .prop-price { border: 0; margin: 0 0 6px; padding: 0; }
.quote { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }
.quote-total { font-size: 1.02rem; }
.quote-total strong { font-family: var(--serif); font-size: 1.24rem; }

.cal-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; padding: 0; }
.cal-month {
  flex-basis: 100%; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 700; margin-top: 10px;
}
.cal-night {
  width: 31px; text-align: center; font-size: .76rem; padding: 5px 0;
  border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
}
.cal-night.taken { background: var(--sand-deep); border-color: #d6d1c5; color: var(--muted); text-decoration: line-through; }
.cal-key {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--paper); margin-inline-start: 10px;
}
.cal-key.taken { background: var(--sand-deep); border-color: #d6d1c5; }

/* ----------------------------------------------------------------------------------------- the pricing calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
.cal .dow { text-align: center; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.cal .day { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 3px 7px; text-align: center; background: var(--paper); min-height: 58px; }
.cal .day.empty { border: 0; background: transparent; min-height: 0; }
.cal .day.season { background: var(--warn-bg); border-color: var(--warn-line); }
.cal .day.taken { background: var(--sand-deep); border-color: #d6d1c5; color: var(--muted); }
.cal .day .n { font-size: .68rem; color: var(--muted); }
.cal .day .p { font-weight: 700; font-size: .82rem; margin-top: 2px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--paper); display: inline-block; }
.dot.s { background: var(--warn-bg); border-color: var(--warn-line); }
.dot.t { background: var(--sand-deep); border-color: #d6d1c5; }

/* ----------------------------------------------------------------------------------------- data */
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .93rem; }
th {
  text-align: start; font-size: .69rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; padding: 0 12px 9px 0; border-bottom: 1px solid var(--line);
}
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:hover td { background: var(--sand); }
.row-unassigned td { background: var(--warn-bg); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--pill); font-size: .74rem;
  border: 1px solid var(--line); background: var(--sand); color: var(--ink-soft);
}
.tag.all { background: var(--ok-bg); border-color: #b9d8c4; color: var(--green-dark); }
.pill {
  display: inline-block; padding: 3px 11px; border-radius: var(--pill); font-size: .74rem; font-weight: 700;
  background: var(--ok-bg); color: var(--green-dark); border: 1px solid #b9d8c4;
}
.pill-muted, .pill-draft, .pill-note, .pill-document, .pill-created { background: var(--sand); color: var(--muted); border-color: var(--line); }
.pill-archived, .pill-booking_declined, .pill-case_closed { background: var(--danger-bg); color: var(--red); border-color: #eccdcd; }
.pill-withdrawn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 14px 0 0; font-size: .93rem; }
.facts dt { color: var(--muted); font-size: .84rem; }
.facts dd { margin: 0; }

/* 172px, not 146: an amount like "6 900,00 MAD" broke onto two lines in the narrower column and the figure
   stopped reading as one number. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 14px; margin-top: 14px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 15px; background: var(--paper); }
.kpi .v, .kpi .v * { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.24rem; color: var(--green-dark); }
.kpi .l { display: block; font-size: .74rem; color: var(--muted); margin-top: 3px; }
.kpi .d { font-size: .74rem; color: var(--muted); }

.bars { list-style: none; margin: 14px 0 0; padding: 0; }
.bars li { margin-bottom: 11px; font-size: .88rem; }
.bar { display: block; height: 8px; border-radius: 5px; background: var(--green); margin-top: 4px; min-width: 2px; }

.tiers { list-style: none; margin: 12px 0 0; padding: 0; }
.tiers li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.tiers li:last-child { border-bottom: 0; }
.tiers .lbl { flex: 1; min-width: 170px; }
.tiers .val { font-weight: 700; color: var(--green-dark); }

.bd { margin-top: 16px; font-size: .93rem; }
.bd div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.bd div.tot { border: 0; border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 11px; font-weight: 700; font-size: 1.05rem; }
.bd .neg { color: var(--green-dark); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.chip-x { background: transparent; border: 0; color: var(--muted); padding: 0 0 0 4px; width: auto; margin: 0; box-shadow: none; font-size: .9rem; }
.chip-x:hover { background: transparent; color: var(--red); }

.timeline { list-style: none; margin: 16px 0 0; padding: 0; }
.timeline li { border-inline-start: 2px solid var(--line); padding: 0 0 18px 16px; }
.timeline li:last-child { padding-bottom: 0; }
.tl-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.tl-head .when { font-size: .76rem; color: var(--muted); }
.tl-text { margin-top: 5px; font-size: .93rem; }
.tl-internal { border-inline-start-color: var(--warn-line); }

.type-grid, .perm-grid { display: grid; gap: 14px; margin-top: 14px; }
.type-grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }
.type-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); padding: 16px; }
.type-card:hover { border-color: var(--green); }
.perm-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 6px 18px; font-size: .88rem; }
.cols { columns: 2; margin: 0; padding-inline-start: 18px; }
.cols li { break-inside: avoid; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

.tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.tabs a { font-size: .9rem; text-decoration: none; padding: 7px 13px; border-radius: var(--pill); color: var(--ink-soft); }
.tabs a:hover { background: var(--sand-deep); }
.tabs a[aria-current="page"] { background: var(--green); color: #fff; font-weight: 600; }

.pager { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.pager .btn-link { padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.pager .current { background: var(--ink); color: #fff; border-color: var(--ink); }

.adder { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.adder summary { cursor: pointer; font-weight: 700; color: var(--green-dark); }
.adder form { margin-top: 14px; }

/* ----------------------------------------------------------------------------------------- the footer
   Dark, in columns, like the model: the place where the two brand sites are named, since they are somewhere
   you leave for — not a tab you switch to. */
.site-footer { background: var(--ink); color: #c8cfc9; margin-top: 46px; padding: 40px 0 26px; font-size: .88rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.site-footer h4 {
  font-family: inherit; color: #fff; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; margin: 0 0 12px;
}
.site-footer a { color: #d9e2db; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.site-footer .brand-mark { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 1px var(--green); }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-tag { color: #9aa79f; }
.foot-note { margin-top: 12px; color: #9aa79f; line-height: 1.55; }
.foot-bottom {
  border-top: 1px solid #33403a; margin-top: 28px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: #9aa79f; font-size: .8rem;
}
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr; gap: 24px; } }

@media (max-width: 860px) { .split, .stay-layout { grid-template-columns: 1fr; } .booking-widget { position: static; } }
@media (max-width: 640px) {
  .cal { gap: 3px; } .cal .day { min-height: 50px; } .cal .day .p { font-size: .72rem; }
  .cols { columns: 1; }
  .searchbar .go { flex: 1 1 100%; }
  .searchbar .go button { width: 100%; }
  .card { padding: 18px 16px; }
}