/* ==========================================================================
   Agadir Stays — design system 2026 (2026-09-27)
   One layer, loaded LAST on every page (<link rel="stylesheet" href="design.css"> just before
   </head>, added by _design_2026.py). Delete that link to get the previous look back exactly.

   Identity: ocean · sand · sunset (2026-09-27): teal brand, coral booking actions, sand highlights.
   Type:     Fraunces (display serif) for page + section titles only; Plus Jakarta Sans for all
             reading and tapping (cards, prices, buttons, forms). Arabic = Tajawal (set by each page's html[lang] rules);
             German, French and Spanish use the same Latin fonts as English.
   Rules:    coral (--cta) = booking action · teal (--clay) = brand, links, selected, secondary
             · green = reassurance · amber = rating/warning · red = error · teal = info.
   ========================================================================== */

:root{
  /* colour — "Ocean · Sand · Sunset" (2026-09-27, see the v3 block at the end of this file) */
  --clay:#087E8B;            /* brand teal: links, icons, selected states, secondary buttons (4.8:1 on white) */
  --clay-deep:#066570;       /* teal hover / pressed */
  --clay-tint:#E4F2F3;       /* soft teal fill (hover, range, icon circles) */
  --cta:#D4432A;             /* sunset coral for booking actions: white text 4.5:1 */
  --cta-hover:#B8361F;
  --coral:#FF6B4A;           /* brand coral: glows, accents, never text on white */
  --ocean:#0F3D44;           /* deep ocean: footer, dark bands */
  --ocean-2:#087E8B;
  --ocean-tint:#E4F2F3;
  --sand:#F4E7D3;            /* warm highlight surfaces */
  --sand-soft:#FAF4EA;
  --stone:#F7F8F6;           /* alternate sections */
  --plaster:#FFFFFF;
  --plaster-2:#F1F4F2;       /* soft fills, hovers */
  --head:#17252A;            /* headings */
  --ink:#17252A;             /* body text */
  --ink-soft:#5C6B6E;        /* secondary text: 5.8:1 on white, 4.6:1 on sand */
  --olive:#5C6B6E;
  --line:#E5E8E6;
  --line-strong:#CBD3D1;
  --ok:#1B7A4B;  --ok-tint:#E6F4EC;
  --warn:#9A5B00; --warn-tint:#FFF4DC;
  --err:#C62828; --err-tint:#FDECEA;
  --info:#087E8B; --info-tint:#E4F2F3;
  --star:#B7790A;
  --night:#0F3D44;
/* type */
  --font-ui:'Plus Jakarta Sans','Karla',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Fraunces','Cormorant Garamond',Georgia,serif;
  --fs-xs:.75rem;   /* 12  captions, badges */
  --fs-sm:.8125rem; /* 13  meta lines */
  --fs-md:.9375rem; /* 15  body small, buttons */
  --fs-base:1rem;   /* 16  body */
  --fs-lg:1.125rem; /* 18  lead */
  --fs-card:1.0625rem; /* 17 card titles */

  /* shape + depth */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --shadow-1:0 1px 2px rgba(23,37,42,.05),0 2px 8px rgba(23,37,42,.06);
  --shadow-2:0 2px 6px rgba(23,37,42,.06),0 14px 34px -12px rgba(23,37,42,.22);
  --shadow-3:0 24px 60px -18px rgba(15,61,68,.35);
  --ease:cubic-bezier(.2,0,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- base typography */
html body{font-family:var(--font-ui);color:var(--ink);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;}
html body :is(button,input,select,textarea){font-family:inherit;}
html :is(h1,h2){font-family:var(--font-display);font-weight:600;color:var(--head);letter-spacing:-.015em;
  font-variation-settings:"SOFT" 30,"WONK" 0;}
html h3{font-family:var(--font-ui);font-weight:700;color:var(--head);letter-spacing:-.01em;}
html[lang="ar"] :is(h1,h2,h3){font-family:'Tajawal',sans-serif;letter-spacing:0;}

html[lang="ar"] body{font-family:'Tajawal',var(--font-ui);}

::selection{background:var(--clay-tint);color:var(--head);}

/* ---------------------------------------------------------------- section headers: compact, product-like */
html .kicker--xl{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .55rem;padding:0;background:none;border:0;box-shadow:none;
  font:700 var(--fs-sm)/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--clay);}
html .kicker--xl .k-ic{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--clay-tint);color:var(--clay);box-shadow:none;}
html .kicker--xl .k-ic .icon{width:1rem;height:1rem;stroke-width:1.9;}
html .kicker--xl.kicker--link:hover{transform:none;box-shadow:none;color:var(--clay-deep);}
html .kicker--xl .k-go{width:1.3rem;height:1.3rem;background:transparent;}
html[lang="ar"] .kicker--xl{letter-spacing:normal;font-size:.9rem;}
html .kicker--xl + h2,html .stays-head h2,html .kicker--xl + h1,html .stays-head h1{font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.12;margin:0;}
html .kicker--xl + h2::after,html .stays-head h2::after,html .kicker--xl + h1::after,html .stays-head h1::after{content:none;display:none;}
html .kicker--xl ~ .sub,html .stays-head .sub{margin-top:.45rem;font-size:var(--fs-base);color:var(--ink-soft);line-height:1.5;}
html .head:has(> .kicker--xl){margin-bottom:clamp(1rem,2vw,1.4rem);}
/* the thick zig-zag pattern band under the hero */
html .band{display:none;}

/* ---------------------------------------------------------------- buttons: one system */
html .btn{font:600 var(--fs-md)/1.2 var(--font-ui);letter-spacing:0;text-transform:none;border-radius:999px;
  min-height:44px;padding:.7rem 1.35rem;gap:.5rem;align-items:center;justify-content:center;
  transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);}
html .btn,html .btn *{letter-spacing:0!important;}
html .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(6,101,112,.55);}
html .btn:active{transform:scale(.98);box-shadow:none;}
html .btn--out{background:#fff;border:1.5px solid var(--line-strong);color:var(--head);}
html .btn--out:hover{background:#fff;border-color:var(--head);color:var(--head);box-shadow:var(--shadow-1);}
html .btn--wa-ic{min-height:0;padding:0;}
html .hero .hcta .btn{min-height:50px;padding:.8rem 1.6rem;font-size:var(--fs-base);letter-spacing:0!important;}
@media (max-width:700px){html .hero .hcta .btn{min-height:48px;padding:.7rem 1.2rem;}}
html .hero .hcta .btn:not(.btn--out){background:var(--clay);border-color:var(--clay);color:#fff;}
html .hero .hcta .btn.btn--out{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.85);color:#fff;backdrop-filter:blur(6px);}
html .hero .hcta .btn.btn--out:hover{background:#fff;color:var(--head);}
html .see-all{font:600 var(--fs-sm)/1 var(--font-ui);min-height:36px;padding:.5rem .95rem;border:1.5px solid var(--line-strong);background:#fff;color:var(--head);}
html .see-all:hover{border-color:var(--head);}
html .chk-btn{font-family:var(--font-ui);font-weight:700;letter-spacing:0;text-transform:none;}
@media (prefers-reduced-motion:reduce){html .btn,html .btn:hover,html .btn:active{transform:none;transition:none;}}

/* ---------------------------------------------------------------- cards: calm, scannable, price first */
html .scard{border:0;background:transparent;box-shadow:none;}
html .scard:hover{transform:none;box-shadow:none;}
html .scover{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);background:var(--plaster-2);}
html .scard:hover .scover{box-shadow:var(--shadow-2);}
html .scard:hover .scover img{transform:scale(1.04);}
html .sbody{padding:.85rem .15rem .25rem;gap:0;}
html .sloc{font:500 var(--fs-sm)/1.3 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-bottom:.2rem;}
html .srow{margin-bottom:.2rem;align-items:center;}
html .srate{font:600 var(--fs-sm)/1 var(--font-ui);color:var(--head);}
html .srate svg{color:var(--star);fill:currentColor;}
html .scard h3{font:700 var(--fs-card)/1.3 var(--font-ui);letter-spacing:-.01em;color:var(--head);margin:0 0 .2rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s var(--ease);}
html .scard:hover h3{color:var(--clay-deep);}
html .scard h3{text-wrap:pretty;}
html .sspec,html .scard .sdesc{font:400 var(--fs-sm)/1.45 var(--font-ui);color:var(--ink-soft);margin-bottom:.35rem;}
/* the price block is already pinned to the bottom (.sfree / .sprice margin-top:auto), so the old
   2-line reservation on descriptions only left a hole under one-line descriptions */
html .scard .sdesc{min-height:0;}
html .scard .sfree{margin-top:auto;padding-top:.45rem;}
html .sdist{font:400 var(--fs-sm)/1.4 var(--font-ui);color:var(--ink-soft);margin:0 0 .4rem;}
html .sfree,html .spay{font:600 var(--fs-sm)/1.35 var(--font-ui);margin:0 0 .15rem;}
html .sfree{margin-top:auto;}
html .spay{margin-bottom:.35rem;}
html .sprice{border-top:0;padding-top:.35rem;margin-top:0;}
html .sprice b{font:700 var(--fs-card)/1.2 var(--font-ui);color:var(--head);}
html .sprice b span{font:400 var(--fs-sm)/1 var(--font-ui);color:var(--ink-soft);}
html .sfav{font:700 var(--fs-xs)/1 var(--font-ui);letter-spacing:0;}
@media (max-width:600px){
  html .scard h3{font-size:.98rem;}
  html .sloc,html .sspec,html .sdist,html .sfree,html .spay,html .scard .sdesc{font-size:.78rem;}
  html .sprice b{font-size:1rem;}
}

/* ---------------------------------------------------------------- hero */
/* each headline line fills the width: --hl = the longest line's width in em, measured in the
   browser with Fraunces 600 at 48px (+2 %). Re-measure if hero_h1_* copy changes. ar keeps
   its own value (Tajawal, unchanged). */
html .hero h1{--hl:14.7;}
html[lang="es"] .hero h1{--hl:15.4;}
html[lang="fr"] .hero h1{--hl:19.3;}
@media (max-width:700px){
  html .hero h1 span{font-size:min(4.1rem,max(1.15rem,calc(97cqi / var(--hl))))!important;}
  html .hero .hsub{font-size:1rem;line-height:1.5;}
  /* French sentences are too long for one line each at a readable phone size: flow them instead */
  html[lang="fr"] .hero h1 span{display:inline!important;font-size:1.55rem!important;}
  html[lang="fr"] .hero h1 span:not(:last-child)::after{content:" ";}
  html[lang="fr"] .hero h1{line-height:1.14;text-wrap:pretty;}
}
/* narrow phones: one-sentence-per-line would drop under ~23px, so en/es flow too (ar still fits) */
@media (max-width:480px){
  html:is([lang="en"],[lang="es"]) .hero h1 span{display:inline!important;font-size:1.7rem!important;}
  html:is([lang="en"],[lang="es"]) .hero h1 span:not(:last-child)::after{content:" ";}
  html:is([lang="en"],[lang="es"]) .hero h1{line-height:1.12;text-wrap:pretty;}
  html .hero .hsub{font-size:.95rem;}
}
html .hero h1 span:last-child{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 0;}
html .hero .hsub{font:500 var(--fs-lg)/1.5 var(--font-ui);}
html .hlab{font-family:var(--font-ui);}

/* ---------------------------------------------------------------- trust bar under the search */
html .trust.trust--pro .ti{border:0;box-shadow:var(--shadow-1);border-radius:var(--r-md);}
html .trust.trust--pro .ti b,html .trust.trust--pro .ti strong{font:700 var(--fs-md)/1.3 var(--font-ui);color:var(--head);}

/* ---------------------------------------------------------------- detail pages */
html .pt-head h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.12;}
html .pt-section h2{font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.2;}
html .pt-section h3{font-size:var(--fs-base);}
html .side-card{border-radius:var(--r-xl);box-shadow:var(--shadow-2);border:1px solid var(--line);}
html .side-price .amt{font:700 1.6rem/1.1 var(--font-ui);color:var(--head);letter-spacing:-.01em;}
html .side-price .amt small{font:400 var(--fs-md)/1 var(--font-ui);color:var(--ink-soft);}
html .bf{border-radius:var(--r-md);}
html .bfd-l{font:700 var(--fs-xs)/1.2 var(--font-ui);letter-spacing:.02em;color:var(--head);}
html .bfd-v{font:500 var(--fs-md)/1.35 var(--font-ui);}

/* ---------------------------------------------------------------- spa menu + transport tool
   tool title = display serif, one step under the section h2; every price = UI font (like the cards) */
html :is(.sp-head,.tx-head,.ct-main,.sp-done,.tx-done,.ct-done,.bx-done) > h3,html :is(.sp-head,.tx-head) h3{font:600 clamp(1.35rem,2.2vw,1.65rem)/1.2 var(--font-display);letter-spacing:-.01em;
  font-variation-settings:"SOFT" 30,"WONK" 0;}
html[lang="ar"] :is(.sp-head,.tx-head,.ct-main,.sp-done,.tx-done,.ct-done,.bx-done) h3{font-family:'Tajawal',sans-serif;}

html :is(.sp-item-p,.sp-tot b,.sp-t-now,.sp-sticky-p,.tx-sum-p b,.tx-sticky-p,.tx-t-now,.st-pop b,.sv-b b,
  .mbar .amt,.xbar-p .amt,.pt-price b){font-family:var(--font-ui)!important;font-weight:700!important;letter-spacing:-.01em;}
/* 2-per-row phone grids (hub pages): the walking-distance line is the first thing to go - it is
   on the detail page, and three lines of it made every card twice as tall */
@media (max-width:560px){html .st-results .sgrid .sdist,html #stays .sgrid:not(.hscroll) .sdist{display:none;}}
html .sp-item-p{font-size:1.05rem;}

/* ---------------------------------------------------------------- 12px floor for small print */
html :is(.ti-d,.rc-note,.pt-kind,.rw){font-size:12px;}
html .hlab-k{font-size:11px;}
@media (max-width:760px){html .hero .bfd label{font-size:12px;}}

/* ---------------------------------------------------------------- forms */
html :is(input[type=text],input[type=email],input[type=tel],input:not([type]),textarea,select):not(.lang-switch){border-radius:var(--r-sm);}
html :is(input,textarea,select):focus-visible{outline:2.5px solid var(--clay);outline-offset:1px;}

/* ---------------------------------------------------------------- footer: ocean */
html footer{background:var(--ocean);color:rgba(255,255,255,.82);}
html footer a{color:rgba(255,255,255,.9);}
html footer a:hover{color:#fff;}
html .flegal{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.7);}

/* ---------------------------------------------------------------- small shared details */
html .srate--new,html .sr-badge{font-family:var(--font-ui);}
html .cal-title{font-family:var(--font-ui);font-weight:700;}

/* ================================================================ card system 2026 (shared) */
/* ------------------------------------------------------------------ commerce cards (stays / adventures / wellness / transport) */
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)){padding-block:8px 26px;margin-block:-8px -18px;}
/* the page's 2026-09-15 block sets .scard{background/border/box-shadow ... !important}, hence !important here */
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .scard{background:#fff!important;border:1px solid var(--line)!important;
  border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(20,20,20,.04),0 14px 32px -24px rgba(15,61,68,.4)!important;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .scard:hover{
  transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(15,61,68,.5)!important;}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .scover{border-radius:0;box-shadow:none;}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .sbody{padding:.95rem 1.05rem 1.05rem!important;}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .sfree{margin-top:.15rem;padding-top:0;}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .sprice{padding-top:.6rem;margin-top:auto;border-top:1px solid var(--line);}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .sbody > :nth-last-child(2){margin-bottom:.7rem;}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .sprice b{font-size:var(--fs-lg);}
html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)) .scard h3{color:var(--head);}

/* ------------------------------------------------------------------ day trips: dark "destinations" band, full-photo tiles */
html #villages-scroll.hscroll{padding-block:6px 10px;margin-block:-6px -6px;}
html #villages-scroll.hscroll .scard{position:relative;aspect-ratio:3/4;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:#0A2C33!important;box-shadow:0 22px 44px -30px rgba(0,0,0,.8)!important;}
html #villages-scroll.hscroll .scover{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;}
html #villages-scroll.hscroll .scover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,20,24,0) 35%,rgba(6,20,24,.86) 100%);}
html #villages-scroll.hscroll .scover img{transition:transform .7s var(--ease-out);}
html #villages-scroll.hscroll .scard:hover .scover img{transform:scale(1.06);}
html #villages-scroll.hscroll .sbody{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:1.1rem 1.15rem 1.15rem!important;color:#fff;}
html #villages-scroll.hscroll .sloc{display:inline-block;align-self:flex-start;width:max-content;max-width:100%;padding:.3rem .65rem;border-radius:999px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-weight:600;margin-bottom:.45rem;}
html #villages-scroll.hscroll .scard h3{color:#fff;font:600 1.45rem/1.15 var(--font-display);font-variation-settings:"SOFT" 30,"WONK" 0;}
html[lang="ar"] #villages-scroll.hscroll .scard h3{font-family:'Tajawal',sans-serif;font-weight:700;}

html #villages-scroll.hscroll .scard:hover h3{color:#fff;}
html #villages-scroll.hscroll .sdesc{color:rgba(255,255,255,.82);}
html #villages-scroll.hscroll .sfree{color:#9FE3BF;padding-top:.2rem;margin-top:.1rem;}
html #villages-scroll.hscroll .sfree svg{color:#9FE3BF;}
html #villages-scroll.hscroll .sprice{padding-top:.3rem;}
html #villages-scroll.hscroll .sprice b{color:#fff;font-size:var(--fs-lg);}
html #villages-scroll.hscroll .sprice b span{color:rgba(255,255,255,.75);}
@media (max-width:600px){html #villages-scroll.hscroll .scard h3{font-size:1.25rem;}}

/* ------------------------------------------------------------------ transport: airport promo banner */
html .tcard{position:relative;isolation:isolate;overflow:hidden;min-height:230px;align-items:flex-end;gap:1.25rem;
  border:0;border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.4rem);margin-bottom:clamp(1.5rem,3vw,2.25rem);color:#fff;
  background:#0F3D44 url("images/webp/transport/airport-transfer/photo-1-1080.webp") center 60%/cover no-repeat;
  box-shadow:0 26px 50px -30px rgba(15,61,68,.6);}
html .tcard::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,26,31,.88) 0%,rgba(8,26,31,.6) 50%,rgba(8,26,31,.15) 100%);}
html[dir="rtl"] .tcard::before{background:linear-gradient(270deg,rgba(8,26,31,.88) 0%,rgba(8,26,31,.6) 50%,rgba(8,26,31,.15) 100%);}
html .tcard > .icon{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);align-self:flex-start;}
html .tcard h3{color:#fff;font:600 clamp(1.4rem,2.4vw,2rem)/1.15 var(--font-display);margin-bottom:.4rem;}
html[lang="ar"] #transport .tcard h3{font-family:'Tajawal',sans-serif;font-weight:700;}

html .tcard p{color:rgba(255,255,255,.86);max-width:52ch;}
html .tcard .tcard-cta{background:#fff;border-color:#fff;color:var(--head);}
html .tcard .tcard-cta:hover{background:var(--clay);border-color:var(--clay);color:#fff;}
@media (max-width:700px){
  html .tcard{flex-direction:column;align-items:flex-start;min-height:0;
    background-position:center 40%;}
  html .tcard::before{background:linear-gradient(180deg,rgba(8,26,31,.55) 0%,rgba(8,26,31,.9) 100%);}
}

/* section pages (2 cards per row on phones): tighter card padding, simpler tiles */
@media (max-width:560px){
  html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)):not(.hscroll) .sbody{padding:.7rem .75rem .8rem!important;}
  html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)):not(.hscroll) .scard{border-radius:16px;}
  html :is(#stays-scroll,#adventures-scroll,#wellness-scroll,#transport-scroll,#villages-scroll:not(.hscroll)):not(.hscroll) .sprice b{font-size:var(--fs-md);}
}
/* transport.html: the banner follows the booking tool, not a section header */
html body:not(.hp) .tcard{margin-top:clamp(1.25rem,2.5vw,2rem);}
/* saved list (saved.html, cards built by site.js): same white card */
html .sv-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,20,20,.04),0 14px 32px -24px rgba(15,61,68,.4);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease);}
html .sv-card:hover{transform:translateY(-4px);box-shadow:0 26px 50px -28px rgba(15,61,68,.5);}
html .sv-ph{border-radius:0;box-shadow:none;}
html .sv-b{padding:.9rem 1.05rem 1.05rem;gap:.2rem;}
html .sv-b small{font:500 var(--fs-sm)/1.3 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--ink-soft);}
html .sv-b b{font:700 var(--fs-card)/1.3 var(--font-ui);color:var(--head);}
html .sv-pr{margin-top:.35rem;padding-top:.55rem;border-top:1px solid var(--line);font-size:var(--fs-md);}
@media (prefers-reduced-motion:reduce){html :is(.sv-card,.scard):hover{transform:none;}}
/* ================================================================ /card system 2026 */

/* ================================================================ colour system 2026 v3: ocean · sand · sunset
   Rules: coral (--cta) = the action that moves a booking forward, one per view · teal (--clay) = brand,
   links, icons, selected + secondary · neutral white/grey = everything else · green/amber/red/teal = status.
   Coral #FF6B4A itself only as glow/accent: white text on it is 2.8:1, so buttons use --cta (4.5:1). */
/* ---- primary booking actions */
html :is(.chk-btn,#bf-check,#bf-continue,#bf-send,#mbarBtn,.xbar .btn,.gp-book,#tx-go,#sp-go,#sp-send,#tx-sticky-go,#sp-sticky-go,
  #tx-send,#tx-auth-in,#sp-auth-in,#ctSend,#asSubmit,.tcard .tcard-cta,#contact form button[type=submit],.st-show,.who-search){
  background:var(--cta)!important;border-color:var(--cta)!important;color:#fff!important;
  box-shadow:0 10px 24px -12px rgba(255,107,74,.75)!important;}
html :is(.chk-btn,#bf-check,#bf-continue,#bf-send,#mbarBtn,.xbar .btn,.gp-book,#tx-go,#sp-go,#sp-send,#tx-sticky-go,#sp-sticky-go,
  #tx-send,#tx-auth-in,#sp-auth-in,#ctSend,#asSubmit,.tcard .tcard-cta,#contact form button[type=submit],.st-show,.who-search):hover{
  background:var(--cta-hover)!important;border-color:var(--cta-hover)!important;box-shadow:0 14px 28px -12px rgba(255,107,74,.85)!important;}
html :is(.chk-btn,#bf-check,#bf-continue,#bf-send,#mbarBtn,.xbar .btn,.gp-book,#tx-go,#sp-go,#sp-send,#tx-sticky-go,#sp-sticky-go,
  #tx-send,#tx-auth-in,#sp-auth-in,#ctSend,#asSubmit,.tcard .tcard-cta,#contact form button[type=submit],.st-show,.who-search):focus-visible{
  outline:3px solid rgba(255,107,74,.55)!important;outline-offset:3px;}
html :is(.chk-btn,#bf-check,#bf-continue,#bf-send,#mbarBtn,.xbar .btn,#tx-go,#sp-go,#sp-send,#ctSend,#asSubmit):is(:disabled,[aria-disabled="true"]){
  background:#E5E8E6!important;border-color:#E5E8E6!important;color:#7A8789!important;box-shadow:none!important;cursor:not-allowed;}
html .chk-btn .icon,html .chk-btn svg{color:#fff;stroke:currentColor;}

/* ---- secondary (teal) + neutral buttons */
html .btn{background:var(--clay);border-color:var(--clay);color:#fff;}
html .btn:hover{background:var(--clay-deep);border-color:var(--clay-deep);color:#fff;box-shadow:0 8px 18px -10px rgba(8,126,139,.6);}
html .btn:focus-visible{outline:3px solid rgba(8,126,139,.45);outline-offset:3px;}
html .btn:is(:disabled,[aria-disabled="true"]){background:#E5E8E6;border-color:#E5E8E6;color:#7A8789;box-shadow:none;}
html .btn--out,html .see-all{background:#fff;border:1.5px solid var(--line-strong);color:var(--head);}
html .btn--out:hover,html .see-all:hover{background:var(--clay-tint);border-color:var(--clay);color:var(--clay-deep);box-shadow:none;}
html .btn.btn--wa-cta,html .mcta .btn.btn--wa-cta{background:var(--clay);border-color:var(--clay);color:#fff;}
html .btn.btn--wa-cta:hover{background:var(--clay-deep);border-color:var(--clay-deep);}

/* ---- links, focus, form controls */
html :focus-visible{outline-color:var(--clay);}
html main p a:not(.btn):not([class]),html .pt-section a:not(.btn):not([class]){color:var(--clay);text-underline-offset:2px;}
html input[type=checkbox],html input[type=radio],html input[type=range]{accent-color:var(--clay);}
html :is(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input:not([type]),textarea,select):not(.lang-switch){
  border-color:var(--line-strong);background-color:#fff;transition:border-color .15s,box-shadow .15s;}
html :is(input,textarea,select):not(.lang-switch):hover{border-color:#9FB0B2;}
html :is(input,textarea,select):not(.lang-switch):focus{border-color:var(--clay);box-shadow:0 0 0 4px rgba(8,126,139,.14);outline:none;}
html :is(input,textarea,select):focus-visible{outline:none;}
html ::placeholder{color:#7A8789;opacity:1;}
html [aria-invalid="true"],html .is-bad{border-color:var(--err)!important;box-shadow:0 0 0 4px rgba(198,40,40,.12)!important;}

/* ---- selected / active states = teal */
html :is(.st-pill.on,.st-pill[aria-pressed="true"],.gal-chip.on,.gal-chip[aria-selected="true"],.sp-t-chip.on,.tx-t-chip.on,
  .chk:has(input:checked),.ct-chip:has(input:checked)){background:var(--clay)!important;border-color:var(--clay)!important;color:#fff!important;}
html :is(.sp-item.on,.tx-svc.on,.tx-dir.on,.sp-tab.on,.sp-tab[aria-selected="true"]){border-color:var(--clay)!important;box-shadow:0 0 0 1px var(--clay) inset;}
html .hero .btab.active .b-ic,html .hero .btab.active svg{color:var(--clay);}
html header.top .tnav a[aria-current="page"]{color:var(--clay-deep);}

/* ---- calendars (every calendar on the site):
   available = white · hover = teal ring on light teal · selected = teal circle · range = light teal band
   · today = coral dot · past = muted grey (no strike) · booked = muted + struck through · legend on range calendars */
html .cal-d:not(:disabled):not(.pad):not(.on):hover > span{background:var(--clay-tint);box-shadow:inset 0 0 0 1.5px var(--clay)!important;}
html .cal-d:not(.cal-v2 .cal-d):not(:disabled):not(.pad):not(.on):hover{background:var(--clay-tint);}
html .cal-d.on:not(:has(> span)){background:var(--clay)!important;color:#fff!important;border-color:var(--clay)!important;}
html .cal-d.on > span{background:var(--clay)!important;color:#fff!important;}
html .cal-d:disabled:not(.is-busy),html .cal-d.is-past{text-decoration:none!important;}
html .cal-d:disabled:not(.is-busy):not(.is-min),html .cal-d:disabled:not(.is-busy):not(.is-min) > span{color:#A2ADAF;}
html .cal-d.is-busy > span{color:#8A9699!important;opacity:1!important;text-decoration:line-through;text-decoration-color:#8A9699;
  background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(23,37,42,.06) 4px 5px);border-radius:50%;}
html .cal-d.is-min > span{opacity:.5!important;}
html .cal-d.today > span::after,html .cal-d.today:not(:has(> span))::after{background:var(--coral)!important;}
html .cal-d.on.today > span::after{background:#fff!important;}
html .cal-v2 .cal-d.mid,html .cal-v2 .cal-d.hov{background:rgba(8,126,139,.11);}
html .cal-nav{color:var(--ink);}
html .cal-nav:hover:not(:disabled){background:var(--clay-tint);color:var(--clay-deep);}
html .cal-step.act{border-color:var(--clay);box-shadow:0 0 0 3px rgba(8,126,139,.16);}
html .cal-step.act small{color:var(--clay-deep);}
html .cal-done{background:var(--clay);color:#fff;}
html .cal-done:hover{background:var(--clay-deep);}
html .cal-clear{color:var(--clay-deep);}
.cal-legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:.7rem 0 0;padding:0;list-style:none;
  font:500 var(--fs-xs)/1.2 var(--font-ui);color:var(--ink-soft);}
.cal-legend li{display:inline-flex;align-items:center;gap:.4rem;}
.cal-legend i{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;font:700 .62rem/1 var(--font-ui);font-style:normal;}
.cal-legend .lg-sel{background:var(--clay);color:#fff;}
.cal-legend .lg-today{position:relative;box-shadow:inset 0 0 0 1px var(--line-strong);}
.cal-legend .lg-today::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--coral);position:absolute;bottom:3px;left:50%;margin-left:-2px;}
.cal-legend .lg-busy{color:#8A9699;text-decoration:line-through;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(23,37,42,.07) 4px 5px);}

/* ---- guest / people steppers: round, 40px, touch-friendly */
html .gst-b{width:2.5rem;height:2.5rem;min-width:2.5rem;border-radius:50%;border:1.5px solid var(--line-strong);background:#fff;color:var(--ink);
  display:inline-grid;place-items:center;font-size:1.15rem;line-height:1;padding:0;}
html .gst-b:hover:not(:disabled){border-color:var(--clay);color:var(--clay-deep);background:var(--clay-tint);}
html .gst-b:disabled{opacity:.3;}
/* ---- status: text + icon, never colour alone */
html :is(.ct-err,.bk-err,.bf-err,.as-err,.tx-err,.sp-err,[role="alert"].err){color:var(--err);}
html :is(.nofee,.spay,.sfree,.bx-ok,.st-av){color:var(--ok);}
html .ast-toast{background:var(--ocean)!important;color:#fff!important;}

/* ---- surfaces: white first, soft grey alternates, sand for warm highlights */
html .sec-plaster{background:var(--stone);}
html footer{background:var(--ocean);}
html .sfav{color:var(--head);}
html .srate--new{background:var(--sand)!important;color:#6B4A1E!important;border:0!important;}
html .kicker--xl{color:var(--clay);}
html .kicker--xl .k-ic{background:var(--clay-tint);color:var(--clay);}
/* ---- sand: warm highlights, used sparingly */
html body.hp .hp-benefits .trust--pro .ti:nth-child(even) .ti-ic{background:var(--sand);color:#8A5A1C;}
html body.hp #reviews{background:var(--sand-soft);}
html body.hp #reviews .rcard{border-color:#EFE3CF;}
html .faq-help{background:var(--sand-soft);border-color:#EFE3CF;}
html .faq-help-ic{background:var(--sand);color:#8A5A1C;}
/* ---- contrast fixes found by the audit (2026-09-27) */
html body.hp #reviews .kicker--xl{color:var(--clay-deep);}
html .wa p{color:#fff!important;opacity:1!important;}
html .gm-tag{background:rgba(12,30,34,.74)!important;}
/* ================================================================ /colour system 2026 v3 */

/* section pages: their main heading is an <h1> since 2026-09-28 (was <h2>); same look as the h2 */
html .kicker--xl + h1{font-family:"Fraunces","Cormorant Garamond",Georgia,serif;font-weight:600;letter-spacing:-.01em;color:var(--head);}
html[lang="ar"] .kicker--xl + h1{font-family:"Tajawal",sans-serif;letter-spacing:normal;}

html h1#asTitle{font-family:"Fraunces","Cormorant Garamond",Georgia,serif;font-size:clamp(1.75rem,3vw,2.6rem);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--head);margin:0;}
@media (max-width:600px){html .head-row .head > h1{order:2;flex:0 0 100%;}}

/* ==== accessibility 2026-09-29: tap targets at least 24px (WCAG 2.2 AA) ==== */
html .flegal a,html footer a.back,html .rcard-more,html .ct-faq-more,html a.rt{display:inline-flex;align-items:center;min-height:24px;}
html .flegal a{padding-block:.2rem;}
html .sv-wrap{min-height:calc(100svh - 5rem);}   /* saved.html: the list + 'Recently viewed' fill in after load without pushing the footer (CLS) */

/* ==== calendar: homepage + section-page search, 2 months stacked on phones (2026-09-29) ====
   (the 2nd month was hidden under 640px: at the end of a month the visitor saw only a few days) */
@media (max-width:640px){
  html .bk-pop .cal-months{flex-direction:column;align-items:stretch;gap:1rem;}
  html .bk-pop .cal-m:nth-child(2){display:block;padding-top:1rem;border-top:1px solid var(--line);}
  html .bk-pop.cal-v2 .cal-m{max-width:none;width:100%;}
}

/* ==== search results view: compact section header when a search is active (2026-09-29) ====
   (html.has-search is set by site.js; the h1 stays in the page, only smaller) */
html.has-search main > section:first-of-type{padding-top:clamp(.75rem,2vw,1.25rem);}
html.has-search main > section:first-of-type .head-row .kicker--xl,
html.has-search main > section:first-of-type .head-row .sub{display:none;}
html.has-search main > section:first-of-type .head-row h1{font-size:clamp(1.3rem,2.2vw,1.75rem)!important;margin:0;}
html.has-search main > section:first-of-type .head-row{margin-bottom:.75rem;}

/* ==== detail pages: reserve the Save / Share row before site.js + trip.js add it (layout shift, 2026-09-29)
   the real pills: 2.33rem tall, .6rem above, about 12rem wide together; the placeholder wraps the same way */
html .pt-head:not(:has(.sv-pill))::after{content:"";display:block;flex:0 0 12rem;height:2.33rem;margin-top:.6rem;}

/* ==== stays.html results: reserve what the page script adds after the first paint (layout shift, 2026-09-29) ====
   the "N stays available for your dates" line (searches with dates), the result count row on phones,
   and the "Show map" button (stays-map.js); each placeholder disappears once the real element exists */
html.has-dates .st-results:not(:has(> .sr-msg))::before{content:"";display:block;height:calc(1.33rem + 1.2rem);}
@media (max-width:880px){html .st-count:empty{min-height:1.43rem;}}
html .st-bar:not(:has(.st-mapbtn))::after{content:"";display:block;order:1;flex:none;width:8.4rem;height:42px;}
html .st-bar .st-sort{order:2;}

/* ==== activity pages 2026 (adventure / day trip / wellness / transport pages, 2026-09-29) ====
   compared with GetYourGuide / Viator / Klook: photo grid that fits, swipe row on phones, full-screen
   viewer (trip.js), breadcrumb, Save + Share together, "Good to know" as a key-details grid on top */
html .hc-wrap{position:relative;margin-top:1.25rem;}
html .hc-wrap > .hero-cover,html .hero-cover{margin-top:0;}
html main > .hero-cover{margin-top:1.25rem;}
html .hero-cover{height:clamp(300px,34vw,440px);border-radius:18px;gap:8px;grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
html .hero-cover .hg-side{grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:0;}
html .hero-cover img{min-height:0;cursor:zoom-in;transition:filter .25s ease;}
@media (hover:hover){html .hero-cover img:hover{filter:brightness(.88);}}
html .hc-all,html .hc-count{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;
  font:700 .85rem/1 "Plus Jakarta Sans",sans-serif;}
html .hc-all{inset-block-end:14px;inset-inline-end:14px;padding:.6rem 1rem;border:1px solid rgba(23,37,42,.14);background:#fff;color:var(--ink);
  box-shadow:0 4px 14px rgba(23,37,42,.18);cursor:pointer;transition:transform .15s,box-shadow .15s;}
html .hc-all:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(23,37,42,.22);}
html .hc-all svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;}
html .hc-count{display:none;inset-block-end:12px;inset-inline-end:12px;padding:.4rem .7rem;background:rgba(15,25,28,.72);color:#fff;font-size:.78rem;pointer-events:none;}
html .hc-dots{display:none;}
@media (max-width:700px){
  html .hero-cover{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:clamp(230px,64vw,320px);gap:0;border-radius:16px;}
  html .hero-cover::-webkit-scrollbar{display:none;}
  html .hero-cover .hg-side{display:contents!important;}
  html .hero-cover img{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;}
  html .hc-all{display:none;}
  html .hc-count{display:inline-flex;}
  html .hc-dots{display:flex;justify-content:center;gap:.35rem;position:absolute;left:0;right:0;inset-block-end:12px;pointer-events:none;}
  html .hc-dots i{width:.42rem;height:.42rem;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.35);transition:transform .2s,background-color .2s;}
  html .hc-dots i.on{background:#fff;transform:scale(1.25);}
}
/* breadcrumb */
html .pt-bc{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .4rem;margin:0 0 .45rem;font:600 .8rem/1.3 "Plus Jakarta Sans",sans-serif;color:var(--ink-soft);}
html .pt-bc a{display:inline-flex;align-items:center;min-height:24px;color:var(--ink-soft);text-decoration:none;}
html .pt-bc a:hover{color:var(--clay-deep);text-decoration:underline;text-underline-offset:3px;}
html .pt-bc [aria-current]{color:var(--ink);}
html[dir="rtl"] .pt-bc > span[aria-hidden]{display:inline-block;transform:scaleX(-1);}
/* title row: text left, Save + Share together on the right (wrap under the text on phones) */
html .pt-head:has(.pt-bc){justify-content:flex-start;align-items:flex-start;column-gap:.45rem;}
html .pt-head:has(.pt-bc) > div:first-child{flex:1 1 26rem;min-width:0;}
html .pt-head:has(.pt-bc) .tp-share{margin-inline-start:0;}
/* key details ("Good to know") right under the title */
html .kd-sec .info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.75rem;}
html .kd-sec .info-item{gap:.85rem;align-items:center;}
html .kd-sec .info-item > .icon{flex:none;width:2.6rem;height:2.6rem;padding:.62rem;margin:0;border-radius:12px;background:var(--clay-tint);color:var(--clay);}
html .kd-sec .info-item--kd > .icon{background:var(--ok-tint);color:var(--ok);}
html .kd-sec .info-item b{font-size:.95rem;}
html .kd-sec .info-item span{font-size:.86rem;line-height:1.45;}
@media (max-width:560px){html .kd-sec .info-list{grid-template-columns:minmax(0,1fr);gap:.9rem;}}

/* ==== activity extras 2026: highlights, know before you go, FAQ, photo credits ==== */
html .ax-hl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.6rem;}
html .ax-hl li,html .ax-kb li{display:flex;gap:.6rem;align-items:flex-start;line-height:1.5;}
html .ax-hl .icon,html .ax-kb .icon{flex:0 0 1.2rem;width:1.2rem;height:1.2rem;margin-top:.15rem;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
html .ax-hl .icon{stroke:var(--ok,#1B7A4B);}
html .ax-kb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
html .ax-kb .icon{stroke:var(--clay,#087E8B);}
html .ax-faq{border-top:1px solid var(--line,#E5E8E6);}
html .ax-q{border-bottom:1px solid var(--line,#E5E8E6);}
html .ax-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.2rem;padding:.8rem 0;
  font:600 var(--fs-base,1rem)/1.4 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);}
html .ax-q summary::-webkit-details-marker{display:none;}
html .ax-q summary::after{content:"";flex:0 0 .6rem;height:.6rem;border:solid var(--ink-soft,#5C6B6E);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
html .ax-q[open] summary::after{transform:rotate(-135deg) translateY(-2px);}
html .ax-q summary:focus-visible{outline:2.5px solid var(--clay,#087E8B);outline-offset:2px;border-radius:6px;}
html .ax-q p{margin:0 0 1rem;color:var(--ink-soft,#5C6B6E);line-height:1.6;}
html .pt-credit{margin:.45rem 0 0;font:500 .75rem/1.5 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);}
html .pt-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
@media (max-width:640px){html .ax-hl{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion:reduce){html .ax-q summary::after{transition:none;}}


/* ==== footer 2026: brand | Explore | Contact | Follow us + bottom bar (owner's reference, 2026-09-30) ==== */
html footer.f26{padding:clamp(3rem,6vw,4.5rem) 0 0;}
html footer.f26 .wrap{display:block;}
html .f26-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.9fr);gap:2.5rem clamp(1.5rem,4vw,3.5rem);align-items:start;}
html .f26-brand .brand{margin:0;display:inline-flex;}
html .f26-brand .brand-w{color:#fff;}
html .f26-tag{margin:1.1rem 0 0;max-width:32ch;font:400 .92rem/1.65 var(--font-ui,"Plus Jakarta Sans",sans-serif);color:rgba(255,255,255,.68);}
html .f26-h{margin:.35rem 0 1.15rem;font:700 .72rem/1.2 var(--font-ui,"Plus Jakarta Sans",sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#8FBEC3;}
html .f26-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem;}
html .f26-list a,html .f26-list span{font:500 .95rem/1.35 var(--font-ui,"Plus Jakarta Sans",sans-serif);color:rgba(255,255,255,.88);text-decoration:none;}
html .f26-list a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
html .f26-list a:focus-visible,html .f26-soc a:focus-visible,html .f26-bot a:focus-visible{outline:2.5px solid #8FBEC3;outline-offset:3px;border-radius:6px;}
html .f26-ic li{display:flex;align-items:center;gap:.7rem;min-width:0;}
html .f26-ic .icon{flex:0 0 1.1rem;width:1.1rem;height:1.1rem;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
html .f26-ic a{white-space:nowrap;}
@media (max-width:360px){html .f26-ic a{white-space:normal;overflow-wrap:anywhere;}}
html .f26-soc{display:flex;gap:.65rem;flex-wrap:wrap;}
html .f26-soc a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;transition:background-color .2s,border-color .2s,transform .2s;}
html .f26-soc a:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.45);transform:translateY(-2px);}
html .f26-soc .icon{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
html .f26-bot{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,3.5rem);padding:1.5rem 0 1.6rem;border-top:1px solid rgba(255,255,255,.12);
  font:500 .82rem/1.4 var(--font-ui,"Plus Jakarta Sans",sans-serif);color:rgba(255,255,255,.55);}
html .f26-bot p{margin:0;}
html footer.f26 .flegal{flex:0 1 auto;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:0;padding:0;border:0;justify-content:center;}
html footer.f26 .flegal a{font:500 .82rem/1.4 var(--font-ui,"Plus Jakarta Sans",sans-serif);color:rgba(255,255,255,.7);text-decoration:none;min-height:24px;display:inline-flex;align-items:center;}
html footer.f26 .flegal a:hover{color:#fff;text-decoration:underline;}
html[lang="ar"] .f26-tag,html[lang="ar"] .f26-list a,html[lang="ar"] .f26-list span,html[lang="ar"] .f26-bot{font-family:"Tajawal",sans-serif;}
html[lang="ar"] .f26-h{letter-spacing:0;}
@media (max-width:980px){
  html .f26-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  html .f26-brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  html .f26-grid{gap:2.2rem 1.5rem;}
  html .f26-col:nth-child(3){grid-column:1 / -1;order:3;}   /* contact: long email needs the full width */
  html .f26-col:nth-child(4){order:2;}
  html .f26-bot{flex-direction:column;align-items:flex-start;}
  html footer.f26 .flegal{justify-content:flex-start;}
}
@media (prefers-reduced-motion:reduce){html .f26-soc a{transition:none;}html .f26-soc a:hover{transform:none;}}
/* ==== /footer 2026 ==== */
/* ==== saved heart in the header (2026-09-30) ====
   Owner: "add a heart on top for the wishlist so it will be easy to find", then "only the heart, not the word".
   Markup by _saved_top.py (just before the account button); count badge + aria-label ("Saved (2)") by site.js.
   A bare heart, no circle, at every width; the name appears only as a hover label (like the icon nav).
   Phones: the bar gap is smaller and the empty <nav> cancels its own gap, to make room (FR at 360px had 12px spare). */
html .sv-top{position:relative;flex:0 0 auto;display:inline-grid;place-items:center;width:2.55rem;height:2.55rem;
  color:var(--head);text-decoration:none;border-radius:50%;transition:color .2s,background .2s;}
html .sv-top-ic{position:relative;display:grid;place-items:center;width:1.5rem;height:1.5rem;}
html .sv-top svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .2s,stroke .2s,transform .2s;}
html .sv-top:hover{color:var(--clay);background:var(--clay-tint,#E4F2F3);}
html .sv-top:hover svg{transform:scale(1.08);}
html .sv-top:focus-visible{outline:2.5px solid var(--clay-deep);outline-offset:2px;}
html .sv-top[aria-current="page"]{color:var(--clay);}
html .sv-top.has-items svg{fill:#E0474C;stroke:#E0474C;}
html .sv-top-n{position:absolute;top:-.4rem;inset-inline-end:-.6rem;min-width:1.1rem;height:1.1rem;padding:0 .28rem;border-radius:999px;
  background:var(--cta,#D4432A);color:#fff;border:2px solid #fff;font:700 .66rem/.8rem 'Plus Jakarta Sans',sans-serif;text-align:center;box-sizing:border-box;}
html .sv-top-n[hidden]{display:none!important;}
html .sv-top.sv-bump svg{animation:svTopPop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes svTopPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
/* name on hover (mouse / keyboard), right-aligned so it can't stick out past the screen */
html .sv-top::after{content:attr(aria-label);position:absolute;top:calc(100% + .5rem);inset-inline-end:0;z-index:70;padding:.4rem .7rem;border-radius:.5rem;
  background:var(--night);color:#fff;font:600 .8rem/1 'Plus Jakarta Sans',sans-serif;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-.3rem);transition:opacity .18s,transform .18s,visibility .18s;}
@media (hover:hover){html .sv-top:is(:hover,:focus-visible)::after{opacity:1;visibility:visible;transform:translateY(0);}}
html[lang="ar"] .sv-top::after{font-family:'Tajawal',sans-serif;}

/* homepage: white over the hero photo while the header is transparent */
html header.top.hdr-clear .sv-top{color:#fff;}
html header.top.hdr-clear .sv-top:hover{background:rgba(255,255,255,.16);}
html header.top.hdr-clear .sv-top-n{border-color:transparent;}
@media (max-width:699px){
  html header.top .tin{column-gap:.55rem;}
  html header.top .tin > nav{margin-inline-end:-.55rem;}
  html .sv-top{width:2.3rem;height:2.3rem;}
}
/* wide screens: the header row was capped at 1360px and full in Spanish; a little more room */
@media (min-width:1441px){html header.top .wrap.tin{max-width:1440px;}}
@media (prefers-reduced-motion:reduce){html .sv-top.sv-bump svg{animation:none;}}
/* ==== /saved heart in the header ==== */

/* ==== header nav icons = search tab icons (2026-10-04) ==== */
html header.top .tnav .nav-ic.nav-ic3{background:#F1F5F5;color:inherit;box-shadow:inset 0 0 0 1px rgba(23,37,42,.07);}
html header.top .tnav .nav-ic.nav-ic3 > svg{display:block;width:80%;height:80%;max-width:none;flex:none;stroke:none!important;overflow:visible;}
html header.top .tnav a:hover .nav-ic.nav-ic3{background:#fff;box-shadow:0 7px 16px -7px rgba(23,37,42,.42),inset 0 0 0 1px rgba(23,37,42,.08);}
html header.top .tnav a:focus-visible .nav-ic.nav-ic3{background:#fff;box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--clay-deep);}
html header.top .tnav a[aria-current="page"] .nav-ic.nav-ic3{background:var(--clay-tint,#E4F2F3);box-shadow:inset 0 0 0 2px var(--clay);}
/* homepage, header over the photo: white circles so the colours read on the image */
html header.top.hdr-clear .tnav .nav-ic.nav-ic3{background:rgba(255,255,255,.93);box-shadow:0 5px 14px -6px rgba(0,0,0,.4);}
html header.top.hdr-clear .tnav a:hover .nav-ic.nav-ic3{background:#fff;box-shadow:0 8px 18px -6px rgba(0,0,0,.5);}
/* phone menu rows: the same icons in a light tile */
@media (max-width:699px){
  html header.top .tnav .nav-ic.nav-ic3{width:2.4rem;height:2.4rem;}
}
/* ==== /header nav icons ==== */

/* ==== language button: code only, flags only in the menu (owner, 2026-10-04) ==== */
html .lp-btn > .lp-flag{display:none;}
html .lp-btn{min-width:4.6rem;justify-content:center;gap:.45rem;padding:.25rem .95rem;}
html .lp-ph{width:4.6rem;}
@media (max-width:1240px){ html .lp-btn{min-width:4.3rem;padding:.2rem .85rem;} html .lp-ph{width:4.3rem;} }
/* ==== /language button ==== */

/* ==== wellness page: no service cards left under the spa menu (2026-10-04) ==== */
html #wellness-scroll:not(:has(.scard)){display:none;}
/* ==== /wellness page ==== */

/* ==== hub search: compact pill on phones (2026-10-04) ==== */
/* owner: the search card covered the whole first phone screen. Like the Airbnb / Booking.com apps, phones show
   one pill with the current search; tapping it opens the full card (site.js "section-page search on phones"). */
html .hs-pill,html .hs-close{display:none;}
@media (max-width:760px){
  html .hub-search:not(.hs-open) .booker{display:none!important;}
  html .hub-search{margin-bottom:.9rem;}
  html .hs-pill{display:flex;align-items:center;gap:.8rem;width:100%;min-height:3.6rem;padding:.45rem 1.1rem .45rem .45rem;
    border:1px solid #DDDDDD;border-radius:999px;background:#fff;cursor:pointer;text-align:start;color:var(--head,#17252A);
    box-shadow:0 3px 12px rgba(23,37,42,.12),0 1px 2px rgba(23,37,42,.06);font-family:var(--font-ui,'Plus Jakarta Sans',sans-serif);
    transition:box-shadow .2s,transform .15s;}
  html .hs-pill:active{transform:scale(.985);}
  html .hs-pill:focus-visible{outline:2.5px solid var(--clay-deep);outline-offset:2px;}
  html .hs-pill-ic{flex:0 0 2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;
    background:var(--cta,#D4432A);color:#fff;}
  html .hs-pill-ic svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;}
  html .hs-pill-tx{display:flex;flex-direction:column;gap:.12rem;min-width:0;}
  html .hs-pill-t{font-size:.95rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html .hs-pill-s{font-size:.8rem;line-height:1.25;color:var(--ink-soft,#5C6B6E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html .hs-pill-s:empty{display:none;}
  html .hub-search.hs-open .hs-pill{display:none;}
  html .hub-search.hs-open .hs-close{display:block;margin:.55rem auto 0;padding:.6rem 1.2rem;min-height:44px;border:0;background:none;
    font:600 .9rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
  /* stays tools (Booking.com style): the count on its own line, then Filters | Map | Sort as one segmented bar */
  html .st-bar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;align-items:stretch;
    border:1px solid #DDDDDD;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(23,37,42,.06);margin-top:1.9rem;position:relative;}
  html .st-bar > .st-count{position:absolute;bottom:calc(100% + .45rem);inset-inline-start:0;margin:0;font-size:1.05rem;white-space:nowrap;}
  html .st-bar > .st-fbtn,html .st-bar > .st-mapbtn,html .st-bar > .st-sort{min-width:0;min-height:46px;margin:0!important;border:0!important;border-radius:0!important;
    background:none!important;box-shadow:none!important;justify-content:center;padding:.4rem .5rem!important;font-size:.82rem;}
  html .st-bar > .st-mapbtn,html .st-bar > .st-sort{border-inline-start:1px solid #E5E8E6!important;}
  html .st-bar > * > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  html .st-bar > .st-sort{display:flex;align-items:center;gap:.3rem;}
  html .st-bar > .st-sort{position:relative;font-weight:600;color:var(--head,#17252A);}
  html .st-bar > .st-sort > .sr-only{position:static!important;width:auto!important;height:auto!important;margin:0!important;clip:auto!important;
    clip-path:none!important;overflow:hidden!important;white-space:nowrap;text-overflow:ellipsis;font:600 .82rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);}
  html .st-bar > .st-sort select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;}  /* a slightly smaller page title so results start higher */
  html .hub-search ~ *{scroll-margin-top:5rem;}
}
/* ==== /hub search: compact pill on phones ==== */

/* ==== mobile 2026 (2026-10-04): bottom navigation, sticky WhatsApp, one stay per row, no jumps ==== */
/* JS: site.js "mobile 2026". Everything here is phones only (<=760px) except the hidden defaults. */
html .mtab,html .mbar-wa{display:none;}
@media (max-width:760px){
  /* bottom navigation: Explore | Stays | Things to do | Saved | WhatsApp */
  html.has-mtab .mtab{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:58;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    border-top:1px solid var(--line,#E5E8E6);box-shadow:0 -8px 24px -12px rgba(23,37,42,.18);transition:transform .25s ease;}
  html.has-mtab.mtab-hide .mtab,html.has-mtab body.st-lock .mtab,html.has-mtab body:has(.lp-back:not([hidden])) .mtab,
  html.has-mtab body:has(.hub-search.hs-open) .mtab,html.has-mtab body:has(.tnav.open) .mtab,html.has-mtab body:has(.bk-pop:not([hidden])) .mtab{transform:translateY(115%);}
  html .mtab a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;
    border-radius:12px;color:var(--ink-soft,#5C6B6E);text-decoration:none;font:600 11px/1.15 var(--font-ui,'Plus Jakarta Sans',sans-serif);
    -webkit-tap-highlight-color:transparent;}
  html[lang="ar"] .mtab a{font-family:'Tajawal',sans-serif;font-size:12px;}
  
  html .mtab-t{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;}
  html .mtab-ic{position:relative;display:grid;place-items:center;width:44px;height:28px;border-radius:999px;transition:background .2s;}
  html .mtab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  html .mtab a[aria-current="page"]{color:var(--clay-deep,#066570);}
  html .mtab a[aria-current="page"] .mtab-ic{background:var(--clay-tint,#E4F2F3);}
  html .mtab a[aria-current="page"] svg{stroke-width:2.2;}
  html .mtab a[data-k="saved"][aria-current="page"] svg{fill:currentColor;}
  html .mtab a:active .mtab-ic{transform:scale(.92);}
  html .mtab a:focus-visible{outline:2.5px solid var(--clay-deep);outline-offset:-2px;}
  html .mtab .mtab-wa{color:#128C4A;}
  html .mtab-n{position:absolute;top:-3px;inset-inline-end:3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    background:var(--cta,#D4432A);color:#fff;font:700 10px/17px var(--font-ui,'Plus Jakarta Sans',sans-serif);text-align:center;}
  html .mtab-n[hidden]{display:none!important;}
  /* the bottom bar replaces the green "WhatsApp us" bar, the floating button and the header heart */
  html.has-mtab .mcta,html.has-mtab .fab,html.has-mtab header.top .sv-top{display:none!important;}
  html.has-mtab footer{padding-bottom:calc(1.5rem + 64px + env(safe-area-inset-bottom))!important;}

  /* sticky booking bars on apartment and activity pages: round WhatsApp button beside the main button */
  html .mbar-wa{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;margin-inline-start:auto;
    border:1.5px solid #CFE9DA;background:#fff;color:#128C4A;box-shadow:0 4px 12px -6px rgba(23,37,42,.35);text-decoration:none;}
  html .mbar-wa svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  html .mbar-wa:active{transform:scale(.94);}
  html #mbar,html .xbar{gap:.6rem!important;padding-bottom:calc(.7rem + env(safe-area-inset-bottom))!important;}
  html #mbar > .btn,html .xbar > .btn{flex:0 0 auto;}
  html #mbar > div:first-child,html .xbar > .xbar-p{min-width:0;flex:1 1 auto;}

  /* footer phone / e-mail links: full-height tap targets */
  html footer.f26 .f26-ic > li{min-height:44px;align-items:center;margin:0!important;}
  html footer.f26 .f26-ic a{display:inline-flex;align-items:center;min-height:44px;}

  /* no jumps while loading: room for the compact search pill and the filter chips before scripts add them */
  html .hub-search:not(:has(.hs-pill)){min-height:3.6rem;}
  html .wrap:not(:has(.tp-filt)) > #adventures-scroll:not(.hscroll){margin-top:160px;}
  html .wrap:not(:has(.tp-filt)) > #villages-scroll:not(.hscroll){margin-top:108px;}
}
@media (max-width:350px){
  html.has-mtab .mtab{padding-inline:0;}
  html .mtab a{font-size:10px;letter-spacing:-.01em;}
  html[lang="ar"] .mtab a{font-size:10.5px;}
  html .mtab-t{padding:0;}
}
/* stays list on phones: one big card per row, like the travel apps (names no longer cut off, photo first) */
@media (max-width:560px){
  html body #stays-scroll.sgrid:not(.hscroll){grid-template-columns:minmax(0,1fr)!important;gap:1.25rem!important;}
  html body #stays-scroll:not(.hscroll) .scard{border-radius:20px;}
  html body #stays-scroll:not(.hscroll) .scover{aspect-ratio:4/3;height:auto!important;}
  html body #stays-scroll:not(.hscroll) .sbody{padding:.85rem 1rem 1rem!important;}
  html body #stays-scroll:not(.hscroll) .sloc{font-size:var(--fs-sm,.8125rem)!important;letter-spacing:0!important;margin-bottom:.2rem!important;}
  html body #stays-scroll:not(.hscroll) .scard h3{font-size:1.125rem!important;line-height:1.3!important;-webkit-line-clamp:3;margin-bottom:.25rem!important;}
  html body #stays-scroll:not(.hscroll) .sspec{font-size:var(--fs-sm,.8125rem)!important;margin-bottom:.3rem!important;}
  html body #stays-scroll:not(.hscroll) .sdist{display:flex!important;}
  html body #stays-scroll:not(.hscroll) .sprice{flex-direction:row!important;align-items:baseline!important;padding-top:.5rem!important;}
  html body #stays-scroll:not(.hscroll) .sprice b{font-size:1.15rem!important;}
  html body #stays-scroll:not(.hscroll) .sprice b span{font-size:var(--fs-sm,.8125rem)!important;}
  html body #stays-scroll:not(.hscroll) :is(.sfree,.spay){font-size:var(--fs-sm,.8125rem)!important;}
}
/* ==== /mobile 2026 ==== */

/* ==== search steps as a bottom sheet on phones (2026-10-04) ==== */
/* owner: tapping "Where" scrolled the page down so far that the field disappeared. Like the travel apps, each step
   (Where / dates / guests, and the activity / transfer pickers) now opens as a sheet from the bottom of the screen;
   the page stays where it is, a tap on the dark backdrop closes it (the booker's outside-click rule). */
@media (max-width:760px){
  html body .booker .bk-pop:not([hidden]){position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
    width:auto!important;max-width:none!important;margin:0!important;transform:none;z-index:130!important;
    max-height:min(86vh,86dvh);overflow-y:auto!important;overscroll-behavior:contain;
    border-radius:22px 22px 0 0!important;padding:22px 16px calc(16px + env(safe-area-inset-bottom))!important;
    background:#fff!important;box-shadow:0 -18px 50px rgba(8,30,34,.35)!important;animation:bkSheetUp .28s cubic-bezier(.2,.8,.2,1);}
  html body .booker .bk-pop:not([hidden])::before{content:"";position:sticky;top:-14px;display:block;width:40px;height:5px;margin:-12px auto 12px;
    border-radius:999px;background:#D0D5D4;z-index:2;}
  html:has(.booker .bk-pop:not([hidden])){overflow:hidden;}
  /* the search card keeps a transform from its entrance animation, which would trap a fixed sheet inside it */
  html body .booker:has(.bk-pop:not([hidden])){transform:none!important;animation:none!important;will-change:auto!important;}
  /* backdrop drawn by the search card itself, so it sits in the same layer as the sheet (a tap on it closes the sheet) */
  html body .booker:has(.bk-pop:not([hidden]))::after{content:"";position:fixed;inset:0;z-index:125;background:rgba(12,34,38,.45);animation:bkFade .2s ease;}
  html body .booker .bk-pop:not([hidden]) .rp-prev{display:none!important;}
}
@keyframes bkSheetUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes bkFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){html body .booker .bk-pop:not([hidden]),html body .booker:has(.bk-pop:not([hidden]))::after{animation:none!important;}}
/* date sheet on phones (owner: "ugly, unprofessional, hard to use"): a fixed frame — Check-in / Checkout boxes at the
   top, only the months scroll, "Clear dates" + "Next" always visible in the footer, handle in its own space */
@media (max-width:760px){
  html body .booker #bk-cal:not([hidden]){display:flex!important;flex-direction:column;overflow:hidden!important;
    height:min(86vh,86dvh);padding:20px 16px 0!important;}
  html body .booker #bk-cal:not([hidden])::before{position:static;flex:none;margin:-10px auto 12px;}
  html body .booker #bk-cal .cal-steps{flex:none;display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.5rem;align-items:center;width:100%;}
  html body .booker #bk-cal .cal-step{width:100%;text-align:start;}
  html body .booker #bk-cal .cal-step{min-height:54px;border-radius:14px;}
  html body .booker #bk-cal .cal-hint{flex:none;margin:.55rem 0 .35rem;font-size:.85rem;}
  html body .booker #bk-cal .cal-wrap{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:.25rem 16px 1rem;border-top:1px solid var(--line,#E5E8E6);}
  html body .booker #bk-cal .cal-head{top:.25rem;left:12px!important;right:12px!important;inset-inline:12px!important;}
  html body .booker #bk-cal .cal-m + .cal-m{margin-top:1.1rem;padding-top:1.1rem;border-top:0;}
  html body .booker #bk-cal .cal-title{font-size:1.05rem;}
  html body .booker #bk-cal .cal-legend{display:none!important;}
  html body .booker #bk-cal .cal-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 -16px!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;border-top:1px solid var(--line,#E5E8E6);background:#fff;
    box-shadow:0 -8px 18px -14px rgba(23,37,42,.35);}
  html body .booker #bk-cal .cal-clear{min-height:44px;padding:0 .25rem;font-size:.95rem;font-weight:600;}
  html body .booker #bk-cal .cal-done{min-height:48px;padding:0 1.8rem!important;border-radius:999px;font-size:1rem!important;}
}/* ==== /search steps as a bottom sheet ==== */

/* ==== wordmark: AGADIR / STAYS (2026-10-08) ==== */
/* owner's reference: "AGADIR" in large classic serif capitals, "STAYS" small and widely spaced underneath, centred.
   Cormorant Garamond (already self-hosted) in capitals; the arch tile beside it is unchanged. Header + footer, all pages.
   Markup: _logo_wordmark_2026.py (two spans, with a space between them for screen readers). */
html .brand-w{display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;line-height:1!important;
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif!important;font-weight:600!important;text-transform:uppercase;
  letter-spacing:0!important;font-size:1rem!important;}
html .brand-w .bw-1{display:block;font-size:1.5rem;font-weight:600;letter-spacing:.13em;margin-inline-end:-.13em;}
html .brand-w .bw-2{display:block;font-size:.84rem;font-weight:600;letter-spacing:.3em;margin-inline-end:-.3em;}
html body .brand{gap:.7rem;}
@media (max-width:700px){
  html .brand-w .bw-1{font-size:1.24rem;}
  html .brand-w .bw-2{font-size:.72rem;letter-spacing:.28em;margin-inline-end:-.28em;}
}
html .f26-brand .brand-w .bw-1{font-size:1.65rem;}
/* ==== /wordmark ==== */

/* ==== teal top on the section pages + calmer header everywhere (2026-10-08) ==== */
/* owner: "apply same changes we did to home page to the rest of the website".
   1. Header on every page: text links on computers (no icon circles; >=1241px) and no round WhatsApp button in the bar
      (>=881px; the floating WhatsApp button / the booking card's WhatsApp button are there), like the homepage.
   2. The white-on-teal header rules the homepage had inline now live here, so any page can use them (header.hdr-clear).
   3. Section pages (body.tb, _tband_2026.py): teal header at the top + the title and search on a teal band (.tband);
      site.js turns the header white after 40px of scroll, like the homepage. */
@media (min-width:1241px){
  html header.top .tnav a > .nav-ic{display:none!important;}
  html header.top .tnav a{padding:.55rem .95rem!important;}
}
@media (min-width:881px){ html header.top .tin-ctas{display:none!important;} }
html header.top.hdr-clear .brand-w{color:#fff;}
html header.top.hdr-clear .burger{color:#fff;}
html header.top.hdr-clear .lp-btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);box-shadow:none;}
html header.top.hdr-clear .lp-btn:hover{background:rgba(255,255,255,.26);}
html header.top.hdr-clear .lp-caret{border-top-color:#fff;}
html header.top.hdr-clear .lp-code{color:#fff;}
html header.top.hdr-clear .as-ic{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff;}
html header.top.hdr-clear .as-ic.is-in{background:linear-gradient(155deg,var(--clay) 0%,var(--clay-deep) 100%);border-color:transparent;}
@media (min-width:700px){
  html header.top.hdr-clear .tnav a{color:#fff;}
  html header.top.hdr-clear .tnav a:hover,html header.top.hdr-clear .tnav a[aria-current="page"]{color:var(--head);}
}
html body.tb header.top{transition:background-color .35s ease,border-color .35s,box-shadow .35s;}
html body.tb header.top.hdr-clear{background:#0A3239!important;border-bottom-color:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
html body.tb header.top.hdr-clear .tnav:not(.open){border-bottom:0;box-shadow:none;}
html body.tb main{overflow-x:clip;}
html body.tb main > section:first-child:not(.tx-hero){padding-top:0!important;}
html body.tb .tband{position:relative;margin-inline:calc(50% - 50vw);padding:clamp(1.5rem,3.4vw,2.75rem) calc(50vw - 50%) clamp(1.75rem,3.2vw,2.5rem);
  margin-bottom:clamp(1.25rem,2.4vw,2rem);color:#fff;
  background:radial-gradient(38rem 22rem at 88% 70%, rgba(255,181,71,.13), transparent 65%),
    radial-gradient(34rem 20rem at 0% 100%, rgba(27,176,186,.18), transparent 70%),
    linear-gradient(180deg,#0A3239 0%,#0D444D 60%,#0D4B54 100%);}
html body.tb .tband .head{margin-bottom:0!important;}
html body.tb .tband h1{color:#fff!important;}
html body.tb .tband .kicker,html body.tb .tband .kicker span{color:#FFD69B!important;}
html body.tb .tband .k-ic{background:rgba(255,255,255,.13)!important;color:#FFD69B!important;box-shadow:none!important;}
html body.tb .tband .sub{color:rgba(255,255,255,.82)!important;}
html body.tb .tband .hub-search{margin-top:clamp(1.1rem,2.2vw,1.6rem)!important;margin-bottom:0!important;}
html body.tb .tband .hub-search .bf{border-color:transparent!important;box-shadow:0 18px 40px -18px rgba(0,0,0,.55)!important;}
html body.tb .tband .hs-pill{box-shadow:0 14px 30px -14px rgba(0,0,0,.6)!important;}
html body.tb .tband a:not(.hub-clear):not(.hs-pill){color:#fff;}
/* the two photo-hero pages: the hero already starts right under the header */
@media (prefers-reduced-motion:reduce){html body.tb header.top{transition:none;}}
/* ==== /teal top on the section pages ==== */

/* ==== "Request to book" arrow (2026-10-08) ==== */
/* the arrow after "Request to book" (#bf-check[data-state=request]::after, apartment pages) shares ::after with the
   light sweep (.mo-shine::after: absolute, skewed, animated), which threw the arrow to the button's top-left corner */
html #bf-check.mo-shine[data-state="request"]::after{position:static!important;inset:auto!important;width:1.05rem!important;height:1.05rem!important;
  z-index:auto!important;transform:none!important;animation:none!important;opacity:1!important;flex:none;}
html[dir="rtl"] #bf-check.mo-shine[data-state="request"]::after{transform:scaleX(-1)!important;}
/* ==== /"Request to book" arrow ==== */

/* the Arabic pages reset letter-spacing; the Latin logo keeps its spacing there too */


@media (max-width:700px){  }

/* ==== time wheel (2026-10-09) ==== */
/* every time choice on the site: transfers, spa, activity / day-trip "Time" (AST.timeWheel in site.js). A phone-style
   scroll wheel drawn in the site's own style: teal band on the chosen row, Plus Jakarta numbers, faded edges. */
html .tw{position:relative;display:flex;align-items:center;justify-content:center;gap:.1rem;height:220px;max-width:300px;margin:.5rem auto .25rem;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
  user-select:none;-webkit-user-select:none;}
html .tw-band{position:absolute;left:.2rem;right:.2rem;top:50%;height:44px;margin-top:-22px;border-radius:14px;z-index:0;pointer-events:none;
  background:var(--clay-tint,#E4F2F3);box-shadow:inset 0 0 0 1.5px rgba(8,126,139,.22);}
html .tw-col{position:relative;z-index:1;box-sizing:border-box;height:220px;width:4.4rem;padding:88px 0;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;text-align:center;outline:none;cursor:grab;}
html .tw-col::-webkit-scrollbar{display:none;}
html .tw-col--p{width:3.7rem;}
html .tw-col:focus-visible .tw-i.on{text-decoration:underline;text-underline-offset:5px;}
html .tw-i{height:44px;scroll-snap-align:center;font:500 1.1rem/44px var(--font-ui,'Plus Jakarta Sans',sans-serif);color:#A3ADAF;
  font-variant-numeric:tabular-nums;transition:color .15s,font-size .15s;cursor:pointer;}
html .tw-i.near{color:var(--ink-soft,#5C6B6E);}
html .tw-i.on{color:var(--clay-deep,#066570);font-weight:700;font-size:1.34rem;}
html .tw-sep{position:relative;z-index:1;margin:0 -.15rem;font:700 1.3rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--clay-deep,#066570);}
/* transfers + spa panels: the wheel replaces the hour / minute chips */
html .tx-pop--time .tw-host{padding:.2rem 0 .1rem;}
/* activity / day-trip booking card: "Time" field + its panel */
html .tw-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden;}
html .tw-field{display:block;width:100%;margin:0;padding:0 1.4rem 0 0;border:0;background:transparent no-repeat right center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317252A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  text-align:start;font:600 1rem/1.35 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);cursor:pointer;}
html[dir="rtl"] .tw-field{padding:0 0 0 1.4rem;background-position:left center;}
html .tw-field[aria-expanded="true"]{color:var(--clay-deep,#066570);}
html .bfd--tw{cursor:pointer;}
html .tw-pop{margin:.6rem 0 .2rem;padding:.8rem .9rem .7rem;border:1px solid var(--line,#E5E8E6);border-radius:18px;background:#fff;
  box-shadow:0 18px 40px -20px rgba(23,37,42,.35);animation:twIn .2s cubic-bezier(.2,.8,.2,1);}
html .tw-pop[hidden]{display:none!important;}
html .tw-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
html .tw-title{font:700 .95rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);}
html .tw-acts{display:flex;gap:.4rem;flex:none;}
html .tw-any{min-height:36px;padding:.3rem .85rem;border:1px solid var(--line,#E5E8E6);border-radius:999px;background:#fff;
  font:600 .82rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink,#17252A);cursor:pointer;}
html .tw-any:hover{border-color:var(--clay,#087E8B);color:var(--clay-deep,#066570);}
html .tw-done{min-height:36px;padding:.3rem 1.05rem;border:0;border-radius:999px;background:var(--clay,#087E8B);color:#fff;
  font:700 .82rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;}
html .tw-done:hover{background:var(--clay-deep,#066570);}
html .tw-note{margin:.15rem 0 0;font-size:.78rem;line-height:1.4;color:var(--ink-soft,#5C6B6E);text-align:center;}
@keyframes twIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html .tw-pop{animation:none;} html .tw-i{transition:none;}}
/* ==== /time wheel ==== */
html .tw-title{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;}

/* ==== teal band on phones: compact (2026-10-09) ==== */
/* owner (stays.html on a phone): "too much gaps in here". Tighter band: less padding, kicker / title / subtitle /
   search closer together, slightly smaller type. Phones only. */
@media (max-width:700px){
  html body.tb .tband{padding-top:1rem!important;padding-bottom:1.15rem!important;margin-bottom:1rem!important;}
  html body.tb .tband .head-row,html body.tb .tband .head{margin:0!important;padding:0!important;gap:0!important;}
  html body.tb .tband .kicker{margin:0 0 .45rem!important;min-height:0!important;}
  html body.tb .tband .kicker .k-ic{width:1.7rem!important;height:1.7rem!important;}
  html body.tb .tband h1{margin:0 0 .35rem!important;font-size:1.55rem!important;line-height:1.15!important;}
  html body.tb .tband h1::after{display:none!important;}
  html body.tb .tband .sub{margin:0!important;font-size:.9rem!important;line-height:1.45!important;}
  html body.tb .tband .hub-search{margin-top:.85rem!important;}
}
/* ==== /teal band on phones ==== */

/* ==== apartment title block (2026-10-09) ==== */
/* owner (phone screenshot): facts pills, rating box, Save and Share "in a mess, not organised". Apartment pages only
   (.pt-head with .pt-facts): kind line + Save / Share on one row, title, subtitle, one rating line, then the facts as
   one strip of equal boxes. The info <div> is display:contents so its children are placed by the grid. */
html .pt-head:has(.pt-facts){display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;column-gap:.5rem;row-gap:0;
  align-items:center;padding:1.5rem 0 1.4rem!important;}
html .pt-head:has(.pt-facts)::after{display:none!important;}
html .pt-head:has(.pt-facts) > div:first-child{display:contents;}
html .pt-head:has(.pt-facts) .pt-kind{grid-column:1;grid-row:1;margin:0!important;min-height:2.4rem;display:flex;align-items:center;min-width:0;}
html .pt-head:has(.pt-facts) .sv-pill{grid-column:2;grid-row:1;margin:0!important;}
html .pt-head:has(.pt-facts) .tp-share{grid-column:3;grid-row:1;margin:0!important;}
html .pt-head:has(.pt-facts) h1{grid-column:1 / -1;grid-row:2;margin:.45rem 0 .35rem!important;}
html .pt-head:has(.pt-facts) .pt-sub{grid-column:1 / -1;grid-row:3;margin:0!important;}
html .pt-head:has(.pt-facts) .pt-rating{grid-column:1 / -1;grid-row:4;justify-self:start;display:inline-flex!important;align-items:center;flex-wrap:wrap;
  gap:.15rem .5rem;margin:.75rem 0 0;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  white-space:normal;color:var(--head,#17252A);text-decoration:none;}
html .pt-head:has(.pt-facts) .pt-rating .big{font:700 1.05rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--head,#17252A);}
html .pt-head:has(.pt-facts) .pt-rating > div{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.15rem .5rem;}
html .pt-head:has(.pt-facts) .pt-rating span,html .pt-head:has(.pt-facts) .pt-rating .rw{display:inline!important;margin:0!important;font-size:.9rem!important;line-height:1.3;}
html .pt-head:has(.pt-facts) .pt-rating .stars{font-size:.85rem!important;letter-spacing:.06em;}
html .pt-head:has(.pt-facts) .pt-rating .rw{font-weight:700;color:var(--head,#17252A);}
html .pt-head:has(.pt-facts) .pt-rating > div > span:last-child{color:var(--ink-soft,#5C6B6E);text-decoration:underline;text-underline-offset:3px;}
html .pt-head:has(.pt-facts) .pt-rating:hover > div > span:last-child{color:var(--clay-deep,#066570);}
html .pt-head:has(.pt-facts) .pt-facts{grid-column:1 / -1;grid-row:5;display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0!important;
  margin:1rem 0 0!important;border:1px solid var(--line,#E5E8E6);border-radius:16px;background:#fff;overflow:hidden;}
html .pt-head:has(.pt-facts) .pt-facts > span{justify-content:center;gap:.45rem;margin:0!important;padding:.8rem .5rem!important;border:0!important;border-radius:0!important;
  background:none!important;font-size:.9rem;white-space:nowrap;min-width:0;}
html .pt-head:has(.pt-facts) .pt-facts > span + span{border-inline-start:1px solid var(--line,#E5E8E6)!important;}
html .pt-head:has(.pt-facts) .pt-facts > span .icon{width:1.1rem;height:1.1rem;flex:none;}
@media (max-width:640px){
  html .pt-head:has(.pt-facts){padding:1.1rem 0 1.15rem!important;}
  html .pt-head:has(.pt-facts) .pt-kind{font-size:.72rem;min-height:2.5rem;}
  /* round icon buttons on phones so the kind line keeps its room */
  html .pt-head:has(.pt-facts) :is(.sv-pill,.tp-share){width:2.5rem;height:2.5rem;min-height:2.5rem;padding:0!important;justify-content:center;border-radius:50%!important;}
  html .pt-head:has(.pt-facts) :is(.sv-pill,.tp-share) > span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  html .pt-head:has(.pt-facts) .pt-facts > span{flex-direction:column;gap:.3rem;padding:.7rem .2rem!important;font-size:.78rem;line-height:1.2;text-align:center;white-space:normal;}
  html .pt-head:has(.pt-facts) .pt-facts > span b{display:block;font-size:.95rem;}
}
/* ==== /apartment title block ==== */

/* ==== phone menu 2026 (2026-10-09) ==== */
/* owner: "redesign this phone menu to match the website style and updates". Phones only (<700px, the burger range):
   a floating white card under the header instead of full-width rows; the 6 sections as a 2-column grid of tiles with
   the same illustrated icons (current page highlighted teal); Sign in (outlined) + WhatsApp (teal) as two pills side by
   side at the bottom; the page behind is dimmed (a tap on it closes the menu - the pages' own outside-click rule). */
@media (max-width:699px){
  html header.top .tnav{position:absolute!important;top:calc(100% + 6px)!important;left:10px!important;right:10px!important;z-index:60;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    max-height:0;overflow:hidden;padding:0 12px;border:0!important;border-radius:22px;background:#fff!important;
    box-shadow:none!important;opacity:0;transform:translateY(-6px);
    transition:max-height .32s cubic-bezier(.2,.8,.2,1),opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),padding .25s;}
  html header.top .tnav.open{max-height:40rem;padding:12px;opacity:1;transform:none;
    box-shadow:0 24px 60px -18px rgba(8,30,34,.55),0 0 0 1px rgba(23,37,42,.06)!important;}
  html header.top .tnav li{border:0!important;margin:0;min-width:0;}
  html header.top .tnav li + li{border-top:0!important;}
  html header.top .tnav > li > a{display:flex!important;align-items:center;gap:.65rem;min-height:56px;padding:.55rem .7rem!important;
    border-radius:16px;background:var(--stone,#F7F8F6);border:1px solid transparent;
    font:600 .95rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--head,#17252A)!important;}
  html header.top .tnav > li > a:active{transform:scale(.98);}
  html header.top .tnav > li > a[aria-current="page"]{background:var(--clay-tint,#E4F2F3);border-color:rgba(8,126,139,.35);color:var(--clay-deep,#066570)!important;}
  html header.top .tnav > li > a .nav-ic{flex:none;width:2.3rem!important;height:2.3rem!important;border-radius:12px!important;background:#fff!important;
    box-shadow:0 4px 10px -6px rgba(23,37,42,.35)!important;}
  html header.top .tnav > li > a[aria-current="page"] .nav-ic{box-shadow:inset 0 0 0 1.5px var(--clay,#087E8B)!important;}
  /* bottom row: Sign in + WhatsApp */
  html header.top .tnav > li.tnav-acct{order:7;margin-top:4px;}
  html header.top .tnav > li.tnav-wa{order:8;margin-top:4px;display:block!important;}
  html header.top .tnav > li.tnav-acct > a,html header.top .tnav > li.tnav-wa > a{justify-content:center;min-height:48px;border-radius:999px;font-size:.92rem!important;}
  html header.top .tnav > li.tnav-acct > a{background:#fff!important;border:1.5px solid var(--line,#E5E8E6)!important;}
  html header.top .tnav > li.tnav-acct > a .nav-ic{width:1.6rem!important;height:1.6rem!important;border-radius:50%!important;box-shadow:none!important;background:transparent!important;}
  html header.top .tnav > li.tnav-wa > a{background:var(--clay,#087E8B)!important;color:#fff!important;}
  html header.top .tnav > li.tnav-wa > a .nav-ic{width:1.5rem!important;height:1.5rem!important;background:transparent!important;box-shadow:none!important;color:#fff!important;}
  html header.top .tnav > li.tnav-wa > a .nav-ic svg{stroke:#fff;}
  /* dim the page behind the open menu */
  html body:has(#nav.open)::before{content:"";position:fixed;inset:0;z-index:45;background:rgba(10,30,34,.42);animation:pmFade .2s ease;}
  html header.top:has(#nav.open){z-index:70;}
}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){html header.top .tnav{transition:none!important;}}
/* ==== /phone menu 2026 ==== */

/* ==== card rows (2026-10-09) ==== */
/* Owner, round 1: the last card was cut at ~1290px (the row bled 48px past the column) -> it looked like a bug.
   Round 2 (same day): letting the rows run off the screen edge looked distracting and unlike the rest of the
   homepage. So on computers (>=701px) every sideways row now sits exactly inside the content column like the other
   sections and shows WHOLE cards only: 4 per row from 1100px, 3 below; the < > buttons (site.js "card arrows") move
   one card, snapping keeps a card on the column edge. A 6px inner margin keeps card shadows from being clipped.
   Phones keep the swipe row that runs to the screen edge with the next card peeking (unchanged). Wellness (one wide
   card) is not a row and keeps its own width. --vw (site.js) = viewport without the scrollbar. */
@media (max-width:700px){
  html body .wrap > .hscroll,
  html body .wrap > .rgrid--real{
    --bleed:calc(max(0px, (var(--vw, 100vw) - var(--wrap, 1140px)) / 2) + clamp(1.25rem, 4vw, 3rem));
    margin-inline:calc(-1 * var(--bleed))!important;
    padding-inline:var(--bleed)!important;
    scroll-padding-inline:var(--bleed)!important;
  }
}
@media (min-width:701px){
  html body .wrap > .hscroll,
  html body .wrap > .rgrid--real{
    --cn:3; --cg:14px;
    margin-inline:-6px!important;padding-inline:6px!important;scroll-padding-inline:6px!important;
    gap:var(--cg)!important;scroll-snap-type:x mandatory;
  }
  html body .wrap > .hscroll > *,
  html body .wrap > .rgrid--real > *{scroll-snap-align:start;scroll-snap-stop:normal;}
  /* whole cards: (column - gaps) / cards per view */
  html body.hp .wrap > :is(#stays-scroll,#adventures-scroll,#villages-scroll,#transport-scroll,#discover-scroll).hscroll > :is(.scard,.sa-card,.xtile),
  html body.hp .wrap > .rgrid--real > .rc{
    width:calc((100% - (var(--cn) - 1) * var(--cg)) / var(--cn))!important;
    flex:0 0 calc((100% - (var(--cn) - 1) * var(--cg)) / var(--cn))!important;
    min-width:0!important;max-width:none!important;
  }
}
@media (min-width:1100px){
  html body .wrap > .hscroll{--cn:4;}
}
@media (min-width:701px) and (max-width:1023px){
  html body .wrap > .rgrid--real{--cn:2;}
}
/* no row may ever make the page scroll sideways */
html body section:has(> .wrap > .hscroll),
html body section:has(> .wrap > .rgrid--real){overflow-x:clip;}
/* ==== /card rows ==== */
/* ==== WhatsApp floating button (2026-10-09) ==== */
/* owner: the generic teal chat bubble -> a recognisable WhatsApp button. Markup: _fab_whatsapp_2026.py (WhatsApp
   glyph, aria-label "Chat on WhatsApp" translated by site.js). Desktop: a "WhatsApp" label slides out on hover /
   keyboard focus. Same link as every other WhatsApp link (wa.me/212620184897). Hidden <=880px as before (phones and
   tablets have the bottom WhatsApp bar / tab bar). The white glyph on #25D366 is WhatsApp's own brand pairing; the
   text label is dark on white so it stays readable. */
html body .fab{background:#25D366!important;color:#fff!important;border-radius:50%!important;width:58px!important;height:58px!important;
  box-shadow:0 10px 24px -8px rgba(18,140,126,.6),0 2px 6px rgba(0,0,0,.14)!important;overflow:visible;}
html body .fab:hover{transform:scale(1.06)!important;background:#1EBE5A!important;}
html body .fab:focus-visible{outline:3px solid #075E54;outline-offset:3px;}
html body .fab .icon{display:none!important;}
html body .fab .fab-wa{width:30px;height:30px;fill:#fff;display:block;}
html body .fab::before{animation-name:fabPulseWa!important;}
@keyframes fabPulseWa{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55);}70%{box-shadow:0 0 0 16px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}}
html body .fab .fab-l{position:absolute;top:50%;right:calc(100% + 10px);transform:translate(8px,-50%);opacity:0;pointer-events:none;
  white-space:nowrap;padding:.55rem .9rem;border-radius:999px;background:#fff;color:#0B2E26;
  font:700 .9rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);box-shadow:0 8px 22px -10px rgba(15,61,68,.45),0 1px 3px rgba(0,0,0,.08);
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);}
html[dir="rtl"] body .fab .fab-l{right:auto;left:calc(100% + 10px);transform:translate(-8px,-50%);}
@media (hover:hover) and (min-width:881px){
  html body .fab:hover .fab-l,html body .fab:focus-visible .fab-l{opacity:1;transform:translate(0,-50%);}
}
@media (prefers-reduced-motion:reduce){html body .fab .fab-l{transition:none;}html body .fab::before{animation:none!important;}}
/* ==== /WhatsApp floating button ==== */
/* ==== footer trust row: payments + languages (2026-10-09) ==== */
/* owner brief: "Accepted payments" as small text chips (no third-party logos) and "We speak: …", between the
   columns and the bottom bar (markup: _footer_2026.py, all pages). "Agadir · Morocco" left the bottom bar. */
html .f26-trust{display:flex;align-items:center;justify-content:space-between;gap:1rem 2.5rem;flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);}
html .f26-pay{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;min-width:0;}
html .f26-trust .f26-h{display:inline-flex;align-items:center;gap:.45rem;margin:0;}
html .f26-trust .f26-h .icon,html .f26-lang .icon{width:1.05rem;height:1.05rem;flex:0 0 auto;color:#8FBEC3;}
html .f26-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;}
html .f26-chips li{padding:.32rem .7rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  font:600 .8rem/1.2 var(--font-ui,"Plus Jakarta Sans",sans-serif);color:rgba(255,255,255,.9);background:rgba(255,255,255,.04);white-space:nowrap;}
html .f26-lang{display:inline-flex;align-items:center;gap:.45rem;margin:0;font:500 .86rem/1.4 var(--font-ui,"Plus Jakarta Sans",sans-serif);color:rgba(255,255,255,.78);}
html .f26-lang [data-i18n="ft_lang_h"]{font-weight:700;color:#fff;}
html .f26-trust + .f26-bot{margin-top:1.25rem;}
html[lang="ar"] .f26-chips li,html[lang="ar"] .f26-lang{font-family:"Tajawal",sans-serif;}
@media (max-width:700px){
  html .f26-trust{flex-direction:column;align-items:flex-start;gap:1rem;}
  html .f26-pay{flex-direction:column;align-items:flex-start;gap:.6rem;}
}
/* ==== /footer trust row ==== */
/* ==== feature flag: accounts (2026-10-09) ==== */
/* site.js ENABLE_ACCOUNTS = false adds html.no-accounts: the header's account (person) button and the phone menu's
   "Sign in" row are hidden; the phone menu's WhatsApp pill then takes the whole row. Flip the flag to undo. */
html.no-accounts header.top .as-ic,
html.no-accounts header.top .tnav > li.tnav-acct{display:none!important;}
html.no-accounts header.top .tnav > li.tnav-wa{grid-column:1 / -1;}
/* ==== /feature flag: accounts ==== *//* ==== language button on phones: flag + name (owner, 2026-10-13; computers keep "EN ▾") ==== */
@media (max-width:699px){
  html .lp-btn > .lp-flag{display:inline-block!important;}
  html .lp-btn{min-width:0;gap:.4rem;padding:.2rem .7rem .2rem .45rem;}
  html .lp-btn .lp-code{font-size:0!important;letter-spacing:0!important;}
  html .lp-btn .lp-code::after{font-size:.86rem;font-weight:700;letter-spacing:0;text-transform:none;}
  html[lang="en"] .lp-btn .lp-code::after{content:"English";}
  html[lang="fr"] .lp-btn .lp-code::after{content:"Français";}
  html[lang="es"] .lp-btn .lp-code::after{content:"Español";}
  html[lang="ar"] .lp-btn .lp-code::after{content:"العربية";font-family:'Tajawal',sans-serif;}
  
  html .lp-ph{width:6.6rem;}
}
/* ==== /language button on phones ==== */

/* ==== phone menu as "More" (owner, 2026-10-13): where the bottom bar is shown, the menu keeps only what the bar
   doesn't have (Wellness, Day trips, Transfers, Contact, + FAQ added by site.js). Booking pages (no bottom bar) and
   computers keep the full menu. ==== */
html header.top .tnav > li.tnav-faq{display:none;}
@media (max-width:699px){
  html.has-mtab header.top .tnav > li.tnav-faq{display:block;}
  /* Stays stays in the menu (owner, 2026-10-17), even though the bottom bar has it too */
  html.has-mtab header.top .tnav > li:has(> a > [data-i18n="nav_adventures"]),
  html.has-mtab header.top .tnav > li.tnav-wa{display:none!important;}
  html header.top .tnav > li.tnav-faq .nav-ic{display:grid!important;place-items:center;}
  html header.top .tnav > li.tnav-faq .nav-ic svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--clay,#087E8B);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
}
/* ==== /phone menu as More ==== */

/* ==== bottom bar: 44px+ tap targets, darker labels (accessibility, 2026-10-13) ==== */
@media (max-width:760px){
  html .mtab a{min-height:56px;min-width:44px;color:#3E4B4E;}
  html .mtab a[aria-current="page"]{color:var(--clay-deep,#066570);}
}
/* ==== /bottom bar ==== */

/* ==== phone UX pass (2026-10-13): detail pages ==== */
/* site.js "phone UX pass" adds .ptr-m (one-line rating), .pb-m (sticky bar text), .pb-next (line under the button).
   Phones only; on computers these extra pieces are hidden and nothing else changes. */
html .pt-rating > div.ptr-m,html .pb-m,html #bookCard .pb-next{display:none!important;}
@media (max-width:700px){
  /* A2: one clean rating line */
  html .pt-head .pt-rating:has(> .ptr-m) > :not(.ptr-m){display:none!important;}
  html .pt-head .pt-rating:has(> .ptr-m){display:flex!important;flex-wrap:nowrap!important;max-width:100%;min-width:0;}
  html .pt-rating > div.ptr-m{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:.35rem;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;
    font:600 .9rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);}
  html .pt-rating .ptr-m b{font-weight:700;}
  html .pt-rating .ptr-m .ptr-s{color:var(--star,#BD8110)!important;}
  html .pt-rating .ptr-m .ptr-d{color:var(--ink-soft,#5C6B6E)!important;}
  html .pt-rating .ptr-m .ptr-n{color:var(--ink-soft,#5C6B6E)!important;text-decoration:underline;text-underline-offset:3px;font-weight:500;}
  html .pt-rating .ptr-m .ptr-gf{display:inline-flex!important;align-items:center;gap:.25rem;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
  html .pt-rating .ptr-m .ptr-gf svg{flex:none;width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  html .pt-head .pt-rating .ptr-m span.ptr-gf{display:inline-flex!important;align-items:center;gap:.25rem;white-space:nowrap;}
  @media (max-width:380px){html .pt-rating > div.ptr-m{gap:.28rem;font-size:.84rem;} html .pt-head .pt-rating .ptr-m span{font-size:.84rem!important;}}
  html .pt-head .pt-rating .ptr-m span.ptr-gf svg{display:inline-block!important;flex:none;width:1rem;height:1rem;}
  

  /* A3 / B3: sticky bar = one price line + one short detail line */
  html .mbar:has(> .pb-m) > div:not(.pb-m),html .xbar:has(> .pb-m) > .xbar-p{display:none!important;}
  html :is(.mbar,.xbar) > .pb-m{display:flex!important;flex-direction:column;justify-content:center;gap:.18rem;flex:1 1 auto;min-width:0;}
  html .pb-m .pb-m1{font:500 .8rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html .pb-m .pb-m1 :is(b,.js-rate){font:700 1.12rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;color:var(--head,#17252A);}
  html .pb-m .pb-m1 small{font-size:.8rem;}
  html .pb-m .pb-m2{font:500 .74rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html .pb-m .pb-m2:empty{display:none;}
  html .pb-m .pb-star{color:var(--star,#BD8110);}
  
  html :is(.mbar,.xbar){gap:.55rem!important;}
  html :is(#mbarBtn,.xbar > .btn){flex:none;min-height:44px;max-width:52%;padding:.45rem .95rem!important;font-size:.95rem!important;white-space:normal!important;line-height:1.15!important;text-align:center;}
  html :is(.mbar,.xbar) .mbar-wa{margin-inline-start:0!important;}

  /* A4 / B3: the date and guests panels open as bottom sheets (from the card or from the sticky button) */
  html.mo-ready #bookCard,html #bookCard{opacity:1!important;transform:none!important;}
  html #bookCard :is(.cal-pop,.bk-pop):not([hidden]){position:fixed!important;inset:auto 0 0 0!important;top:auto!important;width:auto!important;max-width:none!important;
    max-height:86vh;max-height:86dvh;overflow-y:auto;overscroll-behavior:contain;margin:0!important;z-index:1300!important;border:0!important;
    border-radius:22px 22px 0 0!important;box-shadow:0 -14px 40px rgba(15,61,68,.28)!important;background:#fff!important;
    padding-bottom:calc(1rem + env(safe-area-inset-bottom))!important;animation:pbSheet .28s cubic-bezier(.16,1,.3,1);}
  @keyframes pbSheet{from{translate:0 48px;opacity:.5;}}
  html body:has(#bookCard :is(.cal-pop,.bk-pop):not([hidden]))::after{content:"";position:fixed;inset:0;z-index:1290;background:rgba(12,34,38,.45);}
  html:has(#bookCard :is(.cal-pop,.bk-pop):not([hidden])){overflow:hidden;}
  html:has(#bookCard){scroll-padding-bottom:6.5rem;}

  /* A5: what happens next, under the button */
  html #bf-check[data-state="request"]:not([hidden]):not([style*="none"]) + .pb-next,
  html #bf-continue:not([hidden]):not([style*="none"]) + .pb-next{display:block!important;margin:.55rem .25rem 0;text-align:center;
    font:500 .8rem/1.4 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);}
  html #bookCard:has(.pb-next) .bx-q-note{display:none!important;}

  /* B4: the airport-pickup tick sits above the button once a price is shown */
  html #bookCard > .tp-pick{margin:.15rem 0 .75rem!important;}
  html #bookCard:not(:has(.bq)) > .tp-pick{display:none!important;}
  /* B5: shorter form - phone first, email optional */
  html #bf-details .bk-two{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.75rem!important;}
  html #bf-details .bk-two > div:has(#bf-phone){order:-1;}
  html #bookCard label[for="bf-email"][data-opt]::after{content:" (" attr(data-opt) ")";font-weight:500;color:var(--ink-soft,#5C6B6E);}
}
@media (prefers-reduced-motion:reduce){html #bookCard :is(.cal-pop,.bk-pop):not([hidden]){animation:none!important;}}
/* ==== /phone UX pass: detail pages ==== */

/* ==== phone UX pass (2026-10-13): activity cards (B2) ==== */
html :is(#adventures-scroll,#villages-scroll) .pb-from,html :is(#adventures-scroll,#villages-scroll) .spick{display:none;}
@media (max-width:700px){
  html :is(#adventures-scroll,#villages-scroll) .pb-from{display:inline;font-weight:500;font-size:.8em;color:var(--ink-soft,#5C6B6E);}
  html :is(#adventures-scroll,#villages-scroll) .spick{display:flex;align-items:center;gap:.3rem;margin:.35rem 0 0;font:600 .76rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ok,#1B7A4B);}
  html :is(#adventures-scroll,#villages-scroll) .spick svg{flex:none;width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
  html #adventures-scroll .spick + .sfree,html body.hp #adventures-scroll .sfree{margin-top:.2rem!important;}
  html body.hp #adventures-scroll .sfree{display:flex!important;}
  
}
/* ==== /phone UX pass: activity cards ==== */

/* ==== phone UX pass (2026-10-13): narrower language button (A7) ==== */
@media (max-width:699px){
  html .lp-btn{gap:.28rem!important;padding:.15rem .5rem .15rem .3rem!important;}
  html .lp-btn > .lp-flag{width:20px!important;height:20px!important;}
  html .lp-btn .lp-code::after{font-size:.8rem!important;}
  html .lp-ph{width:5.6rem!important;}
}
/* ==== /narrower language button ==== */

/* ==== phone UX pass (2026-10-13): one WhatsApp entry per screen (C2) ==== */
/* where the bottom tab bar (with WhatsApp) shows, its duplicates go: the footer WhatsApp icon and the homepage
   contact-section WhatsApp box. The contact page's channel cards and the location line stay (they are the content). */
@media (max-width:700px){
  html.has-mtab :is(a.f26-soc[href*="wa.me"],.f26-soc a[href*="wa.me"]){display:none!important;}
  html.has-mtab body.hp #contact .wa{display:none!important;}
}
/* ==== /one WhatsApp entry per screen ==== */

/* ==== phone UX pass (2026-10-13): no label on 3+ lines (C4) ==== */
@media (max-width:700px){
  html .nd-chip{display:grid!important;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:.3rem;}
  html .nd-chip > span{grid-column:1 / -1;}
  html .tx .tx-rt-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:420px){
  html .tx .tx-veh-row{grid-template-columns:minmax(0,1fr)!important;gap:.4rem!important;}
  html .tx .tx-veh-b{flex-direction:row!important;align-items:center!important;gap:.6rem!important;min-height:48px!important;padding:.45rem .8rem!important;}
  html .tx .tx-veh-b > b{flex:1 1 auto;min-width:0;}
  html .tx .tx-veh-b > em{margin-inline-start:auto;margin-top:0!important;}
  html .tx .tx-veh-b > *{align-self:center!important;}
}
/* ==== /no label on 3+ lines ==== */
/* ==== "List your property" links (2026-10-16, _list_property_2026.py) ==== */
/* phone menu row: phones only (the burger range); computers reach the page from the footer */
html header.top .tnav > li.tnav-list{display:none!important;}
@media (max-width:699px){
  html header.top .tnav > li.tnav-list{display:block!important;grid-column:1 / -1;order:6;}
  html header.top .tnav > li.tnav-list > a{background:#fff!important;border:1.5px dashed rgba(8,126,139,.45)!important;color:var(--clay-deep,#066570)!important;}
  html header.top .tnav > li.tnav-list > a[aria-current="page"]{border-style:solid!important;background:var(--clay-tint,#E4F2F3)!important;}
}
/* homepage: slim band under the FAQ */
.hp-listband{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.25rem,2.6vw,2rem);padding:1rem 1.2rem;border-radius:18px;
  background:var(--sand-soft,#FAF4EA);border:1px solid #EFE3CF;}
.hp-listband-ic{display:grid;place-items:center;flex:none;width:2.8rem;height:2.8rem;border-radius:50%;background:#fff;color:var(--clay,#087E8B);
  box-shadow:0 6px 16px -10px rgba(15,61,68,.5);}
.hp-listband-ic svg,.hp-listband .btn svg,.ct-line--list svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.hp-listband-ic svg{width:1.35rem;height:1.35rem;}
.hp-listband > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;}
.hp-listband b{color:var(--head,#17252A);font:700 1rem/1.3 var(--font-ui);}
.hp-listband span{color:var(--ink-soft,#5C6B6E);font:400 .9rem/1.45 var(--font-ui);}
.hp-listband .btn{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:46px;}
.hp-listband .btn svg{width:1rem;height:1rem;}
@media (max-width:640px){.hp-listband{flex-wrap:wrap;}.hp-listband .btn{width:100%;justify-content:center;}}
.ct-line--list a{color:var(--clay-deep,#066570);font-weight:600;text-decoration:none;}
.ct-line--list a:hover{text-decoration:underline;}
/* ==== /"List your property" links ==== */

/* ==== booking card WhatsApp button: WhatsApp green (owner, 2026-10-17) ====
   It was white with a grey outline and didn't draw the eye. Filled WhatsApp green: recognisable, clearly different
   from the coral "Request to book" (still the main action). #128C4A keeps white text at 4.3:1. */
html #bookCard .btn.btn--wa-cta.bx-wa{background:#128C4A!important;border:0!important;color:#fff!important;box-shadow:0 6px 16px rgba(18,140,74,.28)!important;}
html #bookCard .btn.btn--wa-cta.bx-wa:hover{background:#0E7340!important;color:#fff!important;}
html #bookCard .btn.btn--wa-cta.bx-wa:focus-visible{outline:2.5px solid #0E7340;outline-offset:3px;}
html #bookCard .btn.btn--wa-cta.bx-wa .icon{color:#fff;stroke:#fff;}
/* ==== /booking card WhatsApp button ==== */

/* ==== phone menu order: Stays, Transfers first (owner, 2026-10-17) ==== */
@media (max-width:699px){
  html header.top .tnav > li:has(> a > [data-i18n="nav_stays"]){order:-2;}
  html header.top .tnav > li:has(> a > [data-i18n="nav_transport"]){order:-1;}
}
/* ==== /phone menu order ==== */

/* ==== stays tools bar: "Hide map" visible when the map is open (owner, 2026-10-17) ====
   The phone segmented bar removes button backgrounds, so the open state (white text meant for a dark pill) was white
   on white. Open = light teal segment with teal text and icon. */
@media (max-width:760px){
  html .st-bar > .st-mapbtn[aria-expanded="true"]{background:#E4F2F3!important;color:#066570!important;font-weight:700;}
  html .st-bar > .st-mapbtn[aria-expanded="true"] .icon{stroke:#066570;}
}
/* ==== /Hide map ==== */

/* ==== booking tools: WhatsApp like the stay pages (owner, 2026-10-17) ==== */
html .tx .btn.tw-wa{display:flex;width:100%;justify-content:center;align-items:center;gap:.5rem;margin-top:.6rem;min-height:48px;
  background:#128C4A!important;border:0!important;color:#fff!important;box-shadow:0 6px 16px rgba(18,140,74,.28)!important;border-radius:999px;font-weight:700;text-decoration:none;}
html .tx .btn.tw-wa:hover{background:#0E7340!important;}
html .tx .btn.tw-wa .icon{width:1.15rem;height:1.15rem;fill:none;stroke:#fff;stroke-width:1.9;}
html .tx-sticky{display:flex;align-items:center;gap:.6rem;}
html .tx-sticky .tx-sticky-p{margin-inline-end:auto;}
html .tx-sticky .mbar-wa{display:grid!important;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  border:1.5px solid #CFE9DA;background:#fff;color:#128C4A;box-shadow:0 4px 12px -6px rgba(23,37,42,.35);text-decoration:none;margin:0;}
html .tx-sticky .mbar-wa svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
/* ==== /booking tools WhatsApp ==== */

/* ==== phone UX pass 2 (2026-10-17): all pages, phones only. Delete this block to undo. ==== */
@media (max-width:699px){
  /* 13. language button: flag + code ("EN"), not the full name */
  html .lp-btn .lp-code{font-size:.82rem!important;font-weight:700!important;letter-spacing:.02em!important;}
  html .lp-btn .lp-code::after{content:none!important;}
  html .lp-btn{min-height:40px;}
  html .lp-ph{width:4.6rem!important;}
  /* 5. tap areas */
  html .burger{min-width:44px!important;min-height:44px!important;}
  html .sv-heart{width:40px!important;height:40px!important;}
  html footer.f26 .f26-h,html footer.f26 .f26-pay-h{font-size:.75rem!important;}
  /* 10. footer: no Explore list where the bottom bar and menu already have it */
  html.has-mtab footer.f26 .f26-grid > .f26-col:nth-child(2):has(a[href^="stays"]){display:none!important;}
  html.has-mtab footer.f26 .f26-col{grid-column:1 / -1;}
}
/* ==== /phone UX pass 2 ==== */

/* ==== desktop UX pass (2026-10-17): all pages. Delete this block to undo. ==== */
html footer.f26 .f26-h{font-size:.75rem!important;}
/* 2. text menu from 960px (was round icons up to 1240px): the names fit once the icon circles are gone */
@media (min-width:960px) and (max-width:1240px){
  html header.top .tnav{gap:.1rem!important;}
  html header.top .tnav a{display:inline-flex!important;align-items:center;padding:.5rem .62rem!important;border-radius:999px!important;}
  html header.top .tnav a > .nav-ic{display:none!important;}
  html header.top .tnav a::after{display:none!important;}
  html header.top .tnav a > span:not(.nav-ic){position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;
    pointer-events:auto!important;max-width:none!important;overflow:visible!important;padding:0!important;background:none!important;box-shadow:none!important;
    color:inherit!important;font:600 .9rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;letter-spacing:0!important;white-space:nowrap;}
  html[lang="ar"] header.top .tnav a > span:not(.nav-ic){font-family:'Tajawal',sans-serif!important;font-size:.98rem!important;}
  html header.top .tnav a:hover{background:rgba(23,37,42,.06)!important;}
  html header.top.hdr-clear .tnav a{color:#fff!important;}
  html header.top.hdr-clear .tnav a:hover{background:rgba(255,255,255,.14)!important;}
  html header.top .tnav a[aria-current="page"]{box-shadow:inset 0 -2px 0 currentColor!important;border-radius:0!important;}
}
/* ==== /desktop UX pass ==== */

/* ==== gaps v4 (2026-10-18): less empty space before and inside the footer, all pages. Delete to undo. ==== */
html footer.f26{padding-top:3rem!important;}
html .tx-how:last-child,html section > .wrap > .tx-how:last-child{margin-bottom:0!important;}
html .pt-body > .pt-main > .pt-section:last-child,html .pt-section.tp-sec:last-child{padding-bottom:.5rem!important;}
html .pt-body{padding-bottom:.75rem!important;}
@media (max-width:880px){
  html footer.f26{padding-top:2.25rem!important;padding-bottom:5.25rem!important;}          /* bottom bar (65px) + a little air */
  html body:is(.has-xbar,:has(#mbar)) footer.f26{padding-bottom:6rem!important;}           /* booking bar on detail pages */
  html footer.f26 .f26-ic > li{min-height:40px!important;}
  html footer.f26 .f26-ic a{min-height:40px!important;}
  /* apartment + activity pages: less space between the title block and the first section */
  html .pt-body{padding-top:.75rem!important;}
  html .pt-body > div > .pt-section:first-child{padding-top:1rem!important;}
}
@media (min-width:881px){ html footer.f26{padding-bottom:0!important;} }
/* ==== /gaps v4 ==== */

/* ==== video tour on apartment pages (2026-10-23, _video_tour_2026.py + site.js "video tour") ==== */
html .vt .vt-sub{margin:-.2rem 0 1rem;color:var(--ink-soft,#5C6B6E);font:400 .9375rem/1.55 var(--font-ui);}
html .vt-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.25rem;align-items:start;}
html .vt-player{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#0F1A1C;aspect-ratio:9/16;box-shadow:0 18px 40px -22px rgba(15,61,68,.6);}
html .vt-player video{display:block;width:100%;height:100%;object-fit:cover;background:#0F1A1C;}
html .vt-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:100%;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(15,26,28,0) 40%,rgba(15,26,28,.45));color:#fff;font:700 .875rem/1 var(--font-ui);}
html .vt-play svg{width:4.2rem;height:4.2rem;padding:1.05rem 1rem 1.05rem 1.2rem;border-radius:50%;background:var(--cta,#D4432A);color:#fff;
  box-shadow:0 10px 26px -8px rgba(212,67,42,.7);transition:transform .2s;}
html .vt-play:hover svg{transform:scale(1.06);}
html .vt-play span{padding:.25rem .6rem;border-radius:999px;background:rgba(0,0,0,.45);}
html .vt.vt-on .vt-play{display:none;}
html .vt-k{margin:0 0 .6rem;font:700 .75rem/1.2 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft,#5C6B6E);}
html[lang="ar"] .vt-k{letter-spacing:0;}
html .vt-chaps{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
html .vt-ch{display:flex;align-items:center;gap:.75rem;width:100%;min-height:44px;padding:.45rem .8rem;border:1px solid var(--line,#E5E8E6);border-radius:12px;
  background:#fff;color:var(--head,#17252A);font:600 .9375rem/1.3 var(--font-ui);text-align:start;cursor:pointer;transition:border-color .15s,background .15s;}
html .vt-ch:hover{border-color:var(--head,#17252A);}
html .vt-ch.is-on{border-color:var(--clay,#087E8B);background:var(--clay-tint,#E4F2F3);}
html .vt-tm{flex:none;min-width:2.6rem;padding:.2rem .4rem;border-radius:7px;background:var(--stone,#F7F8F6);color:var(--clay-deep,#066570);font:700 .8125rem/1 var(--font-ui);text-align:center;}
html .vt-ch.is-on .vt-tm{background:#fff;}
html .vt-note{display:flex;align-items:center;gap:.4rem;margin:.8rem 0 0;color:var(--ink-soft,#5C6B6E);font:500 .8125rem/1.3 var(--font-ui);}
html .vt-note .icon{width:1rem;height:1rem;}
/* pill on the photo gallery */
html .vt-pill{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:0 .85rem 0 .3rem;border:1.5px solid var(--cta,#D4432A)!important;
  border-radius:999px;background:#fff;color:var(--head,#17252A);font:700 .875rem/1 var(--font-ui);cursor:pointer;}
html .vt-pill svg{width:1.6rem;height:1.6rem;padding:.35rem .3rem .35rem .45rem;border-radius:50%;background:var(--cta,#D4432A);color:#fff;}
html .vt-pill small{font-weight:600;color:var(--ink-soft,#5C6B6E);font-size:.8125rem;}
html .vt-pill:hover{background:#FFF4F1;}
html[dir="rtl"] :is(.vt-play,.vt-pill) svg{transform:scaleX(-1);}
@media (max-width:700px){
  html .vt-grid{grid-template-columns:minmax(0,1fr);gap:.9rem;}
  html .vt-player{width:min(100%,340px);margin:0 auto;}
  html .vt-chaps{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  html .vt-chaps::-webkit-scrollbar{display:none;}
  html .vt-ch{width:auto;white-space:nowrap;padding:.4rem .7rem;gap:.5rem;}
}
@media (prefers-reduced-motion:reduce){html .vt-play svg,html .vt-pill{transition:none;transform:none;}}
/* ==== /video tour ==== */

/* ==== safe areas on phones held sideways (2026-10-27) ==== */
/* viewport-fit=cover (all pages, _safe_area_2026.py) lets the fixed bottom bars use env(safe-area-inset-bottom) on iPhones.
   Sideways, the notch side inset is ~47px: keep the header row and the page content out of it. 0 everywhere else. */
@media (orientation:landscape) and (max-height:500px){
  html header.top .tin{padding-left:max(1rem,env(safe-area-inset-left))!important;padding-right:max(1rem,env(safe-area-inset-right))!important;}
  html body > main,html body > footer{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
}
/* ==== /safe areas ==== */

/* ==== save heart on touch screens (2026-10-27) ==== */
/* Bug found while testing the phone homepage: the motion system's press feedback (.scard:active .scover{transform:scale})
   turns the photo box into its own layer while a finger is down, so the heart inside it fell below the card's full-size
   link (z-index 3) and a tap on the heart opened the listing instead of saving it. No press shrink when the press is on
   the heart; the heart itself still gets its own :active feedback. */
html .scard:has(.sv-heart:active) .scover{transform:none!important;}
/* ==== /save heart on touch screens ==== */
/* ==== activities hub: list cards on phones (2026-10-27) ==== */
/* Owner brief (activities page on a phone): the 2-per-row cards were ~160px wide, so the place wrapped onto 2 lines,
   descriptions were cut mid-sentence and "Free pickup" wrapped. Below 560px the activities page (adventures.html, not the
   homepage row) shows one list card per row, like Booking.com / GetYourGuide results: photo left, then duration + place,
   the name (2 lines), the real benefits (free pickup only where data-pickup="1", the 24 h free cancellation rule), and the
   price with its unit + an arrow (the whole card is the link). The one-line description stays on computers and on the
   activity page. Markup bits (.smeta, .sgo) come from site.js "phone UX pass: activity cards". */
html :is(#adventures-scroll,#villages-scroll) .smeta,html :is(#adventures-scroll,#villages-scroll) .sgo{display:none;}
@media (max-width:560px){
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll){grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard{display:grid!important;grid-template-columns:minmax(112px,35%) minmax(0,1fr);align-items:stretch;
    min-height:150px;border-radius:16px!important;overflow:hidden;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard.tp-off{display:none!important;}   /* filtered out (trip.js) */
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard > .scover{grid-column:1;grid-row:1;position:relative;aspect-ratio:auto!important;height:auto!important;min-height:150px;margin:0!important;border-radius:0!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard > .scover > img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard > .sbody{grid-column:2;grid-row:1;display:flex!important;flex-direction:column;min-width:0;padding:.7rem .8rem .75rem!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard :is(.sloc,.sdesc){display:none!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .smeta{display:flex!important;align-items:center;gap:.35rem;min-width:0;margin:0 0 .25rem;
    font:500 .75rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink-soft,#5C6B6E);}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sm-dur{display:inline-flex;align-items:center;gap:.25rem;flex:none;font-weight:700;color:var(--head,#17252A);}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sm-dur[hidden]{display:none!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sm-dur svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .smeta{flex-wrap:wrap;row-gap:.05rem;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sm-place{min-width:0;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sm-dur::after{content:"\00b7";margin-inline-start:.1rem;font-weight:400;color:var(--ink-soft,#5C6B6E);}   /* stays on line 1 if the place wraps */
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard h3{font:700 .9375rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;margin:0 0 .3rem!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:normal!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard :is(.spick,.sfree){margin:.1rem 0 0!important;font:600 .75rem/1.3 var(--font-ui,'Plus Jakarta Sans',sans-serif)!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sprice{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:.4rem!important;
    margin-top:auto!important;padding-top:.55rem!important;border-top:0!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sprice b{font-size:.9375rem!important;line-height:1.25;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sprice b span{font-size:.75rem!important;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sgo{display:grid!important;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#E4F2F3;color:#066570;}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sgo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
  html[dir="rtl"] body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sgo svg{transform:scaleX(-1);}
  html body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard .sv-heart{width:34px!important;height:34px!important;top:.4rem!important;inset-inline-end:.4rem!important;}
  html:is([lang="ar"]) body :is(#adventures-scroll,#villages-scroll):not(.hscroll) > .scard :is(.smeta,h3,.spick,.sfree){font-family:'Tajawal',sans-serif!important;}
}
/* the cancellation rule on the activities page cards, all widths: "Free cancellation (24 h)" (owner rule 2026-09-26:
   activities and day trips free up to 24 h before; the full sentence is the line's tooltip and on each activity page) */
html :is(#adventures-scroll,#villages-scroll):not(.hscroll) .sfree[data-p3k="c24"]::after{content:"(24 h)";font-weight:600;}
html[lang="ar"] :is(#adventures-scroll,#villages-scroll):not(.hscroll) .sfree[data-p3k="c24"]::after{content:"(24 ساعة)";}
html[lang="de"] :is(#adventures-scroll,#villages-scroll):not(.hscroll) .sfree[data-p3k="c24"]::after{content:"(24 Std.)";}
/* day trips page (2026-10-30, owner: "make it similar to activities"): same cards; its meta line is only the time from Agadir */
@media (max-width:560px){html body #villages-scroll:not(.hscroll) > .scard .sm-dur:has(+ .sm-place:empty)::after{content:none;}}
/* ==== /activities hub: list cards on phones ==== */

/* ==== photo placeholder (2026-10-27) ==== */
/* A photo box shows a light grey while its photo loads, and a branded tile (teal + camera) if the photo fails - never an
   empty white hole. .img-fail is set by site.js "photo safety net". */
html .scover{background-color:#E9EFEF;}
html .img-fail{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h3l1.5-2h7L17 8h3v11H4z'/><circle cx='12' cy='13' r='3.5'/></svg>") center/44px no-repeat,linear-gradient(135deg,#0F6B75,#0B4B53)!important;}
html .img-fail img{opacity:0!important;}
/* ==== /photo placeholder ==== */
/* ==== filter bar space kept at every width (2026-10-27) ==== */
/* The phone rule (160px activities / 108px day trips, until trip.js adds the filter bar) now applies to tablets and
   computers too: the bar is exactly that tall at 761-1920px in en/fr/de (measured), and the cards jumped down 108-160px
   there (layout shift 0.07-0.10 at 768px). */
html .wrap:not(:has(.tp-filt)) > #adventures-scroll:not(.hscroll){margin-top:160px;}
html .wrap:not(:has(.tp-filt)) > #villages-scroll:not(.hscroll){margin-top:108px;}
/* ==== /filter bar space ==== */
/* ==== footer link tap targets (2026-10-28) ==== */
/* The footer's text links were 19px tall (WCAG asks 24px for a tap target). Taller hit area, same layout (the padding is
   cancelled by an equal negative margin). */
html footer.f26 .f26-list a{display:inline-block;padding-block:.3rem;margin-block:-.3rem;}
/* ==== /footer link tap targets ==== */
/* ==== language button = option E: flag + code | currency (owner, 2026-10-31; computers + tablets, phones keep flag + code) ==== */
@media (min-width:700px){
  html .lp-btn > .lp-flag{display:inline-block!important;width:20px!important;height:20px!important;}
  html .lp-btn{min-width:0!important;gap:.4rem!important;padding:.2rem .8rem .2rem .45rem!important;}
  html .lp-btn .lp-cur-b{display:inline-flex!important;align-items:center;height:1.15rem;margin:0!important;padding-inline-start:.55rem;
    border-inline-start:1px solid rgba(23,37,42,.2);font:700 .84rem/1 'Plus Jakarta Sans',sans-serif;}
  html header.top.hdr-clear .lp-btn .lp-cur-b{border-color:rgba(255,255,255,.45);color:#fff;}
  html .lp-ph{width:7.6rem!important;}
}
/* ==== /language button = option E ==== */

/* ==== sort menu on the stays page (computers + tablets, 2026-10-31) ==== */
@media (min-width:761px){
  html .st-sort.so-on select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
  html .st-sort.so-on{padding:0 .35rem 0 .9rem;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
  html .st-sort.so-on:hover{border-color:rgba(23,37,42,.35);}
  html .st-sort.so-on:focus-within{outline:none;}
  html .st-sort.so-open{border-color:var(--clay,#087E8B);box-shadow:0 0 0 3px rgba(8,126,139,.14);}
  html .so-btn{display:inline-flex;align-items:center;gap:.35rem;height:100%;border:0;background:none;padding:0 .5rem 0 .1rem;cursor:pointer;
    font:600 .88rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);border-radius:999px;}
  html .so-btn:focus-visible{outline:2.5px solid var(--clay-deep,#066570);outline-offset:3px;}
  html .so-car{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
  html .so-open .so-car{transform:rotate(180deg);}
  html .so-menu{position:absolute;top:calc(100% + .5rem);inset-inline-end:0;z-index:40;min-width:15.5rem;margin:0;padding:.4rem;list-style:none;
    background:#fff;border:1px solid var(--line,#E5E8E6);border-radius:16px;box-shadow:0 18px 40px -12px rgba(23,37,42,.28),0 2px 6px rgba(23,37,42,.06);
    animation:soIn .16s ease-out;}
  html .so-menu[hidden]{display:none!important;}
  html .so-opt{display:flex;align-items:center;gap:.7rem;min-height:44px;padding:.5rem .7rem;border-radius:11px;cursor:pointer;outline:none;
    font:500 .9rem/1.25 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--ink,#17252A);white-space:nowrap;}
  html .so-opt:hover,html .so-opt:focus{background:#F1F5F5;}
  html .so-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--clay,#087E8B);}
  html .so-opt[aria-selected="true"]{background:var(--clay-tint,#E4F2F3);color:var(--clay-deep,#066570);font-weight:700;}
  html .so-ic{flex:none;width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.75;}
  html .so-opt span{flex:1;}
  html .so-tick{flex:none;width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;visibility:hidden;}
  html .so-opt[aria-selected="true"] .so-tick{visibility:visible;}
}
@media (max-width:760px){ html .so-btn,html .so-menu{display:none!important;} }
@keyframes soIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ html .so-menu{animation:none;} }

/* ==== every other drop-down: the same styled list (site.js, 2026-10-31) ==== */
html .so-menu.so-float{position:fixed!important;inset:auto;z-index:1000;overflow-y:auto;overscroll-behavior:contain;max-width:min(26rem,calc(100vw - 16px));}
html .so-float .so-opt{white-space:normal;}
html .so-float .so-opt[aria-disabled]{opacity:.45;cursor:default;}
html .so-float .so-opt[aria-disabled]:hover{background:none;}
html select[data-so-open]{border-color:var(--clay,#087E8B)!important;box-shadow:0 0 0 3px rgba(8,126,139,.14)!important;}
@media (max-width:760px){ html .so-menu.so-float{display:none!important;} }

/* menus: a focus ring only when the keyboard is used; Activities / Day trips sort box as a pill with its own caret */
html .so-menu:not(.so-kb) .so-opt:focus-visible{box-shadow:none;}
html .so-menu.so-kb .so-opt:focus{box-shadow:inset 0 0 0 2px var(--clay,#087E8B);}
html .tp-sort select{-webkit-appearance:none;appearance:none;border-radius:999px!important;padding-inline:.95rem 2.3rem!important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317252A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center/15px!important;
  transition:border-color .15s,box-shadow .15s;}
html[dir="rtl"] .tp-sort select{background-position:left .85rem center!important;}
html .tp-sort select:hover{border-color:rgba(23,37,42,.35);}

/* ==== language sheet locks the page on phones (owner 2026-11-01) ====
   Like the search sheets: while the language / currency sheet is open the page behind can't scroll,
   and scrolling the list to its end doesn't pass the scroll on to the page. */
@media (max-width:600px){
  html:has(.lp-back:not([hidden])),html:has(.lp-back:not([hidden])) body{overflow:hidden!important;overscroll-behavior:none}
  html .lp-back{touch-action:none}
  html .lp-menu{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* ==== phone menu locks the page (owner 2026-11-01, same as the language sheet) ====
   While the burger menu is open the page behind can't scroll; if the menu is taller than a short screen,
   it scrolls on its own and doesn't pass the scroll on to the page. */
@media (max-width:699px){
  html:has(#nav.open),html:has(#nav.open) body{overflow:hidden!important;overscroll-behavior:none}
  html body:has(#nav.open)::before{touch-action:none}
  html header.top .tnav.open{max-height:min(40rem,calc(100dvh - 90px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* ==== phone header heart hidden from the first paint (owner 2026-11-01) ====
   On phones the bottom bar has the Saved heart, so the header heart is hidden - but that rule waited for site.js to
   add html.has-mtab after the page loaded, so the heart flashed in the header on every refresh. Pages that get the
   bottom bar are the ones without a booking tool, so hide it there straight from the CSS. */
@media (max-width:760px){
  html body:not(:has(#bookCard,#txTool,#spaTool)) header.top .sv-top{display:none!important}
}

/* ==== logo font: no jump on load (owner 2026-11-01) ====
   The wordmark used to draw in Georgia (much wider) until Cormorant Garamond arrived, so it looked big then shrank.
   The Cormorant file is now preloaded on every page (_logo_font_2026.py), and the fallback is Georgia scaled to
   Cormorant's width (measured on the real header with its letter-spacing: 90px vs Georgia 100px), so even a slow load doesn't jump. */
@font-face{font-family:'Cormorant Fallback';src:local('Georgia');size-adjust:97.5%;ascent-override:92%;descent-override:28%}
html .brand-w{font-family:'Cormorant Garamond','Cormorant Fallback',Georgia,'Times New Roman',serif!important}

/* ==== keyboard focus on the header links + skip link (2026-11-03, web interface guidelines review) ====
   From 960px the menu is text only, but its focus ring sat on the round icon (hidden there), so Tab showed nothing.
   The logo had no ring at any width. The skip link is added by site.js ("skip link") and only shows when focused. */
html header.top .brand:focus-visible{outline:2px solid var(--clay);outline-offset:4px;border-radius:12px}
@media (min-width:960px){
  html header.top .tnav a:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:999px}
}
html header.top.hdr-clear .brand:focus-visible,html header.top.hdr-clear .tnav a:focus-visible{outline-color:#fff}
html .skip-link{position:fixed;top:10px;inset-inline-start:10px;z-index:1000;padding:.7rem 1.1rem;border-radius:999px;
  background:var(--ink,#17252A);color:#fff;font:600 .95rem/1.2 'Plus Jakarta Sans',system-ui,sans-serif;text-decoration:none;
  transform:translateY(-160%);opacity:0;pointer-events:none}
html .skip-link:focus-visible,html .skip-link:focus{transform:none;opacity:1;pointer-events:auto;outline:2px solid #fff;outline-offset:2px}
html main:focus{outline:none}

/* ==== apartment review 2026-11-03 ==== */
/* (2) price + Check availability beside the title on computers (built by site.js) */
html .pt-cta{display:none}
@media (min-width:901px){
  html .pt-head:has(.pt-facts) :is(h1,.pt-sub,.pt-rating){grid-column:1!important}
  html .pt-head:has(.pt-facts) .pt-cta{display:flex;grid-column:2 / -1;grid-row:2 / span 3;justify-self:end;align-self:center;flex-direction:column;
    align-items:stretch;gap:.55rem;margin-inline-start:1.5rem;padding:14px 16px;border:1px solid var(--line,#E5E8E6);border-radius:18px;background:#fff;
    box-shadow:0 6px 20px rgba(23,37,42,.07);min-width:220px}
  html .pt-cta-p{font:700 1.35rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);white-space:nowrap}
  html .pt-cta-p small{font-size:.9rem;font-weight:500;color:var(--ink-soft,#5C6B6E)}
  html .pt-cta-b{min-height:44px;padding:.6rem 1.1rem;border:0;border-radius:999px;background:var(--cta,#D4432A);color:#fff;
    font:600 .95rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;white-space:nowrap}
  html .pt-cta-b:hover{background:var(--cta-hover,#B8361F)}
  html .pt-cta-b:focus-visible{outline:2px solid var(--clay,#087E8B);outline-offset:3px}
}
/* (3) the reviews section heading */
html #reviews > .rev-title{margin:0 0 .9rem}
/* (7) "Guest favorite" in the title rating line: icon beside the words, not above them */
html .pt-head .pt-rating .gf-mini{display:inline-flex!important;align-items:center;gap:.3rem}
html .pt-head .pt-rating .gf-mini .icon{width:1rem;height:1rem;flex:none}
/* ==== /apartment review 2026-11-03 ==== */
/* apartment review 2026-11-03: the request form and price box never stop under the sticky header + section bar
   (the form opens with scrollIntoView({block:'nearest'}), which respects scroll-margin) */
html #bookCard :is(#bf-details,#bf-result,#bf-name){scroll-margin-top:9rem;scroll-margin-bottom:1.5rem}
html .pt-head:has(.pt-facts) .pt-rating span.gf-mini{display:inline-flex!important;align-items:center;gap:.3rem;white-space:nowrap}
html .pt-head:has(.pt-facts) .pt-rating span.gf-mini > .icon{display:inline-block!important;width:1rem;height:1rem;flex:none;margin:0!important}
html .pt-head:has(.pt-facts) .pt-rating span.gf-mini > span{display:inline!important}

/* ==== airbnb comparison 2026-11-03 (site.js block "airbnb comparison") ==== */
/* 2. exact cancellation date replaces the general 48 h line once dates are chosen */
html #bookCard .side-trust .st-free.has-date > span:not(.st-cdate){display:none}
html #bookCard .side-trust .st-free .st-cdate{color:inherit}
/* 3. section bar: price + Check availability while the booking card is out of view (computers) */
html .tp-tabs-cta{display:none}
@media (min-width:901px){
  html .tp-tabs.ttc-on .tp-tabs-cta{display:flex;align-items:center;gap:.9rem;margin-inline-start:auto;flex:none;padding-block:4px}
  html .tp-tabs-cta .ttc-p{font:700 1rem/1.1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);white-space:nowrap}
  html .tp-tabs-cta .ttc-p small{font-size:.85rem;font-weight:500;color:var(--ink-soft,#5C6B6E)}
  html .tp-tabs-cta .ttc-b{min-height:38px;padding:.45rem 1.05rem;border:0;border-radius:999px;background:var(--cta,#D4432A);color:#fff;
    font:600 .9rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);cursor:pointer;white-space:nowrap}
  html .tp-tabs-cta .ttc-b:hover{background:var(--cta-hover,#B8361F)}
  html .tp-tabs-cta .ttc-b:focus-visible{outline:2px solid var(--clay,#087E8B);outline-offset:3px}
}
/* 4. reviews: one swipe row on phones (Airbnb's phone layout); "Show all N reviews" adds the rest to the row */
@media (max-width:700px){
  html #revGrid.rgrid{display:flex!important;grid-template-columns:none!important;align-items:stretch!important;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;gap:12px!important;margin:.75rem calc(-1 * var(--acg,20px)) 0!important;padding:2px var(--acg,20px) 12px!important;
    scroll-padding-inline:var(--acg,20px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html #revGrid.rgrid::-webkit-scrollbar{display:none}
  html #revGrid .rcard{flex:0 0 85%;max-width:340px;scroll-snap-align:start;border:1px solid var(--line,#E5E8E6)!important;border-radius:16px!important;
    padding:16px!important;background:#fff!important}
  html #reviews #revMore{margin-top:.6rem}
}
/* 5. availability calendar inside the page */
html .ac-sec .ac-hint{margin:.2rem 0 1rem;color:var(--ink-soft,#5C6B6E);font-size:.95rem;min-height:1.4em}
html .ac-sec .ac-hint.is-err{color:var(--err,#B42318)}
html .ac-wrap{position:relative}
html .ac-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}
@media (max-width:1023px){html .ac-months{grid-template-columns:minmax(0,1fr)}}
html .ac-title{text-align:center;font:700 1rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);margin:.35rem 0 .8rem;text-transform:capitalize}
html .ac-dow,html .ac-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
html .ac-dow span{font-size:.75rem;color:var(--ink-soft,#5C6B6E);padding-bottom:.4rem;text-transform:uppercase}
html .ac-d{position:relative;aspect-ratio:1;max-height:44px;border:0;background:none;padding:0;cursor:pointer;font:500 .92rem/1 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A)}
html .ac-d > span{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;max-width:100%;max-height:100%;border-radius:50%}
html .ac-d:hover:not(:disabled) > span{box-shadow:inset 0 0 0 1.5px var(--head,#17252A)}
html .ac-d:focus-visible{outline:none}
html .ac-d:focus-visible > span{box-shadow:0 0 0 2px var(--clay,#087E8B)}
html .ac-d:disabled{cursor:default;color:#A9B3B5}
html .ac-d.is-busy > span{text-decoration:line-through;color:#A9B3B5}
html .ac-d.is-today > span::after{content:"";position:absolute;bottom:3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--coral,#FF6B4A)}
html .ac-d.is-in{background:var(--clay-tint,#E4F2F3)}
html .ac-d.is-start,html .ac-d.is-end{background:linear-gradient(to var(--ac-dir,right),transparent 50%,var(--clay-tint,#E4F2F3) 50%)}
html .ac-d.is-end{--ac-dir:left}
html [dir=rtl] .ac-d.is-start{--ac-dir:left}
html [dir=rtl] .ac-d.is-end{--ac-dir:right}
html .ac-d.is-start.is-end{background:none}
html .ac-d.is-start > span,html .ac-d.is-end > span{background:var(--clay,#087E8B);color:#fff}
html .ac-nav{position:absolute;top:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--line,#E5E8E6);background:#fff;cursor:pointer;
  font-size:1.3rem;line-height:1;color:var(--head,#17252A);display:flex;align-items:center;justify-content:center;z-index:1}
html .ac-nav:disabled{opacity:.35;cursor:default}
html .ac-prev{inset-inline-start:0}
html .ac-next{inset-inline-end:0}
html [dir=rtl] .ac-nav span{display:inline-block;transform:scaleX(-1)}
html .ac-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.8rem}
html .ac-leg{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--ink-soft,#5C6B6E)}
html .ac-leg i{display:inline-block;width:1.4rem;height:1px;background:#A9B3B5;position:relative}
html .ac-leg i::before{content:"13";position:absolute;top:-.6rem;left:0;width:100%;text-align:center;font:500 .8rem/1 var(--font-ui,sans-serif);color:#A9B3B5;
  text-decoration:line-through;font-style:normal}
html .ac-leg i{background:none}
html .ac-clear{border:0;background:none;padding:.4rem 0;font:600 .9rem/1.2 var(--font-ui,'Plus Jakarta Sans',sans-serif);color:var(--head,#17252A);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:36px}
/* ==== /airbnb comparison ==== */