/* Self-hosted Manrope (the only family the UI uses), subsets: latin/latin-ext/cyrillic/cyrillic-ext. */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gf/manrope-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gf/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gf/manrope-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/gf/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/gf/manrope-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/gf/manrope-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/gf/manrope-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/gf/manrope-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/gf/manrope-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/gf/manrope-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/gf/manrope-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/gf/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/gf/manrope-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/gf/manrope-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/gf/manrope-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/gf/manrope-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/gf/manrope-800-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/gf/manrope-800-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/gf/manrope-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/gf/manrope-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Self-hosted Phosphor icon subset — ONLY the glyphs this site uses (generated from @phosphor-icons/web 2.1.1). */
/* GENERATED by tools/fonts/regen-icons.py — do not edit by hand; add a `ph-*` class in source and re-run the script. */
@font-face{font-family:"Phosphor";src:url("/fonts/phosphor-subset.woff2?v=9") format("woff2");font-weight:normal;font-style:normal;font-display:block}
@font-face{font-family:"Phosphor-Fill";src:url("/fonts/phosphor-fill-subset.woff2?v=9") format("woff2");font-weight:normal;font-style:normal;font-display:block}
.ph{font-family:"Phosphor"!important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;letter-spacing:0;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.ph-fill{font-family:"Phosphor-Fill"!important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;letter-spacing:0;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Fill content rules — the fill subset only carries these glyphs (favorites heart, map marker pin).
   Needed because the map marker is `ph-fill ph-map-pin` WITHOUT a `ph` class, so no `.ph.*` rule applies. */
.ph-fill.ph-heart:before{content:"\e2a8"}
.ph-fill.ph-map-pin:before{content:"\e316"}
.ph.ph-airplane-tilt:before{content:"\e5d6"}
.ph.ph-arrow-down:before{content:"\e03e"}
.ph.ph-arrow-left:before{content:"\e058"}
.ph.ph-arrow-right:before{content:"\e06c"}
.ph.ph-arrow-up:before{content:"\e08e"}
.ph.ph-arrows-clockwise:before{content:"\e094"}
.ph.ph-baby:before{content:"\e774"}
.ph.ph-bed:before{content:"\e0cc"}
.ph.ph-bell:before{content:"\e0ce"}
.ph.ph-bookmark-simple:before{content:"\e0ea"}
.ph.ph-buildings:before{content:"\e102"}
.ph.ph-calendar:before{content:"\e108"}
.ph.ph-calendar-blank:before{content:"\e10a"}
.ph.ph-calendar-x:before{content:"\e10c"}
.ph.ph-camera:before{content:"\e10e"}
.ph.ph-caret-down:before{content:"\e136"}
.ph.ph-caret-left:before{content:"\e138"}
.ph.ph-caret-right:before{content:"\e13a"}
.ph.ph-check:before{content:"\e182"}
.ph.ph-check-circle:before{content:"\e184"}
.ph.ph-clock:before{content:"\e19a"}
.ph.ph-clock-countdown:before{content:"\ed2c"}
.ph.ph-clock-counter-clockwise:before{content:"\e1a0"}
.ph.ph-cloud-sun:before{content:"\e540"}
.ph.ph-cloud-warning:before{content:"\ea98"}
.ph.ph-compass:before{content:"\e1c8"}
.ph.ph-confetti:before{content:"\e81a"}
.ph.ph-credit-card:before{content:"\e1d2"}
.ph.ph-download-simple:before{content:"\e20c"}
.ph.ph-drop:before{content:"\e210"}
.ph.ph-envelope-simple:before{content:"\e218"}
.ph.ph-eraser:before{content:"\e21e"}
.ph.ph-eye:before{content:"\e220"}
.ph.ph-eye-slash:before{content:"\e224"}
.ph.ph-file-arrow-down:before{content:"\e232"}
.ph.ph-file-text:before{content:"\e23a"}
.ph.ph-funnel:before{content:"\e266"}
.ph.ph-globe:before{content:"\e288"}
.ph.ph-google-logo:before{content:"\e292"}
.ph.ph-headset:before{content:"\e584"}
.ph.ph-heart:before{content:"\e2a8"}
.ph.ph-hourglass:before{content:"\e2b2"}
.ph.ph-hourglass-medium:before{content:"\e2b8"}
.ph.ph-house:before{content:"\e2c2"}
.ph.ph-identification-card:before{content:"\e2c8"}
.ph.ph-image:before{content:"\e2ca"}
.ph.ph-images:before{content:"\e836"}
.ph.ph-info:before{content:"\e2ce"}
.ph.ph-lightning:before{content:"\e2de"}
.ph.ph-list:before{content:"\e2f0"}
.ph.ph-list-magnifying-glass:before{content:"\ebe0"}
.ph.ph-lock-key:before{content:"\e2fe"}
.ph.ph-magic-wand:before{content:"\e6b6"}
.ph.ph-magnifying-glass:before{content:"\e30c"}
.ph.ph-map-pin:before{content:"\e316"}
.ph.ph-map-pin-area:before{content:"\ee3a"}
.ph.ph-map-pin-line:before{content:"\e318"}
.ph.ph-map-trifold:before{content:"\e31a"}
.ph.ph-moon-stars:before{content:"\e58e"}
.ph.ph-mountains:before{content:"\e7ae"}
.ph.ph-note-pencil:before{content:"\e34c"}
.ph.ph-notepad:before{content:"\e63e"}
.ph.ph-paper-plane-tilt:before{content:"\e398"}
.ph.ph-path:before{content:"\e39c"}
.ph.ph-pause-circle:before{content:"\e3a0"}
.ph.ph-pencil-simple-line:before{content:"\ebc6"}
.ph.ph-percent:before{content:"\e3b6"}
.ph.ph-plus:before{content:"\e3d4"}
.ph.ph-plus-circle:before{content:"\e3d6"}
.ph.ph-question:before{content:"\e3e8"}
.ph.ph-receipt:before{content:"\e3ec"}
.ph.ph-scroll:before{content:"\eb7a"}
.ph.ph-seal-check:before{content:"\e606"}
.ph.ph-share-network:before{content:"\e408"}
.ph.ph-shopping-bag-open:before{content:"\e418"}
.ph.ph-sign-in:before{content:"\e428"}
.ph.ph-sign-out:before{content:"\e42a"}
.ph.ph-sliders-horizontal:before{content:"\e434"}
.ph.ph-sparkle:before{content:"\e6a2"}
.ph.ph-squares-four:before{content:"\e464"}
.ph.ph-star:before{content:"\e46a"}
.ph.ph-suitcase:before{content:"\e5ae"}
.ph.ph-sun-horizon:before{content:"\e5b6"}
.ph.ph-tag:before{content:"\e478"}
.ph.ph-ticket:before{content:"\e490"}
.ph.ph-translate:before{content:"\e4a2"}
.ph.ph-trash:before{content:"\e4a6"}
.ph.ph-tree:before{content:"\e6da"}
.ph.ph-umbrella:before{content:"\e684"}
.ph.ph-upload-simple:before{content:"\e4c0"}
.ph.ph-user:before{content:"\e4c2"}
.ph.ph-user-circle:before{content:"\e4c4"}
.ph.ph-user-focus:before{content:"\e6fc"}
.ph.ph-users:before{content:"\e4d6"}
.ph.ph-users-three:before{content:"\e68e"}
.ph.ph-van:before{content:"\e826"}
.ph.ph-warning:before{content:"\e4e0"}
.ph.ph-warning-circle:before{content:"\e4e2"}
.ph.ph-whatsapp-logo:before{content:"\e5d0"}
.ph.ph-wrench:before{content:"\e5d4"}
.ph.ph-x:before{content:"\e4f6"}
.ph.ph-x-circle:before{content:"\e4f8"}
/* RUMBO LIBRE — design tokens (single source of truth) — ver docs/design/2026-06-25-ui-ux-guidelines.md §2 */
:root{
  --teal:#0E8DAC; --teal-d:#0A6E86; --teal-50:#E2F1F4;
  --amber:#E8BF7D; --amber-d:#7A5A12; --amber-50:#FBF1DD;
  --sand:#F5EFE3;
  --rose:#A72F5C; --rose-50:#F7E7EE;
  --red:#D64545; --red-d:#B42318;
  --ink:#1F2A2E; --muted:#556368; --faint:#5C6A6E;
  --line:#ECEFEE; --line-2:#E3E8E7;
  --ink-deep:#15333D;
  --green:#2E7D43; --green-50:#E5F3E7;
  --shadow-pill:0 1px 4px rgba(0,0,0,.05);
  --shadow-float:0 12px 44px rgba(20,40,46,.18);
  --r-pill:999px; --r-card:15px; --r-btn:11px;
}
/* wordmark RUMBO LIBRE: siempre en mayúsculas, con tracking consistente */
.logo,.brand,.blogo,.fbrand,.fb{text-transform:uppercase !important;letter-spacing:.02em !important;}
/* foco accesible global */
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2px solid var(--teal); outline-offset:2px; border-radius:4px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Manrope',system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.55;}
a{color:inherit;text-decoration:none;}
img{display:block;width:100%;height:100%;object-fit:cover;}
/* Single responsive page gutter shared by header, content and footer (mobile / medium / desktop). */
:root{--gutter:30px;}
@media(max-width:1024px){:root{--gutter:24px;}}
@media(max-width:680px){:root{--gutter:16px;}}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter);}
.btn-pri{background:var(--teal-d);color:#fff;border:none;font-family:inherit;font-weight:700;cursor:pointer;}
.btn-pri:hover{background:#085a6f;}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);}
/* Only vertical padding — horizontal gutter comes from .wrap so the logo/controls align with page content. */
.hbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:12px;padding-bottom:12px;}
.logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.01em;flex:0 0 auto;}
.pill{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:5px 5px 5px 6px;box-shadow:var(--shadow-pill);cursor:pointer;transition:box-shadow .2s,transform .2s;}
.pill:hover{box-shadow:0 3px 12px rgba(0,0,0,.09);}
.pill .s{font-size:13.5px;font-weight:600;padding:8px 18px;border-right:1px solid var(--line);white-space:nowrap;}
.pill .s.mut{color:var(--faint);font-weight:500;border-right:none;}
.pill .orb{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;margin-left:8px;flex:0 0 auto;}
.hr{display:flex;align-items:center;gap:4px;font-size:13.5px;flex:0 0 auto;}
.hr{align-items:center;}
.hr .lnk{display:inline-flex;align-items:center;gap:6px;line-height:1;font-weight:700;padding:9px 14px;border-radius:999px;color:var(--teal-d);}
/* .lnk is used on both <a> and <button> (menu toggle) — strip native button chrome so they match. */
.hr button.lnk{background:none;border:0;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
.hr .lnk i{font-size:18px;}
/* Icon-only links (e.g. favorites): round hover, not oval */
.hr .lnk.iconbtn{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;}
/* Isologo sizing: 30px in headers (default), 26px in the footer */
.rl-logo{flex:0 0 auto;width:30px;height:30px;}
footer .fbrand .rl-logo{width:26px;height:26px;}
.glb{line-height:1;}
.glb i{font-size:17px;}
.hr .lnk:hover{background:var(--teal-50);}
.glb{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:999px;color:var(--muted);cursor:pointer;}
.glb:hover{background:#F4F6F5;}
.glb{position:relative;}
.langmenu{position:absolute;top:100%;right:0;margin-top:6px;background:#fff;border:1px solid var(--line-2);border-radius:11px;box-shadow:var(--shadow-float);padding:6px;min-width:150px;display:none;flex-direction:column;z-index:60;}
.glb.open .langmenu{display:flex;}
.langmenu a{padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink);}
.langmenu a:hover{background:var(--teal-50);}
.langmenu a.on{color:var(--teal-d);}
.hr .prof{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:999px;padding:5px 6px 5px 12px;cursor:pointer;}
.hr .prof:hover{box-shadow:var(--shadow-pill);}
.hr .prof .av{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.cats{border-bottom:1px solid var(--line);background:#fff;}
.cats .wrap{display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;}
.cats .wrap::-webkit-scrollbar{display:none;}
.cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 2px;font-size:12.5px;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s;}
.cat i{font-size:24px;}
.cat:hover{color:var(--ink);}
.cat.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:700;}

/* Visually-hidden but accessible to screen readers / search engines (e.g. an off-screen H1 on list pages). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Skip-to-content link: off-screen until focused (keyboard users land here first). */
.skip-link{position:absolute;left:8px;top:-48px;z-index:1000;background:var(--ink,#15333D);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-weight:700;font-size:14px;transition:top .15s ease;}
.skip-link:focus{top:0;outline:3px solid var(--teal,#0E8DAC);}
:focus-visible{outline:3px solid var(--teal,#0E8DAC);outline-offset:2px;}
.soon-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(0,0,0,.08);color:inherit;padding:2px 7px;border-radius:999px;margin-left:6px;}
/* B2C reference-price disclaimer (shown wherever indicative prices appear; never on vouchers/confirmations). */
.price-note{font-size:12px;line-height:1.45;color:var(--muted,#6b7b7e);margin:14px 0 44px;}
/* Centered variant for full-width list/section footers (Explore, search results, destination) — not the
   left-aligned pricing panels on product detail pages. */
.price-note.pn-center{text-align:center;margin-top:28px;}

/* Busy/processing spinner — shared by B2C and the Portal. ui-busy.js swaps a button's icon to .rl-spin
   while a search/submit is in flight so the user sees it's working. */
@keyframes rl-spin{to{transform:rotate(360deg);}}
.rl-spin{display:inline-block;animation:rl-spin .6s linear infinite;}
[data-busy="on"]{pointer-events:none;opacity:.85;}

/* Respect users who prefer reduced motion (WCAG 2.3.3): neutralise animations/transitions/smooth-scroll. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:520px;display:flex;align-items:center;}
.hero-img{position:absolute;inset:0;}
/* Scrim: heavy dark wash on the left (where the white headline sits) fading to reveal the sunset on the right,
   plus a soft bottom vignette. Keeps the copy legible over the bright sky without hiding the photo. */
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,24,29,.64) 0%,rgba(10,24,29,.36) 34%,rgba(10,24,29,.06) 64%,rgba(10,24,29,0) 100%),linear-gradient(180deg,rgba(10,24,29,.46) 0%,rgba(10,24,29,.14) 24%,rgba(10,24,29,0) 44%,rgba(10,24,29,.16) 72%,rgba(10,24,29,.44) 100%);}
.hero-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 120% at 0% 45%,rgba(8,20,25,.34),rgba(8,20,25,0) 58%);}
.hero-c{position:relative;z-index:2;width:100%;padding:65px 0;}
/* Cancel the generic `section .wrap` vertical padding here — the hero owns its spacing via .hero-c.
   (Otherwise the two stack to ~108px above the pill / below the search.) */
.hero-c .wrap{color:#fff;width:100%;padding-top:0;padding-bottom:0;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);padding:6px 13px;border-radius:999px;margin-bottom:16px;}
.hero h1{font-size:clamp(30px,4.4vw,52px);line-height:1.06;font-weight:800;letter-spacing:-.025em;max-width:19ex;margin-bottom:14px;text-shadow:0 2px 22px rgba(0,0,0,.5);}
.hero p{font-size:clamp(15px,1.4vw,18px);max-width:54ch;margin-bottom:24px;opacity:.95;}
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:none;}}

/* ---------- Omni-search ---------- */
/* overflow:visible so the date/passengers popovers can escape the card instead of being clipped by it. */
.omni{background:#fff;border-radius:18px;max-width:920px;box-shadow:var(--shadow-float);}
.otabs{display:flex;gap:2px;padding:7px 8px 0;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;}
.ofields .of[data-control] .popover{z-index:90;}
.otab{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--muted);padding:11px 16px;border-radius:10px 10px 0 0;cursor:pointer;white-space:nowrap;}
.otab i{font-size:18px;}
.otab.on{color:var(--teal-d);background:var(--teal-50);}
.otab:hover:not(.on){background:#F4F6F5;}
.ofields{display:flex;align-items:stretch;gap:0;padding:8px;}
.of{flex:1;padding:8px 16px;border-right:1px solid var(--line);min-width:0;}
.of:last-of-type{border-right:none;}
.of.dest{flex:1.9;}
.of .l{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;}
.of .v{font-size:15px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.of .v i{color:var(--teal);font-size:18px;}
.of .v .ph-mut{color:var(--faint);font-weight:500;}
.obtn{flex:0 0 auto;align-self:center;margin:0 6px;background:var(--teal-d);color:#fff;border:none;font-family:inherit;font-size:15px;font-weight:700;padding:0 24px;height:52px;border-radius:13px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background .15s;}
.obtn:hover{background:#085a6f;}
.ofoot{display:flex;align-items:center;gap:22px;padding:0 16px 12px;flex-wrap:wrap;}
.ofoot[hidden]{display:none;} /* honour the hidden attribute despite the display rule above */
.xs{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:600;cursor:pointer;user-select:none;}
.xs .sw{width:34px;height:20px;border-radius:999px;background:var(--line-2);position:relative;transition:background .18s;flex:0 0 auto;}
.xs .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s;}
.xs.on .sw{background:var(--teal);}
.xs.on .sw::after{transform:translateX(14px);}

.wave{display:block;width:100%;height:26px;color:var(--teal-50);}

/* ---------- Sections ---------- */
section .wrap{padding:56px var(--gutter);}
.sh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;}
.sh h2{font-size:28px;font-weight:800;letter-spacing:-.015em;}
.sh .sub{font-size:14.5px;color:var(--muted);margin-top:5px;font-weight:500;}
.sh a.more{font-size:14.5px;color:var(--teal-d);font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.sh a.more i{transition:transform .15s ease;}
.sh a.more:hover i{transform:translateX(3px);}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* product type cards */
.ptype{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;display:block;}
.ptype img{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.ptype::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.6));}
.ptype:hover img{transform:scale(1.06);}
.ptype .lab{position:absolute;left:16px;bottom:15px;z-index:2;color:#fff;}
.ptype .lab .n{font-size:19px;font-weight:800;}
.ptype .lab .c{font-size:13px;opacity:.92;margin-top:2px;}

/* destination cards */
.card{cursor:pointer;display:block;}
.card .cph{aspect-ratio:4/3;border-radius:15px;position:relative;overflow:hidden;}
.card .cph img{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.card:hover .cph img{transform:scale(1.05);}
.card .cph .tag{position:absolute;left:11px;top:11px;background:var(--amber-50);color:var(--amber-d);font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;white-space:nowrap;}
.card .cph .heart{position:absolute;right:5px;top:4px;color:#fff;font-size:22px;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));cursor:pointer;transition:transform .15s;}
.card .cph .heart:hover{transform:scale(1.15);}
.card .t{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:16px;font-weight:700;margin-top:11px;}
.card .t .ct{min-width:0;}
.card .t .rt{font-weight:700;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:4px;white-space:nowrap;flex:0 0 auto;line-height:1.5;}
.card .m{font-size:13.5px;color:var(--faint);margin-top:2px;}
.card .p{font-size:14.5px;margin-top:7px;color:var(--muted);}
.card .p b{font-weight:800;color:var(--ink);}

/* theme scroller */
.scroller{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}
.scroller::-webkit-scrollbar{display:none;}
.theme{flex:0 0 230px;position:relative;border-radius:15px;overflow:hidden;aspect-ratio:5/6;}
.theme img{transition:transform .5s;}
.theme:hover img{transform:scale(1.06);}
.theme::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5));}
.theme .lab{position:absolute;left:14px;bottom:13px;z-index:2;color:#fff;font-weight:800;font-size:17px;}
.theme .lab small{display:block;font-weight:600;font-size:12.5px;opacity:.9;}

/* para agencias band */
.agency{background:var(--teal-50);}
.agency .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:42px;align-items:center;}
.agency h2{font-size:28px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px;}
.agency .lead{font-size:15px;color:var(--muted);margin-bottom:22px;max-width:46ch;}
.agency .feats{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-bottom:24px;}
.agency .ft{display:flex;gap:11px;align-items:flex-start;}
.agency .ft i{color:var(--teal-d);font-size:22px;margin-top:1px;}
.agency .ft b{font-weight:800;font-size:14.5px;display:block;}
.agency .ft span{font-size:13px;color:var(--muted);}
.agency .acta{display:flex;gap:12px;flex-wrap:wrap;}
.agency .acta a{padding:12px 20px;border-radius:11px;font-weight:800;font-size:14.5px;}
.agency .acta .pri{background:var(--teal-d);color:#fff;}
.agency .acta .pri:hover{background:#085a6f;}
.agency .acta .sec{border:1px solid var(--teal-d);color:var(--teal-d);}
.agency .acta .sec:hover{background:#fff;}
.pvw{background:#fff;border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow-float);padding:16px;}
.pvw .pvh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.pvw .pmode{display:flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;font-size:11.5px;font-weight:700;}
.pvw .pmode span{padding:5px 10px;border-radius:999px;color:var(--faint);}
.pvw .pmode span.on{background:var(--ink);color:#fff;}
.pvw .prow{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;}
.pvw .prow .pth{width:46px;height:46px;border-radius:9px;background:#CFE3E7;flex:0 0 auto;}
.pvw .prow .pn{flex:1;font-size:13.5px;font-weight:800;min-width:0;}
.pvw .prow .pn small{display:block;font-weight:500;color:var(--faint);font-size:12px;}
.pvw .prow .pp{text-align:right;font-size:12px;color:var(--faint);white-space:nowrap;}
.pvw .prow .pp b{display:block;font-size:16px;color:var(--ink);font-weight:800;}
@media(max-width:920px){.agency .wrap{grid-template-columns:1fr;gap:28px;}}

/* why band */
.why{background:var(--sand);}
.why-g{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.why-c .ic{width:48px;height:48px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pill);}
.why-c .ic i{font-size:25px;color:var(--teal);}
.why-c h3{font-size:17px;font-weight:800;margin:13px 0 5px;}
.why-c p{font-size:14px;color:var(--muted);}

/* trust / stats band */
.trust{background:var(--ink-deep);color:#EAF2F4;}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:34px var(--gutter);}
.stats{display:grid;grid-template-columns:repeat(3,max-content);gap:48px;align-items:start;}
.stat .n{font-size:30px;font-weight:800;letter-spacing:-.02em;color:#fff;}
.stat .l{font-size:13px;color:#AFC6CC;margin-top:2px;}
.creds{display:flex;align-items:center;gap:14px;font-size:13px;color:#AFC6CC;}
.creds .b{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:9px 14px;border-radius:11px;}
.creds .b i{font-size:18px;color:var(--amber);}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s;}
.step{counter-increment:s;position:relative;}
.step .n{width:38px;height:38px;border-radius:50%;background:var(--teal-50);color:var(--teal-d);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.step .n::before{content:counter(s);}
.step h3{font-size:16px;font-weight:800;margin-bottom:4px;}
.step p{font-size:13.5px;color:var(--muted);}

/* faq */
.faq details{border-bottom:1px solid var(--line-2);padding:18px 2px;}
.faq summary{font-size:16px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary i{color:var(--teal);transition:transform .2s;flex:0 0 auto;}
.faq details[open] summary i{transform:rotate(45deg);}
/* The answer fills its column. The 84ch cap left the copy ending well short of the question above it and of the
   rule below, so a two-line answer read as if it had been truncated. `.wrap` already bounds the section. */
.faq p{font-size:14.5px;color:var(--muted);margin-top:11px;}

/* cta */
.cta{background:var(--teal-d);color:#fff;position:relative;overflow:hidden;}
.cta .sun{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,var(--amber) 0%,rgba(232,191,125,0) 70%);opacity:.45;}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding:46px var(--gutter);position:relative;z-index:1;}
.cta h2{font-size:27px;font-weight:800;letter-spacing:-.01em;}
.cta p{opacity:.92;font-size:15px;margin-top:6px;}
.cta .b{display:flex;gap:12px;flex-wrap:wrap;}
.cta .b a{padding:14px 22px;border-radius:11px;font-weight:800;font-size:14.5px;}
.cta .b .pri{background:#fff;color:var(--teal-d);}
.cta .b .pri:hover{background:var(--sand);}
.cta .b .sec{border:1px solid rgba(255,255,255,.55);color:#fff;}
.cta .b .sec:hover{background:rgba(255,255,255,.1);}

/* footer */
footer{background:var(--ink-deep);color:#AFC6CC;font-size:13.5px;}
footer .wrap{padding:48px var(--gutter) 30px;}
.fcols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px;margin-bottom:30px;}
.fcols h3{color:#fff;font-size:13px;font-weight:800;margin-bottom:14px;letter-spacing:.03em;text-transform:uppercase;}
.fcols a{display:block;padding:4px 0;color:#AFC6CC;transition:color .12s;}
.fcols a:hover{color:#fff;}
.fbrand{color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#88A4AB;}
.fbot a{color:#88A4AB;}

.wa-fab{position:fixed;right:24px;bottom:24px;z-index:60;background:var(--teal);color:#fff;border-radius:999px;padding:13px 20px;font-size:14.5px;font-weight:800;display:flex;gap:9px;align-items:center;box-shadow:0 8px 26px rgba(14,141,172,.4);transition:transform .15s;}
.wa-fab:hover{transform:translateY(-2px);}

@media(max-width:920px){
  /* Collapse header labels to icons; keep the language switcher visible (icon-only) alongside user + menu. */
  .pill,.hr .lnk span.full,.hr .glb .full{display:none;}
  .hr .glb{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;gap:0;}
  .hero-c{padding:40px 0;}
  /* Wrap to two per row; reset the destination's wider flex so it doesn't get squished to a sliver. */
  .ofields{flex-wrap:wrap;}
  .of,.of.dest{flex:1 1 44%;border-right:none;border-bottom:1px solid var(--line);}
  /* Full-width via flex basis (not width:100%) so the side margins stay symmetric instead of overflowing right. */
  .obtn{flex:1 1 100%;width:auto;align-self:stretch;margin:10px 4px 2px;}
  .g4,.why-g,.steps{grid-template-columns:repeat(2,1fr);}
  .g3,.fcols{grid-template-columns:1fr 1fr;}
  .stats{gap:26px 30px;}
}
@media(max-width:560px){.g4,.g3,.fcols,.why-g,.steps{grid-template-columns:1fr;}.stats{grid-template-columns:1fr;gap:18px;}}
/* Phones: stack the omni fields full-width (nothing overlaps), let the tabs scroll horizontally,
   and make the search button full-width with even margins. */
@media(max-width:680px){
  .otabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;}
  .otabs::-webkit-scrollbar{display:none;}
  .otab{flex:0 0 auto;}
  .ofields{flex-direction:column;align-items:stretch;gap:0;padding:6px 8px 8px;}
  .of,.of.dest{flex:1 1 auto;width:100%;border-right:none;border-bottom:1px solid var(--line);}
  .ofields .of:last-of-type{border-bottom:none;}
  /* Column layout flips the main axis to height, so the wider rule's flex-basis:100% collapses the button.
     Reset to an explicit full-width, full-height, centered CTA on phones (the rest of the site is fine). */
  .obtn{flex:0 0 auto;width:100%;height:54px;justify-content:center;margin:10px 0 2px;font-size:16px;}
  .ofoot{gap:14px;}
}

/* Home omni date/passengers use the shared controls — anchor their popovers to the field. */
.ofields .of[data-control]{position:relative;cursor:pointer;}
.ofields .of[data-control] .v{cursor:pointer;}
@media(max-width:680px){
  .ofields .of[data-control] .popover{left:0;right:0;min-width:0;}
}

/* ============================================================
   Search results page (/search) — SERP: filter rail + results + map
   Header/.wrap/.hbar/.hr/.lnk/.glb are shared (defined above).
   Result cards use .scard (the home destination card owns .card).
   ============================================================ */
.search{background:var(--sand);border-bottom:1px solid var(--line-2);padding:14px 0;}
.fields{display:flex;gap:10px;max-width:1240px;margin:0 auto;padding:0 var(--gutter);flex-wrap:wrap;}
.fields .f{background:#fff;border:1px solid #DCE4E3;border-radius:10px;padding:7px 13px;flex:1;min-width:140px;}
.fields .f.dest{flex:2;}
.fields .f label{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-bottom:2px;}
.fields .f .v{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;}
.fields .f .v i{color:var(--teal);font-size:17px;}
.go{background:var(--teal-d);color:#fff;border:none;font-family:inherit;font-size:15px;font-weight:700;padding:0 26px;border-radius:10px;display:flex;align-items:center;gap:9px;cursor:pointer;}
.go:hover{background:#085a6f;}

.layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;max-width:1240px;margin:0 auto;padding:18px var(--gutter) 40px;}
.rail{background:#fff;border:1px solid var(--line-2);border-radius:13px;padding:16px;height:fit-content;position:sticky;top:74px;}
.rail h3{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:7px;}
.fg{margin-bottom:18px;}
.fg .lab{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:9px;text-transform:uppercase;letter-spacing:.04em;}
.opt{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:4px 0;cursor:pointer;}
.opt .box{width:16px;height:16px;border:1.5px solid #C3CFCE;border-radius:4px;flex:0 0 auto;}
.opt .box.on{background:var(--teal);border-color:var(--teal);}
.opt .ct{margin-left:auto;color:var(--faint);font-size:12px;}
.hist{display:flex;align-items:flex-end;gap:2px;height:36px;margin-bottom:8px;}
.hist span{flex:1;background:var(--teal-50);border-radius:2px 2px 0 0;}
.hist span.hi{background:var(--teal);}
.stars{color:var(--amber-d);}
/* Price dual-range slider (two overlaid range inputs over a shared track + fill). */
.prange{padding:2px 4px 2px;}
.prange-out{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:14px;}
.prange-track{position:relative;height:22px;}
.prange-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:999px;background:var(--line-2);}
.prange-fill{position:absolute;top:50%;transform:translateY(-50%);height:4px;border-radius:999px;background:var(--teal);}
.prange-h{position:absolute;left:0;top:0;width:100%;height:22px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;}
.prange-h::-webkit-slider-runnable-track{background:none;border:none;}
.prange-h::-moz-range-track{background:none;border:none;}
.prange-h::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--teal-d);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer;}
.prange-h::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--teal-d);box-shadow:0 1px 4px rgba(0,0,0,.28);cursor:pointer;}
.prange-h:focus-visible::-webkit-slider-thumb{outline:2px solid var(--teal);outline-offset:2px;}
.prange-h:focus-visible::-moz-range-thumb{outline:2px solid var(--teal);outline-offset:2px;}

.results{min-width:0;}
.rbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap;}
.count{font-size:14px;color:var(--muted);}
.count b{color:var(--ink);font-weight:700;}
.seg{display:flex;border:1px solid #DCE4E3;border-radius:9px;overflow:hidden;font-size:13px;background:#fff;}
.seg span,.seg a{padding:7px 13px;color:var(--muted);cursor:pointer;}
.seg span.on,.seg a.on{background:var(--teal);color:#fff;font-weight:600;}
.seg.seg-v{flex-direction:column;}
.seg.seg-v span,.seg.seg-v a{border-bottom:1px solid #DCE4E3;}
.seg.seg-v span:last-child,.seg.seg-v a:last-child{border-bottom:none;}

.search-error{background:#fff;border:1px solid var(--line-2);border-radius:13px;padding:28px 16px;text-align:center;}
.search-error p{color:var(--faint);margin:0 0 12px;}
.scard{background:#fff;border:1px solid var(--line-2);border-radius:13px;padding:12px;margin-bottom:14px;display:flex;gap:14px;cursor:pointer;transition:box-shadow .15s;}
.scard:hover{box-shadow:0 6px 22px rgba(20,40,46,.1);}
.scard .thumb{flex:0 0 150px;height:130px;border-radius:10px;overflow:hidden;position:relative;}
.scard .thumb .b{position:absolute;left:9px;top:9px;background:rgba(255,255,255,.93);color:var(--amber-d);font-size:12px;padding:3px 8px;border-radius:6px;font-weight:700;}
.scard .mid{flex:1;min-width:0;display:flex;flex-direction:column;}
.scard .name{font-size:17px;font-weight:800;}
.scard .zone{font-size:13px;color:var(--faint);margin:3px 0 8px;display:flex;align-items:center;gap:6px;}
.scard .foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;}
.scard .see{font-size:13px;font-weight:700;color:var(--teal-d);white-space:nowrap;}
.scard .price{text-align:right;}
.scard .price .l{font-size:11.5px;color:var(--faint);}
.scard .price b{font-size:20px;font-weight:800;}

/* Map strip sits ABOVE the results (no second sidebar). Hidden for services (list-only). A real Leaflet map
   (free CARTO tiles) fills .mapcanvas; z-index:0 keeps Leaflet's panes/controls under the sticky header. */
.mapstrip{position:relative;z-index:0;height:360px;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);margin-bottom:18px;}
.mapstrip[hidden]{display:none;}
.mapcanvas{width:100%;height:100%;background:var(--teal-50);position:relative;}

.agencybar{max-width:1240px;margin:0 auto;padding:0 var(--gutter) 30px;}
.agencybar .in{background:var(--sand);border-radius:12px;padding:14px 18px;font-size:13.5px;display:flex;align-items:center;gap:10px;}
.agencybar a{color:var(--teal-d);font-weight:800;}

@media(max-width:1000px){
  .layout{grid-template-columns:1fr;}
  .rail{position:static;}
}
/* Search bar — mobile: stack the fields and make the search button full-width with even side margins
   (the .fields horizontal padding becomes the button's symmetric gutter). Popovers go full-width too. */
@media(max-width:680px){
  .search{padding:12px 0;}
  .fields{flex-direction:column;align-items:stretch;gap:8px;padding:0 var(--gutter);}
  .fields .f,.fields .f.dest{flex:1 1 auto;width:100%;min-width:0;}
  .go{width:100%;justify-content:center;padding:14px;margin:2px 0 0;}
  .fields .f[data-control] .popover{left:0;right:0;min-width:0;}
  /* Result card foot: on mobile the "From" price stacks BELOW "View detail", right-aligned, so a long
     price never crowds the link. Cards with no price keep just the left-aligned link (unchanged look). */
  .scard .foot{flex-direction:column;align-items:stretch;gap:3px;}
  .scard .foot .see{align-self:flex-start;}
  .scard .foot .price{align-self:flex-end;}
}

/* ---------- Explore / suggested-results page ---------- */
.explore{padding:24px var(--gutter) 56px;}
.explore-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.explore-head h1{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;}
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.explore-grid .scard{margin-bottom:0;}
@media(max-width:760px){.explore-grid{grid-template-columns:1fr;}}
@media(max-width:680px){.explore{padding:18px var(--gutter) 40px;}}

/* Load-more (B2C search pagination) */
.loadmore-wrap{display:flex;justify-content:center;margin:18px 0 4px;}
.loadmore-wrap [hidden]{display:none;}

/* Empty / error results state (SSR first paint + no-JS). An API outage renders this "unavailable" variant
   instead of a bare "0 results", which would misrepresent the catalog as empty. */
.empty-results{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:12px;padding:48px 24px;color:var(--muted,#667);grid-column:1/-1;}
.empty-results i{font-size:40px;color:var(--brand,#0e8dac);opacity:.7;}
.empty-results p{margin:0;max-width:34ch;font-size:15px;}
.empty-results .cbtn{margin-top:4px;}

/* ============================================================
   Circuit public detail page (/circuit/{slug})
   Header/.wrap/footer are shared (defined above / partials).
   ============================================================ */
.crumb{font-size:13px;color:var(--faint);padding:18px 0 6px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.crumb a:hover{color:var(--ink);}
.crumb i{font-size:13px;}
/* The current page (last crumb). Was an inline style on each detail page's hand-written nav; now that the trail
   renders from one shared partial, it lives here. */
.crumb .crumb-here{color:var(--ink);font-weight:600;}

.titlerow{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:6px 0 14px;flex-wrap:wrap;}
.titlerow h1{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.sub{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:8px;align-items:center;}
.sub .it{display:flex;align-items:center;gap:6px;}
.sub i{color:var(--teal);font-size:17px;}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.bdg{font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--teal-50);color:var(--teal-d);}
.bdg.amber{background:var(--amber-50);color:var(--amber-d);}
.topacts{display:flex;gap:8px;}
.topacts button{display:flex;align-items:center;gap:6px;font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;cursor:pointer;}
.topacts button:hover{background:#F4F6F5;}

.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:190px 190px;gap:8px;border-radius:18px;overflow:hidden;position:relative;margin-bottom:30px;}
.gallery a{position:relative;overflow:hidden;}
.gallery a:first-child{grid-row:1/3;}
/* Crop the banner near the TOP of the photo (10% down from the top): landmarks/mountains sit in the upper
   part, so a centre cover-crop lops off tower tips / statue heads on the wide hero. */
.gallery a img{transition:transform .5s cubic-bezier(.2,.7,.2,1);object-position:center 20%;}
.gallery a:hover img{transform:scale(1.05);}
/* Extra images beyond the visible 1/3/5 stay in the DOM (the lightbox reads its list from these anchors) but
   are never shown in the main strip — a gallery never shows 2 or 4 photos, only 1, 3 or 5. */
.gallery a.lb-only{display:none;}
/* Fewer than 5 real photos: fewer visible slots, never an asymmetric 2- or 4-tile row. */
.gallery.g1{grid-template-columns:1fr;grid-template-rows:400px;}
.gallery.g1 a:first-child{grid-row:auto;}
.gallery.g3{grid-template-columns:2fr 1fr;grid-template-rows:190px 190px;}
.allphotos{position:absolute;right:14px;bottom:14px;background:#fff;border:1px solid var(--line-2);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px;cursor:pointer;box-shadow:var(--shadow-pill);}

/* Full-screen gallery (lightbox) */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(15,26,30,.94);display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;animation:lbfade .18s ease;}
.lightbox[hidden]{display:none;}
@keyframes lbfade{from{opacity:0;}to{opacity:1;}}
.lb-stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1200px,92vw);}
.lb-stage img{max-width:100%;max-height:82vh;max-height:82dvh;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.5);object-fit:contain;background:#0b1417;transition:opacity .18s ease;}
/* While the next photo decodes, fade the stage out rather than leaving the previous one on screen (which read
   as "the click did nothing, then it jumped"). Cleared on load/error, and synchronously for cached hits. */
.lightbox.is-loading .lb-stage img{opacity:0;}
.lb-count{color:#cdd9dc;font-size:13px;font-weight:600;letter-spacing:.02em;}
.lb-nav,.lb-close{border:none;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.26);}
.lb-nav{width:52px;height:52px;font-size:26px;flex:0 0 auto;}
.lb-close{position:absolute;top:20px;right:20px;width:44px;height:44px;font-size:22px;}
@media(max-width:640px){.lb-nav{width:42px;height:42px;font-size:21px;}.lb-stage img{max-height:74vh;max-height:74dvh;}}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:40px;padding-bottom:60px;}
.block{padding:24px 0;border-top:1px solid var(--line);}
.block:first-child{border-top:none;padding-top:0;}
.block h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px;}
.lead{font-size:15.5px;color:var(--muted);max-width:64ch;}
/* The product description fills its column, exactly like every sibling block. The 64ch cap above is a sensible
   default for a page-hero lead, but in the detail body it left the description 185px (23%) narrower than the
   inclusions grid and the info table right beneath it — the copy looked truncated next to a band of dead space.
   `.wrap` already bounds the column (~790px ≈ 95ch), so this stays readable rather than running edge to edge.
   Scoped to `.cols` so the hero leads on Home/FAQ/Contact/Agencies, which share the bare `.lead` class, are
   untouched. */
.cols .lead{max-width:none;}

.dl{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;color:var(--teal-d);background:#fff;border:1.5px solid var(--teal-d);border-radius:10px;padding:8px 14px;cursor:pointer;white-space:nowrap;}
.dl:hover{background:var(--teal-50);}
.hl{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
.hl .h{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;}
.hl .h i{color:var(--teal);font-size:21px;margin-top:1px;flex:0 0 auto;}

.tl .node{display:flex;gap:16px;}
/* position:static defeats the global sticky `.rail` (sidebar) whose class this timeline column reuses —
   without it the day badge detaches and floats on scroll. Scoped to `.tl` so the real sidebar rail is untouched. */
.tl .rail{flex:0 0 40px;display:flex;flex-direction:column;align-items:center;position:static;}
.tl .dn{width:40px;height:40px;border-radius:12px;background:var(--teal);color:#fff;font-weight:800;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;flex:0 0 auto;}
.tl .dn small{font-size:8.5px;font-weight:600;opacity:.85;text-transform:uppercase;}
.tl .line{flex:1;width:2px;background:var(--line-2);margin:6px 0;}
.tl .node:last-child .line{display:none;}
.tl .nb{padding-bottom:22px;flex:1;min-width:0;}
.tl .nb .nt{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;margin:0;}
.tl .nb .nt i{color:var(--teal-d);font-size:18px;}
.tl .nb .nd{font-size:14.5px;color:var(--muted);margin-top:5px;max-width:80ch;}

/* Program hotels — image-less cards: name + tier, zone, intro, amenities, nearby POIs. */
.photels{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.phc{border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;background:var(--card,#fff);}
.phc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.phc-h .phc-n{font-size:15.5px;font-weight:800;line-height:1.25;}
.phc-h .phc-t{flex:none;background:var(--sand,#F3EEE3);color:var(--amber-d);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap;}
.phc-z{font-size:13px;color:var(--faint);margin-top:4px;display:flex;align-items:center;gap:5px;}
.phc-i{font-size:13px;color:var(--muted);margin:9px 0 0;line-height:1.5;}
.phc-am{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.phc-am .phc-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);background:var(--line-1,#F4F6F5);border-radius:999px;padding:3px 10px;}
.phc-am .phc-chip i{font-size:12px;color:var(--teal-d);}
.phc-poi{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.phc-poi .phc-poi-l{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);}
.phc-poi .phc-poi-i{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);}
.phc-poi .phc-poi-i i{font-size:13px;color:var(--teal-d);}
.phc-poi .phc-poi-i b{font-weight:600;color:var(--faint);}

.incl{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;}
.incl .r{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;}
.incl .r i{font-size:18px;line-height:1.2;flex:0 0 auto;}
.incl .r p{margin:0;display:inline;}
.incl .r.yes i{color:var(--green);}
.incl .r.no i{color:var(--faint);}
/* Included / not included shown as two labelled columns on desktop, stacked on mobile. */
.incl-split{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;align-items:start;}
.incl-col h2{margin:0 0 12px;}
.incl-list{display:grid;grid-template-columns:1fr;gap:10px;}
.incl-list .r{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45;}
.incl-list .r i{font-size:18px;line-height:1.2;flex:0 0 auto;}
.incl-list .r p{margin:0;display:inline;}
.incl-list .r.yes i{color:var(--green);}
.incl-list .r.no i{color:var(--faint);}
@media(max-width:700px){.incl-split{grid-template-columns:1fr;gap:18px;}}

.booking{position:sticky;top:84px;height:fit-content;border:1px solid var(--line-2);border-radius:16px;padding:20px;box-shadow:var(--shadow-float);}
.booking .from{font-size:13px;color:var(--faint);}
.booking .price{font-size:30px;font-weight:800;letter-spacing:-.02em;}
.booking .price small{font-size:13.5px;font-weight:600;color:var(--muted);}
.booking .basis{font-size:12.5px;color:var(--faint);margin-top:2px;}
.booking .cta{width:100%;margin-top:16px;background:var(--teal-d);color:#fff;border:none;font-family:inherit;font-size:15px;font-weight:800;padding:13px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.booking .cta:hover{background:#085a6f;}
.booking .wa{width:100%;margin-top:10px;background:#fff;color:var(--teal-d);border:1px solid var(--teal-d);font-family:inherit;font-size:14px;font-weight:700;padding:11px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.booking .facts{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;}
.booking .facts .f{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);padding:5px 0;}
.booking .facts .f i{color:var(--teal);font-size:18px;}
.booking .agent{margin-top:16px;background:var(--sand);border-radius:11px;padding:12px 14px;font-size:13px;color:var(--ink);}
.booking .agent a{color:var(--teal-d);font-weight:800;}

@media(max-width:880px){
  .cols{grid-template-columns:1fr;gap:0;}
  .booking{position:static;margin-top:24px;}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:160px 160px;}
  .gallery a:first-child{grid-row:1/2;grid-column:1/3;}
  .gallery.g1{grid-template-rows:220px;}
  .gallery.g1 a:first-child{grid-row:auto;grid-column:auto;}
  .hl,.photels,.incl{grid-template-columns:1fr;}
}

/* ============================================================
   Hotel public detail page (/hotel/{slug})
   Reuses crumb/titlerow/sub/badges/gallery/cols/block/booking (above).
   ============================================================ */
.sub .stars{font-size:15px;}
.am{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px;}
.am .a{display:flex;gap:10px;align-items:center;font-size:14.5px;}
.am .a i{color:var(--teal);font-size:20px;flex:0 0 auto;}
.rooms{display:flex;flex-direction:column;gap:14px;}
/* No room photos for now (see the comment in Hotels/Detail.cshtml) — a single column, not the
   160px-image + body grid this used when .rph rendered. Restore `grid-template-columns:160px 1fr` and
   `.room .rph{height:130px;}` alongside the markup once room images are available. */
.room{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr;}
.room .rb{padding:13px 16px;}
.room .rn{font-size:15.5px;font-weight:800;}
.room .rd{font-size:13.5px;color:var(--muted);margin-top:4px;}
.room .rf{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;}
.room .tag{font-size:12px;color:var(--muted);background:#EEF3F2;border-radius:7px;padding:3px 10px;display:flex;align-items:center;gap:5px;}
.loc-addr{display:flex;align-items:center;gap:7px;font-size:14.5px;color:var(--muted);margin:-6px 0 14px;}
.loc-addr i{color:var(--teal);font-size:16px;}
.lm{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;}
.lm .l{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid var(--line);padding:7px 0;}
.lm .l span:first-child{display:flex;align-items:center;gap:7px;}
.lm .l i{color:var(--teal);font-size:16px;}
.lm .l b{font-weight:700;color:var(--ink);}
/* Real Leaflet map (hotel's own coordinates + a single .spin pin) — replaced the old decorative background-
   image placeholder box. #CFE3E7 shows briefly as the tile background while Leaflet loads/renders. */
.mapph{height:200px;border-radius:14px;background:#CFE3E7;position:relative;overflow:hidden;}

@media(max-width:880px){.am,.lm,.room{grid-template-columns:1fr;}}

/* Service public detail (/service/{slug}) — reuses crumb/titlerow/gallery/incl/lm/booking; only the note box is new. */
.note{background:var(--amber-50);color:var(--amber-d);border-radius:11px;padding:12px 15px;font-size:13.5px;display:flex;gap:9px;align-items:flex-start;}
.note i{font-size:19px;margin-top:1px;flex:0 0 auto;}

/* Month strip — the year at a glance. Twelve equal cells colour-coded by commercial level. Colour is never
   the only signal: each cell carries its level as text, for colour-blind readers and for a printed proposal. */
.mstrip{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;margin:14px 0 8px;}
.mcell{padding:8px 2px;text-align:center;border-radius:4px;font-size:11px;line-height:1.25;}
.mcell .mm{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.mcell .ml{display:block;font-size:9.5px;opacity:.75;}
.mcell.peak{background:#B3261E;color:#fff;}
.mcell.high{background:#E5A00D;color:#1c1c1c;}
.mcell.shoulder{background:#7FB069;color:#12220c;}
.mcell.low{background:#E7E3DA;color:#3a3a3a;}
.mcell.none{background:#F2F0EB;color:#7a7a7a;}
.mlegend{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0 0 18px;font-size:12px;color:var(--muted);}
.mlegend li{display:flex;align-items:center;gap:5px;}
.mlegend .sw{width:11px;height:11px;border-radius:3px;display:inline-block;}
.mlegend .sw.peak{background:#B3261E;}
.mlegend .sw.high{background:#E5A00D;}
.mlegend .sw.shoulder{background:#7FB069;}
.mlegend .sw.low{background:#E7E3DA;}
.mlegend .sw.none{background:#F2F0EB;}
/* Reflow ladder for the strip. Twelve cells only stay legible on a wide viewport; below that the year wraps
   rather than shrinking the cells to slivers. The level stays written in every cell at every width — hiding
   it on small screens would leave colour as the only signal, which is exactly what the partial promises not
   to do (and what a colour-blind reader, or a printed proposal, cannot recover). */
@media (max-width:900px){
  .mstrip{grid-template-columns:repeat(6,1fr);}
}
@media (max-width:560px){
  .mstrip{grid-template-columns:repeat(4,1fr);gap:5px;}
  .mcell{padding:6px 4px;}
  .mcell .mm{font-size:11px;}
  .mcell .ml{font-size:9.5px;line-height:1.25;}
}

/* Event four-fact header — the answers, before any prose. Colour carries the MICE reading but never
   alone: the label states it in words. */
.efacts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 22px;}
.efact{border:1px solid var(--line);border-radius:8px;padding:11px 12px;background:var(--card,#fff);}
.efact .ek{display:flex;align-items:center;gap:6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.efact .ev{display:block;margin-top:5px;font-weight:800;font-size:15px;}
.efact .en{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.35;}
.efact.ok{border-color:#7FB069;}
.efact.bad{border-color:#B3261E;}
.efact.neutral{border-color:var(--line);}
@media (max-width:820px){ .efacts{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .efacts{grid-template-columns:1fr;} }

/* Seasons listed inside a destination guide. */
.eguide{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px;}
.eguide a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;text-decoration:none;}
.eguide a:hover{border-color:var(--teal-d,#0F6E78);}

/* Month matrix — where / what to offer / why. On a country calendar the table IS the page. */
.mmatrix{width:100%;border-collapse:collapse;margin:10px 0 24px;font-size:14px;}
.mmatrix th,.mmatrix td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line);}
.mmatrix th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
/* Spanish, Portuguese and Russian give lowercase month abbreviations ("ene", "fev"), which read as a typo in
   a heading column. Uppercased in CSS rather than in the data, so the month stays a culture-formatted value. */
.mmatrix .mo{font-weight:800;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;}
.mmatrix .mnone{color:var(--muted);font-style:italic;}
.mwrap{overflow-x:auto;}

/* On a phone the four columns collapse to unreadable slivers, and a horizontally scrolling table hides the
   "why" — the column that carries the reasoning. Below 760px each month becomes its own card: the month is
   the card heading, the other three cells stack and label themselves from data-l (which the view fills from
   the same resource keys as the <th>, so the labels stay translated and cannot drift from the header). */
@media (max-width:760px){
  .mwrap{overflow-x:visible;}
  .mmatrix,.mmatrix tbody,.mmatrix tr,.mmatrix td{display:block;width:100%;}
  .mmatrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .mmatrix{margin:12px 0 24px;}
  .mmatrix tr{border:1px solid var(--line-2,#DCE4E3);border-radius:14px;padding:14px 16px 12px;margin:0 0 12px;background:#fff;}
  .mmatrix td{border:0;padding:0 0 10px;}
  .mmatrix td:last-child{padding-bottom:0;}
  .mmatrix td::before{content:attr(data-l);display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 3px;}
  /* The month heads the card, so it needs no label of its own. */
  .mmatrix .mo{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--teal-d,#0F6E78);padding-bottom:6px;}
  .mmatrix .mo::before{content:none;}
}

/* "What to do here" — a scannable list, not a paragraph. */
.hlist{list-style:none;padding:0;margin:6px 0 4px;display:grid;gap:9px;}
.hlist li{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding-bottom:9px;border-bottom:1px solid var(--line);}
.hlist li:last-child{border-bottom:0;padding-bottom:0;}
.hlist .hn{font-weight:700;}
.hlist .hh{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.hlist .hd{grid-column:1 / -1;font-size:13.5px;color:var(--muted);line-height:1.45;}

/* Client-profile chips — who to sell it to, at a glance. Tinted rather than outlined: on a page that is
   otherwise white cards on white, a bare border made this block disappear between the highlight list and the
   section grid. It borrows the .dgcard treatment already used for highlighted cards, so it reads as
   emphasis the site already speaks, not a new one. The body text is --ink rather than --muted because muted
   grey on a tinted ground loses too much contrast. */
.pchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:8px 0 4px;}
.pchip{background:var(--teal-50);border:1px solid var(--line-2);border-radius:14px;padding:14px 16px;}
.pchip b{display:block;font-size:13.5px;font-weight:800;color:var(--teal-d);margin-bottom:4px;letter-spacing:-.005em;}
.pchip span{font-size:13.5px;color:var(--ink);line-height:1.5;}

/* ============================================================
   Right-side navigation drawer (mobile + desktop). Trigger = the ☰ button in the header (after the user icon);
   panel slides in from the right. Mounted at body level (outside the header's backdrop-filter). Holds the quick
   links, favorites ("My lists"), account actions and — the key mobile fix — the language selector.
   ============================================================ */
.nvd{position:fixed;inset:0;z-index:1100;}
.nvd[hidden]{display:none;}
.nvd-scrim{position:absolute;inset:0;background:rgba(14,42,51,.5);backdrop-filter:blur(2px);opacity:0;transition:opacity .28s ease;}
.nvd.open .nvd-scrim{opacity:1;}
.nvd-panel{position:absolute;top:0;right:0;height:100%;height:100dvh;width:min(360px,88vw);background:#fff;box-shadow:-16px 0 50px rgba(14,40,46,.24);display:flex;flex-direction:column;padding:16px 14px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform;}
.nvd.open .nvd-panel{transform:none;}
.nvd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 4px 14px;}
.nvd-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.nvd-nav{display:flex;flex-direction:column;gap:1px;}
.nvd-nav a{display:flex;align-items:center;gap:13px;padding:12px;border-radius:11px;font-weight:600;font-size:15px;color:var(--ink);transition:background .14s,color .14s;}
.nvd-nav a i{font-size:20px;color:var(--teal-d);width:24px;text-align:center;flex:none;}
.nvd-nav a:hover,.nvd-nav a:focus-visible{background:var(--teal-50);color:var(--teal-d);}
.nvd-div{height:1px;background:var(--line-2);margin:12px 6px;}
.nvd-cta{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:11px;background:var(--teal-d);color:#fff;font-weight:700;font-size:15px;margin:3px 2px;}
.nvd-cta:hover{background:#085a6f;}
.nvd-cta i{font-size:19px;}
.nvd-cta-ghost{background:none;color:var(--muted);border:1px solid var(--line-2);width:100%;font-family:inherit;cursor:pointer;}
.nvd-cta-ghost:hover{background:#F4F6F5;color:var(--ink);}
.nvd-logoutf{margin:0;}
.nvd-lang{margin-top:auto;padding-top:16px;}
.nvd-lang-h{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:0 6px 9px;}
.nvd-lang-h i{font-size:15px;}
.nvd-lang-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.nvd-lang-opts a{padding:11px 12px;border-radius:10px;border:1px solid var(--line-2);font-weight:600;font-size:14px;text-align:center;color:var(--ink);transition:background .14s,border-color .14s,color .14s;}
.nvd-lang-opts a:hover{background:var(--teal-50);border-color:var(--teal);color:var(--teal-d);}
.nvd-lang-opts a.on{background:var(--teal-d);color:#fff;border-color:var(--teal-d);}
@media (prefers-reduced-motion: reduce){.nvd-panel,.nvd-scrim{transition:none;}}

/* ============================================================
   User data (client-side): favorites, share, saved searches.
   Per-visitor state is applied AFTER SSR (cache-safe).
   ============================================================ */
/* Favorite heart as a button (home + result cards). Active ("saved") state reads brand blue and stays clearly
   visible over any photo (the filled glyph keeps home.css's white drop-shadow). The .card .cph .heart.on
   selector is intentionally more specific than home.css's `.card .cph .heart{color:#fff}` so the active colour
   actually wins the cascade. The filled heart is the Phosphor fill weight (`ph-fill ph-heart`, loaded in
   _Layout); the icon inherits its colour from the button, so no per-glyph colour rule is needed. */
.card .cph .heart{background:none;border:none;padding:6px;}
.card .cph .heart.on,.heart.on{color:var(--teal);}
.topacts button.on{border-color:var(--teal);color:var(--teal-d);background:var(--teal-50);}

/* SERP result tools (save / share / sort) */
.rtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rtool{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:13px;font-weight:700;color:var(--ink);background:#fff;border:1px solid #DCE4E3;border-radius:9px;padding:7px 12px;cursor:pointer;}
.rtool:hover{background:#F4F6F5;}
.rtool .ph{font-size:16px;color:var(--teal);}

/* Favorites / saved-searches pages */
.userdata{padding:26px var(--gutter) 60px;}
.userdata h1{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.02em;}
.userdata .lead{margin:8px 0 22px;}
/* "My lists" sections (Favorites + Saved searches on one screen) — each block clearly typed with a header. */
.userdata-sec{margin-bottom:36px;}
.userdata-h2{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line-2);}
.userdata-h2 .ph{color:var(--teal);font-size:18px;}
.userdata-sec .userdata-empty{padding:26px 0;}
.userdata-empty{text-align:center;color:var(--muted);padding:40px 0;}
.userdata-empty i{font-size:36px;color:var(--teal);display:block;margin-bottom:12px;}
.userdata-empty p{margin-bottom:18px;}
/* Filled primary CTA, refined pill (the outline .dl is for inline detail-page links). */
.userdata-empty .dl,.userdata-cta .dl{background:var(--teal-d);color:#fff;border-color:var(--teal-d);border-radius:var(--r-pill);padding:10px 22px;font-size:14px;}
.userdata-empty .dl:hover,.userdata-cta .dl:hover{background:#085a6f;}
.userdata-empty .dl i,.userdata-cta .dl i{font-size:16px;color:#fff;display:inline;margin:0;}
/* Single shared "Explore" CTA centered under both sections. */
.userdata-cta{display:flex;justify-content:center;margin-top:8px;}

.saved-list{display:flex;flex-direction:column;gap:10px;max-width:640px;}
.saved-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;}
.saved-link{display:flex;align-items:flex-start;gap:9px;font-weight:700;color:var(--ink);min-width:0;}
.saved-link>.ph{color:var(--teal);margin-top:2px;flex:0 0 auto;}
.saved-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.saved-title{font-weight:700;color:var(--ink);}
.saved-sub{font-weight:600;font-size:12.5px;color:var(--muted);}
.saved-del{background:none;border:none;cursor:pointer;color:var(--faint);font-size:18px;}
.saved-del:hover{color:#d23;}

/* Remove button on each favorites card (overlay in the top-right corner) */
.scard-wrap{position:relative;}
.scard-wrap .mid{padding-right:40px;}
.fav-del{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-pill);transition:color .15s,border-color .15s,background .15s;z-index:2;}
.fav-del:hover{color:#d23;border-color:#f3c0c0;background:#fff5f5;}
.fav-del i{font-size:17px;}

/* Rich text coming from the DB (descriptions/intros may contain <p>, <ul>, <strong>, etc.) */
.lead p, .nd p, .rd p { margin: 0 0 10px; }
.lead p:last-child, .nd p:last-child, .rd p:last-child { margin-bottom: 0; }
.lead ul, .lead ol, .nd ul, .rd ul { margin: 8px 0; padding-left: 20px; }
.lead li, .nd li, .rd li { margin: 3px 0; }
.lead strong, .nd strong { color: var(--ink); font-weight: 700; }
.lead a, .nd a, .rd a { color: var(--teal-d); text-decoration: underline; }

/* ============================================================
   Search controls — date-range + passengers popovers
   ============================================================ */
.fields .f[data-control]{position:relative;cursor:pointer;}
.fields .f[data-control] .v{cursor:pointer;}
/* .popover + .cal-* moved to datepicker.css (shared by B2C and the Portal). */
.stepper{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:9px 2px;font-size:14px;font-weight:600;}
.stepper .ctl{display:flex;align-items:center;gap:12px;}
.stepper .ctl button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;font-size:17px;line-height:1;color:var(--teal-d);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;}
.stepper .ctl button:hover{border-color:var(--teal);background:var(--teal-50);}
.stepper .ctl b{min-width:18px;text-align:center;font-weight:700;}

/* Leaflet price-tag markers. The Leaflet icon root (.rl-pin) is a 0×0 anchor at the exact coordinate; the
   .mpin pill floats centred just above it via transform, with a little tail (::after) pointing to the point.
   This keeps variable-width price tags correctly anchored at any zoom. */
.rl-pin{width:0;height:0;}
/* A clean price pill centred on the coordinate — no downward tail. */
.mpin{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;background:#fff;color:var(--ink);font-size:13px;font-weight:800;padding:7px 11px;border-radius:999px;white-space:nowrap;cursor:pointer;box-shadow:0 4px 14px rgba(20,40,46,.28);transition:transform .12s,background .12s,color .12s,box-shadow .12s;}
.mpin i{font-size:12px;color:var(--teal);}
/* .on = cheapest in view; .hl = synced with a hovered/clicked card. Both read as the brand teal. */
.mpin.on{background:var(--teal-d);color:#fff;}
.mpin.on i{color:#fff;}
.mpin.hl{background:var(--teal-d);color:#fff;z-index:600;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 8px 22px rgba(11,142,171,.45);}
.mpin.hl i{color:#fff;}
/* No-price marker (all product is on-request today, so this is the common hotel-map marker): a tidy round
   icon pin — just a clear hotel glyph, never a price pill with a bare "·" dot beside it. Crisp at mobile DPI. */
.mpin-icon{gap:0;width:34px;height:34px;padding:0;justify-content:center;border:1.5px solid var(--teal);}
.mpin-icon i{font-size:16px;color:var(--teal);}
.mpin-icon.hl{border-color:#fff;}
/* Clustered-pins bubble (markercluster) — a brand teal circle with the child count, matching the pin family. */
.rl-cluster-wrap{background:none;border:none;}
.rl-cluster{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--teal-d);color:#fff;font-weight:800;font-size:14px;border:2.5px solid #fff;box-shadow:0 4px 14px rgba(20,40,46,.32);}
.leaflet-marker-icon:focus-visible .mpin{outline:2px solid var(--teal-d);outline-offset:2px;}
/* Single-location pin (hotel detail's "Location" map) — just the marker, no price/label, same brand teal as
   .mpin's highlighted state so every pin on the site reads consistently. A plain circle (not a teardrop) so
   it stays centred on the coordinate with no rotation math. */
.spin{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:30.6px;height:30.6px;border-radius:50%;background:var(--teal-d);border:2.6px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14.5px;box-shadow:0 4px 14px rgba(20,40,46,.32);}

/* Branded error / not-found pages. */
.errpage{min-height:46vh;}
.errpage .phero{text-align:center;max-width:600px;margin:52px auto 0;}
.errpage .phero .cbtn{margin-top:20px;}

/* Destination landing page (data-driven from real products). */
/* Match the standard .wrap content width (1240px) so it lines up with search/explore/detail. */
.destpage{max-width:1240px;padding:24px var(--gutter) 60px;}
.destpage .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap;}
.destpage .crumb a{color:var(--teal-d);font-weight:600;}
.destpage .crumb i{font-size:12px;color:var(--faint);}
.destpage .phero{margin:0 0 8px;}
.destpage .phero .eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--teal-d);background:var(--teal-50);padding:5px 11px;border-radius:var(--r-pill);}
.destpage .phero h1{font-size:clamp(28px,4vw,40px);line-height:1.12;margin:14px 0 0;letter-spacing:-.01em;}
.destpage .phero .lead{font-size:17px;color:var(--muted);margin:12px 0 0;max-width:70ch;}
.dfacts{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:14px;font-weight:600;color:var(--ink);}
.dfacts span{display:inline-flex;align-items:center;gap:7px;}
.dfacts i{color:var(--teal);font-size:17px;}

/* Photo hero: city image behind the title with a teal scrim (real master on disk, or the branded placeholder). */
.destpage .phero-photo{position:relative;border-radius:20px;overflow:hidden;min-height:300px;padding:34px;margin:0 0 8px;display:flex;flex-direction:column;justify-content:flex-end;}
.destpage .phero-photo .phero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.destpage .phero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,52,64,.30) 0%,rgba(6,32,40,.32) 45%,rgba(5,26,33,.86) 100%);}
.destpage .phero-photo .phero-in{position:relative;z-index:2;}
.destpage .phero-photo .eyebrow{background:rgba(255,255,255,.18);color:#fff;}
.destpage .phero-photo h1{color:#fff;text-shadow:0 3px 20px rgba(0,0,0,.45);}
.destpage .phero-photo .lead{color:rgba(255,255,255,.94);text-shadow:0 2px 14px rgba(0,0,0,.4);max-width:70ch;}
.destpage .phero-photo .dfacts{color:#fff;}
.destpage .phero-photo .dfacts i{color:var(--gold,#E8BF7D);}
.dsec{margin:36px 0 0;}
.dsec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;}
.dsec-h h2{font-size:21px;margin:0;letter-spacing:-.01em;}
.dsec-h h3{font-size:18px;margin:0;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;}
.dsec-h h3 i{color:var(--teal);font-size:19px;}
.dsec-h a{font-size:14px;font-weight:700;color:var(--teal-d);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}

/* Destination editorial: intro description, B2B trade guide, useful info. */
.dprose{max-width:74ch;}
.dprose p{font-size:16px;line-height:1.72;color:var(--ink);margin:0 0 12px;}
.dprose p:last-child{margin-bottom:0;}
.dintro{margin:22px 0 0;}
.dintro .dprose{max-width:none;}
/* Prose that sits directly under a full-width element (the month strip, the matrix). The 74ch measure is
   right for a column of text on its own, but under a full-width band it leaves the paragraph stranded in the
   left half of the container and reads as a layout fault. These blocks take the container's width. */
.dprose-wide{max-width:none;}
.dintro .dprose p{color:var(--muted);}
/* Destination-guide sections as a tidy two-per-row card grid (collapses to one column on mobile). */
.gsecs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:6px 0 0;}
.gsec{background:#fff;border:1px solid var(--line-2,#DCE4E3);border-radius:16px;padding:22px 24px;}
.gsec h2{font-size:18px;margin:0 0 10px;letter-spacing:-.01em;display:flex;align-items:flex-start;gap:10px;line-height:1.3;}
.gsec h2 i{color:var(--teal);font-size:20px;flex:none;position:relative;top:1px;}
.gsec p{font-size:15px;line-height:1.68;color:var(--muted);margin:0;}
@media(max-width:720px){.gsecs{grid-template-columns:1fr;}}
/* Row of cross-link buttons (guide + country×type pages) — spaced, wraps on narrow screens. */
.dxlinks{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
/* A cross-link button closing a section. Global `p{margin:0}` left it sitting on the paragraph above, so it
   read as part of the prose rather than as an action; this gives it its own air and keeps it flush-left with
   the text block it follows. */
.dsec-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0 0;}
.dguide{margin:40px 0 0;}
.dguide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.dgcard{background:var(--teal-50,#EAF6F8);border:1px solid var(--line-2,#DCE4E3);border-radius:16px;padding:20px 20px 18px;}
.dgcard h3{font-size:15.5px;margin:0 0 10px;display:flex;align-items:center;gap:9px;letter-spacing:-.005em;}
.dgcard h3 i{color:var(--teal-d);font-size:19px;}
.dgcard p{font-size:14.5px;line-height:1.62;color:var(--ink);margin:0 0 9px;}
.dgcard p:last-child{margin-bottom:0;}
.duseful{margin:36px 0 0;background:var(--sand-50,#F7F3EC);border:1px solid var(--line-2,#DCE4E3);border-radius:16px;padding:22px 22px 18px;}
.duseful .dsec-h{margin-bottom:10px;}
.duseful .dprose p{font-size:14.5px;color:var(--muted);}

/* Destinations index (hub): country sections + destination cards with image. */
.dxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.dxcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2,#DCE4E3);border-radius:16px;overflow:hidden;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.dxcard:hover{border-color:var(--teal);box-shadow:0 12px 30px rgba(20,40,46,.12);transform:translateY(-2px);}
.dxthumb{display:block;aspect-ratio:16/10;background:var(--teal-50,#EAF6F8);overflow:hidden;}
.dxthumb rl-img,.dxthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.dxcard:hover .dxthumb img{transform:scale(1.04);}
.dxthumb img{transition:transform .3s ease;}
.dxbody{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;}
.dxname{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.005em;}
.dxname i{color:var(--teal-d);font-size:16px;flex:none;transition:transform .15s ease;}
.dxcard:hover .dxname i{transform:translateX(3px);}
.dxteaser{font-size:13.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* Guides hub: three columns, text first and a small square photo on the right. Deliberately NOT the
   /destinations card — both hubs cover the same 29 places, and two identical grids one click apart read as
   the same page twice. Here the words lead, because a guide is chosen by what it says. */
.gxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gxgrid .dxcard{flex-direction:row;align-items:stretch;gap:0;}
.gxgrid .dxbody{flex:1;min-width:0;justify-content:center;padding:13px 14px;}
.gxgrid .dxthumb{flex:none;width:92px;aspect-ratio:auto;align-self:stretch;border-left:1px solid var(--line-2,#DCE4E3);}
@media (max-width:1000px){ .gxgrid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .gxgrid{grid-template-columns:1fr;} }
/* One hard fact under a card's name — the season window on /seasons. Sits between the name and the teaser
   so the hub answers "when" without a click. */
.dxmeta{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--teal-d,#0F6E78);font-weight:700;}

/* Auth: header signed-in chip + logout button, and the login error banner. */
.userchip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;max-width:160px;}
.userchip .full{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logoutf{display:inline-flex;margin:0;padding:0;}
.logoutf button{background:none;border:none;cursor:pointer;font:inherit;color:inherit;padding:0;display:inline-flex;align-items:center;}
.autherr{display:flex;align-items:center;gap:8px;background:#FDECEC;color:#B42318;border:1px solid #F3C0BD;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:14px;}
.autherr i{font-size:16px;}

/* ---------- Toasts (confirmations / errors) ---------- */
.rl-toasts{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.rl-toast{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border:1px solid var(--line-2);border-left:4px solid var(--teal);border-radius:12px;padding:12px 16px;box-shadow:0 12px 32px rgba(20,40,46,.20);font-size:14px;font-weight:600;max-width:340px;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease;}
.rl-toast.in{opacity:1;transform:none;}
.rl-toast i{font-size:18px;}
.rl-toast--success{border-left-color:var(--teal);}.rl-toast--success i{color:var(--teal-d);}
.rl-toast--error{border-left-color:#D92D20;}.rl-toast--error i{color:#D92D20;}
.rl-toast--info{border-left-color:var(--amber-d);}.rl-toast--info i{color:var(--amber-d);}
@media(max-width:600px){.rl-toasts{left:12px;right:12px;top:12px;}.rl-toast{max-width:none;}}

/* ---------- Loading skeletons (search results) ---------- */
.sk{pointer-events:none;}
.sk-box{background:linear-gradient(90deg,#eceeee 25%,#f5f7f7 37%,#eceeee 63%);background-size:400% 100%;animation:sk-shimmer 1.3s ease infinite;border-radius:8px;}
.sk-thumb{flex:0 0 150px;height:130px;border-radius:10px;}
.sk-lines{flex:1;display:flex;flex-direction:column;gap:10px;}
@keyframes sk-shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* ---------- Button loading spinner (tap feedback) ---------- */
.is-loading{position:relative;color:transparent!important;pointer-events:none;}
.is-loading>*{visibility:hidden;}
.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;animation:rl-spin .6s linear infinite;}
/* On light/ghost buttons the white spinner would be invisible — use the brand teal so it reads on any bg. */
.pbtn-sec.is-loading::after,.pbtn.ghost.is-loading::after,.ghost.is-loading::after,.paddq.is-loading::after,.cbtn.sec.is-loading::after,.pcart-hx.is-loading::after{border-color:rgba(14,110,134,.28);border-top-color:var(--teal-d);}
@keyframes rl-spin{to{transform:rotate(360deg);}}

/* Leaflet popup: strip the default chrome so our .mapinfo-card fills it edge-to-edge. */
.rl-popup .leaflet-popup-content-wrapper{padding:0;border-radius:13px;overflow:hidden;box-shadow:0 14px 36px rgba(20,40,46,.30);}
.rl-popup .leaflet-popup-content{margin:0;width:310px!important;}
/* Softly rounded popup tip, echoing the pill corners. */
.rl-popup .leaflet-popup-tip{border-radius:0 0 4px 0;}
/* Close affordance: original size, just nudged a few px off the top/right edges so it isn't flush to the
   corner. The extra .leaflet-container prefix outranks Leaflet's own ".leaflet-container a..." rule. */
.leaflet-container .rl-popup .leaflet-popup-close-button{z-index:3;width:24px;height:24px;right:9px;top:9px;color:var(--ink);font-size:18px;line-height:24px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 6px rgba(0,0,0,.25);}
.leaflet-container .rl-popup .leaflet-popup-close-button:hover{color:var(--teal-d);background:#fff;}

/* ---------- Filter facets (data-driven rail) ---------- */
.opts{display:flex;flex-direction:column;}
.opts.scroll{max-height:212px;overflow-y:auto;margin-right:-6px;padding-right:6px;}
.opts.scroll::-webkit-scrollbar{width:6px;}
.opts.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px;}
.opt{display:flex;align-items:center;gap:10px;font-size:13.5px;padding:5px 0;cursor:pointer;user-select:none;line-height:1;}
.opt .box{position:relative;width:18px;height:18px;border:1.5px solid #C3CFCE;border-radius:5px;flex:0 0 auto;transition:background .12s,border-color .12s;}
.opt:hover .box{border-color:var(--teal);}
.opt .box.on{background:var(--teal);border-color:var(--teal);}
.opt .box.on::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-58%) rotate(45deg);}
.opt .stars{color:var(--amber-d);font-size:14px;line-height:1;letter-spacing:1.5px;}
.opt .opt-l{line-height:1.2;}
.opt .ct{margin-left:auto;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums;}

/* Result card intro (search results) + circuit duration chip in the meta line */
.scard .intro{font-size:13px;color:var(--muted);line-height:1.45;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.scard .zone i.ph-moon-stars{color:var(--teal);}

/* Mobile: results bar fills the line — sort segments and save/share stretch evenly */
@media(max-width:680px){
  .rbar{flex-direction:column;align-items:stretch;gap:10px;}
  .rtools{width:100%;flex-wrap:wrap;gap:8px;}
  .rtools .rtool{flex:1;justify-content:center;}
  .rtools .seg{flex-basis:100%;}
  .rtools .seg span{flex:1;text-align:center;}
}

/* Sidebar column = product-type switcher (nav) stacked above the filter rail */
.side{display:flex;flex-direction:column;gap:14px;min-width:0;}
.side .rail{position:static;}
.typeswitch{background:#fff;border:1px solid var(--line-2);border-radius:13px;padding:6px;display:flex;flex-direction:column;gap:2px;}
.typeswitch a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:9px;font-size:14px;font-weight:600;color:var(--muted);transition:background .12s,color .12s;}
.typeswitch a i{font-size:19px;}
.typeswitch a.on{background:var(--teal);color:#fff;}
.typeswitch a:not(.on):hover{background:var(--teal-50);color:var(--teal-d);}

/* ---------- Mobile header spacing + round icon-only buttons ---------- */
/* When the link text collapses, header links become icon-only — give them the same round hover as favorites. */
@media(max-width:920px){
  .hr .lnk{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%;}
}
/* ---------- Mobile footer spacing (horizontal gutter comes from the shared --gutter) ---------- */
@media(max-width:680px){
  footer .wrap{padding:36px var(--gutter) 24px;}
  .fcols{gap:24px;margin-bottom:22px;}
  .fbot{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* Card meta: location + (circuit) nights as separate chips — inline on desktop, stacked on mobile.
   Intros are hidden on mobile (compact list) and shown on desktop. */
.scard .zone{flex-wrap:wrap;gap:3px 10px;}
.scard .zone .loc,.scard .zone .nights{display:inline-flex;align-items:center;gap:6px;}
.scard .zone .nights i{color:var(--teal);}
@media(max-width:680px){
  .scard .zone{flex-direction:column;align-items:flex-start;gap:3px;}
  .scard .intro{display:none;}
  /* On the favorites page the intro is wanted context (few cards, not a dense SERP), so keep it on mobile too. */
  .userdata [data-favorites-list] .scard .intro{display:-webkit-box;}
}

/* ---------- Destination picker (modal on desktop, bottom sheet on mobile) ---------- */
.destpick{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;}
.destpick[hidden]{display:none;}
.destpick-overlay{position:absolute;inset:0;background:rgba(15,40,46,.45);backdrop-filter:blur(2px);}
.destpick-panel{position:relative;background:#fff;border-radius:18px;width:min(460px,92vw);max-height:74vh;max-height:74dvh;display:flex;flex-direction:column;box-shadow:var(--shadow-float);overflow:hidden;}
.destpick-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);}
.destpick-head > i{font-size:20px;color:var(--teal);flex:0 0 auto;}
.destpick-head input{flex:1;min-width:0;border:none;outline:none;font-family:inherit;font-size:16px;color:var(--ink);background:none;}
.destpick-x{border:none;background:#F4F6F5;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;}
.destpick-x:hover{background:var(--teal-50);} /* background tone only — icon keeps its colour (consistent close behaviour) */
.destpick-list{overflow-y:auto;padding:0 8px 8px;}
/* Full-bleed sticky group header (margin covers the list's side padding) with z-index above the scrolling
   items, so a scrolled item never peeks through/above it and the page never shows in a transparent strip. */
.destpick-country{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin:0 -8px;padding:12px 18px 6px;position:sticky;top:0;z-index:2;background:#fff;}
.destpick-item{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;font-family:inherit;font-size:15px;color:var(--ink);text-align:left;padding:11px 10px;border-radius:10px;cursor:pointer;}
.destpick-item:hover{background:var(--teal-50);}
.destpick-item i{font-size:18px;color:var(--teal);flex:0 0 auto;}
/* The item's label takes the slack so the trailing check pins to the right edge, not to the text. */
.destpick-item span{flex:1 1 auto;}
/* Current selection — including "Anywhere", which IS a state, not just an escape hatch. */
.destpick-item.is-on{background:var(--teal-50);font-weight:700;}
/* "Anywhere" reads as the reset it is: separated from the countries below, never as one of them.
   The rule is drawn in the gap below the button, not as its border-bottom: on the edge it sat flush against
   the is-on background and squared off the pill's lower corners, so the selected state and the separator
   collided. The button keeps the full radius it inherits from .destpick-item. */
.destpick-any{position:relative;margin-bottom:14px;}
.destpick-any::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--line);}
.destpick-empty{padding:24px;text-align:center;color:var(--muted);font-size:14px;}
@media(max-width:680px){
  .destpick{align-items:flex-end;}
  .destpick-panel{width:100%;max-height:88vh;max-height:88dvh;border-radius:18px 18px 0 0;}
}

/* ---------- Map info window (click a pin) ---------- */
/* Compact horizontal card (small thumb + body) so it fits inside the map strip at any pin position. */
.mapinfo{position:absolute;z-index:8;transform:translate(-50%,calc(-100% - 13px));width:min(290px,86vw);border-radius:13px;background:#fff;box-shadow:0 14px 36px rgba(20,40,46,.30);}
.mapinfo[hidden]{display:none;}
.mapinfo.below{transform:translate(-50%,15px);} /* shown under the pin near the top edge */
.mapinfo::after{content:"";position:absolute;left:50%;bottom:-6px;width:13px;height:13px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:0 0 3px 0;}
.mapinfo.below::after{bottom:auto;top:-6px;border-radius:3px 0 0 0;}
.mapinfo-x{position:absolute;right:7px;top:7px;z-index:3;width:24px;height:24px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.25);transition:background .12s;}
.mapinfo-x i{font-size:13px;line-height:1;}
.mapinfo-x:hover{background:#fff;} /* background tone only — icon keeps its colour (consistent close behaviour) */
.mapinfo-card{display:flex;align-items:stretch;border-radius:13px;overflow:hidden;background:#fff;}
.mapinfo-card:hover .mapinfo-name{color:var(--teal-d);}
.mapinfo-thumb{flex:0 0 88px;align-self:stretch;background:var(--teal-50);}
.mapinfo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.mapinfo-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px;padding-right:36px;}
.mapinfo-name{font-size:14px;font-weight:800;color:var(--ink);line-height:1.25;transition:color .12s;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mapinfo-stars{color:var(--amber-d);font-size:12px;letter-spacing:1px;}
.mapinfo-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;}
.mapinfo-price{font-size:14.5px;font-weight:800;color:var(--ink);white-space:nowrap;}
.mapinfo-price small{font-size:10.5px;font-weight:600;color:var(--faint);margin-right:2px;}
.mapinfo-see{font-size:12px;font-weight:700;color:var(--teal-d);white-space:nowrap;}

/* Google InfoWindow chrome overrides so our card fills the bubble with no white gaps. */
.gm-style-iw.gm-style-iw-c{padding:0!important;border-radius:14px!important;overflow:hidden!important;box-shadow:0 14px 36px rgba(20,40,46,.3)!important;}
.gm-style-iw-d{overflow:hidden!important;max-height:none!important;}
.gm-style-iw-c .mapinfo-content,.gm-style-iw-c .mapinfo-card{width:280px;max-width:84vw;}
.gm-style-iw-c button.gm-ui-hover-effect{top:6px!important;right:6px!important;width:28px!important;height:28px!important;background:rgba(255,255,255,.95)!important;border-radius:50%!important;box-shadow:0 1px 6px rgba(0,0,0,.25)!important;opacity:1!important;}
.gm-style-iw-c button.gm-ui-hover-effect>span{margin:7px!important;background-color:var(--ink)!important;}

/* Generic select popover (home omni per-product quick filter) */
.selitems{display:flex;flex-direction:column;gap:2px;min-width:190px;}
.selitem{text-align:left;border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:9px;cursor:pointer;}
.selitem:hover{background:var(--teal-50);color:var(--teal-d);}
.selitem.on{background:var(--teal);color:#fff;}

/* ── Content / marketing / auth pages (about, agencies, login, legal) ── */
/* Reading pages (about / terms / privacy / faq): use the standard 1240px content width so they line up
   with the rest of the site (search / explore / destination) rather than sitting in a narrower column.
   Error pages keep a narrow, centered message via .errpage .phero (max-width:600px), so they're unaffected. */
.cpage{max-width:1240px;padding:36px var(--gutter) 64px;}
.cpage .phero{max-width:none;margin:0 0 30px;}
.cpage .phero .eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--teal-d);background:var(--teal-50);padding:5px 11px;border-radius:var(--r-pill);}
.cpage .phero h1{font-size:clamp(28px,4vw,42px);line-height:1.12;margin:14px 0 0;letter-spacing:-.01em;}
.cpage .phero .lead{font-size:18px;color:var(--muted);margin:14px 0 0;}
.cpage .prose,.cpage .legal-doc,.cpage .about-doc{max-width:none;}
.cpage .prose h2{font-size:22px;margin:30px 0 8px;letter-spacing:-.01em;}
.cpage .prose p{color:var(--ink);margin:0 0 12px;}
.cpage .prose .muted{color:var(--muted);}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0;}
.feat .fc{border:1px solid var(--line-2);border-radius:var(--r-card);padding:20px;background:#fff;}
.feat .fc .ic{width:42px;height:42px;border-radius:11px;background:var(--teal-50);color:var(--teal-d);display:flex;align-items:center;justify-content:center;font-size:22px;}
.feat .fc h3{font-size:16px;margin:13px 0 5px;}
.feat .fc p{font-size:14px;color:var(--muted);margin:0;}
.cband{margin-top:34px;background:var(--sand);border-radius:var(--r-card);padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.cband h2{margin:0 0 4px;font-size:22px;}
.cband p{margin:0;color:var(--muted);}
.cband .acts{display:flex;gap:10px;flex-wrap:wrap;}
.cbtn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;padding:12px 20px;border-radius:var(--r-btn);text-decoration:none;cursor:pointer;border:none;font-family:inherit;}
.cbtn.pri{background:var(--teal-d);color:#fff;}
.cbtn.pri:hover{background:#085a6f;}
.cbtn.sec{background:#fff;color:var(--ink);border:1px solid var(--line-2);}
.cbtn.sec:hover{border-color:var(--teal);color:var(--teal-d);}
.cbtn:disabled,.cbtn.pri:disabled{background:var(--line-2);color:var(--faint);cursor:not-allowed;}
/* Auth / professional access */
/* Keep the page gutter on the horizontal axis — a bare "padding:.. 0 .." here would override .wrap's gutter
   and glue the card to the screen edges on narrow viewports. */
.authwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start;padding:36px var(--gutter) 64px;}
@media(max-width:820px){.authwrap{grid-template-columns:1fr;gap:24px;}}
.authwrap .pitch h1{font-size:clamp(26px,3.5vw,38px);line-height:1.14;margin:0 0 14px;letter-spacing:-.01em;}
.authwrap .pitch .lead{font-size:17px;color:var(--muted);margin:0 0 22px;}
.authwrap .pitch .blist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.authwrap .pitch .blist li{display:flex;gap:11px;align-items:flex-start;font-size:15px;}
.authwrap .pitch .blist i{color:var(--teal);font-size:20px;flex:0 0 auto;margin-top:1px;}
.authcard{border:1px solid var(--line-2);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:26px;background:#fff;}
.authcard h2{font-size:20px;margin:0 0 4px;}
.authcard .sub{font-size:14px;color:var(--muted);margin:0 0 18px;}
.authcard label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.authcard .fld{margin-bottom:14px;}
.authcard .frow2{display:flex;gap:12px;}
.authcard .frow2 .fld{flex:1;min-width:0;}
@media(max-width:560px){.authcard .frow2{flex-direction:column;gap:0;}}

/* Quote / enquiry modal (product detail pages) */
.qm[hidden]{display:none;}
.qm [hidden]{display:none !important;} /* hidden must win over the flex/block display set below */
.qm{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;}
.qm-scrim{position:absolute;inset:0;background:rgba(14,42,51,.55);backdrop-filter:blur(2px);}
/* The card carries no padding itself — each state (form wrap / success panel) owns its own inset, so the
   sticky form header can sit flush at the very top of the card with no gap above the title. */
.qm-card{position:relative;background:#fff;border-radius:18px;width:min(480px,100%);max-height:92vh;max-height:92dvh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.34);animation:qm-in .18s ease;}
[data-quote-form-wrap]{padding:0 26px 22px;} /* sides + bottom; the sticky header owns the top spacing */
@keyframes qm-in{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:none;}}
/* Canonical circular close button (same family as the map-pin close .mapinfo-x) — used across the site. */
.rl-close{flex:none;width:34px;height:34px;border-radius:50%;border:none;background:var(--sand,#F5EFE3);color:var(--ink,#15333D);display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;cursor:pointer;transition:background .15s;}
.rl-close:hover{background:#ece3d2;} /* only the background tone shifts — the X keeps its colour */
.rl-close:focus-visible{outline:none;box-shadow:0 0 0 2px var(--teal-50,#E2F1F4);}
.qm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
/* Form-state header sticks to the top of the (scrollable) card so the close button is always reachable even
   when the form is taller than the viewport. It sits flush at the card top (small top padding → the title is
   high in the container) and its negative side margins let the white background bleed over the wrap's side
   padding to cover full-width as content scrolls beneath it. No negative TOP margin: a sticky element ignores
   it when painting but still pulls the next element up under the header (which used to clip the product pill).
   The success header (.qm-head-ok) is excluded — its panel is short and aligns its own close button. */
.qm-head:not(.qm-head-ok){position:sticky;top:0;z-index:3;background:#fff;margin:0 -26px 14px;padding:18px 26px 12px;border-radius:18px 18px 0 0;}
/* Success state (.qm-ok) owns its own padding (the card has none). This modifier pulls the close button up
   toward the top-right corner so it sits at a comfortable inset, matching the form header's close. */
.qm-head-ok{justify-content:flex-end;margin:-4px -6px 0 0;}
.qm-title{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0;color:var(--ink,#15333D);}
.qm-prod{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--teal-d,#0A6E86);background:var(--teal-50,#E2F1F4);border-radius:10px;padding:9px 12px;margin:0 0 16px;font-weight:600;}
.qm-row{display:flex;gap:12px;}
.qm-row .qm-fld{flex:1;}
.qm-fld{margin-bottom:12px;}
.qm-fld label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink,#15333D);}
.qm-fld input,.qm-fld textarea{width:100%;font-family:inherit;font-size:15px;padding:12px 13px;border:1px solid var(--line-2,#DCE4E3);border-radius:var(--r-btn,11px);background:#fff;color:var(--ink,#15333D);}
.qm-fld input:focus,.qm-fld textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-50);}
.qm-err{background:#FDECEC;color:#B42318;border:1px solid #F3C0BD;border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:12px;display:flex;gap:7px;align-items:center;}
.qm-send{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:8px;background:var(--teal-d,#0A6E86);color:#fff;border:none;border-radius:11px;padding:13px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer;}
.qm-send:hover{background:#085a6f;}
.qm-clear{display:inline-flex;align-items:center;gap:6px;margin:10px auto 0;background:none;border:none;color:var(--muted,#5b6b6e);font-family:inherit;font-size:13px;cursor:pointer;width:auto;}
.qm-clear:hover{color:var(--teal-d,#0A6E86);text-decoration:underline;}
.qm-send.is-loading{opacity:.7;pointer-events:none;}
.qm-ok{text-align:center;padding:22px 24px 26px;}
.qm-ok-ic{font-size:52px;color:#1E7A36;}
.qm-ok h2{font-size:21px;margin:8px 0 6px;color:var(--ink,#15333D);}
.qm-ok p{color:var(--muted,#5b6b6e);margin:0 0 18px;}
/* Mobile bottom-sheet: tighter insets and a smaller title, and the header's top padding drops to 14px so the
   title sits high in the sheet, leaving more room for the inputs. Side margins (-18) match the wrap's side
   padding (18) so the sticky header still bleeds full-width. */
@media(max-width:520px){.qm-card{border-radius:16px 16px 0 0;align-self:flex-end;width:100%;max-height:94vh;max-height:94dvh;}[data-quote-form-wrap]{padding:0 18px 18px;}.qm-head:not(.qm-head-ok){border-radius:16px 16px 0 0;margin:0 -18px 12px;padding:14px 18px 10px;}.qm-ok{padding:18px 18px 22px;}.qm-title{font-size:19px;}.qm-prod{margin:0 0 12px;}.qm{padding:0;align-items:flex-end;}.qm-row{flex-direction:column;gap:0;}}
.authcard input{width:100%;font-family:inherit;font-size:15px;padding:12px 13px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:#fff;color:var(--ink);}
.authcard textarea{width:100%;font-family:inherit;font-size:15px;padding:12px 13px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:#fff;color:var(--ink);resize:vertical;min-height:96px;}
.authcard input:focus,.authcard textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-50);}
.authcard .ferr{display:block;color:var(--rose);font-size:12.5px;font-weight:600;margin-top:5px;}
/* Form-level failure notice (lead capture rejected). Distinct from .ferr, which is per-field validation. */
.authcard .formerr{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:11px 13px;border:1px solid var(--rose);border-radius:var(--r-btn);background:#fff5f5;color:var(--rose);font-size:13.5px;font-weight:600;line-height:1.45;}
.authcard .formerr i{font-size:17px;flex:none;margin-top:1px;}
/* Checkbox group (Groups & MICE services). Checkboxes stay auto-width (not 100% like text inputs). */
.chkgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-top:2px;}
.authcard .chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:500;cursor:pointer;}
.authcard .chk input{width:auto;margin:0;flex:none;accent-color:var(--teal,#137a6f);}
.chk-inline{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14px;color:var(--ink);cursor:pointer;}
@media(max-width:560px){.chkgrid{grid-template-columns:1fr;}}
.authcard input.input-validation-error,.authcard textarea.input-validation-error{border-color:var(--rose);}
.okstate{text-align:center;padding:14px 6px;display:flex;flex-direction:column;align-items:center;}
.okstate .ok-ic{font-size:46px;color:var(--green);line-height:1;margin-bottom:8px;}
.okstate h2{margin:0 0 6px;}
.okstate .sub{text-align:center;max-width:38ch;margin-left:auto;margin-right:auto;}
.okstate .cbtn{margin-top:16px;}
.okstate .ok-ic.maint{color:var(--gold,#C49A4A);}
.maint-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px;width:100%;}
.maint-cta .cbtn{margin-top:0;flex:1 1 0;min-width:140px;justify-content:center;}
.authcard .cbtn.pri{width:100%;justify-content:center;margin-top:4px;}
.authcard .note{margin-top:16px;font-size:13px;color:var(--muted);background:var(--teal-50);border-radius:11px;padding:11px 13px;}
.authcard .alt{margin-top:14px;font-size:14px;text-align:center;color:var(--muted);}
.legalnote{background:var(--amber-50);border:1px solid var(--amber);color:var(--ink);border-radius:11px;padding:12px 15px;font-size:14px;margin:0 0 22px;}
.legal-doc{max-width:74ch;}
.legal-doc p{margin:0 0 12px;font-size:14.5px;line-height:1.66;color:var(--ink);}
.legal-doc strong,.legal-doc b{color:var(--ink);font-weight:800;}
/* About page — designed value-prop layout. Reuses the home .why-c card so About reads as one system with the
   rest of the site. Width is the shared 1240px .cpage standard (no override needed). */
.about-lead{font-size:18px;line-height:1.6;color:var(--muted);margin:14px 0 0;max-width:90ch;}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 42px;}
.about-grid .why-c{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-card);padding:22px;}
.about-grid .why-c .ic{background:var(--teal-50);box-shadow:none;}
.about-where{margin:6px 0 26px;}
.about-where .sh{margin-bottom:16px;}
.about-chips{display:flex;flex-wrap:wrap;gap:9px;}
.about-chips span{background:var(--sand);color:var(--ink);border-radius:var(--r-pill);padding:8px 15px;font-size:13.5px;font-weight:600;}
/* Destinations grouped by country: a small country label above each row of chips. */
.about-country + .about-country{margin-top:16px;}
.about-country-h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 9px;}
.about-reg{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);background:var(--teal-50);border-radius:12px;padding:13px 16px;margin:0;}
.about-reg i{color:var(--teal-d);font-size:18px;flex:none;}
/* Closing brand narrative (the "partner in South America" statement from the published About). */
.about-close{margin:8px 0 22px;padding:30px 34px;border-radius:var(--r-card);background:linear-gradient(180deg,var(--sand),#fff);border:1px solid var(--line-2);}
.about-close h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em;margin:0 0 10px;}
.about-close p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-2,var(--muted));max-width:94ch;}
@media(max-width:900px){.about-grid{grid-template-columns:1fr 1fr;}.about-close{padding:24px 20px;}}
@media(max-width:560px){.about-grid{grid-template-columns:1fr;}}
/* A lone last value-prop card (e.g. 7 cards in a 3-column grid) centers instead of sitting alone at the left. */
@media(min-width:901px){.about-grid .why-c:last-child:nth-child(3n+1){grid-column:2;}}
.faq-doc{max-width:74ch;}
.faq-doc h2{margin:30px 0 12px;}
.faq-q{border:1px solid var(--line-2);border-radius:var(--r-card);margin:0 0 10px;background:#fff;overflow:hidden;}
.faq-q summary{list-style:none;cursor:pointer;padding:15px 46px 15px 18px;font-size:15px;font-weight:700;color:var(--ink);position:relative;}
.faq-q summary::-webkit-details-marker{display:none;}
.faq-q summary::after{content:"\002B";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:600;color:var(--teal-d);transition:transform .18s ease;}
.faq-q[open] summary::after{content:"\2212";}
.faq-q summary:hover{color:var(--teal-d);}
.faq-q summary:focus-visible{outline:2px solid var(--teal-d);outline-offset:-2px;}
.faq-q p{margin:0;padding:0 18px 16px;font-size:14.5px;line-height:1.66;color:var(--ink-2,var(--muted));}

/* ---------- Help / FAQ (redesigned: intro note, iconed sections, card accordion, support block) ---------- */
.faqx-note{display:flex;gap:10px;align-items:flex-start;background:var(--teal-50);border:1px solid #cfe6ec;color:var(--teal-d);border-radius:var(--r-card);padding:13px 16px;margin:0 0 28px;font-size:14px;font-weight:600;}
.faqx-note i{font-size:18px;margin-top:1px;flex:0 0 auto;}
.faqx-sec{margin:0 0 30px;}
.faqx-sec-h{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0 0 14px;}
.faqx-ic{width:34px;height:34px;border-radius:10px;background:var(--teal-50);color:var(--teal-d);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.faqx-ic i{font-size:19px;}
.faqx-list{display:flex;flex-direction:column;gap:10px;}
.faqx-q{border:1px solid var(--line-2);border-radius:14px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.faqx-q[open]{border-color:#bfe0e8;box-shadow:0 6px 20px rgba(14,110,134,.06);}
.faqx-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;justify-content:space-between;padding:16px 18px;font-size:15px;font-weight:700;color:var(--ink);}
.faqx-q summary::-webkit-details-marker{display:none;}
.faqx-q summary:hover{color:var(--teal-d);}
.faqx-q summary:focus-visible{outline:2px solid var(--teal-d);outline-offset:-2px;border-radius:14px;}
.faqx-chev{font-size:18px;color:var(--teal-d);flex:0 0 auto;transition:transform .2s ease;}
.faqx-q[open] .faqx-chev{transform:rotate(180deg);}
.faqx-a{padding:0 18px 17px;}
.faqx-a p{margin:0;font-size:14.5px;line-height:1.7;color:var(--muted);}
/* Product/destination/country "Booking & policies" FAQ: same accordion as /faq, with a top rule so it reads as a distinct band after the page content. */
.pfaq{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-2);margin-bottom:48px;}
.pfaq .faqx-sec{margin:0;}
/* Full content width (fills the .wrap column) + a cleaner, borderless list: each item is separated by a thin
   divider instead of a boxed card, which reads calmer on a long detail page. Open state keeps the divider,
   drops the card shadow. */
.pfaq .faqx-list{max-width:none;gap:0;}
.pfaq .faqx-q,
.pfaq .faqx-q[open]{border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line-2);}
.pfaq .faqx-q:last-child{border-bottom:0;}
.pfaq .faqx-q summary{padding-left:2px;padding-right:2px;}
.pfaq .faqx-a{padding-left:2px;padding-right:2px;}
.faqx-support{margin-top:36px;border:1px solid var(--line-2);border-radius:var(--r-card);padding:22px 24px;background:var(--sand);}
.faqx-support-h{display:flex;align-items:center;gap:11px;}
.faqx-support-h h2{margin:0;font-size:19px;font-weight:800;}
.faqx-hours{margin:12px 0 16px;display:flex;gap:9px;align-items:flex-start;color:var(--muted);font-size:14.5px;}
.faqx-hours i{color:var(--teal-d);font-size:17px;margin-top:1px;flex:0 0 auto;}
.faqx-chan{display:flex;flex-wrap:wrap;gap:10px;}
.faqx-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:9px 15px;font-weight:700;font-size:14px;color:var(--ink);transition:border-color .15s,color .15s;}
.faqx-chip i{font-size:17px;color:var(--teal-d);}
.faqx-chip:hover{border-color:var(--teal);color:var(--teal-d);}

@media(max-width:760px){.authwrap{grid-template-columns:1fr;gap:26px;}}

/* ── Auth split-screen (login) ── */
.authpage{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;}
.authpage .brandside{position:relative;background:var(--ink-deep);color:#fff;padding:34px 44px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.authpage .sun{position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(232,191,125,.5),rgba(232,191,125,0) 70%);}
.authpage .blogo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;position:relative;z-index:1;color:#fff;}
.authpage .blogo .rl-logo{width:30px;height:30px;}
.authpage .bmid{position:relative;z-index:1;}
.authpage .bmid h2{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.12;max-width:16ch;margin-bottom:14px;}
.authpage .bmid p{font-size:15px;color:#AFC6CC;max-width:42ch;}
.authpage .bstats{display:flex;gap:28px;position:relative;z-index:1;flex-wrap:wrap;}
.authpage .bstats .n{font-size:20px;font-weight:800;}
.authpage .bstats .l{font-size:12.5px;color:#9FB6BD;white-space:nowrap;}
.authpage .formside{display:flex;align-items:center;justify-content:center;padding:34px;}
.authpage .fcard{width:100%;max-width:392px;}
.authpage .topnav{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:34px;}
.authpage .topnav .back{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--teal-d);}
.authpage .fcard h1{font-size:25px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;}
.authpage .fcard .sub{font-size:14px;color:var(--muted);margin-bottom:22px;}
.authpage .field{margin-bottom:15px;}
.authpage .field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.authpage .field input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:11px;padding:12px 13px;}
.authpage .field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-50);}
.authpage .rowflex{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:-2px 0 16px;}
.authpage .rowflex .rem{display:flex;align-items:center;gap:8px;color:var(--muted);}
.authpage .rowflex .rem input{width:15px;height:15px;accent-color:var(--teal);}
.authpage .rowflex a{color:var(--teal-d);font-weight:700;}
.authpage .enter{width:100%;background:var(--teal-d);color:#fff;border:none;font-family:inherit;font-size:15.5px;font-weight:800;padding:13px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.authpage .enter:hover{background:#085a6f;}
.authpage .enter:disabled,.authpage .gbtn:disabled{background:var(--line-2);color:var(--faint);cursor:not-allowed;}
.authpage .gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-2);border-radius:11px;padding:12px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink);background:#fff;cursor:pointer;}
.authpage .gbtn i{font-size:20px;color:#4285F4;}
.authpage .gbtn:disabled i{color:var(--faint);}
.authpage .divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12.5px;margin:20px 0;}
.authpage .divider::before,.authpage .divider::after{content:"";flex:1;height:1px;background:var(--line-2);}
.authpage .createbtn{display:block;text-align:center;width:100%;border:1px solid var(--teal-d);color:var(--teal-d);background:#fff;font-family:inherit;font-size:14.5px;font-weight:800;padding:12px;border-radius:11px;}
.authpage .createbtn:hover{background:var(--teal-50);}
.authpage .authnote{margin-top:16px;font-size:13px;color:var(--muted);background:var(--teal-50);border-radius:11px;padding:11px 13px;display:flex;gap:8px;align-items:flex-start;}
.authpage .authnote i{color:var(--teal-d);font-size:17px;flex:0 0 auto;margin-top:1px;}
@media(max-width:820px){.authpage{grid-template-columns:1fr;}.authpage .brandside{display:none;}}

/* ── Registration / agencies page ── */
.reg-hero{background:linear-gradient(180deg,var(--teal-50),#fff);}
.reg-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:50px var(--gutter) 56px;}
.reg-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-d);background:#fff;border:1px solid var(--line-2);padding:6px 13px;border-radius:var(--r-pill);margin-bottom:16px;}
.reg-pitch h1{font-size:clamp(28px,3.6vw,42px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin-bottom:14px;}
.reg-pitch .lead{font-size:16px;color:var(--muted);max-width:48ch;margin-bottom:22px;}
.reg-pitch .ulist{display:grid;gap:12px;list-style:none;padding:0;margin:0;}
.reg-pitch .ulist li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;}
.reg-pitch .ulist i{color:var(--green);font-size:20px;margin-top:1px;flex:0 0 auto;}
.authcard select{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background-color:#fff;border:1px solid var(--line-2);border-radius:var(--r-btn);padding:12px 40px 12px 13px;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A6E86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;}
.authcard select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-50);}
.authcard .grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.authcard-alt{text-align:center;font-size:13px;color:var(--muted);margin-top:14px;}
.authcard-alt a{color:var(--teal-d);font-weight:700;}
.reg-sec .wrap,.reg-steps .wrap{padding:50px var(--gutter);}
.reg-sh{text-align:center;margin-bottom:28px;}
.reg-sh h2{font-size:26px;font-weight:800;letter-spacing:-.01em;}
.reg-sh p{font-size:15px;color:var(--muted);margin-top:8px;}
.reg-steps{background:var(--sand);}
.reg-stepg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.reg-step .n{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--teal-d);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:11px;border:1px solid var(--line-2);}
.reg-step h3{font-size:15.5px;font-weight:800;margin-bottom:4px;}
.reg-step p{font-size:13.5px;color:var(--muted);}
.reg-trust{border-top:1px solid var(--line);}
.reg-trust .wrap{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;padding:24px var(--gutter);font-size:13.5px;color:var(--muted);}
.reg-trust .b{display:flex;align-items:center;gap:9px;}
.reg-trust .b i{font-size:20px;color:var(--teal);}
@media(max-width:900px){.reg-hero .wrap{grid-template-columns:1fr;gap:30px;}.reg-stepg{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.reg-stepg,.authcard .grid2{grid-template-columns:1fr;}}

/* Cookie-consent banner (shown only when analytics is configured) */
.consent{position:fixed;left:16px;right:16px;bottom:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1000;max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line-2,#E3E8E7);border-radius:14px;box-shadow:0 10px 40px rgba(20,40,46,.18);padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.consent p{margin:0;font-size:13.5px;color:var(--muted,#6B7A7E);flex:1;min-width:200px;}
.consent-act{display:flex;gap:8px;margin-left:auto;}
.consent-btn{font-family:inherit;font-size:13.5px;font-weight:600;border-radius:9px;padding:9px 16px;border:none;cursor:pointer;background:var(--teal-d,#0A6E86);color:#fff;}
.consent-btn.ghost{background:#fff;border:1px solid var(--line-2,#E3E8E7);color:var(--muted,#6B7A7E);}
.consent-btn:hover{filter:brightness(1.05);}
.consent[hidden]{display:none;}

/* ── MICE section (/mice hub + /mice/{country}) — reuses the destination design language ── */
.micepage{max-width:1240px;padding:24px var(--gutter) 60px;}
.micepage .crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:14px;flex-wrap:wrap;}
.micepage .crumb a{color:var(--teal-d);font-weight:600;}
.micepage .crumb i{font-size:12px;color:var(--faint);}
/* Branded hero (no photo master needed) — deep teal gradient card, white text. */
.mice-hero{position:relative;border-radius:20px;overflow:hidden;padding:40px 34px;margin:0 0 20px;background:linear-gradient(135deg,var(--teal-d,#0A6E86) 0%,#0e3a46 100%);}
.mice-hero .phero-in{position:relative;z-index:2;max-width:820px;}
.mice-hero .eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);padding:5px 11px;border-radius:var(--r-pill);}
.mice-hero h1{color:#fff;font-size:clamp(28px,4vw,42px);line-height:1.12;margin:14px 0 0;letter-spacing:-.01em;}
.mice-hero .lead{color:rgba(255,255,255,.94);font-size:17px;line-height:1.55;margin:14px 0 0;max-width:70ch;}
.mice-cta{margin-top:22px;}
/* Country cards (hub) */
.mice-countries{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:8px 0;}
.mice-ccard{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-card);padding:22px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s;}
.mice-ccard:hover{border-color:var(--teal);box-shadow:var(--shadow-float);transform:translateY(-2px);}
.mice-ccard .mc-top{display:flex;align-items:center;gap:10px;}
.mice-ccard .mc-top i{color:var(--teal-d);font-size:22px;}
.mice-ccard .mc-top h2{font-size:20px;margin:0;letter-spacing:-.01em;}
.mice-ccard p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;flex:1;}
.mice-ccard .mc-more{font-size:14px;font-weight:700;color:var(--teal-d);display:inline-flex;align-items:center;gap:6px;}
/* Credibility callout (verified ICCA line) */
.mice-cred{display:flex;align-items:center;gap:12px;background:var(--teal-50);border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;margin:18px 0;}
.mice-cred i{color:var(--teal-d);font-size:24px;flex:none;}
.mice-cred p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink);font-weight:600;}
/* Intro prose — fills the container (matches the destination-page .dintro convention: max-width:none). */
.mice-intro{margin:8px 0;}
.mice-intro p{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 12px;}
/* Destinations */
.mice-dests{margin:24px 0 0;display:flex;flex-direction:column;gap:16px;}
.mice-dest{border:1px solid var(--line-2);border-radius:var(--r-card);padding:22px 22px 20px;background:#fff;}
.mice-dest .md-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.mice-dest .md-head h2{font-size:21px;margin:0;letter-spacing:-.01em;}
.mice-dest .md-link{font-size:14px;font-weight:700;color:var(--teal-d);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.mice-dest .md-sum{font-size:15px;line-height:1.6;color:var(--muted);margin:8px 0 0;}
.mice-dest .md-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:16px 0 0;}
.mice-dest .md-col h3{font-size:14px;margin:0 0 8px;display:flex;align-items:center;gap:8px;letter-spacing:-.005em;color:var(--ink);}
.mice-dest .md-col h3 i{color:var(--teal-d);font-size:18px;}
.mice-dest .md-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.mice-dest .md-col li{font-size:14px;line-height:1.5;color:var(--ink);padding-left:14px;position:relative;}
.mice-dest .md-col li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--teal);}
/* What we handle (services) */
.mice-svc{margin:28px 0 0;}
.mice-svc h2{font-size:21px;margin:0 0 14px;letter-spacing:-.01em;}
.mice-svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 20px;}
.mice-svc-list li{display:flex;align-items:flex-start;gap:9px;font-size:15px;color:var(--ink);line-height:1.5;}
.mice-svc-list li i{color:var(--teal);font-size:19px;flex:none;margin-top:1px;}
@media(max-width:640px){.mice-hero{padding:30px 22px;}}
/* ============================================================
   Shared date picker — one branded calendar across the whole site.
   Loaded by both the public site (_Layout) and the agency Portal
   (_PortalLayout) so the omni search popover and the form date
   pickers (rl-datepicker.js) look identical everywhere.
   ============================================================ */

/* Floating popover box (omni date/passengers popovers + the rl-datepicker calendar). */
.popover{position:absolute;top:calc(100% + 8px);left:0;z-index:70;background:#fff;border:1px solid var(--line-2,#cfd8dc);border-radius:14px;box-shadow:var(--shadow-float,0 14px 36px rgba(20,40,46,.18));padding:14px;min-width:252px;color:var(--ink,#15333d);max-height:70dvh;overflow:auto;}

/* Calendar grid */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px;font-weight:700;}
.cal-head button{width:28px;height:28px;border-radius:8px;border:none;background:#F4F6F5;font-size:16px;cursor:pointer;color:var(--ink,#15333d);}
.cal-head button:hover{background:var(--teal-50,#e6f0ef);color:var(--teal-d,#0f5a52);}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px;}
.cal-dow span{text-align:center;font-size:11px;color:var(--faint,#7a8a89);font-weight:600;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-empty{height:32px;}
.cal-day{height:32px;border:none;background:none;border-radius:8px;font-size:13px;cursor:pointer;color:var(--ink,#15333d);font-family:inherit;}
.cal-day:hover:not(.past){background:var(--teal-50,#e6f0ef);}
.cal-day.past{color:#CBD3D2;cursor:default;}
.cal-day.in{background:var(--teal-50,#e6f0ef);} /* in-between days keep the rounded 8px chip like selected days */
.cal-day.on{background:var(--teal-d,#0f5a52);color:#fff;}

/* ---- rl-datepicker: native <input type=date> progressively enhanced into the branded calendar ---- */
.rldp{position:relative;display:block;}
.rldp-native{position:absolute!important;width:1px;height:1px;padding:0;margin:0;border:0;clip:rect(0 0 0 0);overflow:hidden;pointer-events:none;} /* kept in DOM for form posting + JS reads */
.rldp-v{display:flex;align-items:center;gap:8px;width:100%;font:inherit;text-align:left;cursor:pointer;
  padding:7px 9px;border:1px solid var(--line,#cfd8dc);border-radius:8px;background:#fff;color:var(--ink,#15333d);}
.rldp-v:hover{border-color:var(--teal,#137a6f);}
.rldp-v:focus-visible{outline:none;border-color:var(--teal,#137a6f);box-shadow:0 0 0 2px var(--teal-50,#e6f0ef);}
.rldp-v .ph{color:var(--teal,#137a6f);font-size:16px;flex:none;}
.rldp-v .rldp-txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rldp-v.is-placeholder .rldp-txt{color:var(--muted,#7a8a89);}
.rldp .popover{min-width:248px;}

/* On the bigger B2C form inputs, match their taller padding / radius so the trigger reads like the others. */
.authcard .rldp-v,.fld .rldp-v{padding:12px 13px;border-radius:var(--r-btn,10px);border-color:var(--line-2,#cfd8dc);font-size:15px;}
/* Quote modal: match the date trigger exactly to the modal's other inputs (.qm-fld input). */
.qm-fld .rldp-v{padding:12px 13px;border-radius:var(--r-btn,11px);border-color:var(--line-2,#DCE4E3);font-size:15px;line-height:1.4;}
.qm-fld .rldp-v .ph{font-size:15px;line-height:1;} /* keep the icon from making the date field taller than the text inputs */