/* Fastboatgili.com - custom Joomla 6 template
   Ported from fastboatgili-template-concept-v2.html (approved mockup reference).
   See PROJECT-NOTES.md in the "Fastboatgili Template Claude" project folder for the full log. */

:root{
  --ink:#0B2430;
  --ink-soft:#123645;
  --coral:#FF6B4A;
  --coral-dark:#E5522F;
  --amber:#F2A93B;
  --teal:#299E5B;
  --cream:#FBF8F2;
  --text:#12211F;
  --text-muted:#5C6E6B;
  --border:#E7E1D3;
}
*{box-sizing:border-box;}
/* 30 aug 2026 (Taak #27): .leg-tabbar is standaard verborgen - wordt alleen zichtbaar (display:flex)
   binnen de mobiele media query hieronder. Zonder deze regel toont desktop een ongestylede
   blok-met-knoppen (bleek op tussen de sort-chips en de OUTBOUND-kop), want de .leg-tab(bar)
   opmaak zelf staat bewust alleen in @media (max-width:960px). */
.leg-tabbar{display:none;}
/* 13 aug 2026: klant zag een dun streepje boven/naast de groene header - kwam uiteindelijk niet door
   een sub-pixel viewport-kiertje (die theorie + de -1px overlap-fix hieronder zijn achterhaald, zie
   14 aug-comment in header.php voor de echte, structurele oorzaak/fix: header zit nu ìn .hero i.p.v.
   los ervoor). Deze regels blijven staan omdat ze onschadelijk zijn voor de niet-homepage-context
   waar .site-header nog wel los van een hero-element staat (bestemmings-/binnenpagina's). */
html{overflow-x:hidden;background:var(--cream);}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--cream);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

/* ---------- Header / nav ---------- */
.site-header{position:relative;z-index:50;background:var(--teal);}
/* 14 aug 2026: was top/left/right:-1px (een truc om een kiertje t.o.v. de VIEWPORT-rand te
   overdekken, uit de tijd dat .site-header los vóór .hero stond). Nu <header><meta charset="utf-8"> op de homepage ÌN
   .hero zit (zie header.php) is .hero header's containing block i.p.v. de viewport, en gaf diezelfde
   -1px juist een nieuw, omgekeerd probleem: een klein "deukje"/stapje op de rand waar header's
   overshoot niet meer overeenkwam met hero's eigen rand (klant liet dit zien met een rode cirkel op
   een scherpe close-up). Terug naar 0/0/0 zodat header exact op hero's eigen rand aansluit. */
.site-header--overlay{position:absolute;top:0;left:0;right:0;background:rgba(41,158,91,0.55);}
.nav-wrap{max-width:1220px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;position:relative;}
.logo img{height:64px;width:auto;display:block;opacity:0.96;}
.site-header--overlay .logo img{height:80px;opacity:0.92;}

.nav-links-wrap{display:flex;align-items:center;gap:24px;}

/* Visually-hidden accessible text (Joomla core uses this class in several places, incl. the
   mod_menu submenu toggle button below - without this rule the text renders visibly). */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Real Joomla mod_menu output: ul.mod-menu.mod-list.nav > li.nav-item > a
   Parent items also get a <button class="mod-menu__toggle-sub"> (added by Joomla's own
   media/mod_menu/js/menu.js) that toggles a "show-menu" class on the submenu - style around
   that instead of reinventing the open/close behaviour. */
.mod-menu{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0;}
.mod-menu .nav-item{position:relative;display:flex;align-items:center;}
.mod-menu .nav-item > a{display:block;color:rgba(255,255,255,0.88);font-size:14px;font-weight:600;padding:6px 0;white-space:nowrap;}
.mod-menu .nav-item > a:hover{color:#fff;}
/* 13 aug 2026: was ".mod-menu .nav-item.current > a" zonder ">"-combinator na ".mod-menu", dus dit
   raakte ook geneste items in de witte dropdown (.mod-menu__sub heeft background:#fff) - een actieve
   bestemming (bv. Gili Air terwijl je op de Gili Air-pagina staat) werd dan wit-op-wit en leek uit
   het menu te zijn verdwenen. Klant merkte dit terecht op. Nu gesplitst: het TOP-level item krijgt
   nog steeds wit (leesbaar op de gekleurde header), een actief item IN de dropdown krijgt een eigen,
   op de witte achtergrond leesbare kleur i.p.v. wit. */
.mod-menu > .nav-item.current > a,.mod-menu > .nav-item.active > a{color:#fff;}
.mod-menu__sub .nav-item.current > a,.mod-menu__sub .nav-item.active > a{color:var(--teal);font-weight:800;background:var(--cream);}
.mod-menu__toggle-sub{background:none;border:0;color:rgba(255,255,255,0.75);cursor:pointer;padding:4px 0 4px 4px;display:inline-flex;align-items:center;}
.mod-menu__toggle-sub:hover{color:#fff;}
.mod-menu__toggle-sub .icon-chevron-down{display:inline-block;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform 0.15s;}
.mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down{transform:rotate(225deg);margin-top:3px;}
.mod-menu__sub{list-style:none;margin:0;padding:6px;position:absolute;top:calc(100% + 10px);left:0;min-width:230px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(11,36,48,0.2);display:none;z-index:90;}
.mod-menu__sub.show-menu{display:block;}
.mod-menu__sub .nav-item > a{color:var(--ink);font-size:13.5px;font-weight:600;padding:8px 10px;border-radius:8px;}
.mod-menu__sub .nav-item > a:hover{background:var(--cream);color:var(--teal);}
/* Fast Boats (Itemid 719) has many operator children - lay the dropdown out in columns */
.mod-menu .item-719 > .mod-menu__sub{columns:2;column-gap:4px;width:460px;max-height:70vh;overflow-y:auto;}
/* 15 aug 2026: "All destinations"/"All fast boat operators"-regel die script.js vooraan in deze
   dropdowns zet (zie de toelichting daar) - column-span:all zodat 'ie in de 2-koloms Fast Boats-
   dropdown als volle-breedte kop boven de operatorlijst staat i.p.v. in 1 kolom te verdwalen. Hogere
   specificiteit (.mod-menu__sub ervoor) i.p.v. !important om de gewone .nav-item > a-regel te winnen. */
.mod-menu__sub-hub-link{border-bottom:1px solid var(--border);margin-bottom:4px;padding-bottom:4px;column-span:all;}
.mod-menu__sub .mod-menu__sub-hub-link > a{font-weight:800;color:var(--teal);}

/* Curated top-level nav (klantbeslissing 13 aug 2026, BIJGESTELD 14 aug 2026): oorspronkelijk toonden
   we hier alleen 5 items (Destinations, Fast Boats, Tours Nusa Penida, FAQ, Contact) - Home was toen
   bewust weggelaten omdat 'ie al via het logo bereikbaar is (zie ook de mockup-noot in de "Nav-menu
   inconsistentie"-sectie van PROJECT-NOTES, 9 aug 2026, waar Home destijds juist uit 2 mockup-bestanden
   verwijderd is om de nav sitewide gelijk te trekken). Klant wil 'm nu alsnog terug, als EERSTE item:
   "Ik mis nog 'Home' in de menu bar, als eerste." Home (item-435) toegevoegd aan de uitzonderingslijst
   en op order:0 gezet - de overige 5 items schuiven niet op (order:1 t/m 5 blijven ongewijzigd, order
   is relatief, geen doorlopende reeks nodig). :not() i.p.v. een vaste hide-lijst, zodat een toekomstig
   nieuw top-level Main Menu-item hier automatisch verborgen blijft i.p.v. per ongeluk te verschijnen. */
.mod-menu > .nav-item:not(.item-435):not(.item-694):not(.item-719):not(.item-915):not(.item-840):not(.item-859){display:none!important;}
.mod-menu > .nav-item.item-435{order:0;}
.mod-menu > .nav-item.item-694{order:1;}
.mod-menu > .nav-item.item-719{order:2;}
.mod-menu > .nav-item.item-915{order:3;}
.mod-menu > .nav-item.item-840{order:4;}
.mod-menu > .nav-item.item-859{order:5;}

.currency-switch,.lang-switch{display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:600;background:rgba(255,255,255,0.14);padding:8px 12px;border-radius:20px;cursor:pointer;position:relative;flex-shrink:0;}
.currency-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(11,36,48,0.2);padding:6px;z-index:95;cursor:default;}
.currency-dropdown.open{display:block;}
.currency-option{display:flex;align-items:baseline;gap:8px;width:100%;border:0;background:none;padding:9px 10px;border-radius:8px;font-size:13px;font-family:inherit;cursor:pointer;text-align:left;color:var(--ink);}
.currency-option:hover{background:var(--cream);}
.currency-option.active{color:var(--teal);background:#F1FAF4;}
.currency-option .cc{font-weight:800;}
.currency-option .cn{font-weight:500;color:var(--text-muted);font-size:11.5px;}
.currency-note{font-size:10.5px;color:var(--text-muted);padding:8px 10px 4px;border-top:1px solid var(--border);margin-top:4px;line-height:1.4;}
.dd-arrow{width:11px;height:11px;flex-shrink:0;}

.pill-cta{background:var(--coral);color:#fff;padding:10px 20px;border-radius:30px;font-size:14px;font-weight:700;text-align:center;align-self:center;line-height:1.3;}
.pill-cta:hover{background:var(--coral-dark);}
.burger{display:none;color:#fff;font-size:24px;background:none;border:0;cursor:pointer;}

/* ---------- Hero (home only) ---------- */
.hero{position:relative;min-height:640px;background-size:cover;background-position:center;overflow:hidden;}
.hero:before{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg, rgba(11,36,48,0.55) 0%, rgba(11,36,48,0.36) 30%, rgba(11,36,48,0.08) 60%, rgba(11,36,48,0.22) 100%),
  radial-gradient(circle at 15% 20%, rgba(41,158,91,0.25), transparent 50%);}
.hero-inner{position:relative;max-width:1220px;margin:0 auto;padding:170px 24px 0;text-shadow:0 2px 14px rgba(0,0,0,0.35);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.1);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:7px 14px;border-radius:20px;margin-bottom:22px;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);}
.hero h1{color:#fff;font-size:52px;line-height:1.08;font-weight:800;margin:0 0 20px;letter-spacing:-1px;}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero p{color:rgba(255,255,255,0.96);font-size:17px;max-width:560px;margin:0 0 30px;line-height:1.6;text-shadow:0 2px 14px rgba(0,0,0,0.35);}
/* Hero-stats (13 aug 2026) - 1-op-1 uit fastboatgili-template-concept-v2.html overgenomen, cijfers
   zelf komen live uit home.php (zie de PHP-comment daar), niet hardcoded zoals in de mockup. */
/* 18 sep 2026, klantverzoek: de drie cijfers onder de herotekst staan op een foto en waren daar
   slecht leesbaar - het label was dun en maar 65% wit. Nu groter, zwaarder en met een zachte
   schaduw, zodat ze loskomen van de achtergrond. */
.hero-stats{display:flex;gap:40px;}
.hero-stats div{color:#fff;}
.hero-stats .star-amber{color:var(--amber);}
.hero-stats .n{font-size:30px;font-weight:900;display:block;line-height:1.15;text-shadow:0 1px 3px rgba(11,36,48,0.45);}
.hero-stats .l{font-size:13px;font-weight:600;color:rgba(255,255,255,0.92);letter-spacing:0.2px;text-shadow:0 1px 3px rgba(11,36,48,0.45);}

/* ---------- Search card ---------- */
.search-float{max-width:1220px;margin:0 auto;padding:0 24px;transform:translateY(-46px);position:relative;z-index:50;}

/* 7 sep 2026: klant meldde dat op mobiel de From/To-select (native <select>, zichtbaar onder max-width:960px)
   achter de 'Low Fare'/'Promo'-badges van de result-cards eronder terechtkwam. Oorzaak: die badges krijgen op
   mobiel .result-top .badge:not(.instant):not(.cancel){position:absolute;z-index:2;...} - hun containing block
   (.result-card) heeft geen eigen z-index, dus die 2 'ontsnapt' naar dezelfde stacking context als .search-card
   (ook z-index:2). Bij een gelijke z-index wint het element dat later in de DOM staat (de result-cards, die ONDER
   het zoekwidget staan) - vandaar dat de badges over de dropdown heen kwamen. z-index van .search-card opgehoogd
   naar 10 zodat dit geen gelijkspel meer is. */
.search-card{position:relative;z-index:10;background:rgba(255,255,255,0.97);backdrop-filter:blur(6px);border-radius:16px;box-shadow:0 -1px 0 rgba(255,255,255,0.08) inset;padding:22px;}
.search-card-title{display:none;font-size:11.5px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;margin:0 0 12px;color:var(--text-muted);}
.trip-toggle{display:inline-flex;background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:16px;}
.trip-toggle button{border:0;background:none;font-size:13px;font-weight:700;padding:8px 18px;border-radius:8px;cursor:pointer;color:var(--text-muted);}
.trip-toggle button.active{background:#5B8FC7;color:#fff;}
.search-row{display:grid;grid-template-columns:2.7fr 1fr .5fr auto;grid-template-areas:"from date pax btn";gap:14px;align-items:end;}
.field.return-field{display:none;}
.search-row.roundtrip .return-field{display:flex;}
.search-row.roundtrip{grid-template-columns:3.5fr 1fr 1fr minmax(120px,auto) auto;grid-template-areas:"from date return pax btn";}
.search-row>.swap-fields{grid-area:from;}
.search-row>.field:not(.return-field):not(.pax-field){grid-area:date;}
.search-row>.return-field{grid-area:return;}
.search-row>.pax-field{grid-area:pax;}
.search-row>.btn-search{grid-area:btn;}
.swap-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;position:relative;}
.swap-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;flex-shrink:0;position:absolute;left:50%;bottom:23px;transform:translate(-50%,50%);z-index:2;box-shadow:0 0 0 4px #fff;}
.swap-btn:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:11px;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-muted);font-weight:700;}
.field .box{border:1px solid var(--border);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--text);background:#fff;display:flex;align-items:center;gap:9px;}
.field-icon{display:block;width:20px;height:20px;flex-shrink:0;overflow:visible;stroke:var(--text-muted);}
.btn-search{background:var(--coral);color:#fff;border:0;border-radius:10px;padding:14px 26px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;}
.btn-search:hover{background:var(--coral-dark);}

.accom-toggle-row{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;}
.accom-toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0;}
.accom-toggle-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.accom-toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:20px;transition:background 0.15s;}
.accom-toggle-slider:before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,36,48,0.3);transition:transform 0.15s;}
.accom-toggle-switch input:checked + .accom-toggle-slider{background:var(--teal);}
.accom-toggle-switch input:checked + .accom-toggle-slider:before{transform:translateX(16px);}

.hero-usps-inner{max-width:1220px;margin:22px auto 0;padding:20px 24px 0;border-top:1px solid rgba(11,36,48,0.1);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:center;}
/* .usps-oneline modifier (used on operator.php/route.php's "Why book with FastBoatGili.com?" section
   only, not the homepage's centered hero version) - klant wilde deze links uitgelijnd i.p.v.
   gecentreerd (14 aug 2026). Was hiervoor nooit gedefinieerd, dus viel terug op .hero-usps-inner's
   eigen centrering. */
.hero-usps-inner.usps-oneline{justify-content:flex-start;}
.usp-item{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;}
.usp-item svg{width:19px;height:19px;flex-shrink:0;stroke:var(--teal);}

/* ---------- Generic sections ---------- */
section{max-width:1220px;margin:0 auto;padding:70px 24px 20px;}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;flex-wrap:wrap;gap:12px;}
h2{font-size:28px;margin:0 0 6px;font-weight:800;letter-spacing:-0.5px;}
.sub{color:var(--text-muted);font-size:15px;margin:0;max-width:480px;}
/* .sub-oneline modifier: klant wilde bepaalde .sub-regels (bv. "The same trust points on every
   booking, whichever operator you choose.") niet laten afbreken op desktop (14 aug 2026). Zelfde
   patroon als in de route-mockup zelf: alleen vanaf 700px geen breedtebeperking + nowrap, onder 700px
   gewoon laten afbreken zoals een normale .sub-regel. */
.sub-oneline{max-width:none;}
@media (min-width:700px){.sub-oneline{white-space:nowrap;}}
.link-more{font-size:14px;font-weight:700;color:var(--coral);}

.dest-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;height:440px;}
.dest-card{position:relative;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;color:#fff;display:flex;align-items:flex-end;padding:20px;}
.dest-card:nth-child(1){grid-row:1 / span 2;}
.dest-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.55) 100%);}
.dest-card .content{position:relative;z-index:1;}
.dest-card h3{margin:0 0 4px;font-size:19px;font-weight:800;}
.dest-card .price{font-size:13px;font-weight:700;background:rgba(255,255,255,0.2);display:inline-block;padding:4px 10px;border-radius:20px;}

/* "All destinations"-overzichtspagina (14 aug 2026) - eigen simpele 3-koloms grid i.p.v. de
   homepage's asymmetrische .dest-grid (bento-layout voor 5 kaarten, past niet bij 6 gelijke
   kaarten). Hergebruikt verder .dest-card/.content/h3/.price hierboven ongewijzigd. */
.all-dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.all-dest-grid .dest-card{height:230px;}
/* 15 aug 2026, klantmelding: "er gaat iets mis met de indeling" - de kaarten stonden met rare gaten
   verspreid i.p.v. een nette 3x2-grid. Oorzaak: .dest-card:nth-child(1){grid-row:1 / span 2;}
   hierboven (de homepage's bento-layout-regel voor de EERSTE kaart) werkt op elke .dest-card die
   toevallig het eerste kind is, dus ook hier - Gili Trawangan (kaart 1) claimde daardoor 2 grid-rijen
   in kolom 1, wat de auto-plaatsing van alle kaarten erna verschoof. Scoped reset i.p.v. de
   homepage-regel zelf aan te passen (die moet z'n bento-layout gewoon behouden). */
.all-dest-grid .dest-card:nth-child(1){grid-row:auto;}

.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:center;}
.step-arrow{display:flex;align-items:center;justify-content:center;}
.step-arrow svg{width:26px;height:26px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;align-items:flex-start;gap:16px;}
.step .num{width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.step h3{display:flex;align-items:center;gap:8px;font-size:16px;margin:0 0 6px;font-weight:800;}
.step h3 svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--teal);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.step p{font-size:14px;color:var(--text-muted);margin:0;line-height:1.5;}

.op-logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.op-logo-chip{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 20px;display:flex;align-items:center;justify-content:center;height:64px;}
.op-logo-chip:hover{border-color:var(--teal);box-shadow:0 8px 20px rgba(11,36,48,0.08);}
.op-logo-chip img{max-height:34px;max-width:140px;width:auto;object-fit:contain;}

/* About Us-pagina (14 aug 2026, klantverzoek: "Je mag de fastboatgili-about-us-concept.html ook
   bouwen"). .op-logo-wall/.op-logo-chip hierboven worden hier ongewijzigd hergebruikt (zelfde
   operator-logo-rij als de homepage). */
.page-about .page-hero h1{max-width:none;white-space:nowrap;}
@media (max-width:680px){.page-about .page-hero h1{font-size:22px;}}
@media (max-width:460px){.page-about .page-hero h1{white-space:normal;font-size:22px;}}
.about-lead{max-width:760px;font-size:16.5px;line-height:1.75;color:var(--text);}
.about-lead p{margin:0 0 18px;}
.about-lead strong{color:var(--ink);}
.trust-bar{display:flex;gap:0;background:#fff;border:1px solid var(--border);border-radius:16px;margin-top:36px;overflow:hidden;}
.trust-bar div{flex:1;text-align:center;padding:22px 12px;border-right:1px solid var(--border);}
.trust-bar div:last-child{border-right:0;}
.trust-bar .n{display:block;font-size:26px;font-weight:800;color:var(--ink);}
.trust-bar .n .star-amber{color:var(--amber);}
.trust-bar .l{font-size:12.5px;color:var(--text-muted);}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
.usp-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:flex-start;gap:12px;}
.usp-card svg{width:24px;height:24px;flex-shrink:0;stroke:var(--teal);fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.usp-card h3{margin:0 0 3px;font-size:14.5px;font-weight:800;}
.usp-card p{margin:0;font-size:13px;color:var(--text-muted);line-height:1.5;}
.cta-strip{background:var(--ink);border-radius:20px;padding:40px;margin:48px 0 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cta-strip h2{color:#fff;font-size:22px;margin:0 0 6px;}
.cta-strip p{color:rgba(255,255,255,0.7);font-size:14.5px;margin:0;max-width:520px;}
.cta-strip .pill-cta{white-space:nowrap;}

/* 14 aug 2026, klantmelding: de "Every operator on Fastboatgili.com..."-intro moet als 1 doorlopende
   zin zonder afbreking - was eerst een max-width:640px-fix tegen een wees-woord ("details" alleen op
   regel 3), klant wil 'm nu toch op 1 regel. Natuurlijke breedte ca. 1172px bij 15px lettergrootte -
   past nog net binnen de 1220px-sectiebreedte (zie section{max-width:1220px;padding:...24px} hierboven
   in dit bestand) op volle desktopbreedte, dus geen overflow daar. Onder 1250px viewportbreedte is er
   te weinig ruimte (section wordt smaller dan de tekst) - dan terugvallen op de originele max-width:
   640px-afbreking (nette 2 regels, geen wees-woord) i.p.v. horizontale overflow. */
.about-op-intro{max-width:none;white-space:nowrap;margin-bottom:26px;}
@media (max-width:1250px){.about-op-intro{white-space:normal;max-width:640px;}}

/* ---------- Reviews ("What travellers say") ----------
   13 aug 2026: van statische 3-koloms grid naar een horizontaal scrollende carrousel met
   prev/next-knoppen, 1-op-1 overgenomen uit fastboatgili-template-concept-v2.html (.reviews-row /
   .reviews-prev / .reviews-next / scroll-snap). Alleen de kaart-inhoud (SVG-sterren i.p.v. tekst-
   sterren) is de al werkende PHP-versie uit home.php, niet opnieuw uitgevonden.
   Correctie (13 aug 2026, zelfde dag): een eigen toegevoegde :disabled/opacity-status voor de
   pijltjes-knoppen (linkerknop grijs bij het begin van de strook) weer verwijderd - de klant merkte
   terecht op dat dit niet overeenkomt met het voorbeeld, waar beide knoppen altijd hetzelfde ogen. */
.reviews-row{position:relative;}
.reviews-grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none;}
.reviews-grid::-webkit-scrollbar{display:none;}
/* 15 aug 2026, klantcorrectie: "je wilt het juist andersom: pijltjes wel op mobiel, geen pijltjes op
   desktop" - basisregel (desktop) is nu display:none, de @media-overrides hieronder (tablet/mobiel)
   zetten 'm weer op display:flex. Precies omgekeerd t.o.v. de vorige ronde. Geldt voor zowel de
   reviews- als de tour-gallery-carrousel. */
.reviews-prev,.reviews-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 6px 16px rgba(11,36,48,0.14);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0;}
.reviews-prev:hover,.reviews-next:hover{background:var(--cream);}
.reviews-prev{left:-14px;}
.reviews-next{right:-14px;}
.reviews-prev svg,.reviews-next svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* 18 sep 2026, klantverzoek: de kaarten compacter. Smaller, minder binnenruimte, kleinere quote
   en avatar - er passen er nu vier in beeld in plaats van drie. */
.review-card{flex:0 0 272px;scroll-snap-align:start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;}
.review-stars{display:flex;gap:3px;}
.review-stars svg{width:17px;height:17px;}
.review-stars .star-filled{fill:var(--amber);}
.review-stars .star-empty{fill:var(--border);}
.review-quote{font-size:13.5px;line-height:1.5;color:var(--ink);margin:0;flex-grow:1;}
.review-person{display:flex;align-items:center;gap:10px;}
.review-avatar{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:11.5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.review-name{font-size:13px;font-weight:700;}
/* 18 sep 2026: routeregel onder de naam plus de beoordeling van die route. De sterren staan
   bewust onderaan bij het routecijfer en niet bovenaan bij de quote: het cijfer is het
   gemiddelde van de route, niet het cijfer van deze ene klant. */
.review-who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.review-route{font-size:11.5px;color:var(--text-muted);}
.review-routerating{display:flex;align-items:center;gap:5px;margin-top:8px;padding-top:10px;border-top:1px solid var(--border);}
.review-routerating svg{width:13px;height:13px;}
.review-routerating .star-filled{fill:var(--amber);}
.review-routerating .star-empty{fill:var(--border);}
.review-routerating-text{font-size:11.5px;color:var(--text-muted);margin-left:2px;}
/* 18 sep 2026, klantverzoek: de pijltjes weer zichtbaar op desktop. Op 13 aug was juist gevraagd
   ze daar weg te halen; die basisregel staat nog en geldt ook voor de tour-galerij, dus die laten
   we met rust. Alleen de reviewcarrousel krijgt ze terug. */
.reviews-prev,.reviews-next{display:flex;}
/* En op desktop helemaal buiten de strook: de knop is 44 breed en stond op -14, dus hij lag 30
   pixels over de eerste kaart heen en dekte de avatar af. De marge links van de strook is ruim
   130 pixels, dus -58 past zonder de kaarten te raken. Op tablet en mobiel blijft -8 staan:
   daar is die ruimte er niet en is de overlap juist de bedoeling. */
@media (min-width:961px){.reviews-prev{left:-58px;}.reviews-next{right:-58px;}}
@media (max-width:960px){
  .review-card{flex-basis:82%;}
  .reviews-prev,.reviews-next{display:flex;}
  .reviews-prev{left:-8px;width:38px;height:38px;}
  .reviews-next{right:-8px;width:38px;height:38px;}
}

/* ---------- Inner pages (non-home) ---------- */
.page-main{min-height:50vh;}
.page-container{max-width:1220px;margin:0 auto;padding:32px 24px 60px;}
.page-content{display:block;}
.page-content.has-sidebar{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;}
.page-content-main{min-width:0;}
.page-content-sidebar{min-width:0;}

/* ---------- Breadcrumbs module (13 aug 2026) ----------
   Was al aangemaakt in Joomla maar stond op de oude AS002065-positie (as-position-22) en op
   "alleen geselecteerde pagina's" met niets aangevinkt - vandaar altijd onzichtbaar. Verplaatst
   naar de eigen "breadcrumbs"-positie (al aangeroepen in page.php) en op "overal tonen" gezet.
   Dit is Joomla's eigen, echte kruimelpad (Home > Destinations > Gili Air etc.) - niets verzonnen. */
.mod-breadcrumbs__wrapper{padding:16px 0 0;max-width:1220px;margin:0 auto;}
.mod-breadcrumbs{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0;padding:0;font-size:13px;}
.mod-breadcrumbs li{display:inline-flex;align-items:center;}
.mod-breadcrumbs li:not(:last-child):after{content:"/";color:var(--border);margin:0 8px;}
.mod-breadcrumbs a{color:var(--text-muted);font-weight:600;}
.mod-breadcrumbs a:hover{color:var(--teal);}
.mod-breadcrumbs__here{font-size:10.5px;text-transform:uppercase;letter-spacing:0.5px;font-weight:700;color:var(--text-muted);}
.mod-breadcrumbs li:last-child{color:var(--ink);font-weight:700;}

/* ---------- Destination pages (Gili Air, Gili Trawangan, Gili Meno, Lombok, Nusa Penida, Nusa
   Lembongan) ----------
   13 aug 2026, na klantcorrectie: dit zijn nu echte pagina's die het volledige mockup-ontwerp volgen
   (fastboatgili-destination-*-concept.html in de "Fastboatgili Template Claude" projectmap), niet
   langer de kale Joomla-artikelweergave. Bestaande componenten (.search-card/.field/.op-logo-wall/
   .pax-*, allemaal hierboven al gedefinieerd) worden hergebruikt - hieronder alleen de nieuwe,
   bestemmingspagina-specifieke onderdelen: hero, facts-panel, routes-panel. Zie destination.php
   voor de PHP-kant en index.php voor de databron per bestemming. */
.page-hero{position:relative;min-height:400px;background-size:cover;background-position:center;overflow:hidden;}
.page-hero:before{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg, rgba(11,36,48,0.55) 0%, rgba(11,36,48,0.40) 30%, rgba(11,36,48,0.30) 60%, rgba(11,36,48,0.34) 100%),
  radial-gradient(circle at 15% 20%, rgba(41,158,91,0.25), transparent 50%);}
.page-hero-inner{position:relative;max-width:1220px;margin:0 auto;padding:150px 24px 60px;text-shadow:0 2px 14px rgba(0,0,0,0.35);}
.page-hero h1{color:#fff;font-size:36px;line-height:1.1;font-weight:800;margin:0 0 16px;letter-spacing:-0.8px;max-width:680px;}
/* Route-titels (bv. "Fast boat tickets from Bali to Gili Trawangan") mogen niet afbreken op desktop -
   klantverzoek (14 aug 2026), zelfde patroon als de route-mockup zelf. Scoped via de .page-route
   bodyclass (header.php) i.p.v. de gedeelde .page-hero h1 aan te passen, zodat destination-/operator-
   titels (die wel op .max-width:680px mogen afbreken) niets merken. */
.page-route .page-hero h1{max-width:none;white-space:nowrap;}
@media (max-width:720px){.page-route .page-hero h1{white-space:normal;}}
/* Terms & Conditions-hero: klant wilde de introzin ("Please read these terms carefully...") geen
   enter - zelfde scoped nowrap-patroon als hierboven bij de route-titels. */
.page-terms .page-hero p.intro{max-width:none;white-space:nowrap;}
@media (max-width:900px){.page-terms .page-hero p.intro{white-space:normal;}}
.page-hero p.intro{color:rgba(255,255,255,0.95);font-size:16px;max-width:640px;line-height:1.65;margin:0;}
/* Prijsregel op bestemmingspagina's: eerst wit->amber (14 aug 2026, om meer op te vallen dan de
   mockup's witte platte tekst), nu op klantverzoek (14 aug 2026, vervolg) omgezet naar dezelfde
   eyebrow-pil-stijl als de operator-route hieronder, terug in wit ("in witte letters") en verplaatst
   vóór de H1 i.p.v. erna - dat laat 'm nog meer opvallen dan een kleurwijziging alleen zou doen. */
.page-hero p.hero-price{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.14);color:#fff;font-size:13px;font-weight:800;padding:7px 14px;border-radius:20px;margin:0 0 16px;}
.page-hero p.hero-price:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex-shrink:0;}
/* Operator-route "eyebrow": klant wilde de routeregel meer laten opvallen (14 aug 2026) - i.p.v. een
   platte tekstregel onder de H1 (zoals de mockup) hergebruikt dit nu dezelfde eyebrow-pil-stijl die de
   homepage-hero al gebruikt (.eyebrow, zie hierboven), verplaatst vóór de H1. Bewuste afwijking van de
   mockup - zelfde behandeling nu ook toegepast op de prijsregel hierboven. Eigen klasse (niet .eyebrow
   zelf) omdat routeteksten veel langer zijn dan de korte homepage-eyebrow en D'Camel/The Tanis 2
   routes tegelijk tonen (.op-route-wrap laat de pillen dan naast/onder elkaar
   wrappen i.p.v. .eyebrow's enkele inline-flex pil).*/
.op-route-wrap{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
.op-route{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.14);color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:20px;}
.op-route:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral);flex-shrink:0;}

/* Breadcrumbs-module hergebruikt binnen de hero (i.p.v. erboven) - 13 aug 2026, gefixt: de header is
   op deze pagina's `position:absolute` (overlay, net als de homepage), dus alles wat er in de normale
   flow VOOR de hero stond viel exact achter/onder die header i.p.v. eronder - vandaar de eerdere
   overlap tussen "You are here" en het menu. De echte kruimelpad-module staat nu binnen
   .page-hero-inner (die al padding-top heeft om de header te ontwijken), met een lichte variant-
   styling zodat de tekst leesbaar is op de foto. */
.breadcrumb-on-hero .mod-breadcrumbs__wrapper{padding:0;margin:0 0 18px;max-width:none;}
.breadcrumb-on-hero .mod-breadcrumbs{font-size:13px;}
.breadcrumb-on-hero .mod-breadcrumbs li:not(:last-child):after{color:rgba(255,255,255,0.5);}
.breadcrumb-on-hero .mod-breadcrumbs a{color:rgba(255,255,255,0.75);}
.breadcrumb-on-hero .mod-breadcrumbs a:hover{color:#fff;}
.breadcrumb-on-hero .mod-breadcrumbs__here{color:rgba(255,255,255,0.75);}
.breadcrumb-on-hero .mod-breadcrumbs li:last-child{color:#fff;}

/* FAQ-hero "Not answered below? Chat with us on WhatsApp"-pil (14 aug 2026, klantverzoek "Laten we de
   FAQ pagina bouwen") - zelfde witte/transparante pil-stijl als .op-route/.hero-price hierboven, maar
   een eigen klasse omdat deze een WhatsApp-icoon bevat i.p.v. de coral-stip. */
.page-hero .intro-whatsapp{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,0.14);color:#fff;font-size:14px;font-weight:700;padding:10px 18px;border-radius:30px;margin-top:4px;}
.page-hero .intro-whatsapp svg{width:18px;height:18px;flex-shrink:0;fill:#25D366;stroke:none;}
.page-hero .intro-whatsapp:hover{background:rgba(255,255,255,0.22);}

/* FAQ jump-nav (anchor-pillen naar de secties eronder). */
.faq-jump{display:flex;flex-wrap:wrap;gap:10px;}
.faq-jump a{background:#fff;border:1px solid var(--border);border-radius:30px;padding:9px 18px;font-size:13.5px;font-weight:700;color:var(--ink);}
.faq-jump a:hover{border-color:var(--teal);color:var(--teal);}

/* FAQ-accordion (native <details>/<summary>, geen extra JS nodig). */
.faq-group{margin-bottom:8px;}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:12px;overflow:hidden;}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:15.5px;font-weight:700;color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
/* 15 aug 2026, klantcorrectie (2 rondes): "de pijl icons moeten groen worden" - de eerste fix maakte
   alleen de OPEN-cirkel vol teal (conform het mockup se open-state), maar de klant bleef de dicht-
   staande cirkel (crème met een klein teal pijltje erin) niet groen genoeg vinden. Nu staat de cirkel
   altijd vol teal met een wit pijltje erin, in beide standen (open/dicht) - geen twijfel meer mogelijk
   over "groen". Geldt voor .faq-item overal (FAQ-pagina + tour-detailpagina's delen deze klasse). */
.faq-item summary .chevron{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease;}
.faq-item summary .chevron svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.faq-item[open] summary .chevron{transform:rotate(180deg);}
.faq-item .faq-answer{padding:0 20px 20px;font-size:14.5px;color:var(--text-muted);line-height:1.65;max-width:800px;}
.faq-item .faq-answer a{color:var(--teal);font-weight:700;}

/* FAQ "How booking works"-stappen: EIGEN klasse (.faq-steps/.faq-step/.faq-step-arrow) i.p.v. de
   bestaande .steps/.step/.step-arrow hierboven hergebruiken - die zijn al in gebruik op de homepage
   met een ander aantal stappen (3 i.p.v. 4) EN een andere kaart-layout (icoon+tekst naast elkaar in
   een rij, i.p.v. hier num/titel/tekst onder elkaar in een kolom). Zelfde scoping-aanpak als eerder
   bij .facts-panel-route/.op-tile-grid: nieuwe klasse i.p.v. de gedeelde klasse aanpassen, zodat de
   homepage niets merkt. */
.faq-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:16px;align-items:stretch;}
.faq-step-arrow{display:flex;align-items:center;justify-content:center;}
.faq-step-arrow svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--coral);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.faq-step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;}
.faq-step .num{width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.faq-step h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0;font-weight:800;}
.faq-step h3 svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.faq-step p{font-size:13.5px;color:var(--text-muted);margin:0;line-height:1.55;}

/* FAQ "Good to know"-kaarten. */
.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
.info-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;}
.info-card .ic-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.info-card .ic-head .dot{width:34px;height:34px;border-radius:10px;background:rgba(41,158,91,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-card .ic-head svg{width:18px;height:18px;stroke:var(--teal);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.info-card h3{margin:0;font-size:15px;font-weight:800;}
.info-card p{font-size:13.5px;color:var(--text-muted);line-height:1.6;margin:0 0 8px;}
.info-card ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--text-muted);line-height:1.7;}
.info-card .fact-row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--border);}
.info-card .fact-row:last-child{border-bottom:0;}
.info-card .fact-row b{color:var(--ink);}
.info-card .amount{color:var(--coral);font-weight:800;}

/* FAQ afsluitende CTA-kaart ("Still have questions?"). */
.cta-panel{background:var(--ink);border-radius:20px;padding:44px;position:relative;overflow:hidden;text-align:center;}
.cta-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(41,158,91,0.18), transparent 60%);}
.cta-panel *{position:relative;}
.cta-panel h2{color:#fff;}
.cta-panel p{color:rgba(255,255,255,0.75);font-size:15px;max-width:480px;margin:0 auto 24px;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:30px;font-size:14.5px;font-weight:700;}
.cta-btn.whatsapp{background:#25D366;color:#0B2430;}
.cta-btn.whatsapp svg{width:18px;height:18px;fill:#0B2430;stroke:none;}
.cta-btn.whatsapp:hover{background:#1fb958;}
.cta-btn.outline{border:1px solid rgba(255,255,255,0.3);color:#fff;}
.cta-btn.outline:hover{border-color:#fff;}

/* Contact-pagina (14 aug 2026, klantverzoek: "Bouw direct de contact pagina"). */
.contact-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:start;}
.contact-form-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;}
/* Sidebar-kaarten staan hier gestapeld (i.p.v. de FAQ-pagina's grid), dus die heeft wel een
   margin-bottom nodig tussen de 2 kaarten - scoped hier i.p.v. de gedeelde .info-card aan te passen,
   want de FAQ-pagina regelt de ruimte tussen haar 6 kaarten al via .info-grid's eigen gap. */
.contact-grid .info-card{margin-bottom:18px;}
.info-link-list a{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;font-weight:700;color:var(--ink);}
.info-link-list a:last-child{border-bottom:0;}
.info-link-list a svg{width:18px;height:18px;flex-shrink:0;stroke:var(--teal);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.info-link-list a.whatsapp svg{stroke:none;fill:#25D366;}
.info-link-list a:hover{color:var(--teal);}

/* Het "Send us a message"-formulier IS het echte, werkende Convert Forms-formulier (form-id 11) dat
   al op de live testsite staat - zie de doc-comment bovenaan html/contact.php voor waarom dit NOOIT
   een losstaand nagebouwd formulier mag worden. Deze regels herstylen alleen Convert Forms' eigen
   klassen (niet aangeraakt/hernoemd) zodat het formulier eruitziet als de rest van deze template.
   Scoped onder #cf_11 (het echte, geverifieerde wrapper-ID van dit specifieke formulier) zodat de
   override zeker wint van Convert Forms' eigen basis-CSS zonder die basis-CSS zelf te hoeven
   aanpassen/verwijderen. */
#cf_11 .cf-fields{display:flex;flex-wrap:wrap;gap:18px;}
#cf_11 .cf-control-group{width:100%;}
#cf_11 .cf-control-group.cf-one-half{width:calc(50% - 9px);}
#cf_11 .cf-control-label{margin-bottom:6px;}
#cf_11 .cf-label{font-size:13px;font-weight:700;color:var(--ink);}
#cf_11 .cf-required-label{color:var(--coral);}
#cf_11 .cf-input{border:1px solid var(--border) !important;border-radius:10px !important;padding:11px 13px !important;font-size:14px;color:var(--text);font-family:inherit;width:100%;}
#cf_11 .cf-input:focus{outline:2px solid var(--teal);outline-offset:1px;}
#cf_11 textarea.cf-input{resize:vertical;min-height:120px;}
#cf_11 select.cf-input{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235C6E6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;}
#cf_11 .cf-field-hp{display:none;}
#cf_11 .cf-btn{background:var(--coral);color:#fff;border:0;border-radius:10px;padding:13px 28px;font-weight:700;font-size:14.5px;cursor:pointer;}
#cf_11 .cf-btn:hover{background:var(--coral-dark);}
.contact-form-card .form-note{font-size:12px;color:var(--text-muted);margin:14px 0 0;}

/* Terms & Conditions / Privacy Policy (14 aug 2026, klantverzoek: "Bouw de Terms & Conditions en
   Privacy Policy"). Kortere, smallere hero dan de meeste .page-hero-pagina's (900px i.p.v. 1220px,
   240px hoog i.p.v. 400px) - scoped via bodyclass zoals eerder bij .page-sitemap, zodat de gedeelde
   .page-hero-regels voor andere paginatypes niets merken. */
.page-terms .page-hero,
.page-privacy .page-hero{min-height:240px;}
.page-terms .page-hero-inner,
.page-privacy .page-hero-inner{max-width:900px;}
.legal-wrap{max-width:900px;margin:0 auto;padding:50px 24px 20px;}
.legal-wrap h2{font-size:20px;font-weight:800;margin:36px 0 12px;letter-spacing:-0.3px;color:var(--ink);}
.legal-wrap h2:first-child{margin-top:0;}
.legal-wrap p{font-size:14.5px;line-height:1.75;color:var(--text);margin:0 0 14px;}
.legal-wrap ul{margin:0 0 14px;padding-left:20px;font-size:14.5px;line-height:1.75;color:var(--text);}
.legal-wrap li{margin-bottom:6px;}
.legal-wrap a.inline-link{color:var(--teal);font-weight:700;}
.legal-intro{font-size:14px;color:var(--text-muted);margin:0 0 8px;}
.legal-updated{font-size:12.5px;color:var(--text-muted);margin:0 0 30px;padding-bottom:20px;border-bottom:1px solid var(--border);}
/* privacy.php wrapt het ECHTE Joomla-artikel (zie doc-comment daar) i.p.v. hardcoded tekst zoals
   terms.php - deze regels stylen die live component-output zonder de content zelf aan te passen:
   Joomla's eigen artikel-titel (".page-header h1") verbergen (onze hero toont 'm al), en de live
   tekst's <p><strong>Kop</strong></p>-alinea's (i.p.v. echte <h2>) laten opvallen als sectiekop. */
.legal-wrap-component .page-header{display:none;}
.legal-wrap-component .com-content-article__body{font-size:14.5px;line-height:1.75;color:var(--text);}
.legal-wrap-component .com-content-article__body p{margin:0 0 14px;}
.legal-wrap-component .com-content-article__body p > strong:only-child{display:block;font-size:20px;font-weight:800;letter-spacing:-0.3px;color:var(--ink);margin:22px 0 4px;}
.legal-wrap-component .com-content-article__body a{color:var(--teal);font-weight:700;}

.facts-float{max-width:1220px;margin:0 auto;padding:0 24px;transform:translateY(-44px);position:relative;z-index:2;}
.facts-panel{background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(11,36,48,0.2);display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;}
.fact-item{display:flex;align-items:center;gap:12px;padding:20px 24px;border-right:1px solid var(--border);}
.fact-item:last-child{border-right:0;}
.fact-item svg{width:26px;height:26px;flex-shrink:0;stroke:var(--teal);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fact-item .flabel{font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);font-weight:700;margin-bottom:3px;}
.fact-item .fvalue{font-size:16px;font-weight:800;color:var(--ink);}
.facts-note{font-size:12px;color:var(--text-muted);margin:14px 4px 0;}

/* Route-landingpagina's (14 aug 2026, Bali<->eiland + eiland<->eiland routes) - .facts-panel-route is
   een modifier bovenop de bestaande .facts-panel/.fact-item (hierboven, gedeeld met destination.php)
   voor het geval van 6 facts i.p.v. 3: eigen rand-logica i.p.v. de basisregels aan te passen, zodat de
   bestemmingspagina's (die altijd 3 facts in 1 rij tonen) niets merken van deze wijziging. */
.facts-panel-route .fact-item{border-bottom:1px solid var(--border);}
.facts-panel-route .fact-item:nth-child(3n){border-right:0;}
.facts-panel-route .fact-item:nth-child(n+4){border-bottom:0;}

.op-port-group{margin-top:26px;}
.op-port-group:first-child{margin-top:18px;}
.op-port-heading{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--teal);}
.op-port-heading .op-port-name{font-size:15px;font-weight:800;color:var(--ink);}
.op-port-heading .op-port-count{font-size:12px;color:var(--text-muted);font-weight:500;}
.op-tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.op-tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;display:block;}
.op-tile:hover{border-color:var(--teal);box-shadow:0 8px 20px rgba(11,36,48,0.08);}
.op-tile img{height:32px;max-width:100%;object-fit:contain;margin-bottom:10px;}
.op-tile-name{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;}
.op-tile-ports{font-size:10.5px;color:var(--text-muted);margin-top:4px;}

/* Sitemap-overzichtspagina (14 aug 2026, klantverzoek "Laten we de sitemap bouwen") - waarden
   overgenomen uit fastboatgili-sitemap-concept.html. .page-sitemap .page-hero is een scoped
   modifier (via de bodyclass uit header.php) i.p.v. de gedeelde .page-hero aan te passen, want de
   sitemap-hero is bewust korter (geen facts-panel eronder) dan destination/operator/route-hero's. */
.page-sitemap .page-hero{min-height:240px;}
.page-sitemap .page-hero-inner{padding:150px 24px 40px;}
.sitemap-wrap{max-width:1220px;margin:0 auto;padding:50px 24px 20px;}
.sitemap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.sitemap-col{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 24px;}
.sitemap-col h2{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;color:var(--teal);margin:0 0 14px;}
.sitemap-col.full{grid-column:1 / -1;}
.sitemap-col ul{list-style:none;margin:0;padding:0;columns:1;}
.sitemap-col.full ul{columns:3;column-gap:24px;}
.sitemap-col li{margin-bottom:9px;break-inside:avoid;}
.sitemap-col a{font-size:13.5px;color:var(--text);line-height:1.5;}
.sitemap-col a:hover{color:var(--teal);}
.sitemap-subhead{font-size:11.5px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;margin:16px 0 8px;}

.routes-panel{background:var(--ink);border-radius:20px;padding:44px;position:relative;overflow:hidden;}
.routes-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(41,158,91,0.18), transparent 60%);}
.routes-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:36px;}
.routes-grid--single{grid-template-columns:1fr;max-width:340px;}
.routes-grid h3{color:#fff;font-size:15px;font-weight:800;margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--teal);}
.routes-grid a{display:block;color:rgba(255,255,255,0.9);font-size:14px;font-weight:500;padding:7px 0;border-bottom:1px solid rgba(255,255,255,0.15);line-height:1.3;}
.routes-grid a:hover{color:var(--amber);}

/* ---------- Operator-detailpagina's (14 aug 2026) ----------
   Zelfde patroon als de facts-panel hierboven (een "float" die -40px over de hero heen schuift), en
   verder 1-op-1 uit fastboatgili-operator-<slug>-concept.html overgenomen (klassenamen incl.). Bewust
   NIET .routes-panel hergebruikt voor de CTA-balk onderaan - die class is al in gebruik door
   destination.php met een ander kind-element (.routes-grid, CSS grid) en een andere layout
   (display:flex zou dat kunnen verstoren); vandaar de eigen .op-routes-panel hieronder. */
.amen-float{max-width:1220px;margin:0 auto;padding:0 24px;transform:translateY(-40px);position:relative;z-index:2;}
/* 4 sep 2026, klantverzoek: amenities-balk (.amen-float) gebruikte een vaste 6-koloms grid, ongeacht het werkelijke aantal amenity-items. Bij minder dan 6 items (bv. 4 bij Waruna Darma Express) bleven er onzichtbare lege kolommen over na het laatste item, wat oogde als te veel ruimte bij dat laatste item (vaak "Refundable Ticket"). Nu flexbox i.p.v. grid, zodat de kolombreedte zich altijd automatisch verdeelt over het werkelijke aantal items en de balk gecentreerd blijft - geldt voor alle operator-pagina's, want dit is een gedeeld CSS-bestand. */
/* 4 sep 2026, definitieve versie (optie B): klant zag op brede schermen dat de balk (optie C hierboven) teveel lege witruimte aan weerszijden overhield binnen de altijd-volle-breedte box - dat oogde niet goed. Nu krimpt de box zelf echt mee: .amen-panel krijgt per operator-pagina een inline max-width, serverside berekend in html/operator.php uit het werkelijke aantal gerenderde amenity-items (count * 170px). margin:0 auto centreert de gekrompen box. Items gebruiken nog gewoon flex:1 1 0 (geen aparte max-width meer nodig op itemniveau - de panel-max-width dwingt al af dat elk item precies 170px wordt, want er is nooit meer ruimte dan het aantal items rechtvaardigt). */
.amen-panel{background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(11,36,48,0.2);display:flex;overflow:hidden;margin:0 auto;max-width:100%;}
.amen-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 12px;border-right:1px solid var(--border);text-align:center;flex:1 1 0;min-width:0;}
.amen-item:last-child{border-right:0;}
.amen-item svg{width:24px;height:24px;flex-shrink:0;stroke:var(--teal);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.amen-item span{font-size:12.5px;font-weight:700;color:var(--ink);}

.about-wrap{display:grid;grid-template-columns:170px 1fr;gap:28px;align-items:start;}
.about-logo{border:1px solid var(--border);border-radius:14px;padding:18px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.about-logo img{max-width:100%;height:auto;display:block;}
.about-rating{display:flex;align-items:center;justify-content:center;gap:5px;font-size:14px;font-weight:800;color:var(--ink);}
.about-rating .star-icon{width:15px;height:15px;fill:var(--amber);flex-shrink:0;}
.about-boat-badge{display:inline-flex;align-items:center;background:var(--amber);color:#fff;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px;letter-spacing:0.2px;white-space:nowrap;}
.about-text p{font-size:15px;line-height:1.75;color:var(--text);margin:0 0 16px;}

.op-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.op-gallery figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff;}
.op-gallery img{width:100%;height:200px;object-fit:cover;display:block;}
.op-gallery figcaption{font-size:12.5px;font-weight:700;color:var(--text-muted);padding:10px 14px;}

.price-tier{margin-bottom:30px;}
.price-tier:last-child{margin-bottom:0;}
.price-tier-label{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 14px;}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.price-card{background:#F1FAF4;border:1px solid #DCEFE1;border-radius:16px;padding:24px 26px;text-align:center;}
.price-card h3{margin:0 0 16px;font-size:16px;font-weight:800;color:var(--teal);}
.price-row{display:flex;justify-content:space-between;font-size:14.5px;color:var(--text);padding:8px 0;border-bottom:1px solid #DCEFE1;}
.price-row:last-child{border-bottom:0;}
.price-row b{font-weight:800;color:var(--ink);}
.price-note{font-size:12px;color:var(--text-muted);margin:16px 4px 0;}

.op-routes-panel{background:var(--ink);border-radius:20px;padding:36px 44px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
.op-routes-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(41,158,91,0.18), transparent 60%);}
.op-routes-panel .rp-text{position:relative;color:#fff;}
.op-routes-panel .rp-text h3{margin:0 0 6px;font-size:18px;font-weight:800;}
.op-routes-panel .rp-text p{margin:0;color:rgba(255,255,255,0.7);font-size:14px;}
.op-routes-panel .rp-cta{position:relative;background:var(--coral);color:#fff;padding:12px 22px;border-radius:30px;font-weight:700;font-size:14px;white-space:nowrap;}
.op-routes-panel .rp-cta:hover{background:var(--coral-dark);}

.related-links-label{color:var(--text-muted);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;margin:22px 0 10px;}
.related-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.related-links a{background:#fff;border:1px solid var(--border);border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--text-muted);}
.related-links a:hover{border-color:var(--teal);color:var(--teal);}
/* Tour-detailpagina's "All tours"-link (15 aug 2026) - koraal geaccentueerd, 1-op-1 uit het
   mockup's .related-links a.all-tours (elders in de site is de laatste related-link altijd
   effen, hier bewust anders omdat het mockup het zo toont). */
.related-links a.all-tours{color:var(--coral);border-color:var(--coral);font-weight:700;}

/* ---------- Tours Nusa Penida (15 aug 2026, klantverzoek: "Laten we tours nusa penida pagina's
   gaan bouwen"). Overzichtspagina (Itemid 915, .tour-list/.tour-card) + detailpagina (5 tours,
   .gallery-strip/.detail-grid/.booking-card). Sterrenrating hergebruikt geen bestaande klasse - was
   nog nergens anders in de site nodig (operators tonen rating los, zonder sterren-iconen). ---------- */
.rating-row{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text-muted);margin-bottom:8px;}
.rating-row .stars{color:var(--amber);letter-spacing:1px;font-size:14px;}
.rating-row b{color:var(--ink);font-weight:800;}
/* .hero-rating (15 aug 2026, klantcorrectie: "tourpagina's zijn ook niet goed", 1-op-1 uit
   fastboatgili-tour-west-trip-nusa-penida-concept.html) - zelfde pil-stijl als .op-route/.hero-price
   elders in de site, i.p.v. de eerdere eigen .tour-hero-rating (platte tekst zonder pil-achtergrond). */
.hero-rating{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.14);color:#fff;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:20px;margin-bottom:14px;}
.hero-rating .stars{color:var(--amber);letter-spacing:1px;}

.tours-sub-oneline{max-width:none;white-space:nowrap;margin-bottom:26px;}
@media (max-width:1100px){.tours-sub-oneline{white-space:normal;max-width:640px;}}

/* Rijenlayout (15 aug 2026, klantcorrectie: "De layout moet in rijen onder elkaar" met verwijzing
   naar het goedgekeurde mockup-bestand) - 1 kolom, elke tour-card is zelf een horizontale rij
   (foto links vast op 300px, inhoud rechts), i.p.v. de eerdere 2-koloms kaartengrid. 1-op-1 overgenomen
   uit fastboatgili-tours-nusa-penida-concept.html's .tour-list/.tour-card/.price-line/.btn-readmore. */
.tour-list{display:flex;flex-direction:column;gap:22px;}
.tour-card{display:grid;grid-template-columns:300px 1fr;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:box-shadow 0.15s,border-color 0.15s;}
.tour-card:hover{border-color:var(--teal);box-shadow:0 14px 34px rgba(11,36,48,0.1);}
.tc-photo{position:relative;min-height:230px;}
.tc-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.tc-body{padding:24px 26px;display:flex;flex-direction:column;}
.tc-body h2{margin:0 0 10px;font-size:21px;font-weight:800;color:var(--ink);}
.tc-desc{font-size:14px;color:var(--text-muted);line-height:1.65;margin:0 0 18px;flex:1;}
.tc-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.price-line{display:block;margin-bottom:0;}
.price-line .pl-label{display:block;font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:3px;}
.price-line .pl-strike{font-size:13.5px;color:var(--text-muted);text-decoration:line-through;margin-right:9px;}
.price-line .pl-final{font-size:19px;font-weight:800;color:var(--coral);}
.btn-readmore{flex-shrink:0;background:var(--ink);color:#fff;border:0;padding:11px 22px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;}
.btn-readmore:hover{background:var(--teal);}

/* 15 aug 2026, klantverzoek: "ik denk dat de gallery een carrousel moet worden... net als de reviews
   op de home pagina" - omgezet van een statische 5-koloms grid (die op mobiel 2-3 van de 5 foto's
   gewoon verborg via nth-child) naar exact dezelfde horizontaal-scrollende carrousel als
   .reviews-row/.reviews-grid op de homepage: zelfde structuur (.gallery-row/.gallery-prev/
   .gallery-next/scroll-snap), zelfde scrollBy()-knoppenlogica in js/script.js. Nu blijven alle 5
   foto's op elke schermbreedte bereikbaar. */
.gallery-row{position:relative;margin-bottom:8px;}
/* justify-content:safe center (i.p.v. gewoon center) - centreert de 5 foto's netjes wanneer ze samen
   smaller zijn dan de rij (brede desktopschermen), maar valt terug op normaal links-uitgelijnd
   scrollen zodra de foto's niet meer passen (tablet/mobiel) - "gewoon" center zou daar de eerste
   foto('s) potentieel onbereikbaar maken voorbij de linkerrand, "safe" voorkomt dat. */
.gallery-strip{display:flex;justify-content:safe center;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}
.gallery-strip::-webkit-scrollbar{display:none;}
/* 15 aug 2026, klantcorrectie: "de uiterst rechter foto wordt afgesneden op desktop, in het mockup
   staat het goed" - met een vaste breedte (230px) pasten 5 foto's + 4 tussenruimtes (1190px) niet
   altijd precies in de sectie (max-width 1220px, min de padding), waardoor de 5e foto op sommige
   breedtes half buiten beeld viel i.p.v. gewoon te scrollen te zijn. Nu procentueel: op desktop vult
   elke foto precies 1/5e van de rij (min haar aandeel in de tussenruimtes) - exact 5 foto's passen
   altijd volledig, geen scrollen nodig, identiek aan het mockup's statische 5-koloms grid. Pas op
   kleinere schermen (media queries hieronder) verandert dit in een echte scroll-carrousel. */
.gallery-strip img{flex:0 0 calc((100% - 40px) / 5);min-width:0;height:150px;object-fit:cover;border-radius:12px;display:block;scroll-snap-align:start;}
/* Zelfde omkering als bij de reviews hierboven: standaard (desktop) verborgen, @media-overrides
   verderop (tablet/mobiel) zetten 'm weer aan. */
.gallery-prev,.gallery-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 6px 16px rgba(11,36,48,0.14);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0;}
.gallery-prev:hover,.gallery-next:hover{background:var(--cream);}
.gallery-prev{left:-14px;}
.gallery-next{right:-14px;}
.gallery-prev svg,.gallery-next svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Tour-gallery lightbox (21 aug 2026) ----------
   Klantverzoek: foto in de Photo Gallery moet bij klikken vergroot getoond worden, met
   vorige/volgende-navigatie vanuit de vergrote weergave. Opgebouwd als los, herbruikbaar
   overlay-element (via js/script.js in de <body> geplaatst), onafhankelijk van de bestaande
   .gallery-row carousel hierboven. ---------- */
body.lightbox-open{overflow:hidden;}
.gallery-lightbox{position:fixed;inset:0;background:rgba(11,36,48,0.92);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .2s ease;padding:60px 70px;box-sizing:border-box;}
.gallery-lightbox.active{opacity:1;visibility:visible;}
.gallery-lightbox-img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.4);object-fit:contain;}
.gallery-lightbox-close,.gallery-lightbox-prev,.gallery-lightbox-next{position:absolute;width:48px;height:48px;border-radius:50%;background:#fff;border:0;box-shadow:0 6px 16px rgba(11,36,48,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;z-index:1001;}
.gallery-lightbox-close:hover,.gallery-lightbox-prev:hover,.gallery-lightbox-next:hover{background:var(--cream);}
.gallery-lightbox-close{top:20px;right:20px;}
.gallery-lightbox-prev{left:20px;top:50%;transform:translateY(-50%);}
.gallery-lightbox-next{right:20px;top:50%;transform:translateY(-50%);}
.gallery-lightbox-close svg,.gallery-lightbox-prev svg,.gallery-lightbox-next svg{width:22px;height:22px;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;}
@media (max-width:600px){
  .gallery-lightbox{padding:70px 16px;}
  .gallery-lightbox-close,.gallery-lightbox-prev,.gallery-lightbox-next{width:40px;height:40px;}
  .gallery-lightbox-prev{left:10px;}
  .gallery-lightbox-next{right:10px;}
}


.detail-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start;}
.detail-subhead{font-size:19px;font-weight:800;color:var(--ink);margin:32px 0 14px;}
.detail-main > .why-chips{margin-top:4px;}
.tour-longdesc{font-size:14.5px;color:var(--text-muted);line-height:1.7;max-width:720px;margin:0 0 4px;}

/* Why-chips: platte pil zonder icoon, 1-op-1 uit het mockup (het eerdere checkmark-icoontje erin
   was een eigen toevoeging, niet in de bron). */
.why-chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px;}
.why-chip{background:#fff;border:1px solid var(--border);border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink);}

/* Price-panel (15 aug 2026, ontbrak in de vorige ronde) - "One Day Tour"-prijsoverzicht, direct
   onder de lange beschrijving. Hergebruikt de bestaande .price-row-basisstijl (flex + border-bottom,
   ook gebruikt in .price-tier op operator.php) met een scoped override hieronder voor de
   pr-label/pr-price-indeling die dit mockup-bestand gebruikt (label links, prijs rechts-uitgelijnd). */
.price-panel{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;margin:22px 0;}
.price-panel h3{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--ink);}
.price-panel .pp-sub{font-size:12px;color:var(--text-muted);margin:0 0 12px;}
.price-panel .price-row{padding:11px 0;border-bottom-color:var(--border);align-items:baseline;}
.price-panel .pr-label{font-size:13.5px;font-weight:700;color:var(--ink);}
.price-panel .pr-price{text-align:right;}
.price-panel .pr-strike{display:block;text-decoration:line-through;color:var(--text-muted);font-size:12px;}
.price-panel .pr-final{color:var(--coral);font-weight:800;font-size:16px;}

.includes-list{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;}
.includes-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text);}
.includes-list li svg{width:16px;height:16px;stroke:var(--teal);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px;}

.itinerary{position:relative;padding-left:4px;}
.itin-step{position:relative;padding:0 0 22px 26px;border-left:2px solid var(--border);}
.itin-step:last-child{border-left-color:transparent;padding-bottom:0;}
.itin-dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--teal);border:2px solid #fff;box-shadow:0 0 0 1px var(--teal);}
.itin-time{margin:0 0 4px;font-size:14.5px;font-weight:800;color:var(--ink);}
.itin-text{margin:0 0 6px;font-size:13.5px;color:var(--text-muted);line-height:1.6;}
.itin-list{margin:0;padding-left:18px;font-size:13.5px;color:var(--text-muted);line-height:1.75;}
.itin-note{font-size:12.5px;color:var(--text-muted);font-style:italic;margin:14px 0 0;}

/* Booking-card (15 aug 2026, klantcorrectie: "de formulieren kloppen niet, het moet er zo uitzien"
   met screenshots van het mockup-formulier) - CSS-klassen en velden 1-op-1 overgenomen uit
   fastboatgili-tour-west-trip-nusa-penida-concept.html (identiek op alle 5 tour-mockups). De eerdere
   eigen bc-*-prijscalculator-opzet is hierdoor vervangen; zie de doc-comment bij het <form>-tag in
   html/tour.php voor waarom de "Book Now"-knop toch een ECHTE actie heeft (WhatsApp-bericht met alle
   ingevulde velden) i.p.v. het mockup's dode "onsubmit=return false" - er is nog geen echte
   boekingsbackend. */
/* 15 aug 2026, klantcorrectie: "het Book this tour formulier kan verschuiven" - position:sticky liet
   de kaart meebewegen met scrollen, wat de klant niet wilde. Nu gewoon statisch op zijn plek in de
   grid-kolom, beweegt niet meer mee met de rest van de pagina. */
.booking-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:0 16px 40px rgba(11,36,48,0.08);}
.booking-card h3{margin:0 0 4px;font-size:17px;font-weight:800;color:var(--ink);}
.booking-card .bc-sub{color:var(--text-muted);font-size:12.5px;margin:0 0 18px;line-height:1.5;}
.bf-row .req,.bc-sub .req{color:var(--coral);}
.bf-row{margin-bottom:14px;}
.bf-row label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.bf-row .bf-hint{font-size:11px;color:var(--text-muted);margin-top:4px;}
.bf-row input,.bf-row select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--text);background:#fff;font-family:inherit;}
.bf-row input:focus,.bf-row select:focus{outline:2px solid var(--teal);outline-offset:1px;}
.bf-row select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235C6E6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:34px;}
.bf-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bf-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.bf-total{background:var(--cream);border-radius:10px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin:18px 0 16px;}
.bf-total span{font-size:13px;font-weight:700;color:var(--ink);}
.bf-total b{color:var(--coral);font-size:17px;}
.btn-book{width:100%;background:var(--coral);color:#fff;border:0;border-radius:10px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;}
.btn-book:hover{background:var(--coral-dark);}
.bf-pay-note{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:10px;padding:10px 12px;margin:14px 0 0;font-size:12px;font-weight:600;color:var(--ink);line-height:1.5;}
.bf-pay-note svg{width:16px;height:16px;flex-shrink:0;stroke:var(--teal);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.bf-note{font-size:11px;color:var(--text-muted);margin:12px 0 0;line-height:1.55;}
.bf-note a{color:var(--teal);font-weight:700;}
.bf-divider{border:0;border-top:1px solid var(--border);margin:18px 0;}

/* ---------- "All fast boat operators"-overzichtspagina (14 aug 2026, Itemid 719) ---------- */
.op-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.op-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;transition:border-color 0.15s,box-shadow 0.15s;}
.op-card:hover{border-color:var(--teal);box-shadow:0 10px 26px rgba(11,36,48,0.08);}
.op-card-logo{height:52px;display:flex;align-items:center;justify-content:center;}
.op-card-logo img{max-height:52px;max-width:140px;object-fit:contain;}
.op-card h3{margin:2px 0 0;font-size:15.5px;font-weight:800;line-height:1.3;color:var(--ink);}
.op-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;min-height:19px;}
.op-rating{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--ink);}
.op-rating svg{width:13px;height:13px;fill:var(--amber);flex-shrink:0;}
.op-boat-badge{display:inline-flex;align-items:center;background:var(--amber);color:#fff;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:0.2px;white-space:nowrap;}
.op-card-route{font-size:12px;color:var(--text-muted);line-height:1.5;min-height:34px;}
.op-card-view{margin-top:auto;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:8px 18px;font-weight:700;font-size:12.5px;display:inline-block;}
.op-card:hover .op-card-view{background:var(--teal);}
.op-group-heading{font-size:20px;font-weight:800;margin:0 0 16px;color:var(--ink);}
.op-group-heading:not(:first-child){margin-top:46px;}

/* ---------- Single-article pages (operators, routes, tours, about, faq, ...) ----------
   13 aug 2026: Joomla's eigen com_content-artikelweergave was volledig ongestyled (kale H1, een
   "Details / Written by"-metablok dat niemand hoeft te zien, platte tekst). Dit stylet de bestaande,
   echte artikel-content (nooit verzonnen/herschreven) - geen aparte hero met eigen teksten gebouwd,
   want de artikelen bevatten al een eigen titel+foto+beschrijving+operatorlijsten per haven.
   (Geldt niet meer voor de 6 destination-Itemids hierboven - die hebben nu hun eigen destination.php
   layout met een echte hero i.p.v. deze kale artikelweergave.) */
.com-content-article.item-page{max-width:800px;margin:0 auto;}
.com-content-article .article-info{display:none;}
.com-content-article > h1{font-size:30px;font-weight:800;letter-spacing:-0.5px;line-height:1.15;margin:0 0 22px;color:var(--ink);}
.com-content-article .item-image{margin:0 0 26px;}
.com-content-article .item-image img,
.com-content-article > img{width:100%;height:auto;border-radius:16px;display:block;}
.com-content-article p{font-size:15.5px;line-height:1.75;color:var(--text);margin:0 0 18px;}
.com-content-article ul,.com-content-article ol{margin:0 0 18px;padding-left:22px;}
.com-content-article li{font-size:15.5px;line-height:1.7;color:var(--text);margin-bottom:6px;}
.com-content-article strong{color:var(--ink);}
.com-content-article a{color:var(--coral);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,107,74,0.35);text-underline-offset:2px;}
.com-content-article a:hover{text-decoration-color:var(--coral);}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,0.75);padding:56px 24px 26px;margin-top:50px;}
/* 14 aug 2026: 5 -> 6 kolommen (nieuwe "Explore"-kolom, zie html/footer.php) - klantopmerking dat
   "Our fast boats"/"Tours Nusa Penida" niet onder "Company" thuishoorden. */
.foot-inner{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:24px;font-size:13px;}
.foot-inner h4{color:#fff;font-size:13px;margin:0 0 12px;text-transform:uppercase;letter-spacing:0.5px;font-weight:800;}
.foot-inner a{display:block;color:rgba(255,255,255,0.65);margin-bottom:9px;}
.foot-inner a.foot-icon-link{display:flex;align-items:center;gap:9px;}
.foot-icon-link svg{width:18px;height:18px;flex-shrink:0;display:block;fill:none;stroke:#25D366;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.foot-icon-link:hover svg{stroke:var(--amber);}
.foot-whatsapp{color:#fff;font-weight:700;margin-top:4px;margin-bottom:9px;}
.foot-whatsapp svg{fill:#25D366;stroke:none;}
/* 18 sep 2026: het WhatsApp-icoon oogde zwakker dan FAQ en Contact form ernaast. Oorzaak: de
   PNG heeft 12,5% doorzichtige rand aan elke kant, dus het merkteken vulde maar 75% van het
   vakje van 18 bij 18, terwijl de lijniconen het helemaal vullen. Masker nu op 120% in plaats
   van contain: het teken is daarmee optisch even groot, maar niet even groot in pixels - een
   gevuld merkteken weegt zwaarder dan een lijntekening, dus 133% zou juist te zwaar zijn. */
.wa-mask-icon{display:inline-block;width:18px;height:18px;flex-shrink:0;background-color:#25D366;-webkit-mask-image:url(../images/whatsapp-icon.png);mask-image:url(../images/whatsapp-icon.png);-webkit-mask-size:120%;mask-size:120%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;}
.foot-whatsapp:hover{color:#25D366;}
.foot-bottom{max-width:1220px;margin:30px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,0.12);font-size:12px;color:rgba(255,255,255,0.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- Floating buttons ---------- */
.wa-float{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(11,36,48,0.35);z-index:220;transition:transform 0.15s ease,bottom 0.2s ease;}
/* 24 aug 2026, klantfeedback ("back to top"/WhatsApp-knop overlapt de selection-bar): schuift beide
   knoppen omhoog zodra de sticky selection-bar (zie hieronder) getoond wordt. --sel-bar-h wordt
   in default.php's JS gezet naar de echte, gemeten hoogte van de bar (deze wrapt op smalle
   schermen naar 2-3 regels), de 76px hierboven is alleen een fallback voor het allereerste
   frame vóórdat JS die meting heeft kunnen doen. */
body.has-sel-bar .wa-float{bottom:calc(var(--sel-bar-h, 76px) + 16px);}
.wa-float:hover{transform:scale(1.08);}
.wa-float-icon{width:48px;height:48px;display:block;}
.back-to-top{position:fixed;bottom:22px;left:22px;width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--border);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(11,36,48,0.18);z-index:215;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s,background 0.15s,bottom 0.2s ease;}
body.has-sel-bar .back-to-top{bottom:calc(var(--sel-bar-h, 76px) + 16px);}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--cream);}
.back-to-top svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Pax dropdown ---------- */
.pax-field{position:relative;}
.pax-trigger{cursor:pointer;user-select:none;}
/* 5 sep 2026, klantverzoek: zichtbare "kier" (het beige/foto-achtergrond schemerde erdoorheen) tussen From/To/Travellers-velden en hun dropdown-paneel. top ging van calc(100% + 8px) naar calc(100% + 3px) - klant koos expliciet voor een kleine restruimte i.p.v. volledig dichtplakken (0px). Geldt voor .pax-dropdown, gedeeld door .port-dropdown (From/To) en het travellers-paneel. Depart/Return gebruiken een verborgen native input[type=date] (browser-eigen datumkiezer) en hebben dus geen eigen .pax-dropdown-paneel - klant bevestigde dat daar geen kier-probleem is. */
.pax-dropdown{display:none;position:absolute;top:calc(100% + 3px);left:0;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(11,36,48,0.2);padding:14px;z-index:80;max-height:430px;overflow-y:auto;}
/* 27 aug 2026: de haven-dropdowns (From/To) hergebruiken .pax-dropdown, maar de vaste min-width:240px van de pax-teller-popup stond niet gelijk met de (bredere) veldbreedte, waardoor de lijst niet leek te lijnen met het From/To-veld. Alleen voor deze haven-dropdowns (herkenbaar aan .port-dropdown, toegevoegd in script.js) de breedte laten meeschalen met het veld zelf - de pax-teller-popup (Adult/Child/Infant) blijft ongewijzigd op zijn compacte vaste breedte. */
.port-dropdown{width:100%;}
.pax-dropdown.open{display:block;}
.pax-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);}
.pax-row:last-of-type{border-bottom:none;}
.pax-title{display:block;font-size:13.5px;font-weight:700;color:var(--text);}
.pax-sub{display:block;font-size:11.5px;color:var(--text-muted);}
.pax-stepper{display:flex;align-items:center;gap:10px;}
.pax-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--ink);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.pax-btn:hover{border-color:var(--teal);color:var(--teal);}
.pax-btn:disabled{opacity:0.35;cursor:not-allowed;}
.pax-count{min-width:16px;text-align:center;font-weight:700;font-size:14px;}
.pax-done{margin-top:10px;width:100%;background:var(--ink);color:#fff;border:0;border-radius:8px;padding:9px;font-weight:700;font-size:13px;cursor:pointer;}
.pax-done:hover{background:var(--teal);}

/* Mobiele Adult/Child/Infant-vakken (13 aug 2026, ontbrak - klant wees op fastboatgili-template-
   concept-v2.html). Op desktop blijft de bestaande dropdown-met-stappers (.pax-dropdown) de manier
   om reizigers te kiezen; op mobiel (zie media query hieronder) wordt die vervangen door deze 3
   losse invulvakken - 1-op-1 dezelfde opzet als de mockup. */
/* 17 aug 2026: ontbrekende regel gevonden tijdens live-verificatie van de bustrips-pagina (dit is een
   sitewide klasse, gedeeld met de homepage-widget in home.php - die bug bestond daar dus ook, alleen
   nooit opgemerkt omdat die widget nog niet functioneel is). Zonder deze regel heeft de browser geen
   breedte/hoogte-beperking voor dit svg-element en rendert het als een enorm vierkant (~intrinsieke
   grootte), wat het hele Travellers-veld en de rij eromheen kapot duwt. Verborgen op desktop, exact
   zoals fastboatgili-search-results-concept.html - op mobiel weer zichtbaar, zie media query hieronder. */
.pax-icon{display:none;}
.pax-select-row{display:none;gap:6px;}
.pax-select-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.pax-select-col label{font-size:9.5px;text-transform:uppercase;letter-spacing:0.3px;color:var(--text-muted);font-weight:700;}
.pax-select{width:100%;padding:9px 4px;border:1px solid var(--border);border-radius:8px;font-size:13px;color:var(--text);background:#fff;cursor:pointer;}
.pax-select:focus{outline:none;border-color:var(--teal);}
.pax-select-icon-box{padding:9px 10px;}
.pax-select-icon-box .pax-select{border:0;padding:0;background:transparent;flex:1;min-width:0;}
.field-native-select-wrap{display:none!important;}

/* ---------- Mobile ---------- */
@media (max-width:960px){
  .steps{grid-template-columns:1fr;}
  .step-arrow{display:none;}

  .nav-links-wrap{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;box-shadow:0 14px 34px rgba(11,36,48,0.22);z-index:230;padding:6px 0 14px;}
  .nav-links-wrap.mobile-open{display:flex;}
  .mod-menu{flex-direction:column;align-items:stretch;gap:0;}
  .mod-menu .nav-item{display:block;}
  .mod-menu .nav-item > a{color:var(--ink);padding:14px 20px;font-size:15px;font-weight:700;border-bottom:1px solid var(--border);}
  .mod-menu .nav-item > a:hover{color:var(--teal);}
  .mod-menu__toggle-sub{position:absolute;top:2px;right:6px;color:var(--ink);padding:12px;}
  .mod-menu__sub{position:static;box-shadow:none;border:0;border-radius:0;background:var(--cream);margin:0 0 0 20px;columns:1!important;width:auto!important;max-height:none!important;}
  .mod-menu__sub.show-menu{display:block!important;}
  .nav-links-wrap .currency-switch,.nav-links-wrap .lang-switch{color:var(--ink);background:var(--cream);margin:12px 20px 0;justify-content:space-between;}
  .burger{display:block;position:relative;z-index:231;}
  .logo img{height:56px;}
  /* 13 aug 2026: op mobiel is .site-header--overlay nog steeds het halfdoorzichtige, groene laagje
     (bedoeld om over de hero-FOTO te zweven), maar de hero zelf wordt op mobiel juist een vlak,
     effen teal blok met 10px zijmarge (zie ".hero" verderop) - geen foto om overheen te blenden.
     Doordat de header wel de volle breedte beslaat en de hero niet, werd het randje ernaast (waar de
     header over de cream pagina-achtergrond viel i.p.v. over de hero) een merkbaar lichtere groene
     streep - klant wees hierop. Op mobiel de header nu ook gewoon effen teal maken, exact dezelfde
     kleur als de hero eronder, zodat dat naadje verdwijnt. */
  .site-header--overlay{background:transparent;}.site-header--overlay .logo img{filter:drop-shadow(0 2px 9px rgba(4,32,22,.55));}.site-header--overlay .burger{filter:drop-shadow(0 2px 9px rgba(4,32,22,.55));}
  .site-header--overlay .logo img{height:74px;}
  .nav-wrap{padding:8px 14px;gap:4px;}
  .pill-cta-persistent{display:inline-block;padding:8px 14px;font-size:12.5px;flex-shrink:0;white-space:nowrap;}
  /* 27 aug 2026: Book now-knop in header op mobiel verbergen, alleen op de homepage - daar staat het boekingformulier al meteen in beeld, dus de knop is daar overbodig. Op andere pagina's (waar geen formulier zichtbaar is) blijft de knop wel gewoon staan. */
  body.page-home .pill-cta-persistent{display:none;}
  /* 30 aug 2026: zelfde reden als de page-home-regel hierboven - op de bustrips-zoekresultatenpagina (page-search-results) is de klant al middenin een boeking bezig (trips kiezen), dus "Book now" springt verwarrend terug naar de homepage-zoekwidget. Alleen op mobiel verbergen; op desktop blijft de knop gewoon staan (klantverzoek). */
  body.page-search-results .pill-cta-persistent{display:none;}


  .hero{min-height:auto;margin:0 10px;overflow:visible;background-color:var(--teal)!important;background-image:url(../images/hero-home-groen.webp?v=6)!important;background-size:cover!important;background-position:center bottom!important;background-repeat:no-repeat!important;}
  .hero:before{display:none;}
  .hero-inner{padding:96px 24px 104px;}
  .eyebrow{display:none;}
  .hero h1{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .hero p{display:none;}
  .hero-stats{display:none;}

  .search-card-title{display:block;}
  .search-row{grid-template-columns:1fr;grid-template-areas:"from" "date" "pax" "btn";}
  .search-row.roundtrip{grid-template-columns:1fr;grid-template-areas:"from" "date" "return" "pax" "btn";}
  .pax-field{grid-column:1 / -1;}
  .pax-field .pax-label{display:none;}
  /* 17 aug 2026, klantfeedback: dit "lange veld" (het compacte Travellers-samenvattingsvak met
     persoon-icoon + totaalcijfer) bleef op mobiel zichtbaar NAAST de bedoelde Adult/Child/Infant-
     vakjes. Oorzaak: .bustrips .search-card .field .box{display:flex;...} (regel 1246, voor alle
     veld-boxen op deze pagina, geen media query) heeft 4 klassen in de selector en dus hogere
     CSS-specificiteit dan deze regel hierboven (3 klassen) - wint dus altijd, media query of niet.
     !important toegevoegd om dat definitief te overstemmen, zelfde patroon als .pax-dropdown hieronder. */
  /* 17 aug 2026, klantfeedback: klant wil dit kleine persoon-icoontje (dat als algemeen "Travellers"-
     icoontje boven de Adult/Child/Infant-rij stond, ter vervanging van het verborgen label) niet -
     oogt als los/verkeerd geplaatst boven alleen "Adult". Simpelweg verborgen gelaten (blijft de
     sitewide default .pax-icon{display:none;} volgen, ook op mobiel). */
  .pax-field .pax-icon{display:none;}
  /* 27 aug 2026 (definitief): pointer-events:none bleek op een echt Android-toestel de systeem-picker niet te blokkeren (werkte alleen in desktop-simulatie) - CSS kan native <select>-touch-activatie niet betrouwbaar onderdrukken. Klant liet zien dat fastboatgili.com (productie) voor Adult/Child/Infant gewone, ongewijzigde native <select>-velden gebruikt en dat dit daar prima werkt; dat voorbeeld wordt hier gevolgd. De 3 vakjes blijven zichtbaar (icoon+waarde+chevron), maar zijn nu weer 100% native - geen JS-klik-onderschepping, geen popup, gewoon de OS-picker zoals op productie. */
  /* 2 sep 2026, klantfeedback (screenshot, mobiele edit-zoekbalk resultatenpagina): dit vakje
     ('Travellers' met alleen een totaalaantal) stond dubbelop zichtbaar naast de losse
     ADULT/CHILD/INFANT-vakjes (.pax-select-row) eronder - dezelfde data twee keer getoond.
     Root cause: .bustrips .search-card .field .box{display:flex} (verderop in dit bestand,
     buiten een mediaquery, hogere specificiteit: 4 klassen t.o.v. 3) won het van deze regel
     hieronder, alleen op de resultatenpagina (niet op Home/Route/Destination, die missen die
     .bustrips .search-card-context). !important toegevoegd zodat dit vakje, zoals bedoeld,
     verborgen blijft ten gunste van de 3 native ADULT/CHILD/INFANT-vakjes (zie de 27 aug
     2026-beslissing hierboven). */
  .pax-field .box.pax-trigger{display:none!important;}
  .pax-field .pax-select-row{display:flex;}
  .field-original-box{display:none!important;}
  .field-native-select-wrap{display:flex!important;}
  .field-native-select{font-size:14px;}
  .swap-fields{grid-column:1 / -1;grid-template-columns:1fr;gap:14px;position:relative;}
  .swap-btn{position:absolute;top:calc(50% + 9px);bottom:auto;left:auto;right:14px;margin:0;width:40px;height:40px;font-size:20px;transform:translateY(-50%) rotate(90deg);z-index:2;box-shadow:0 0 0 4px #fff;}
  .btn-search{grid-column:1 / -1;}
  .search-float{transform:translateY(-16px);padding:0 10px;max-width:none;}
  .search-card{border-radius:16px;box-shadow:0 10px 26px rgba(11,36,48,.16);backdrop-filter:none;border:1px solid var(--border);}
  .hero-usps-inner{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:20px 14px 0;}
  .usp-item{justify-content:flex-start;white-space:normal;}

  .dest-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;}
  .dest-card:nth-child(1){grid-row:auto;grid-column:1 / -1;height:220px;}
  .dest-card{height:160px;}

  .reviews-grid{grid-template-columns:1fr 1fr;}

  .page-content.has-sidebar{grid-template-columns:1fr;}
  .foot-inner{grid-template-columns:1fr 1fr;}

  .wa-float{width:52px;height:52px;bottom:16px;right:16px;}
  .wa-float svg{width:27px;height:27px;}
  .back-to-top{width:42px;height:42px;bottom:16px;left:16px;}
  .back-to-top svg{width:18px;height:18px;}

  /* Destination pages (13 aug 2026) */
  .page-hero{overflow:visible;}
  .page-hero-inner{padding:104px 24px 56px;}
  .page-hero h1{font-size:28px;}
  /* Op mobiel stond de hero-tekst bijna tegen de facts-panel eronder aan (klant screenshot, 14 aug
     2026): .page-hero-inner's bottom-padding (was 40px) en .facts-float's -44px omhoog-schuif hieven
     elkaar bijna helemaal op. Bottom-padding hierboven verhoogd naar 56px + de omhoog-schuif hier
     verkleind naar -20px, samen een zichtbare ~36px ruimte i.p.v. bijna 0. Geldt voor alle .page-hero-
     pagina's met een facts-panel (destination.php + route.php), niet route-specifiek. */
  .facts-float{transform:translateY(-20px);}
  .op-route{font-size:12.5px;padding:6px 12px;max-width:100%;}
  .page-hero p.hero-price{font-size:12.5px;padding:6px 12px;max-width:100%;}
  .facts-panel{grid-template-columns:1fr;}
  .fact-item{border-right:0;border-bottom:1px solid var(--border);}
  .fact-item:last-child{border-bottom:0;}
  .routes-panel{padding:28px;}

  /* Operator-detailpagina's (14 aug 2026) */
  /* 4 sep 2026: de 3-koloms-grid-mobielregels voor .amen-panel/.amen-item hierboven (uit de
     oude 14 aug-versie) zijn verwijderd. .amen-panel is sinds Taak #104 een niet-wrappende flexrow
     met een serverside berekende max-width (zie html/operator.php en de niet-mobiele .amen-panel/
     .amen-item-regels hierboven) - er is dus geen wrap naar meerdere rijen meer, dus grid-template-
     columns/border-bottom/nth-child(3n)-border-right waren niet alleen overbodig maar verwijderden
     ook actief de randlijn bij het 3e item (bv. "Toilet"), wat de klant terecht als een bug zag. */
  .about-wrap{grid-template-columns:1fr;}
  .about-logo{width:150px;}
  .op-gallery{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;}
  .op-routes-panel{padding:28px;}
  .op-grid{grid-template-columns:1fr 1fr;}
  .op-tile-grid{grid-template-columns:1fr 1fr;}

  /* Sitemap-overzichtspagina (14 aug 2026) */
  .sitemap-grid{grid-template-columns:1fr;gap:20px;}
  .sitemap-col.full ul{columns:2;}

  /* FAQ-pagina (14 aug 2026) */
  .faq-steps{grid-template-columns:1fr 1fr;}
  .faq-step-arrow{display:none;}
  .info-grid{grid-template-columns:1fr 1fr;}
  .cta-panel{padding:32px 22px;}

  /* Contact-pagina (14 aug 2026) */
  .contact-grid{grid-template-columns:1fr;}

  /* All destinations-overzichtspagina (14 aug 2026) */
  .all-dest-grid{grid-template-columns:1fr 1fr;}

  /* About Us-pagina (14 aug 2026) */
  .trust-bar{flex-wrap:wrap;}
  .trust-bar div{flex:1 1 33%;}
  .usp-grid{grid-template-columns:1fr 1fr;}
  .cta-strip{padding:28px;}

  /* Tours Nusa Penida (15 aug 2026) */
  .tour-card{grid-template-columns:1fr;}
  .tc-photo{min-height:200px;}
  .gallery-strip img{flex-basis:calc((100% - 20px) / 3);height:130px;}
  .gallery-prev,.gallery-next{display:flex;}
  .gallery-prev{left:-8px;width:38px;height:38px;}
  .gallery-next{right:-8px;width:38px;height:38px;}
  .detail-grid{grid-template-columns:1fr;}
  .booking-card{margin-top:8px;}
  .includes-list{grid-template-columns:1fr;}
}
@media (max-width:600px){
  #cf_11 .cf-control-group.cf-one-half{width:100%;}
  .contact-form-card{padding:22px;}
  .usp-grid{grid-template-columns:1fr;}
  .gallery-strip img{flex-basis:78%;}
  .tc-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
  .btn-readmore{align-self:stretch;text-align:center;}
  .bf-two{grid-template-columns:1fr;}
  .bf-three{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .dest-grid{grid-template-columns:1fr;}
  .foot-inner{grid-template-columns:1fr;}
  .reviews-grid{grid-template-columns:1fr;}
  .op-grid{grid-template-columns:1fr;}
  .sitemap-col.full ul{columns:1;}
  .faq-steps{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .cta-row{flex-direction:column;}
  .all-dest-grid{grid-template-columns:1fr;}
}

/* 15 aug 2026 - com_bookpro "busconfirm" (passagiersgegevens/boekingsbevestiging) template
   override, volgens fastboatgili-busconfirm-concept.html. Scoped onder .busconfirm zodat niets
   hiervan andere pagina's raakt. Input/select/label-styling hergebruikt bewust dezelfde look als
   .bf-row op de tourpagina's (zelfde visuele taal, geen losse variant nodig). */
.busconfirm{padding-top:4px;}
.confirm-back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:20px;background:none;border:0;cursor:pointer;font-family:inherit;}
.confirm-back-link:hover{color:var(--teal);}
.confirm-shell{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start;}
.confirm-shell aside{position:sticky;top:20px;align-self:start;}
.confirm-shell .passenger-form{max-width:760px;}
.trip-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:20px;}
.trip-card+.trip-card{margin-top:16px;}
.trip-card h3{margin:0 0 4px;font-size:16px;font-weight:800;color:var(--ink);border-bottom:1px solid var(--border);padding-bottom:12px;}
.trip-pax{font-size:13.5px;color:var(--text-muted);font-weight:600;margin:12px 0 16px;}
.trip-leg{margin-bottom:14px;background:var(--cream);border-radius:10px;padding:14px;}
.trip-leg:last-child{margin-bottom:0;}
.trip-leg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.leg-badge{display:inline-block;background:var(--ink);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;padding:5px 12px;border-radius:20px;}
/* 25 aug 2026, klantverzoek: 'Change'-links met potlood-icoon per leg in de Your trip information-kaart, overgenomen uit fastboatgili-busconfirm-concept.html (.leg-edit-link). .trip-leg-head heeft al justify-content:space-between, dus dit valt vanzelf rechts naast de .leg-badge. */
.leg-edit-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--text-muted);text-decoration:none;flex-shrink:0;}
.leg-edit-link:hover{color:var(--teal);}
.leg-edit-link svg{width:13px;height:13px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.trip-leg-date{font-size:13px;font-style:italic;color:var(--text-muted);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.trip-leg-date svg{width:14px;height:14px;flex-shrink:0;stroke:var(--text-muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.trip-leg-route{display:flex;align-items:center;gap:8px;}
.trip-leg-route .port-block.right{text-align:right;}
.trip-leg-route .route-line{flex:1;height:2px;background:var(--border);min-width:20px;}
.trip-leg-route .port{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px;}
.trip-leg-route .time{display:block;font-size:14px;font-weight:600;color:var(--text-muted);}
.trip-leg-price{font-size:12.5px;font-weight:600;color:var(--text-muted);text-align:right;margin-top:2px;font-style:italic;}
.trip-leg-transport{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.tlt-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;color:var(--teal);margin-bottom:6px;display:flex;align-items:center;gap:5px;}
.tlt-label svg{width:16px;height:16px;flex-shrink:0;stroke:var(--teal);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.tlt-row{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:2px;}
.tlt-address{font-size:12.5px;color:var(--text);margin-top:4px;line-height:1.4;}
.trip-total{font-size:15px;font-weight:800;color:var(--coral);margin-top:4px;}
.passenger-form h1{font-size:26px;font-weight:800;letter-spacing:-0.5px;margin:0 0 22px;}
.passenger-block{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:20px;}
.passenger-block h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;color:var(--teal);margin:0 0 16px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field.full{grid-column:1 / -1;}
.form-field label{font-size:12.5px;font-weight:700;color:var(--ink);}
.form-field input,.form-field select,.form-field textarea{border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:13.5px;color:var(--text);background:#fff;font-family:inherit;width:100%;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.form-field textarea{resize:vertical;min-height:64px;}
.form-field-gender select{max-width:150px;}/* 24 aug 2026, klantverzoek: gender-veld iets kleiner dan de overige form-field-selects (die 100% van hun grid-kolom vullen) */
.field-note{font-size:11px;color:var(--text-muted);margin:2px 0 0;}
.addon-block .addon-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.addon-block .addon-row:last-child{border-bottom:0;}
.addon-block .addon-title{font-size:13.5px;font-weight:700;color:var(--ink);}
.addon-block .addon-price{font-size:13px;color:var(--text-muted);}
.addon-block .addon-qty{border:1px solid var(--border);border-radius:8px;padding:6px 8px;font-family:inherit;}
.btn-confirm-continue{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:14px 30px;font-weight:700;font-size:15px;cursor:pointer;float:right;font-family:inherit;}
.btn-confirm-continue:hover{background:#1F7A46;}
.form-end{display:flow-root;padding-top:6px;}
@media (max-width:900px){
  .confirm-shell{grid-template-columns:1fr;}
  .confirm-shell aside{position:static;}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .btn-confirm-continue{float:none;width:100%;justify-content:center;}
}
/* 25 aug 2026, klantverzoek: kleine 3-staps voortgangsbalk (Trip / Passenger details / Confirm
   booking) boven "Passenger information" op busconfirm, zodat vooral op mobiel duidelijk is dat
   de bestelling bijna rond is. Statisch (busconfirm is altijd exact stap 2) - geen JS nodig.
   "Confirm booking" i.p.v. "Payment": klant gaf aan dat die stap niet per se een echte online
   betaling is (PayPal/bank/pay-on-departure staan alle drie als optie op formpayment), dus
   "Payment" zou een verkeerde verwachting wekken. Zelfde 900px-breakpoint als .confirm-shell/
   .form-grid hierboven, zodat alles in dezelfde stap naar de mobiele opmaak omslaat. */
.fb-stepper{display:flex;align-items:center;margin-bottom:18px;}
.fb-step{display:flex;align-items:center;gap:6px;}
.fb-step-circle{width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fb-step.done .fb-step-circle{background:var(--teal);color:#fff;}
.fb-step.active .fb-step-circle{background:var(--teal);color:#fff;}
.fb-step.upcoming .fb-step-circle{background:#fff;border:2px solid var(--border);color:var(--text-muted);}
.fb-step-label{font-size:12.5px;font-weight:700;color:var(--ink);}
.fb-step.upcoming .fb-step-label{color:var(--text-muted);}
.fb-step-line{flex:1;height:2px;background:var(--border);margin:0 8px;}
.fb-step-line.done{background:var(--teal);}
.fb-mobile-label{display:none;}
@media (max-width:900px){
  .fb-step-label{display:none;}
  .fb-step-line{margin:0 4px;}
  .fb-step-circle{width:18px;height:18px;font-size:10px;}
  .fb-mobile-label{display:block;font-size:11.5px;font-weight:700;color:var(--teal);margin:0 0 10px;}
}
/* 25 aug 2026, klantvervolg: op mobiel staat de balk voortaan bovenaan (vóór "Your trip
   information"), i.p.v. pas boven "Passenger information" - daar moest je eerst langs de hele
   trip-kaart + Amount due scrollen voordat je 'm zag. Twee identieke kopieën i.p.v. 1 verplaatste
   element (CSS-only kan een element niet van <main> naar vóór <aside> "teleporteren" binnen dezelfde
   grid): .fb-stepper-top (nieuw, vlak boven .confirm-shell) alleen zichtbaar op <=900px,
   .fb-stepper-desktop (in <main>, ongewijzigd t.o.v. hierboven) alleen zichtbaar boven 900px. */
.fb-stepper-top{display:none;}
@media (max-width:900px){
  .fb-stepper-top{display:block;margin-bottom:16px;}
  .fb-stepper-desktop{display:none;}
}
/* 25 aug 2026, klantverzoek: de verbindingsstreep vóór stap 3 ("Confirm booking") laten flikkeren -
   trekt de aandacht naar de volgende stap. Alleen deze streep (tussen stap 2 en 3, .fb-step-line
   zonder .done); de streep tussen stap 1 en 2 (.fb-step-line.done, al teal/voltooid) blijft rustig. */
@keyframes fbStepLineFlicker{
  0%,100%{opacity:1;}
  50%{opacity:0.25;}
}
.fb-step-line-flicker{background:var(--teal);animation:fbStepLineFlicker 1.2s ease-in-out infinite;}
/* 25 aug 2026: op formpayment is stap 3 de huidige/actieve stap (i.p.v. een nog-komende stap zoals
   bij busconfirm), dus hier flikkert het icoon+label zelf i.p.v. de streep ervoor - zelfde
   keyframe (fbStepLineFlicker) hergebruikt voor visuele consistentie. */
.fb-step-flicker{animation:fbStepLineFlicker 1.2s ease-in-out infinite;}
/* 18 sep 2026: bezoekers die in hun systeem "verminder beweging" hebben aangezet krijgen dit
   pulseren niet. Zelfde afspraak als bij .pulse en .back-fab-intro, die dat al hadden. Voor
   iedereen anders verandert er niets. */
@media (prefers-reduced-motion: reduce){
  .fb-step-flicker, .fb-step-line-flicker{animation:none;}
} /* 25 aug 2026: klant vond de streep nauwelijks zichtbaar (had nog de standaard lichte --border-kleur) - overschreven naar --teal, zelfde kleur als de voltooide streep/stap 2 */

/* 15 aug 2026 - com_bookpro "formpayment" (betaalpagina, na busconfirm) template override,
   volgens fastboatgili-payment-concept.html. Scoped onder .formpayment. Hergebruikt bewust
   .confirm-back-link, .trip-leg-date/.trip-leg-route/.port-block/.route-line/.port/.time/
   .trip-leg-transport/.tlt-label/.tlt-row/.tlt-address uit het busconfirm-blok hierboven voor de
   "Your trip"-legs (zelfde databron/velden, geen reden voor een losse variant). */
.formpayment{max-width:720px;margin:0 auto;padding-top:4px;}
.formpayment h1{font-size:26px;font-weight:800;letter-spacing:-0.5px;margin:0 0 20px;}

.trip-mini{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:16px;}
.trip-mini-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:0;padding:0;margin:0;font-family:inherit;text-align:left;cursor:pointer;}
.trip-mini-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;color:var(--teal);margin-bottom:3px;}
.trip-mini-sub{font-size:12.5px;color:var(--text-muted);font-weight:600;}
.trip-mini-chevron{width:16px;height:16px;flex-shrink:0;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 0.2s;}
.trip-mini.open .trip-mini-chevron{transform:rotate(180deg);}
.trip-mini-body{display:none;}
.trip-mini.open .trip-mini-body{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.trip-mini-leg{padding:10px 0;}
.trip-mini-leg+.trip-mini-leg{border-top:1px dashed var(--border);}

.cart-summary{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:4px;}
.cart-row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-muted);padding:5px 0;}
.cart-row.total{font-weight:800;color:var(--coral);border-top:1px solid var(--border);margin-top:6px;padding-top:12px;font-size:16px;}
.coupon-row{display:flex;gap:10px;margin-top:18px;}
.coupon-row input{flex:1;border:1px solid var(--border);border-radius:9px;padding:10px 13px;font-size:14px;font-family:inherit;}
.coupon-row input:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.coupon-row button{border:1px solid var(--border);background:var(--cream);border-radius:9px;padding:10px 18px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink);font-family:inherit;}
.coupon-row button:hover{background:#F1EEE3;}

.section-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;color:var(--teal);border-bottom:1px solid var(--border);padding-bottom:10px;margin:30px 0 16px;}
.section-label svg{width:16px;height:16px;flex-shrink:0;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

.pay-option{border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:12px;background:#fff;}
.pay-option.is-selected{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);}
.pay-option.is-disabled{background:var(--cream);}
.pay-option-head{display:flex;align-items:center;gap:12px;}
.pay-option-head input[type="radio"]{width:16px;height:16px;accent-color:var(--teal);flex-shrink:0;}
.pay-label{font-weight:700;font-size:14.5px;color:var(--ink);}
.pay-option.is-disabled .pay-label{color:var(--text-muted);}
.pay-status{margin-left:auto;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.3px;background:#FFF1EA;color:#8A3517;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.pay-sub{font-size:12px;color:var(--text-muted);margin:6px 0 0 28px;}
.pay-badges{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0 28px;}
.pay-badge{font-size:11.5px;font-weight:700;color:var(--text-muted);background:var(--cream);border:1px solid var(--border);border-radius:6px;padding:4px 9px;}

.terms-row{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:20px 0 26px;font-size:13.5px;}
.terms-row input{width:16px;height:16px;accent-color:var(--teal);}
.terms-row a{color:var(--teal);font-weight:700;cursor:pointer;}
/* 30 aug 2026 (Task #5): gedeelde stijl voor inline validatiemeldingen sitewide - vervangt
   losse browser alert()-popups (checkout, zoekbalk, bustrips-resultaten) door een nette melding
   in de eigen huisstijl. width:100% zodat hij in een flex-rij altijd op zijn eigen regel valt. */
.fb-inline-error{width:100%;display:flex;align-items:center;gap:10px;background:none;color:var(--coral-dark);border:0;border-radius:0;padding:0;font-size:13px;line-height:1.4;margin-top:8px;font-weight:600;}
/* 18 sep 2026: de melding is geen doos meer maar een regel met animerende streepjes ervoor. */
.fb-inline-error-bars{display:flex;align-items:flex-end;gap:3px;height:16px;flex:0 0 auto;}
.fb-inline-error-bars i{display:block;width:3px;border-radius:2px;background:var(--coral-dark);height:35%;animation:fbInlineErrorBar 900ms ease-in-out infinite;}
.fb-inline-error-bars i:nth-child(2){animation-delay:.10s;}
.fb-inline-error-bars i:nth-child(3){animation-delay:.20s;}
.fb-inline-error-bars i:nth-child(4){animation-delay:.30s;}
.fb-inline-error-bars i:nth-child(5){animation-delay:.40s;}
.fb-inline-error-bars i:nth-child(6){animation-delay:.50s;}
.fb-inline-error-bars i:nth-child(7){animation-delay:.60s;}
@keyframes fbInlineErrorBar{0%,100%{height:35%;}50%{height:100%;}}
@media (prefers-reduced-motion: reduce){.fb-inline-error-bars i{animation:none;height:70%;}}

.tc-modal-overlay{position:fixed;inset:0;background:rgba(11,36,48,0.55);display:none;align-items:flex-start;justify-content:center;z-index:200;padding:60px 20px;overflow-y:auto;}
.tc-modal-overlay.open{display:flex;}
.tc-modal{background:#fff;border-radius:14px;max-width:640px;width:100%;padding:32px 32px 28px;position:relative;}
.tc-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0;}
.tc-modal-close:hover{background:var(--cream);}
.tc-modal-close svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;}
.tc-modal h2{font-size:20px;font-weight:800;margin:0 0 18px;color:var(--ink);}
.tc-modal h3{font-size:14.5px;font-weight:800;margin:22px 0 8px;color:var(--ink);}
.tc-modal p{font-size:13.5px;line-height:1.7;color:var(--text);margin:0 0 12px;}
.tc-modal ul{margin:0 0 12px;padding-left:18px;font-size:13.5px;line-height:1.7;color:var(--text);}
.tc-modal li{margin-bottom:5px;}
.tc-modal a.inline-link{color:var(--teal);font-weight:700;}

.btn-confirm-booking{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:14px 30px;font-weight:700;font-size:15px;cursor:pointer;float:right;font-family:inherit;}
.btn-confirm-booking:hover{background:#1F7A46;}
/* 25 aug 2026 (Task #42) - visuele staat voor de dubbele-klik-beveiliging op "Confirm my Booking":
   knop wordt na de eerste geldige klik disabled + toont "Processing..." (zie default.php in
   formpayment). animation:none stopt expliciet de bestaande .pulse-animatie (Task #24) zodra de
   knop disabled is, zodat het duidelijk niet meer klikbaar oogt. */
.btn-confirm-booking:disabled{opacity:0.65;cursor:not-allowed;animation:none;}

@media (max-width:520px){
  .formpayment{padding:0 4px;}
  .pay-status{margin-left:0;}
  .pay-option-head{flex-wrap:wrap;}
}
@media (max-width:600px){
  .btn-confirm-booking{float:none;width:100%;justify-content:center;}
}

/* 25 aug 2026 (Task #41) - com_bookpro "postpayment" (bedankpagina, na formpayment) template
   override, volgens fastboatgili-postpayment-concept.html. Deze pagina heeft bewust GEEN foto-hero,
   alleen een effen grijze band (.thankyou-band) - dat is 1-op-1 overgenomen uit het concept, dat op
   zijn beurt weer overeenkomt met een echte live screenshot (zie het concept-bestand voor details).
   Kleuren hergebruiken de bestaande site-variabelen (--ink/--teal/--text-muted/--border); #ECEBE7 is
   letterlijk overgenomen uit het concept (geen eigen --gray-band-variabele elders in dit bestand). */
.thankyou-band{background:#ECEBE7;padding:44px 24px;text-align:center;}
.thankyou-band h1{font-size:30px;font-weight:800;letter-spacing:-0.5px;margin:0 0 10px;color:var(--ink);}
.thankyou-band p{font-size:14.5px;color:var(--text-muted);margin:0;}
.thankyou-wrap{max-width:720px;margin:0 auto;padding:36px 24px 60px;}
.td-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);font-size:14.5px;}
.td-row:first-child{padding-top:0;}
.td-label{color:var(--text-muted);}
.td-value{font-weight:700;color:var(--ink);text-align:right;}
.td-value.success{color:var(--teal);}
.td-note{font-size:12.5px;font-weight:500;color:var(--text-muted);text-align:right;margin-top:4px;}
/* 18 sep 2026: een lange statusmelding (PayPal niet gelukt, of checkout nooit afgerond) past
   niet in de smalle rechterkolom van een td-row. Vetgedrukt, bijna zwart en rechts uitgelijnd
   leest zo n regel als een systeemfout, terwijl het juist een vriendelijke uitnodiging is om
   contact op te nemen. Deze rij zet het label op een eigen regel en de melding daaronder,
   links uitgelijnd, in normaal gewicht en de zachtere tekstkleur. Het WhatsApp-nummer is een
   link en krijgt de huisgroene kleur. */
.td-row-message{flex-direction:column;align-items:flex-start;gap:6px;}
.td-row-message .td-label{font-size:14.5px;}
.td-value-message{font-weight:500;color:var(--text-muted);text-align:left;line-height:1.6;}
.td-value-message strong{font-weight:700;color:var(--ink);}
.td-value-message a{color:var(--teal);font-weight:700;text-decoration:none;white-space:nowrap;}
.td-value-message a:hover{color:#1F7A46;text-decoration:underline;}
.icon-link{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:700;font-size:14.5px;}
.icon-link:hover{color:#1F7A46;}
.icon-link .chev{width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.td-row-link{justify-content:flex-end;border-bottom:0;padding-top:6px;}
@media (max-width:960px){
  .thankyou-band h1{font-size:24px;}
  .td-row{flex-wrap:wrap;}
}

/* 15 aug 2026 - com_bookpro "orderdetail" (bevestigde boeking/ticketpagina, na formpayment)
   template override, volgens fastboatgili-orderdetail-concept.html. Scoped onder .orderdetail.
   .od-print-header/.od-print-footer zijn print-only (zie @media print hieronder) - de gewone
   site-header/footer worden door de browser al standaard verborgen bij het afdrukken via de
   regel .site-header,footer{display:none} in dat blok. */
.orderdetail{max-width:960px;margin:0 auto;padding:40px 24px 60px;}
.orderdetail h1{font-size:24px;font-weight:800;letter-spacing:-0.4px;margin:0 0 26px;color:var(--ink);}
.orderdetail h2{font-size:18px;font-weight:800;letter-spacing:-0.2px;margin:0 0 4px;color:var(--ink);}

.od-print-header{display:none;}

.od-info-section{margin:0 0 32px;}
.od-info-section h2{margin-bottom:12px;}
.od-info-section ol,.od-info-section ul{margin:0;padding-left:20px;font-size:14px;line-height:1.7;color:var(--text);}
.od-info-section li{margin-bottom:6px;}
.od-info-section p{font-size:14px;line-height:1.7;color:var(--text);margin:0 0 10px;}
.od-info-section p:last-child{margin-bottom:0;}
.tax-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:14px;color:var(--text);padding:8px 0;border-bottom:1px solid var(--border);}
.tax-row:last-child{border-bottom:0;}
.tax-row .amount{font-weight:700;color:var(--ink);white-space:nowrap;}

.od-actions-icon{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:12px;}
.od-actions{display:flex;flex-wrap:wrap;gap:34px;margin:0 0 36px;}
/* 29 aug 2026 (Task #133): Payment status/method - subtiele leesbare regel onder de Booking/Receipt/
   Ticket/Sign Out-acties, boven "Your trip information". */
.od-payment-info{display:flex;flex-wrap:wrap;gap:28px;margin:-16px 0 36px;font-size:13px;color:var(--text-muted);}
.od-payment-info-item strong{color:var(--text);font-weight:700;margin-left:5px;}

.od-action{font-size:14px;color:var(--text);}
.od-action a,.od-action button{color:var(--teal);font-weight:700;margin-left:5px;background:none;border:0;padding:0;font-size:14px;font-family:inherit;cursor:pointer;}
.od-action a:hover,.od-action button:hover{color:#1F7A46;}

.od-table{width:100%;table-layout:fixed;border-collapse:collapse;margin:0 0 36px;}
.od-table th{text-align:left;font-size:12.5px;font-weight:700;color:var(--text-muted);padding:10px 4px;border-bottom:1px solid var(--border);}
.od-table td{font-size:14px;padding:12px 4px;border-bottom:1px solid var(--border);color:var(--text);}
.od-table .route-arrow{color:var(--teal);font-weight:700;}
.od-table-wrap{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:0 0 36px;}
.od-table.passenger{table-layout:fixed;border-spacing:0;margin:0;}
.od-table.passenger thead tr{background:var(--cream);}
.od-table.passenger th{padding:12px;}
.od-table.passenger td{padding:12px;}
.od-table.passenger tr:last-child td{border-bottom:0;}
/* 18 sep 2026: de Price-kolom stond links uitgelijnd en liep daardoor niet in lijn met
   Sub total en Total eronder. Beide eindigen nu op dezelfde x: de prijskolom rechts
   uitgelijnd, en het bedragenblok krijgt dezelfde 12px binnenmarge als de tabelcellen. */
.od-table.passenger th:last-child,.od-table.passenger td:last-child{text-align:right;}
.od-totals{padding-right:12px;}

.od-totals{max-width:280px;margin:0 0 40px auto;}
.od-totals .row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-muted);padding:6px 0;}
.od-totals .row.transport{color:var(--ink);font-weight:700;}
.od-totals .row.total{font-weight:800;color:var(--coral);border-top:1px solid var(--border);margin-top:4px;padding-top:12px;font-size:16px;}

.od-transport{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:-16px 0 36px;}
.od-transport-leg{background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:14px 16px;}
.od-transport-leg .odt-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;color:var(--teal);margin-bottom:8px;}
.od-transport-leg .odt-label svg{width:16px;height:16px;flex-shrink:0;stroke:var(--teal);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3.5px;margin-right:5px;}
.odt-row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);}
.odt-charge{font-size:12px;color:var(--text-muted);margin-top:2px;}
.odt-address{font-size:12px;color:var(--text);margin-top:6px;line-height:1.4;}
.odt-price{font-size:13.5px;font-weight:800;color:var(--ink);text-align:right;margin-top:8px;}

.od-print-footer{display:none;}

@media print{
  .site-header,.site-header--overlay,footer,.wa-float,.back-to-top,.od-actions,.od-actions-icon{display:none !important;}
  body{background:#fff;}
  .orderdetail{padding:20px 0;max-width:100%;}
  .od-print-header{display:flex !important;align-items:center;gap:16px;background:var(--teal);padding:16px 22px;border-radius:10px;margin-bottom:26px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .od-print-header img{/* FBG-LOGOSTRAK-20260927 */height:32px;display:block;}
  .od-print-header .ph-text .url{color:rgba(255,255,255,0.75);font-size:11.5px;}
  .od-transport-leg{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .od-table.passenger thead tr{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .od-table{display:table !important;overflow-x:visible !important;white-space:normal !important;table-layout:fixed !important;width:100% !important;}
  .od-print-footer{display:block !important;margin-top:40px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text-muted);text-align:left;}
  .od-print-footer .pf-row{display:flex;justify-content:flex-start;align-items:center;gap:20px;flex-wrap:nowrap;margin-bottom:4px;}
  .od-print-footer .pf-row span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
  .od-print-footer svg{width:13px;height:13px;flex-shrink:0;stroke:var(--text-muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .od-print-footer svg.pf-whatsapp{stroke:none;fill:var(--text-muted);}
}

@media (max-width:960px){
  .od-table{display:block;overflow-x:auto;white-space:nowrap;}
}
@media (max-width:520px){
  .od-actions{gap:20px;}
  .od-transport{grid-template-columns:1fr;margin-top:0;}
}

/* 16 aug 2026 - com_bookpro "bustrips" (zoekresultatenpagina) template override, volgens
   fastboatgili-search-results-concept.html. Scoped onder .bustrips. Geen eigen header/nav/footer/
   WhatsApp-bubble hier - die bestaan al sitebreed. Zie PROJECT-NOTES.md voor de scope-keuzes. */
.bustrips{}
/* 18 aug 2026, klantfeedback: "de foto is te breed" - header-photo-gili.jpg (live) en .webp (concept)
   zijn bevestigd exact dezelfde foto (pixel-diff: alleen jpg-compressieruis, gemiddeld 1.8/255). Het
   verschil zat in background-position: wij gebruikten "center" (50% verticaal), het concept gebruikt
   "center 23%". Bij background-size:cover is de container hier veel breder dan hoog t.o.v. de foto
   zelf, dus de volledige breedte van de foto wordt sowieso altijd getoond (geen horizontale crop) -
   het is puur de VERTICALE band die verschuift, en toont daardoor een andere (drukkere, met meer
   boten) rij van de foto dan het concept, wat de indruk van "te breed/uitgezoomd" gaf. */
.results-hero{position:relative;background-color:var(--ink);background-size:cover;background-position:center 65%;background-repeat:no-repeat;padding:0;width:100vw;margin-top:-32px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
/* 18 aug 2026, klantfeedback (side-by-side screenshots): "groene menubalk is dikker op jouw versie" -
   .site-header--overlay .logo img staat sitebreed op 80px (voor de homepage-hero, daar wél correct
   bevestigd door klant), maar fastboatgili-search-results-concept.html gebruikt voor DEZE pagina
   specifiek 70px (.logo img{height:70px} in .nav-wrap, geen eigen overlay-override). Scoped op
   body-klasse "page-search-results" (NIET ".bustrips" - die div omvat alleen de component-output,
   niet de sitebrede header) zodat de homepage-navbar ongemoeid blijft. */
.page-search-results .site-header--overlay .logo img{height:70px;}
/* 18 aug 2026, correctie: de 17 aug-aanname hierboven ("homepage se .hero:before is de correcte,
   verfijnde bron") bleek fout - klant liet via DevTools op fastboatgili-search-results-concept.html
   zelf zien dat .results-hero daar een EIGEN, andere gradient-opbouw heeft dan de homepage: een
   simpele 2-staps diagonale gradient (120deg, donkerblauw 55% -> lichter blauw 22%) samen met de foto,
   plus een groene radiale gloed RECHTSBOVEN (circle at 85% 0%) i.p.v. linksboven. Hier 1-op-1
   overgenomen (in :before i.p.v. in de background-shorthand zelf, omdat de foto-url via een losse
   inline style vanuit default.php komt - visueel identiek resultaat, :before ligt toch als volledige
   overlay boven de foto). */
.results-hero:before{content:"";position:absolute;inset:0;background:
  linear-gradient(120deg, rgba(11,36,48,0.55) 0%, rgba(18,54,69,0.22) 100%),
  radial-gradient(circle at 85% 0%, rgba(41,158,91,0.25), transparent 55%);}
.results-hero-inner{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:0 24px 20px;}
/* 17 aug 2026: nu de site-header voor deze pagina overlay-stijl gebruikt (zie index.php/header.php,
   $isBustrips), heeft alleen het EERSTE .results-hero-inner-blok (breadcrumb/titel) extra padding-top
   nodig om onder de transparante nav uit te komen - zelfde waarde als .page-hero-inner elders in dit
   bestand. Het tweede .results-hero-inner-blok (search-card-wrap) reset dit zelf al naar 0. */
.results-hero > .results-hero-inner:first-child{padding-top:150px;}
.breadcrumb{font-size:13px;color:rgba(255,255,255,0.6);margin-bottom:14px;}
.breadcrumb a{color:rgba(255,255,255,0.6);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{margin:0 8px;opacity:0.5;}
.breadcrumb .current{color:#fff;font-weight:600;}
.results-hero h1{color:#fff;font-size:26px;line-height:1.2;font-weight:800;margin:0 0 8px;letter-spacing:-0.5px;}
/* 18 aug 2026, klantfeedback: "de pijl moet hier ook in het wit" - het concept heeft geen aparte
   kleur voor de pijl in de titel (geen .arrow-regel aanwezig in fastboatgili-search-results-
   concept.html), die erft daar gewoon de witte h1-kleur. Coral-override hier verwijderd. */
.results-hero h1 .arrow{color:#fff;}
.trip-count{color:rgba(255,255,255,0.85);font-size:14px;margin-bottom:20px;}
.trip-count b{color:#fff;font-size:15px;}
/* Task #20 (30 aug 2026): mobiele header toont outbound/return-samenvatting i.p.v. losse
   sel-item chips uit de sticky selection-bar (die op mobiel hieronder verborgen worden). */
.hero-mobile-summary{display:none;}
.hero-divider-light{height:1px;background:rgba(255,255,255,0.25);margin:10px 0;}
.hero-leg-label{font-size:10px;margin-bottom:3px;}
.hero-leg-label .tag{color:#bfe0cb;font-weight:700;letter-spacing:0.3px;}
.hero-leg-label .dot{color:#bfe0cb;}
.hero-leg-label .op{color:#fff;}
.hero-leg-row{color:#fff;font-size:11px;margin-bottom:8px;}
.hero-leg-row:last-child{margin-bottom:0;}
.hero-leg-row .hero-seg{display:flex;align-items:center;gap:4px;margin-bottom:2px;}
.hero-leg-row .hero-seg:last-child{margin-bottom:0;}
.hero-leg-row .hero-fee{color:#bfe0cb;font-size:10px;}

/* Editable zoekformulier in de hero - vervangt de eerdere alleen-lezen samenvatting, 16 aug 2026.
   LET OP: alle selectors hieronder zijn bewust met ".bustrips" geprefixt, ook al lijken class-namen
   als .search-card/.trip-toggle/.search-row/.swap-fields/.swap-btn/.field/.field-icon/.btn-search
   generiek - diezelfde class-namen worden AL sitebreed gebruikt door de homepage's hero-search-widget
   (zie html/home.php). Zonder de ".bustrips"-prefix zouden deze regels de homepage-widget's eigen
   opmaak overschrijven (cascade-volgorde: dit blok staat verderop in het bestand). */
/* 18 aug 2026: eerdere poging om hier +26px padding-top toe te voegen (om de kaart dieper in de foto
   te laten "zakken") bleek bij nameting FOUT - de afstand navbar-onderkant naar kaart-bovenkant was
   op deze pagina al ~162px, nagenoeg gelijk aan het concept (~162px); de +26px maakte het verschil
   juist groter (~204px, 41px te veel) i.p.v. kleiner. Teruggezet naar 0. De navbar-hoogte-fix
   (.page-search-results .site-header--overlay .logo img, zie hierboven) staat wel overeind - dat was
   wél een bevestigd, gemeten verschil. Klant meldde na deze twee fixes nog steeds "fout" en gaat de
   volledige HTML doorsturen zodat dit met de daadwerkelijke pagina i.p.v. metingen op afstand verder
   uitgezocht kan worden - zie PROJECT-NOTES.md voor het vervolg. */
.bustrips .search-card-wrap{padding-top:0;padding-bottom:0;}.bustrips .search-edit-btn{display:none;}.bustrips .search-modal-close{display:none;}.bustrips .search-modal-backdrop{display:none;}
.bustrips .search-card{background:rgba(255,255,255,0.98);border-radius:16px;padding:20px 22px;}
.results-hero .search-card{border-radius:16px 16px 0 0;}
.bustrips .trip-toggle{display:inline-flex;background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:4px;margin-bottom:14px;}
.bustrips .trip-toggle button{border:0;background:none;font-size:13px;font-weight:700;padding:8px 18px;border-radius:8px;cursor:pointer;color:var(--text-muted);font-family:inherit;}
.bustrips .trip-toggle button.active{background:#5B8FC7;color:#fff;}
.bustrips .search-card .search-row{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr auto;grid-template-areas:none !important;gap:12px;align-items:end;}
.bustrips .search-card .search-row>*{grid-column:auto !important;grid-row:auto !important;grid-area:auto !important;}
.bustrips .search-card:not(.is-roundtrip) .search-row{grid-template-columns:2.2fr 1fr 1fr auto;}
.bustrips .search-card:not(.is-roundtrip) .return-field{display:none;}
.bustrips .search-card .swap-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;position:relative;}
.bustrips .search-card .swap-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;flex-shrink:0;position:absolute;left:50%;bottom:23px;transform:translate(-50%,50%);z-index:2;box-shadow:0 0 0 4px #fff;}
.bustrips .search-card .swap-btn:hover{background:var(--teal);color:#fff;border-color:var(--teal);}
.bustrips .search-card .field{display:flex;flex-direction:column;gap:6px;}
.bustrips .search-card .field label{font-size:11px;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-muted);font-weight:700;}
.bustrips .search-card .field .box{border:1px solid var(--border);border-radius:10px;padding:9px 13px;font-size:14px;color:var(--text);background:#fff;display:flex;align-items:center;gap:9px;}
.bustrips .field-icon{display:block;width:20px;height:20px;flex-shrink:0;stroke:var(--text-muted);}
.bustrips .search-card .field select,.bustrips .search-card .field input[type=date]{border:0;background:none;font-size:14px;color:var(--text);font-family:inherit;width:100%;padding:2px 0;}
.bustrips .search-card .field select:focus,.bustrips .search-card .field input[type=date]:focus{outline:none;}
.bustrips .btn-search{background:var(--coral);color:#fff;border:0;border-radius:10px;padding:12px 24px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;}
.bustrips .btn-search:hover{background:var(--coral-dark,#E5522F);}

/* Filtergroepen zonder echte BookPro-databron: uitgeschakelde checkbox-UI, geen aantallen. */
.filter-group .flabel{color:var(--text);}
.filter-row input[type=checkbox]:disabled{cursor:not-allowed;opacity:0.55;}
.filter-row:has(input:disabled) .flabel{color:var(--text-muted);}

/* 18 aug 2026: sinds .date-strip een sibling van .results-hero is i.p.v. er een kind van (zie fix
   hierboven), viel hij terug in de gewone .page-container (max-width:1220px, uit page.php) i.p.v. de
   volle paginabreedte - .date-strip's eigen max-width:1320px+margin:0 auto centreerde zich daardoor
   binnen die te smalle 1220px-ouder, wat een merkbare inspringing t.o.v. de zoekkaart erboven gaf
   (klant: "links en rechts beneden, 2 stukken uit de search bar"). Zelfde 2-laags full-bleed-patroon
   als .results-hero/.results-hero-inner al gebruikt: .date-strip zelf breekt nu uit (width:100vw +
   negatieve margins, GEEN eigen max-width meer - die twee combineren op 1 element werkt niet, want
   max-width overschrijft width altijd), en .date-strip-inner (de zichtbare witte balk) centreert de
   inhoud daarbinnen op exact dezelfde breedte als de zoekkaart (1272px = search-card's eigen
   gerenderde breedte). */
.date-strip{position:sticky;top:12px;z-index:8;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
/* 17 aug 2026, klantfeedback: mist de ronde vorige/volgende-knoppen en de "Pick date"-knop die
   fastboatgili-search-results-concept.html wel heeft. padding-left:308px lijnt de datumstrip uit
   met de resultatenkolom (280px sidebar + 28px gap van .shell hieronder) i.p.v. met de hele breedte -
   exacte waarde uit de mockup. */
/* Task #105 (28 aug 2026): klantfeedback (met tekening) - de zoekbalk en de datumstrip eronder
   liepen niet netjes door: de zoekbalk had afgeronde hoeken onderaan, terwijl de datumstrip er
   direct onder met vierkante bovenhoeken begon, wat een 'hap uit de balk' liet zien aan beide
   onderkanten. Nu vloeien ze in elkaar over als 1 doorlopende pil (zie .search-card hieronder),
   met een hele fijne lijn op de naad om de datumstrip toch duidelijk zichtbaar/afgebakend te
   houden. */
.date-strip-inner{background:#fff;border-radius:0 0 16px 16px;border-top:1px solid var(--border);box-shadow:0 10px 24px rgba(11,36,48,0.1);display:flex;align-items:stretch;padding-left:308px;max-width:1272px;margin:0 auto;}
/* 2 sep 2026, klantfeedback (video, Taak #81): de sticky datumstrip gebruikte altijd de
   100vw-full-bleed-breedte (nodig om op paginahoogte netjes onder de volle-breedte zoekkaart
   te lopen). Zodra hij sticky vastklikt, bleef die volle breedte permanent hangen en overlapte
   hij de EVENEENS sticky .filters-box-sidebar (het witte vlak met padding-left:308px kwam
   precies over "Sort by" te liggen), en zijn randen kwamen niet overeen met .leg-heading eronder
   (kieren in de video). Taak #81-correctie: eerste poging (width:auto) ging ervan uit dat
   .date-strip in dezelfde grid-kolom als .leg-heading zit - dat is niet zo, .date-strip is een
   sibling van <form id="bustrip_form"> (dus van .shell zelf), niet van .shell's main-kolom.
   width:auto viel daardoor terug op .bustrips's volle breedte (1172px) i.p.v. de smallere
   resultatenkolom (816px), dus de randen bleven mismatchen. Juiste fix: de resultatenkolom
   (.shell > main) meten via JS (--results-col-x/--results-col-w, zelfde ResizeObserver-patroon
   als --date-strip-h hierboven) en die exacte breedte/positie toepassen op .date-strip-inner. */
.date-strip.is-stuck .date-strip-inner{padding-left:0;margin:0;width:var(--results-col-w,816px);max-width:var(--results-col-w,816px);margin-left:var(--results-col-x,466px);border-radius:16px 16px 0 0;}
/* 2 sep 2026, klantfeedback (screenshot met pijlen, Taak #84): 'happen' in de hoeken van de
   datumstrip zodra sticky - .date-strip-inner kreeg in Taak #81 border-radius:16px op alle 4
   hoeken, maar de OUTER .date-strip-wrapper eromheen is transparant. Bevestigd via
   elementFromPoint op de 4 hoekpixels: daar wordt de transparante .date-strip geraakt i.p.v. de
   witte .date-strip-inner - exact dezelfde hoeken-kier als .leg-heading in Taak #80, nooit
   gepatcht voor de datumstrip zelf. Zelfde oplossing: een vierkante (niet-afgeronde) witte plaat
   achter de afgeronde pil, zodat de geclipte hoekpixels wit tonen i.p.v. transparant. position:
   relative nodig zodat de plaat positioneert t.o.v. .date-strip-inner zelf (dat standaard
   position:static is) i.p.v. t.o.v. de veel bredere outer .date-strip. */
.date-strip.is-stuck .date-strip-inner{position:relative;}
.date-strip.is-stuck .date-strip-inner::before{content:'';position:absolute;inset:0;background:#fff;z-index:-1;}

/* 2 sep 2026, klantfeedback (2e video/screenshot, Taak #82): ook na de Taak #81-fix bleef er
   een dun randje zichtbaar bovenaan de viewport (0-12px), boven de sticky datumstrip. Oorzaak:
   .hero (de container met de bootfoto als achtergrond) omvat de volledige paginahoogte (~4000px,
   gemeten) en ligt achter alles. Zodra .date-strip sticky vastklikt op top:12px, blijft die eerste
   12px boven de balk ongedekt en piept de foto er doorheen - zelfde soort kier als bij
   .leg-heading in Taak #80, nu bovenaan i.p.v. in de hoeken. Zelfde oplossing: een ondoorzichtige
   plaat in de paginakleur, nu position:fixed (i.p.v. absolute) omdat het gat losstaat van
   .date-strip's eigen box en het echte viewport-topje (0-12px) moet afdekken, niet een deel van
   het element zelf. Alleen actief zodra .is-stuck (dus geen crème streep over de foto op
   paginahoogte). */
.date-strip.is-stuck::before{content:'';position:fixed;top:0;left:0;right:0;height:12px;background:var(--cream);z-index:9;pointer-events:none;}



.date-strip-scroll{display:flex;gap:2px;overflow-x:auto;flex:0 1 auto;min-width:0;padding:0 6px;scrollbar-width:none;-ms-overflow-style:none;}
.date-strip-scroll::-webkit-scrollbar{display:none;}
.date-strip-nav{align-self:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);padding:0;margin:0 6px;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.date-strip-nav:hover{border-color:var(--teal);color:var(--teal);}
.date-strip-nav svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.date-pill{flex-shrink:0;background:none;border:0;border-bottom:3px solid transparent;padding:14px 14px 11px;font-size:13.5px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.date-pill:hover{color:var(--ink);}
.date-pill.active{color:var(--ink);font-weight:800;border-bottom-color:var(--teal);}
.date-pill.pick-date{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:700;padding:14px 16px 11px;border-left:1px solid var(--border);}
.date-pill.pick-date svg{width:15px;height:15px;flex-shrink:0;stroke:var(--teal);}

.shell{max-width:1320px;margin:0 auto;padding:28px 24px 20px;display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start;}
.shell main{min-width:0;}
/* 24 aug 2026, klantfeedback (screenshot met rode lijn: "Filters"-kolom en de result-cards staan te
   ver naar rechts t.o.v. de zoekkaart erboven, en de result-cards zijn smaller dan in het concept).
   Oorzaak: op deze pagina zit .shell genest in Joomla's generieke .page-container (max-width:1220px,
   uit page.php, gebruikt door alle "gewone" binnenpaginas), terwijl .results-hero-inner (de zoekkaart)
   daarbuiten staat en zijn eigen, bredere max-width:1320px gebruikt - vandaar de inspringing. Bovendien
   telt .page-container's eigen 24px-padding op bij .shell's eigen 24px-padding (dit bestand is 1-op-1
   geport vanuit fastboatgili-search-results-concept.html, waar .shell GEEN omhullende, al-gepadde
   ouder heeft), wat de result-cards nog eens 24px smaller maakte dan in het concept.
   Beide gefixt, scoped op body-klasse "page-search-results" (zelfde aanpak als de eerdere
   .site-header--overlay-fix hierboven) zodat andere paginas die .page-container gebruiken (artikelen,
   contact, etc.) ongemoeid blijven. */
.page-search-results .page-container{max-width:1320px;}
.page-search-results .shell{padding-left:0;padding-right:0;}
.filters-box{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;position:sticky;top:20px;}
.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.filters-head h3{margin:0;font-size:15px;font-weight:800;}
.filters-head-actions{display:flex;align-items:center;gap:14px;}
.filters-reset{font-size:12px;color:var(--coral);font-weight:700;cursor:pointer;}
/* 30 aug 2026: sluitknop voor het mobiele fullscreen-filterpaneel - ontbrak volledig, waardoor er
   na het openen van Filters op mobiel geen weg terug was (geen Save/Apply/X-knop, en de knop die
   het paneel opende zat zelf ONDER het paneel verstopt zodra het open stond). Deze basisregel
   verbergt de knop op desktop (waar het paneel altijd al zichtbaar is in de sidebar); de mobiele
   media-query hieronder maakt de knop zichtbaar en stijlt hem, exact zoals
   fastboatgili-search-results-concept.html. */
.filters-close{display:none;}
.filter-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--teal);color:#fff;font-size:11px;font-weight:800;border-radius:10px;line-height:1;vertical-align:middle;}
.filter-count-badge[hidden]{display:none;}
.filter-group{border-top:1px solid var(--border);padding:16px 0;}
.filter-group:first-of-type{border-top:none;padding-top:12px;}
.filter-group h4{margin:0 0 10px;font-size:13px;font-weight:800;color:var(--ink);}
.filter-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;color:var(--text);cursor:pointer;}
.filter-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal);flex-shrink:0;cursor:pointer;}
.filter-row .flabel{flex:1;}
/* 18 aug 2026, klantfeedback: "Price per adult"-filter miste de aantallen (fcount) - deze twee
   regels stonden nog niet in style.css, alleen .flabel. 1-op-1 uit het concept overgenomen. */
.filter-row .fmeta{color:var(--text-muted);font-size:12px;white-space:nowrap;}
.filter-row .fcount{color:var(--text-muted);font-size:12px;background:var(--cream);border-radius:10px;padding:2px 8px;font-weight:700;}
select.sort-select{width:100%;border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13.5px;color:var(--text);background:#fff;font-weight:600;}

.urgency-banner{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 44px 16px 18px;margin-bottom:20px;position:relative;}
.urgency-banner[hidden]{display:none;}
.urgency-banner svg{width:20px;height:20px;stroke:var(--coral);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:1px;}
.urgency-banner-title{color:var(--coral);font-weight:800;font-size:15px;margin:0 0 4px;}
.urgency-banner-text{color:var(--text);font-size:13.5px;line-height:1.5;margin:0;}
.urgency-banner-close{position:absolute;top:14px;right:14px;background:none;border:0;color:var(--text-muted);font-size:20px;line-height:1;cursor:pointer;padding:2px;}

.sort-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.sort-chip{border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 16px;cursor:pointer;}
.sort-chip .sc-label{font-size:13px;font-weight:800;color:var(--ink);}
.sort-chip .sc-detail{font-size:12px;color:var(--text-muted);margin-top:2px;}
.sort-chip.active{border-color:var(--teal);background:#F1FAF4;}
.sort-chip.active .sc-label{color:var(--teal);}

/* 30 aug 2026: toolbar uitgebreid met de Sort-knop (mobile-sort-btn) naast de bestaande Filters-
   knop, exact het 2-knoppenpatroon uit fastboatgili-search-results-concept.html (.mobile-toolbar
   met .mobile-sort-btn + .mobile-filter-btn, elk flex:1 i.p.v. de oude Filters-only width:100%). */
.mobile-toolbar{display:none;gap:10px;margin-bottom:16px;}
.mobile-sort-btn,.mobile-filter-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:var(--ink);border:1px solid var(--border);border-radius:10px;padding:12px;font-weight:700;font-size:13.5px;font-family:inherit;cursor:pointer;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mobile-sort-btn svg,.mobile-filter-btn svg{width:16px;height:16px;flex-shrink:0;stroke:var(--ink);stroke-width:2;fill:none;}
.mobile-sort-btn[aria-expanded="true"]{border-color:var(--teal);color:var(--teal);background:#F1FAF4;}
.mobile-sort-btn[aria-expanded="true"] svg{stroke:var(--teal);}
.mobile-sort-panel{display:none;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:10px;margin:-6px 0 16px;overflow:hidden;box-shadow:0 8px 20px rgba(11,36,48,0.08);}
.mobile-sort-panel.open{display:flex;}
.mobile-sort-option{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:0;border-bottom:1px solid var(--border);background:#fff;text-align:left;cursor:pointer;font-family:inherit;width:100%;}
.mobile-sort-option:last-child{border-bottom:0;}
.mobile-sort-option.active{background:#F1FAF4;}
.mso-label{font-size:13.5px;font-weight:800;color:var(--ink);}
.mobile-sort-option.active .mso-label{color:var(--teal);}
.mso-detail{font-size:12px;color:var(--text-muted);}

.leg-heading{display:flex;align-items:center;gap:12px;margin:34px 0 16px;position:sticky;top:calc(12px + var(--date-strip-h, 45px));background:var(--cream);padding:10px 16px;border-radius:16px;border-bottom:1px solid var(--border);z-index:15;transition:background 0.15s,box-shadow 0.15s,border-color 0.15s;}
.leg-heading::before{content:'';position:absolute;inset:0;background:var(--cream);z-index:-1;}
.leg-heading[hidden]{display:none;}
/* 2 sep 2026, klantfeedback (screenshot met pijlen, Taak #86): 'nog steeds niet een geheel qua
   vorm met de datum balk'. Sinds Taak #81/#84 heeft de sticky datumstrip ALLE 4 hoeken rond, en
.leg-heading (basisregel hierboven) ook altijd border-radius:16px - dus 2 losse afgeronde 'pillen'
   gestapeld i.p.v. 1 doorlopende vorm. Fix, zelfde idee als de zoekbalk+datumstrip in niet-sticky
   status (zie .date-strip-inner-comment, 28 aug 2026): in stuck-status krijgt de datumstrip
   ronde BOVENhoeken/vierkante ONDERhoeken (zie .date-strip.is-stuck .date-strip-inner hierboven),
   en .leg-heading hier eronder het spiegelbeeld - vierkante BOVENhoeken/ronde ONDERhoeken - zodat
   ze naadloos aansluiten tot 1 capsule. */
.leg-heading.is-stuck{border-radius:0 0 16px 16px;}

.leg-heading:first-child{margin-top:0;}
/* 2 sep 2026, klantfeedback (Taak #83): de groene accentlijn onderaan de sticky OUTBOUND/RETURN-
   balk ('groene lijn', 18 aug 2026) staat op volle kleurintensiteit (var(--teal) #299E5B, zowel
   de 1px border-bottom als de 3px inset box-shadow erbovenop) - klant vindt dit iets te fel.
   Verzacht naar 55% dekking (rgba i.p.v. var(--teal)) voor beide, positie/dikte ongewijzigd. */

/* 2 sep 2026, klantfeedback (Taak #85): 'Ik denk dat die groene streep en schaduw gewoon weg
   kunnen. Nu de datumbalk ook sticky is, valt het meer op.' De .leg-heading.is-stuck-styling
   (groene lijn, 18 aug 2026; verzacht in Taak #83) diende om te tonen dat de balk 'vastzit' -
   overbodig sinds Taak #80/#81 de datumstrip er ook al sticky boven staat: de twee balken vormen
   nu samen al 1 duidelijk herkenbaar sticky blok (de datumstrip heeft bovendien altijd al zijn
   eigen box-shadow, .date-strip-inner hierboven). Verwijderd; valt terug op de bestaande, altijd
   aanwezige dunne 1px border-bottom (.leg-heading hierboven) - zelfde in stuck en niet-stuck
   status, rustiger en consistenter. De .is-stuck-klasse zelf blijft door JS toegevoegd (nodig
   voor evt. toekomstig gebruik), maar heeft nu geen CSS-effect meer op .leg-heading. */
.leg-badge{background:var(--ink);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;padding:5px 12px;border-radius:20px;}
.leg-heading h2{margin:0;font-size:19px;font-weight:800;}
.leg-heading .leg-date{color:var(--text-muted);font-size:13px;font-weight:600;}
.leg-confirm{margin-left:auto;display:none;align-items:center;background:#F1FAF4;border:1px solid var(--teal);color:var(--ink);font-size:12px;font-weight:700;padding:5px 10px;border-radius:20px;white-space:nowrap;}
.leg-confirm.show{display:inline-flex;}
.leg-back-btn{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--border);color:var(--ink);font-size:12px;font-weight:700;padding:6px 10px;border-radius:20px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.leg-back-btn:hover{border-color:var(--teal);color:var(--teal);}
.leg-share-btn{margin-left:auto;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:2px solid var(--teal);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;padding:0;transition:transform 0.15s ease,background 0.15s ease;-webkit-tap-highlight-color:transparent;}
.leg-share-btn:hover{background:#F1FAF4;transform:scale(1.05);}
.leg-share-btn svg{width:16px;height:16px;}

.result-card{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;}
.result-card[hidden]{display:none;}
.result-card:hover:not(.selected){border-color:#BFE1CC;box-shadow:0 2px 10px rgba(11,36,48,0.06);}
.result-card.selected{border-color:var(--teal);box-shadow:0 0 0 3px rgba(41,158,91,0.45);background:#F8FCFA;cursor:default;}
.result-photo{position:relative;width:150px;height:110px;border-radius:12px;background:var(--ink-soft);flex-shrink:0;}
.result-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;}
.ph-nav{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:rgba(11,36,48,0.55);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.ph-nav:hover{background:rgba(11,36,48,0.8);}
.ph-prev{left:6px;}
.ph-next{right:6px;}
.ph-dots{position:absolute;bottom:7px;left:0;right:0;display:flex;justify-content:center;gap:5px;}
.ph-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.55);}
.ph-dots span.on{background:#fff;}
/* 5 sep 2026 (Taak #116): .ph-zoom (camera-icoon om de foto te vergroten) staat standaard uit -
   klant wilde dit expliciet ALLEEN op desktop, dus pas aangezet binnen @media (min-width:961px)
   hieronder. */
.ph-zoom{display:none;}

.result-info .op{font-weight:800;font-size:15px;margin-bottom:2px;}
.result-info .boat{color:var(--text-muted);font-size:13px;margin-bottom:12px;}
.result-info .rating{color:var(--amber);font-weight:700;font-size:12.5px;margin-left:2px;}
.amenities{display:flex;gap:10px;margin-top:4px;margin-bottom:12px;}
.amenity{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--text-muted);font-weight:600;}
.amenity svg{width:13px;height:13px;flex-shrink:0;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.timeline{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;}
.timeline .line{flex:1;height:2px;background:var(--border);position:relative;min-width:60px;max-width:140px;}
.timeline .dur{font-size:12px;color:var(--text-muted);font-weight:500;position:absolute;top:-18px;left:50%;transform:translateX(-50%);white-space:nowrap;}
.result-price{display:flex;flex-direction:column;align-items:flex-end;position:relative;}
.result-price .amount{font-size:22px;font-weight:800;color:var(--coral);margin-bottom:2px;}
.result-price .per{font-size:11px;color:var(--text-muted);margin-bottom:10px;}
.result-price .radio_bus_real{position:absolute;opacity:0;pointer-events:none;}
.price-breakdown{display:none;}
.btn-select{background:var(--ink);color:#fff;border:0;border-radius:10px;padding:11px 26px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;}
.btn-select:hover{background:var(--teal);}
.btn-select.is-selected{background:var(--teal);}
.sold-out{color:var(--text-muted);font-size:13px;font-weight:700;}
.tp-toggle{display:inline-flex;align-items:center;justify-content:center;gap:3px;background:#fff;border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:6px 10px;margin-top:8px;font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;}
.tp-decision{margin-top:12px;margin-bottom:14px;background:#FFF6F2;border:1px solid #FFDACB;border-radius:10px;padding:12px 14px;}
.tp-question{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ink);}
.tp-decision-btns{display:flex;gap:10px;flex-wrap:wrap;}
.tp-yes{background:#fff;color:var(--coral);border:1px solid var(--coral);border-radius:8px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;}
.tp-yes:hover{background:#FFF6F2;color:var(--coral-dark);border-color:var(--coral-dark);}
.tp-no{background:#fff;color:var(--text-muted);border:1px solid var(--border);border-radius:8px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;}
.tp-no:hover{border-color:var(--ink);color:var(--ink);}
.tp-details{margin-top:12px;}
.tp-details[hidden]{display:none;}
.tp-continue{margin-top:12px;background:var(--teal);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;}
.tp-continue:hover{background:#1F7A46;}
.tp-cancel{margin-top:12px;margin-left:14px;background:none;border:0;color:var(--text-muted);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:2px;padding:4px;}
.tp-cancel:hover{color:var(--ink);}
.select-confirm-panel{grid-column:1 / -1;}
.select-confirm-box{background:#F1FAF4;border:1px solid var(--teal);border-radius:10px;padding:12px 14px;margin-top:12px;margin-bottom:14px;}
.select-confirm-msg{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-muted);margin:0 0 10px;}
.select-confirm-msg:before{content:"";width:14px;height:14px;flex-shrink:0;background-color:var(--teal);-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.select-confirm-box .tp-skip-continue{margin-top:0;}
.tp-skip-continue{background:var(--teal);color:#fff;border:0;}
.tp-skip-continue:hover{background:#1F7A46;}
.tp-skip-continue{display:inline-flex;align-items:center;gap:8px;}
.tp-skip-continue:after{content:"";width:14px;height:14px;flex-shrink:0;background-color:currentColor;-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}

@keyframes btnContinuePulse{0%{box-shadow:0 0 0 0 rgba(41,158,91,0.45);}50%{transform:scale(1.04);box-shadow:0 0 0 10px rgba(41,158,91,0);}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(41,158,91,0);}}
.pulse{animation:btnContinuePulse 1.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){.pulse{animation:none;}}


.view-details{display:block;text-align:center;font-size:12px;color:var(--text-muted);margin-top:8px;font-weight:600;}
.result-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.badge{background:var(--coral);color:#fff;font-size:11px;font-weight:800;line-height:1.4;padding:4px 9px;border-radius:8px;margin:0;}
.badge.fare{background:#fff;color:var(--teal);border:1px solid var(--teal);}
.badge.cancel{background:#fff;color:var(--teal);border:1px solid var(--teal);}
.badge.instant{background:var(--cream);color:var(--text-muted);border:1px solid var(--border);display:inline-flex;align-items:center;gap:4px;}
.badge.instant:before{content:"";width:11px;height:11px;flex-shrink:0;background-color:var(--amber);-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2L3 14h7l-1 8 11-14h-7l1-6z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 2L3 14h7l-1 8 11-14h-7l1-6z"/></svg>');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.view-details:hover{color:var(--teal);}
.view-details-inline{display:none;}
.tp-toggle:hover{background:var(--cream);border-color:var(--ink);}

.transport-panel{grid-column:1 / -1;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);}
.transport-panel[hidden]{display:none;}
.tp-row-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.tp-row{display:flex;flex-direction:column;gap:6px;}
.tp-label{font-size:11.5px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.4px;}
.tp-select,.tp-input{width:100%;border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--text);background:#fff;}
.tp-sub{font-size:11px;color:var(--text-muted);margin-top:4px;}

.filters-empty-msg{text-align:center;padding:26px 20px;color:var(--text-muted);font-size:13.5px;background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:20px;}
.filters-empty-msg .btn-select{margin-top:10px;}

@keyframes selBarIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.selection-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:3px solid var(--teal);box-shadow:0 -10px 32px rgba(11,36,48,0.20);padding:12px 24px;animation:selBarIn 0.3s ease;}
.selection-bar[hidden]{display:none;}
body.has-sel-bar{padding-bottom:calc(var(--sel-bar-h, 76px) + 16px);}
.selection-bar-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.sel-item{display:flex;align-items:center;gap:10px;background:var(--cream);border:1px solid var(--border);border-radius:10px;padding:7px 12px;flex:1 1 240px;min-width:220px;max-width:480px;}
.sel-item.filled{border-color:var(--teal);background:#F1FAF4;}
.sel-item-info{display:flex;flex-direction:column;gap:4px;min-width:0;}
.sel-leg-label{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:0.4px;color:var(--text-muted);}
.sel-leg-detail{font-size:13px;font-weight:700;color:var(--text-muted);}
.sel-item.filled .sel-leg-detail{color:var(--ink);}
/* Task #103 (28 aug 2026): klantfeedback - pickup-tekst in de sticky selectiebalk oogde te
   druk naast de vet/donkere hoofdregel. Subtiele eigen regel: cursief, kleiner, gedempte
   kleur, normaal (niet vet) gewicht - overheerst niet meer. */
.sel-pickup-note{display:block;font-style:italic;font-weight:400;font-size:11px;line-height:1.3;color:var(--text-muted);margin-bottom:1px;}
.sel-item.filled .sel-pickup-note{color:var(--text-muted);}
/* 24 aug 2026, klantfeedback ("kruisje om te annuleren" ontbreekt bij Outbound/Return): kruisje-knop
   om een leg te wissen, exact zoals in fastboatgili-search-results-concept.html - alleen zichtbaar
   zodra de leg gevuld is (.filled), rechts uitgelijnd via margin-left:auto. */
.sel-clear{margin-left:auto;width:26px;height:26px;border-radius:50%;border:0;background:rgba(11,36,48,0.16);color:var(--ink);font-size:18px;font-weight:700;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;flex-shrink:0;}
.sel-item.filled .sel-clear{display:flex;}
.sel-clear:hover{background:rgba(11,36,48,0.28);}
.sel-total{font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;margin-left:auto;}
.sel-total b{color:var(--coral);}
.btn-continue{background:var(--teal);color:#fff;border:0;border-radius:10px;padding:15px 34px;font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap;}
.btn-continue:hover{background:#1F7A46;}
.btn-continue:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed;}
body:has(.selection-bar:not([hidden])){padding-bottom:90px;}

@media (max-width:1150px){
  .shell{grid-template-columns:1fr;}
  .filters-box{position:static;display:none;}
  /* 30 aug 2026: border-radius:16px van de basis .filters-box-regel hierboven bleef staan op dit
     volledig-schermvullende (inset:0) mobiele paneel, waardoor de 4 hoeken van de viewport de
     onderliggende pagina (de groene/teal header) lieten doorschemeren door de afgeronde clip -
     klant wees op de groene ronde hoeken bovenin. Hier expliciet naar 0 gezet, want een
     volledig-scherm overlay heeft sowieso geen afgeronde hoeken nodig. */
  .filters-box.open{display:block;position:fixed;inset:0;z-index:210;overflow-y:auto;background:var(--cream);padding:20px;border-radius:0;}
  .filters-box.open .filters-head{position:sticky;top:0;margin:-20px -20px 6px;padding:16px 20px;background:var(--cream);border-bottom:1px solid var(--border);z-index:2;}
  /* 30 aug 2026: klant - de sluitknop viel niet op (te subtiel, transparant grijs zonder rand).
     Consistent gemaakt met de andere ronde icoon-knoppen op deze pagina (.date-strip-nav: witte
     achtergrond, dunne rand, teal-accent bij hover) i.p.v. een losstaande eigen stijl. */
  .filters-close{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;box-shadow:0 1px 4px rgba(11,36,48,0.08);}
  .filters-close:hover{border-color:var(--teal);color:var(--teal);}
  .mobile-toolbar{display:flex;}
  /* Task #20 (30 aug 2026): op mobiel vervangt de header-samenvatting de losse outbound/return-
     chips in de sticky selection-bar; Total + Continue blijven gewoon zichtbaar. */
  /* 1 sep 2026, klantfeedback (Taak #50): de Outbound/Return-tekst in de foto-header is
     overbodig geworden nu de sticky leg-tabbar dezelfde info toont - permanent verborgen. */
  body.has-sel-bar .hero-mobile-summary:not([hidden]){display:none;}
  body.has-sel-bar .results-hero .trip-count{display:none;}
  .selection-bar .sel-item{display:none;}
  .selection-bar-inner{justify-content:space-between;}
  .mobile-sort-btn,.mobile-filter-btn{display:flex;}
  .sort-chips{display:none;}
  .result-card{grid-template-columns:1fr;}
  .result-photo{width:100%;height:160px;}
  .result-price{align-items:flex-start;}
  /* 30 aug 2026, klantfeedback (Taak #27, correctie): op mobiel moet de Select-knop naast de
     prijs staan (rechts), net als in de goedgekeurde schets - niet los eronder. .result-price
     wordt hier van een verticale flex-kolom omgezet naar een grid met 2 kolommen: prijs+per
     links, Select-knop rechts (verticaal gecentreerd over die 2 rijen), Transport Options en
     View details blijven daaronder over de volle breedte staan. */
  .result-price{display:grid;grid-template-columns:1fr auto;grid-template-areas:"amount select" "per select" "breakdown breakdown";column-gap:12px;row-gap:2px;align-items:center;}
  .result-price .amount{grid-area:amount;text-align:left;margin-bottom:0;}
  .result-price .per{grid-area:per;text-align:left;margin-bottom:0;}
  .result-price .price-breakdown{grid-area:breakdown;}
  .result-price .btn-select{grid-area:select;align-self:center;justify-self:end;}
  .result-price .tp-toggle{grid-area:tp;justify-self:start;margin-top:6px;}
  .result-price .view-details{grid-area:details;justify-self:start;}
  /* 30 aug 2026, klantfeedback (Taak #27, correctie 2): 'Large boat' en de WC/AC-amenities
     stonden onder elkaar i.p.v. naast elkaar (schets toonde ze op 1 regel). .boat en .amenities
     zijn losse block-elementen in trip_card.php; hier op mobiel naar inline-flex gezet zodat ze
     als 1 regel doorlopen, met een kleine marge ertussen i.p.v. de verticale margin-bottom. */
  .boat{display:inline-flex;align-items:center;margin-bottom:0;margin-right:10px;vertical-align:middle;}
  .amenities{display:inline-flex;margin-top:0;vertical-align:middle;}
  .tp-row-wrap{grid-template-columns:1fr;}
  .leg-heading{flex-wrap:wrap;row-gap:6px;padding:8px 14px;gap:8px;position:static;}
  .leg-heading .leg-badge{font-size:10px;padding:4px 10px;}
  .leg-heading h2{font-size:15px;}
  .leg-heading .leg-date{font-size:11px;}
  .leg-share-btn{width:28px;height:28px;}
  .leg-share-btn svg{width:13px;height:13px;}
  .leg-confirm{order:3;flex:1 1 100%;margin-left:0;}
  .bustrips .search-card .search-row,.bustrips .search-card:not(.is-roundtrip) .search-row{grid-template-columns:1fr;}
  .bustrips .search-card .swap-fields{grid-template-columns:1fr;}
  .bustrips .search-card .swap-btn{position:absolute;top:calc(50% + 9px);bottom:auto;left:auto;right:14px;margin:0;width:40px;height:40px;font-size:20px;transform:translateY(-50%) rotate(90deg);z-index:2;box-shadow:0 0 0 4px #fff;}.bustrips .search-edit-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:112px;right:20px;width:38px;height:38px;border-radius:10px;background:rgba(11,36,48,0.55);border:0;color:#fff;cursor:pointer;z-index:6;}.bustrips .search-edit-btn svg{width:18px;height:18px;stroke:#fff;}.bustrips .search-edit-btn:hover{background:rgba(11,36,48,0.8);}.bustrips .results-hero-inner{padding-right:64px;}.bustrips .search-modal-wrap{display:none;}.bustrips .search-modal-wrap.open{display:block;position:fixed;inset:0;z-index:210;overflow-y:auto;padding:16px;background:transparent;}.bustrips .search-modal-wrap.open .search-card{position:relative;margin:44px auto 0;max-width:480px;border-radius:16px 16px;}.bustrips .search-modal-backdrop.open{display:block;position:fixed;inset:0;z-index:200;background:rgba(11,36,48,0.55);}.bustrips .search-modal-close{display:flex;position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:0;background:var(--cream);color:var(--ink);font-size:18px;line-height:1;align-items:center;justify-content:center;cursor:pointer;z-index:20;}
  .results-hero > .results-hero-inner:first-child{padding-top:104px;}
  .results-hero{background-position:center 23%;}
  /* 17 aug 2026: zelfde mobiele aanpassingen als de mockup - geen 308px inspringing meer nodig
     (de filter-sidebar staat op mobiel niet meer naast de datumstrip) en de "Pick date"-knop
     verdwijnt (native datumkiezer past niet lekker in de smalle strip; vorige/volgende-knoppen
     blijven wel staan, exact zoals fastboatgili-search-results-concept.html). */
  .date-strip{padding:0;position:sticky;top:0;z-index:6;}
  .date-strip-inner{padding-left:6px;border-radius:0;}
  .date-strip-scroll{padding:0 0 0 6px;}
  .date-pill.pick-date{display:none;}

  /* 30 aug 2026, klantfeedback (Taak #27): op mobiel was niet in een oogopslag te zien of je in
     Outbound of Return zat. Sticky tab-balk (.leg-tabbar in default.php) + kleurcodering
     (teal = Outbound, koraal = Return) op datumstrip, kaartrand en selectie-highlight, zodat de
     actieve leg overal herkenbaar blijft tijdens het scrollen door de resultaten. */
  .leg-tabbar{display:flex;flex-direction:column;gap:10px;position:sticky;top:0;z-index:7;background:var(--cream);padding:8px 0;}
  .leg-tab-single{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;text-align:center;border-radius:14px;}
  .leg-tab-single[hidden]{display:none;}
  .leg-tab-row{display:flex;align-items:center;gap:6px;}
  .leg-tab-route{font-weight:700;font-size:14px;color:var(--ink);}
  .leg-tab-row .leg-badge{display:inline;background:none;font-size:13px;font-weight:700;text-transform:none;letter-spacing:normal;padding:0;border-radius:0;}
  .leg-tab-out .leg-badge{color:var(--teal);}
  .leg-tab-ret .leg-badge{color:#D85A30;}
  .leg-tab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
  .leg-tab-out .leg-tab-dot{background:var(--teal);}
  .leg-tab-ret .leg-tab-dot{background:var(--coral);}
  .leg-tab-sep{color:rgba(11,36,48,0.28);font-size:12px;}
  /* 1 sep 2026, klantfeedback (Taak #49): kleine ronde X naast de route om de keuze voor die
     leg te annuleren - alleen zichtbaar zodra er een selectie is (zie [hidden]-toggle in JS),
     zelfde visuele taal als de bestaande .sel-clear knop in de selection-bar. */
  .leg-tab-clear{display:flex;align-items:center;justify-content:center;margin-left:auto;width:20px;height:20px;border-radius:50%;border:0;background:rgba(11,36,48,0.16);color:var(--ink);font-size:13px;font-weight:700;line-height:1;cursor:pointer;flex-shrink:0;}
  .leg-tab-clear[hidden]{display:none;}
  .leg-tab-clear:hover{background:rgba(11,36,48,0.28);}
  .leg-tab-single.leg-tab-out{background:rgba(41,158,91,0.08);border-bottom:2px solid rgba(41,158,91,0.4);}
  .leg-tab-single.leg-tab-ret{background:rgba(255,107,74,0.08);border-bottom:2px solid rgba(255,107,74,0.4);}
  /* 30 aug 2026, klantfeedback (Taak #31): mobiele leg-tabbar toont nu zelf de Outbound/Return-badge +
     route + datum (.leg-badge/.leg-date, hergebruikt van de desktop .leg-heading hieronder) - de losse
     .leg-heading-balk zou dezelfde info dubbel tonen, dus die wordt op mobiel verborgen. */
  .leg-heading{display:none;}

  .date-strip{top:var(--leg-tabbar-h, 44px);}
  .date-strip.tabbar-not-stuck{top:0;}

  
  
  .leg-heading[data-leg="1"] ~ .result-card.selected{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,74,0.35);background:#FFF6F3;}

  /* 30 aug 2026, klantfeedback (correctie Taak #27): Free cancellation naast Promo op dezelfde regel; */
  /* 10:30-tijd in de timeline uitgelijnd boven de Select-knop (rechter rand). */
  .result-top .badge.instant{order:1;}
  .timeline{justify-content:space-between;}

  /* 30 aug 2026, klantfeedback: Select-knop en IDR-bedrag te groot op mobiel, bespaart ruimte. */
  .btn-select{padding:8px 16px;font-size:13px;}
  .result-price .amount{font-size:18px;}

  /* 31 aug 2026, klantfeedback (Taak #36): operator-kaarten oogden rommelig op mobiel. Na
     goedgekeurde schets ("Voorstel"): Promo/Low Fare-badge en de sterrenbeoordeling worden nu
     over de foto heen getoond i.p.v. als aparte regels, Free cancellation/Instant confirmation
     worden compactere chips, View details verschijnt direct naast de operatornaam (een losse,
     enkel-op-mobiel zichtbare link - de originele link onderin het prijsblok blijft voor desktop
     ongewijzigd bestaan maar wordt op mobiel verborgen), de tijdlijn krijgt een boven-/onderrand
     ter afbakening, en de Transport Options-knop is subtieler gemaakt (tekstlink i.p.v. kader). */
  .result-card{position:relative;}
  .result-card{border:1.5px solid #C9C2AE;box-shadow:0 2px 6px rgba(11,36,48,0.10);margin-bottom:16px;}
  .result-top .badge:not(.instant):not(.cancel){position:absolute;top:10px;left:10px;z-index:2;box-shadow:0 1px 5px rgba(11,36,48,0.3);}
  .result-info .rating{position:absolute;top:10px;right:10px;z-index:2;background:rgba(11,36,48,0.72);color:#fff;font-weight:700;padding:3px 9px;border-radius:20px;margin-left:0;}
  .result-info .rating .rating-star{color:var(--amber);}
  /* 31 aug 2026, klantfeedback: Free cancellation/Instant confirmation op de foto moeten hetzelfde
     formaat hebben als de badges op desktop (zie o.a. .badge.instant/.badge.cancel hierboven) i.p.v.
     kleinere chips - de verkleining hieronder (Taak #27, 30 aug) is daarom teruggedraaid. */
  .op{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;}
  .details-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}.view-details-inline{display:block;margin-left:0;margin-top:0;font-size:11px;text-align:left;}
  .result-price > .view-details{display:none;}
  .timeline{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0 8px;margin:4px 0;}
  /* 2 sep 2026, klantfeedback (Taak #65, vervolg): amenities-rij (WC/AC-iconen) had 12px ruimte
     eronder, dat mag strakker nu er elders al ruimte is bespaard. */
  .amenities{margin-bottom:6px;}
  .tp-toggle{background:transparent;border:0;border-radius:0;color:var(--text-muted);padding:6px 0;text-decoration:underline;}
  /* 31 aug 2026, klantfeedback (vervolg op Taak #36 - definitieve schets goedgekeurd door klant:
     "Dit is helemaal goed. Bouw maar!"): boot-grootte (.boat) nu ook over de foto heen, gestapeld
     onder de sterrenbeoordeling. Free cancellation/Instant confirmation-chips (.result-top) naar
     een donkere gradient-overlay onderin de foto verplaatst voor leesbaarheid op elke
     foto-achtergrond - .result-top zelf blijft bewust position:static (geen position:absolute)
     en wordt alleen via een margin-verschuiving (-46px boven, +46px onder, netto geen effect op
     de flow van .op eronder) omhoog geschoven, anders zou de Promo/Low Fare-badge hierboven
     [.result-top .badge:not(.instant):not(.cancel), zie Taak #36] zijn containing block kwijtraken
     en foutief t.o.v. .result-top i.p.v. .result-card gaan positioneren. .badge.cancel en
     .badge.instant krijgen position:relative zodat ze net als de al langer bestaande .rating- en
     Promo-badge boven de gepositioneerde .result-photo tekenen (statische elementen verliezen
     anders altijd van position:relative/absolute-elementen in de stacking order, ongeacht
     DOM-volgorde). Transport Options-knop weer een duidelijk kader gekregen (was een subtiele
     tekstlink) en rechts uitgelijnd i.p.v. links. */
  .result-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to top, rgba(11,36,48,0.68), rgba(11,36,48,0));pointer-events:none;}
  .boat{position:absolute;top:40px;right:10px;z-index:2;display:block;background:rgba(11,36,48,0.72);color:#fff;font-weight:700;font-size:11px;line-height:1;padding:4px 9px;border-radius:20px;margin:0;}
  .boat{display:inline-flex;align-items:center;gap:3px;padding:4px 9px 4px 7px;}
  .boat-large{background:#299E5B;}
  .boat-medium{background:#FF6B4A;}
  .result-info .boat{color:#fff;font-size:11px;margin-bottom:0;}
  /* 2 sep 2026, klantfeedback (Taak #65): verticale ruimte in de result-cards verkleinen (alleen
     onder de foto, de foto zelf en de .boat-badge overlay erop blijven ongewijzigd). Was 30px
     margin-bottom - dat was de leegste losse ruimte in de kaart, tussen de badges-overlay op de
     foto en de operatornaam eronder. */
  .result-top{margin:-30px 0 14px 10px;}
  .badge.cancel,.badge.instant{position:relative;z-index:2;box-shadow:0 1px 5px rgba(11,36,48,0.3);}
  .result-price .tp-toggle{justify-self:end;}
  .tp-toggle{background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:7px 14px;text-decoration:none;font-weight:700;color:var(--ink);}
  .leg-tab-single{position:relative;padding-bottom:4px;}
  .leg-tab-summary:empty{display:block;}
  .leg-tab-out .leg-tab-summary:empty::before{content:"Choose a depart trip below";display:block;margin-top:4px;padding:5px 6px;border:1px dashed rgba(41,158,91,0.45);border-radius:7px;color:var(--text-muted);font-size:11px;text-align:center;}
  .leg-tab-ret .leg-tab-summary:empty::before{content:"Choose a return trip below";display:block;margin-top:4px;padding:5px 6px;border:1px dashed rgba(255,107,74,0.45);border-radius:7px;color:var(--text-muted);font-size:11px;text-align:center;}
  /* 31 aug 2026, klantfeedback (Taak #40 correctie): stond te krap tegen de datumbalk aan (geen
     lucht onderaan) - de onderrand-bleed (-9px) verwijderd zodat de getinte achtergrond van
     .leg-tab-single (9px padding-bottom) als kleine adempauze zichtbaar blijft voor de
     accentrand/datumstrip. */
  /* 31 aug 2026, klantfeedback (Taak #43): solide donkere achtergrond oogde te zwaar - na
     goedgekeurde schets ('Voorstel B') vervangen door een subtiel wit kaartje met dun randje
     in de leg-kleur (teal voor Outbound, koraal voor Return), donkere tekst i.p.v. wit/mintgroen. */
  .leg-tab-summary:not(:empty){display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid rgba(41,158,91,0.35);border-radius:7px;padding:5px 6px;margin:4px 0 0;font-size:12px;align-self:stretch;}
  .leg-tab-ret .leg-tab-summary:not(:empty){border-color:rgba(255,107,74,0.35);}
  .leg-tab-summary-row{display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .leg-tab-summary-op{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;}
  .leg-tab-summary-op svg{stroke:var(--ink);}
  .leg-tab-summary-price{color:var(--coral);font-weight:700;white-space:nowrap;}
  .leg-tab-summary-transport{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--text-muted);font-size:11px;}
  .leg-tab-summary-transport-text{display:flex;align-items:center;gap:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .leg-tab-summary-transport-text svg{stroke:var(--text-muted);flex-shrink:0;}
  .leg-tab-summary-transport-fee{white-space:nowrap;flex-shrink:0;}
  .leg-tab-summary-transport .hero-seg{display:flex;align-items:center;gap:3px;}
  .leg-tab-summary-transport .hero-seg svg{stroke:var(--text-muted);}
  .leg-tab-summary-transport .hero-fee{color:var(--text-muted);font-size:10px;}
.urgency-banner{margin-top:16px;}
}
@media (max-width:600px){
  .bustrips .results-hero-inner{padding-left:16px;padding-right:16px;}
}


/* Not sure which tour to pick - CTA module (as-position-11) */
.notsure-cta{background:linear-gradient(135deg,var(--ink),var(--ink-soft));border-radius:20px;padding:48px 32px;text-align:center;max-width:1100px;margin:0 auto;box-sizing:border-box;}
.notsure-cta h2{color:#fff;font-size:32px;font-weight:800;margin:0 0 12px;line-height:1.2;}
.notsure-cta p{color:#B9C4C2;font-size:16px;margin:0 auto 28px;line-height:1.5;max-width:600px;}
.notsure-cta a.cta-btn.whatsapp{text-decoration:none;}
@media (max-width:600px){.notsure-cta{padding:32px 20px;}.notsure-cta h2{font-size:24px;}}



/* Nafix 18: sluitknop (X) op de operatorpagina, alleen zichtbaar wanneer die pagina via de "View details"-link vanaf de zoekresultaten in een nieuw tabblad is geopend (zie operator.php voor de zichtbaarheids-/sluitlogica). Stijl 1-op-1 overgenomen van .back-fab uit de goedgekeurde fastboatgili-operator-*-concept.html mockups, voor visuele consistentie met de rest van de site. */
.back-fab{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;z-index:100;box-shadow:0 6px 16px rgba(11,36,48,0.14);transition:background 0.15s;cursor:pointer;padding:0;}

/* Nafix 18: eenmalige intro-animatie voor de sluitknop (fade + licht opschalen met overshoot) - speelt één keer af zodra de knop zichtbaar wordt (display:none -> flex, zie operator.php), geen doorlopende beweging zoals bij .pulse/@keyframes btnContinuePulse (die betekenis is "ga verder", past niet bij een sluitknop). */
.back-fab-intro{animation:backFabIntroPop 0.7s cubic-bezier(0.34,1.56,0.64,1) both;}
@keyframes backFabIntroPop{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion: reduce){.back-fab-intro{animation:none;}}

.back-fab:hover{background:var(--cream);}
.back-fab svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:1150px){
  .back-fab{top:14px;right:14px;width:38px;height:38px;}
  .back-fab svg{width:16px;height:16px;}
}


/* BookPro-receipt (component/bookpro/?view=orderdetail&layout=receipt, print=1) - de #passenger-
   tabel (BookPro-corebestand, niet aangepast) mist width:100% en celpadding die de tabel erboven
   ("Your trip information") wel heeft, waardoor hij smaller uitvalt en niet gelijk loopt met de
   rest van de pagina, en de tekst strak tegen de celranden staat. Toegevoegd via het sitetemplate
   i.p.v. het BookPro-corebestand te wijzigen. */
#passenger {
    width: 100%;
}
#passenger td,
#passenger th {
    padding: 10px 12px;
}


/* BookPro-receipt (component/bookpro/?view=orderdetail&layout=receipt) - vervolg:
   1) #receipt-booking-details dt/dd (Booking Details) lopen scheef omdat dt geen vaste breedte
      heeft in BookPro's eigen inline <style> (elke label - "Created date:", "Booking No:",
      "Billing name:", "Billing address:" - heeft een andere breedte, dus de waarden (dd) beginnen
      allemaal op een andere x-positie). Vaste breedte toegevoegd zodat alle waarden netjes onder
      elkaar starten. Specifieker dan BookPro's eigen kale "dt"-selector, dus wint zonder !important.
   2) De receipt toont nergens de merknaam "Fastboatgili.com" - toegevoegd via een ::before op de
      "Receipt"-kop, i.p.v. het BookPro-corebestand receipt.php aan te passen. */
#receipt-booking-details dl {
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 8px;
    row-gap: 4px;
}
#receipt-booking-details dt,
#receipt-booking-details dd {
    margin: 0;
    width: auto;
}
#content h1.page-title-header::before {
    content: "Fastboatgili.com";
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--teal, #299E5B);
    margin-bottom: 6px;
}

/* Task #98 (27 aug 2026): eigen kalenderwidget i.p.v. native OS-datumkiezer op Depart/Return-
   velden in de zoekbalk. Zelfde kleuren als de rest van de zoekbalk (wit, cream border #E7E1D3,
   donkere tekst #12211F, koraalrode accent #FF6B4A zoals de Search-knop). Op mobiel (<=600px)
   verschijnt de kalender als bottom-sheet met achtergrond-overlay, op desktop als dropdown
   onder het veld. */
.fbg-cal-backdrop{position:fixed;inset:0;background:rgba(18,33,31,0.35);z-index:9998;display:none;}
.fbg-cal-panel{position:fixed;z-index:9999;background:#fff;border:1px solid #E7E1D3;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,0.18);width:300px;max-width:92vw;padding:14px;font-family:-apple-system,"system-ui","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#12211F;display:none;}
.fbg-cal-route{font-size:12px;font-weight:600;color:#FF6B4A;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fbg-cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.fbg-cal-title{font-weight:600;font-size:15px;}
.fbg-cal-nav-btn{background:#F5F2EA;border:1px solid #E7E1D3;border-radius:8px;width:30px;height:30px;font-size:16px;line-height:1;cursor:pointer;color:#12211F;}
.fbg-cal-nav-btn:hover{background:#EFE9DC;}
.fbg-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:#6b7a78;margin-bottom:4px;}
.fbg-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.fbg-cal-day{border:none;background:transparent;border-radius:8px;height:34px;font-size:13px;cursor:pointer;color:#12211F;}
.fbg-cal-day:hover:not(.is-disabled):not(.is-empty){background:#F5F2EA;}
.fbg-cal-day.is-empty{cursor:default;visibility:hidden;}
.fbg-cal-day.is-disabled{color:#c9c2b0;cursor:not-allowed;}
.fbg-cal-day.is-today{box-shadow:inset 0 0 0 1px #FF6B4A;}
.fbg-cal-day.is-selected{background:#FF6B4A;color:#fff;font-weight:600;}
.fbg-cal-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid #E7E1D3;}
.fbg-cal-btn-clear{background:none;border:none;color:#6b7a78;font-size:13px;cursor:pointer;text-decoration:underline;padding:6px 4px;}
.fbg-cal-btn-done{background:#FF6B4A;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;}
/* 30 aug 2026 (Task #5): breakpoint 600px -> 960px, gelijk aan .search-row (die bij <=960px al naar de mobiele gestapelde layout gaat) zodat de kalender-popup altijd als bottom-sheet naar beneden uitklapt zodra de search-balk zelf al mobiel/gestapeld toont - overal op de site waar deze search-balk voorkomt (homepage hero + bustrips-resultaten sidebar). Zie PROJECT-NOTES.md. */
@media (max-width:1150px){
  .fbg-cal-panel{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);width:100%;max-width:420px;border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,0.2);padding:16px 16px 20px;}
  .fbg-cal-day{height:40px;font-size:14px;}
}

/* Task #100 (28 aug 2026): potlood-icoon om gekozen transport te wijzigen/verwijderen, direct achter de select-confirm-msg regel op de resultatenpagina. */
.select-edit-transport{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:#6b7a78;cursor:pointer;padding:3px;margin-left:6px;vertical-align:-3px;border-radius:5px;}
.select-edit-transport:hover{background:#F5F2EA;color:#12211F;}

/* Taak #50 (1 sep 2026): klantfeedback - transport-info en operator-info in de mobiele
   select-confirm-box moesten onder elkaar staan i.p.v. naast elkaar, met de bedragen van elke
   regel netjes uitgelijnd (zie selectedLabel() in default.php). Alleen mobiel; desktop toont
   selectedLabel() nog als 1 doorlopende regel, ongewijzigd. */
@media (max-width:1150px){
  .select-confirm-msg{align-items:flex-start;}
  .select-confirm-msg:before{display:none;}
  .confirm-lines{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
  .confirm-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
  .confirm-line-label{min-width:0;}
  .confirm-line-amount{white-space:nowrap;font-weight:600;color:var(--ink);}
}

/* Taak #52 (1 sep 2026): klantfeedback - de 'Transport Options'-knop (.tp-toggle) stond na
   Taak #48 op desktop verkeerd: die verplaatsing (.details-row, naast View details) was enkel
   bedoeld voor mobiel. Op desktop moet de knop terug in .result-price staan, tussen 'Select'
   en 'View details' (zie trip_card.php - .tp-toggle-price is een tweede knop-kopie op die
   plek, met dezelfde data-target zodat de bestaande .tp-toggle-JS-listeners 'm gewoon oppikken).
   Standaard (desktop) tonen we de .details-row-kopie niet; op mobiel draaien we dat om. */
.details-row .tp-toggle{display:none;}
@media (max-width:1150px){
  .details-row .tp-toggle{display:inline-flex;}
  .tp-toggle-price{display:none;}
}

/* Taak #53 (1 sep 2026): klantfeedback - de mobiele sticky Outbound/Return-balk bovenin moet
   er hetzelfde uitzien als de desktop .leg-heading-badge (donkere pil + grote vette route-tekst,
   zie .leg-heading .leg-badge/h2 hierboven), zonder de transport/operator-detailregels eronder
   (die stonden dubbelop met de nieuwe inklapbare balk onderin, zie verderop in dit blok). */
@media (max-width:1150px){
  .leg-tab-summary{display:none;}
  .leg-tab-summary:empty{display:none;}
  .leg-tab-summary:not(:empty){display:none;}
  .leg-tab-summary:empty::before{display:none;}
  .leg-tab-dot,.leg-tab-sep{display:none;}
  .leg-tab-row .leg-badge{display:inline-block;background:var(--ink);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.5px;padding:5px 12px;border-radius:20px;}
  .leg-tab-route{font-size:17px;font-weight:800;}
  /* Taak #76 (2 sep 2026): compacte Outbound-recap chip, alleen zichtbaar wanneer JS het
     unhide't (zie updateBar() in bustrips/default.php) zodra beide legs gekozen zijn - bewust
     NIET dezelfde brede pil-stijl als Taak #53 (die was te dubbelop), maar een klein chipje
     net als .leg-confirm (het desktop-equivalent hierboven). */
  .leg-tab-outbound-recap{margin-top:6px;padding:5px 10px;background:#F1FAF4;border:1px solid var(--teal);color:var(--ink);font-size:11.5px;font-weight:700;border-radius:20px;text-align:center;}
  .leg-tab-outbound-recap[hidden]{display:none;}
}

/* Taak #53 vervolg (1 sep 2026): klantfeedback - inklapbare details-balk onderin (mobiel only).
   #selectionBar krijgt een grip-handle + een 'Details'-toggle (met chevron) naast de Continue-knop.
   Op desktop blijven .sel-bar-grip/.sel-bar-footer-row/.sel-details-toggle volledig inert (display:contents
   / display:none) zodat de balk er precies zo uitziet als voorheen. Op mobiel togglen we de klasse
   sb-expanded op #selectionBar (zie JS in default.php) om .sel-item weer zichtbaar te maken. */
.sel-bar-grip{display:none;}
.sel-bar-footer-row{display:contents;}
.sel-details-toggle{display:contents;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:default;text-align:left;}
.sel-details-label,.sel-details-chevron{display:none;}
@media (max-width:1150px){
  .selection-bar{padding-top:22px;}
  .sel-bar-grip{display:block;position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:var(--border);}
  .selection-bar.sb-expanded .sel-item{display:flex;flex:1 1 100%;max-width:100%;}
  .sel-bar-footer-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;flex:1 1 100%;order:99;}
  .sel-details-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px;cursor:pointer;background:none;border:none;padding:0;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;}
  #btnContinue{width:100%;}
  .sel-details-label{display:inline;text-decoration:underline;font-size:13px;font-weight:700;color:var(--teal);}
  .sel-details-chevron{display:inline-flex;vertical-align:-2px;margin-left:4px;transition:transform 0.2s ease;}
  .selection-bar.sb-expanded .sel-details-chevron{transform:rotate(180deg);}
  /* 1 sep 2026, klantfeedback (Taak #61): terwijl een Transport Options-paneel open staat (zie
     fbgUpdateTransportPanelState() in default.php) verbergen we de zwevende WhatsApp- en 'terug
     naar boven'-knoppen, zodat ze nooit meer over de Done/Cancel-knoppenrij onderin dat paneel
     heen kunnen vallen. Alleen mobiel: op desktop bestaat dit paneel niet op dezelfde manier naast
     deze knoppen. */
  body.tp-panel-open .wa-float,
  body.tp-panel-open .back-to-top{opacity:0;visibility:hidden;pointer-events:none;}
}

/* 5 sep 2026 (Taak #113 + #114), klantfeedback: op desktop viel de boatgrootte niet op (platte
   grijze tekst, .result-info .boat) en stond de Promo/Low Fare-badge onlogisch in dezelfde rij als
   Instant confirmation/Free cancellation (.result-top). Mobiel toont Promo/Low Fare al langer als
   gekleurde pil die over de foto-rand heen 'oversteekt' (zie .result-top .badge:not(.instant)
   :not(.cancel) hierboven, binnen de mobiele mediaquery) - dat wil de klant hier ook op desktop,
   inclusief het oversteek-effect (vandaar de negatieve top/left hieronder i.p.v. een inzet-positie -
   kan nu zonder afgesneden te worden dankzij het weghalen van .result-photo's overflow:hidden
   hierboven). De Promo-pil wordt via een data-attribuut (data-deal, zie trip_card.php) +
   ::before content:attr() getekend i.p.v. verplaatst via CSS (kan niet - CSS kan een element niet
   naar een niet-voorouder verplaatsen). De originele, platte Promo/Low Fare-badge in .result-info
   blijft in de DOM (mobiel gebruikt 'm nog steeds ongewijzigd) en wordt alleen op desktop verborgen.
   Taak #114-correctie: boatgrootte NIET meer op de foto (samen met Promo oogde dat te druk) - staat
   nu als gekleurde pil in dezelfde badgerij als Instant confirmation (.boat is in trip_card.php
   verplaatst naar bínnen .result-top, als eerste kind - geen aparte data-attributen meer nodig). */
@media (min-width:1151px) {
  .result-photo[data-deal-type]::before {
    content: attr(data-deal);
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 2;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--coral);
    color: #fff;
    box-shadow: 0 1px 5px rgba(11,36,48,0.25);
  }
  .result-photo[data-deal-type="Low Fare"]::before {
    background: #fff;
    color: var(--teal);
    border: 1px solid var(--teal);
  }
  .result-top .badge:not(.instant):not(.cancel) { display: none; }
  .result-top .boat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    padding: 4px 9px;
    border-radius: 8px;
    color: #fff;
  }
  .result-top .boat svg { stroke: #fff; }
  .result-top .boat.boat-large { background: #299E5B; }
  .result-top .boat.boat-medium { background: #FF6B4A; }
  .ph-zoom {
    display: flex;
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: rgba(11,36,48,0.55);
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .ph-zoom:hover { background: rgba(11,36,48,0.8); }
  .ph-zoom svg { width: 14px; height: 14px; }
}

/* ==========================================================================
   11 sep 2026 - Menubalk-ruimte (zie PROJECT-NOTES.md, "Menubalk te krap")
   (1) Home niet in de desktop-menubalk (logo linkt al naar home);
       in het hamburgermenu blijft Home wel staan.
   (2) Taal + valuta samen in een knop (#localeSwitch, gebouwd in script.js).
   (3) html.fbg-nav-compact: automatische hamburgermodus op desktop als het
       menu niet past. Regels hieronder volgen de mobiele (max-width:960px) stijl.
   ========================================================================== */
.locale-switch{display:none;position:relative;flex-shrink:0;}
.locale-btn{display:flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:600;font-family:inherit;background:rgba(255,255,255,.14);padding:8px 12px;border:0;border-radius:20px;cursor:pointer;white-space:nowrap;line-height:1.2;}
.locale-btn:hover{background:rgba(255,255,255,.22);}
.locale-btn .locale-sep{opacity:.6;}
.locale-btn svg{width:11px;height:11px;flex-shrink:0;}
.locale-panel{display:none;position:absolute;top:calc(100% + 8px);inset-inline-end:0;width:540px;max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(11,36,48,.2);padding:8px;z-index:95;cursor:default;grid-template-columns:2fr 1fr;gap:4px 10px;}
.locale-panel.open{display:grid;}
.locale-col-title{font-size:15px;padding:4px 10px 6px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.locale-list--lang{display:grid;grid-template-columns:1fr 1fr;gap:1px 4px;}
.locale-list--cur{display:grid;gap:1px;}
.locale-col + .locale-col{border-inline-start:1px solid var(--border);padding-inline-start:10px;}
.locale-panel .currency-option{text-align:start;}

@media (min-width:961px){
  /* (1) */
  html:not(.fbg-nav-compact) .mod-menu > .nav-item.item-435{display:none !important;}
  /* (2) */
  html:not(.fbg-nav-compact) .fbg-locale-ready > #currencySwitch,
  html:not(.fbg-nav-compact) .fbg-locale-ready > #langSwitch{display:none;}
  html:not(.fbg-nav-compact) .fbg-locale-ready > .locale-switch{display:block;}
  /* meetstand (heel kort, alleen tijdens de meting in script.js) */
  html.fbg-nav-measure .nav-wrap > *{flex-shrink:0 !important;}
  html.fbg-nav-measure .pill-cta{white-space:nowrap;}
  /* (3) compacte modus = mobiele hamburgerstijl */
  html.fbg-nav-compact .burger{display:block;position:relative;z-index:231;margin-inline-start:12px;}
  html.fbg-nav-compact .pill-cta-persistent{margin-inline-start:auto;white-space:nowrap;}
  html.fbg-nav-compact .nav-links-wrap{display:none;position:absolute;top:100%;inset-inline-start:auto;inset-inline-end:24px;width:360px;max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;background:#fff;box-shadow:0 14px 34px rgba(11,36,48,.22);border-radius:0 0 14px 14px;z-index:230;padding:6px 0 14px;}
  html.fbg-nav-compact .nav-links-wrap.mobile-open{display:flex;}
  html.fbg-nav-compact .mod-menu{flex-direction:column;align-items:stretch;gap:0;}
  html.fbg-nav-compact .mod-menu .nav-item{display:block;}
  html.fbg-nav-compact .mod-menu .nav-item > a{color:var(--ink);padding:14px 20px;font-size:15px;font-weight:700;border-bottom:1px solid var(--border);white-space:normal;}
  html.fbg-nav-compact .mod-menu .nav-item > a:hover{color:var(--teal);}
  html.fbg-nav-compact .mod-menu__toggle-sub{position:absolute;top:2px;inset-inline-end:6px;color:var(--ink);padding:12px;}
  html.fbg-nav-compact .mod-menu__sub{position:static;box-shadow:none;border:0;border-radius:0;background:var(--cream);margin:0;margin-inline-start:20px;columns:1 !important;width:auto !important;max-height:none !important;}
  html.fbg-nav-compact .mod-menu__sub.show-menu{display:block !important;}
  html.fbg-nav-compact .nav-links-wrap .currency-switch,
  html.fbg-nav-compact .nav-links-wrap .lang-switch{color:var(--ink);background:var(--cream);margin:12px 20px 0;justify-content:space-between;}
}

/* 11 sep 2026 - fbg-active-item-fix: actieve pagina (bv. "Скоростные катера") was wit op wit en dus onzichtbaar in het uitklapmenu */
@media (max-width:960px){
  .nav-links-wrap .mod-menu > .nav-item.current > a,
  .nav-links-wrap .mod-menu > .nav-item.active > a{color:var(--teal);}
}
@media (min-width:961px){
  html.fbg-nav-compact .nav-links-wrap .mod-menu > .nav-item.current > a,
  html.fbg-nav-compact .nav-links-wrap .mod-menu > .nav-item.active > a{color:var(--teal);}
}

/* 11 sep 2026 - fbg-header-zfix: op de homepage viel het uitklapmenu (mobiel) ONDER de zoekkaart (#hero-search, z-index 50 + transform, later in de DOM). Zolang er een menu/paneel open is, gaat de header erboven. */
.site-header:has(.nav-links-wrap.mobile-open, .locale-panel.open, .currency-dropdown.open, .mod-menu__sub.show-menu){z-index:400;}

/* ==========================================================================
   11 sep 2026 - fbg-native-select: taal en valuta als native keuzelijst
   (<select>) in het uitklapmenu: mobiel (max 960px) en compacte desktopmodus.
   Gebouwd in script.js (#nativeLocale); de originele knoppen doen het werk.
   ========================================================================== */
.native-locale{display:none;padding:12px 20px 0;}
.native-select{position:relative;display:flex;align-items:center;background:var(--cream);border-radius:20px;margin:0 0 10px;}
.native-select:focus-within{box-shadow:0 0 0 2px var(--teal);}
.native-select .ns-icon{position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);font-size:14px;line-height:1;pointer-events:none;}
.native-select select{-webkit-appearance:none;appearance:none;width:100%;border:0;border-radius:20px;background:transparent;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink);padding:10px 40px;padding-inline-start:40px;padding-inline-end:36px;cursor:pointer;text-overflow:ellipsis;}
.native-select select:focus{outline:none;}
.native-select svg{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--ink);pointer-events:none;}
.native-locale .ns-note{display:block;font-size:12px;line-height:1.4;color:var(--text-muted);margin:-4px 14px 12px;}
@media (max-width:960px){
  .fbg-native-ready > #currencySwitch,
  .fbg-native-ready > #langSwitch{display:none !important;}
  .fbg-native-ready > .native-locale{display:block;}
}
@media (min-width:961px){
  html.fbg-nav-compact .fbg-native-ready > #currencySwitch,
  html.fbg-nav-compact .fbg-native-ready > #langSwitch{display:none !important;}
  html.fbg-nav-compact .fbg-native-ready > .native-locale{display:block;}
}

/* 11 sep 2026 - fbg-rtl-toggle-fix: in het Arabische (RTL) mobiele menu stonden de submenu-pijltjes rechts, over de tekst heen */
@media (max-width:960px){
  html[dir="rtl"] .nav-links-wrap .mod-menu__toggle-sub{right:auto;left:6px;}
}

/* ==========================================================================
   11 sep 2026 - fbg-search-fit: zoekformulier, ruimte eerlijk verdelen (desktop)
   Klassen en --fbg-rest / --fbg-flex worden gezet door script.js.
   ========================================================================== */
@media (min-width:1151px){
  .search-row.fbg-search-fit{grid-template-columns:minmax(0,1fr) repeat(var(--fbg-rest,4), max-content) !important;}
  .search-row.fbg-search-fit > .pax-field{min-width:110px;}
  .search-row.fbg-search-fit .field .box{min-width:0;}
  .search-row.fbg-search-fit .field .box > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .search-row.fbg-search-fit .btn-search{white-space:nowrap;}
  /* te krap: Van/Naar boven, de rest eronder */
  .search-row.fbg-search-fit.fbg-search-stack{grid-template-areas:none !important;grid-template-columns:repeat(var(--fbg-flex,2), minmax(0,1fr)) max-content max-content !important;}
  .search-row.fbg-search-fit.fbg-search-stack > *{grid-area:auto !important;}
  .search-row.fbg-search-fit.fbg-search-stack > .swap-fields{grid-column:1 / -1 !important;}
  /* zoekresultatenpagina: Van/Naar-vakken waren 3px hoger dan de rest, waardoor de labels niet op een lijn stonden */
  .bustrips .search-card .search-row.fbg-search-fit .field .box{box-sizing:border-box;min-height:43px;}
}

/* 12 sep 2026, klantverzoek: kinderprijs op de resultaatkaart, klein onder "per adult" (zie trip_card.php).
   De regel staat altijd onder de volwassenenprijs zodra er een Child-prijs bestaat. */
.result-price .per.has-child{margin-bottom:2px;}
.result-price .per-child{font-size:11px;color:var(--text-muted);margin-bottom:10px;line-height:1.35;}


/* 12 sep 2026, vervolg kinderprijs: op mobiel is .result-price een grid met vaste areas, daardoor viel de nieuwe kinderprijs-regel over 'per adult' heen. Hier krijgt hij een eigen rij. */
@media (max-width:1150px){
  .result-price{grid-template-areas:"amount select" "per select" "perchild select" "breakdown breakdown";}
  .result-price .per-child{grid-area:perchild;text-align:left;margin-bottom:0;}
}


/* 12 sep 2026: door de vierde regel (KTP / KITAS) werd de reizigerslijst langer en liep hij achter
   de sticky datumbalk (.date-strip, z-index 8). De zoekkaart zit in .results-hero-inner met z-index 2,
   een eigen stapelcontext, dus de lijst zelf kon daar nooit bovenuit komen. Zolang de lijst openstaat
   tillen we die laag op; zodra hij dichtgaat valt alles terug naar de oude volgorde. */
.results-hero-inner:has(.pax-dropdown.open){z-index:30;}


/* 12 sep 2026, klantmelding (2 dingen op mobiel):
   1) met zowel een kind- als een KTP/KITAS-regel liepen die twee over elkaar heen. Het prijsblok is op
      mobiel een grid met vaste rijen (zie de regel eerder in deze media-query), en de KTP-regel had nog
      geen eigen rij. Die krijgt hij nu; hij erft verder de opmaak van .per-child (zelfde classes).
   2) het vinkje voor de gekozen boot stond op mobiel uit (Taak #50 zette .select-confirm-msg:before op
      display:none om de regels netjes onder elkaar te krijgen). Op verzoek staat het weer aan, met een
      kleine marge zodat het op de eerste tekstregel uitlijnt. */
.result-price .per-child:has(+ .per-ktp){margin-bottom:2px;}
@media (max-width:1150px){
  .result-price{grid-template-areas:"amount select" "per select" "perchild select" "perktp select" "breakdown breakdown";}
  .result-price .per-ktp{grid-area:perktp;text-align:left;margin-bottom:0;}
  /* het vinkje NIET hier aanzetten: de mobiele variant tekent zelf al een vinkje in .confirm-line-label
     (zie selectedLabel() in bustrips/default.php) - daarom stond deze :before op mobiel bewust uit. */
}


/* 12 sep 2026, klantoverleg: op mobiel staat het totaal al in de balk onderin (met 'Details'), dus het
   bedrag in de bevestigingsregel van de boot is dubbelop. De regel zelf blijft: die vertelt welke boot,
   welke datum en hoe laat - precies wat de balk verbergt. De toeslagregel van het transport houdt wel
   zijn bedrag, want dat staat nergens anders. Op desktop verandert er niets. */
@media (max-width:1150px){
  .confirm-line-boat .confirm-line-amount{display:none;}
}


/* 12 sep 2026, klantvoorstel: Volwassenen/Kinderen/Baby's blijven een schone rij; de vraag over
   KTP/KITAS staat in een eigen brede balk daaronder, met een streep ertussen. Zo ziet iedereen meteen
   dat het een andere vraag is (en gaat een toerist er net zo makkelijk aan voorbij als aan "Baby's"). */
.pax-ktp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line,#e6e6e6);}
.pax-ktp-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pax-ktp-q{font-size:13px;font-weight:600;color:var(--text,#12211f);line-height:1.3;}
.pax-ktp-sub{font-size:11px;color:var(--text-muted);line-height:1.35;}
/* de vraag krijgt de volle breedte, de teller komt eronder rechts - in een smalle dropdown leest dat
   veel rustiger dan vraag en teller naast elkaar. */
.pax-ktp-bar{flex-wrap:wrap;}
.pax-ktp-text{flex:1 1 100%;}
.pax-ktp-bar .pax-stepper{flex-shrink:0;margin-left:auto;}


/* 13 sep 2026, klantvoorstel: op mobiel dezelfde native picker als Volwassene/Kind/Baby, maar over de
   volle breedte onder die drie. Het label draagt de uitleg ("Optioneel: Indonesisch ID / KITAS"), dus er
   is geen vraagzin nodig - een toerist ziet meteen dat het niet over hem gaat. */
.pax-select-row:has(.pax-select-col-ktp){flex-wrap:wrap;}
.pax-select-col-ktp{flex:1 1 100%;width:100%;}
.pax-select-col-ktp{margin-top:2px;}
.pax-select-col-ktp label{white-space:normal;}


/* 13 sep 2026 - mobiel: KTP/KITAS als zin met een vinkje ervoor. Het aantal-veld klapt
   pas uit als het vinkje aanstaat, zodat toeristen er niets van merken. */
.pax-select-row:has(.pax-ktp-mob){flex-wrap:wrap;}
.pax-ktp-mob{flex:1 1 100%;width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.pax-ktp-check{display:flex;align-items:flex-start;gap:9px;margin:0;cursor:pointer;}
.pax-ktp-check input[type="checkbox"]{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--teal);cursor:pointer;}
.pax-ktp-check-text{font-size:13px;line-height:1.25;color:var(--text);font-weight:600;text-transform:none;letter-spacing:0;white-space:normal;}
.pax-ktp-mob-field{margin-top:10px;}
.pax-ktp-mob-field[hidden]{display:none;}
.pax-ktp-mob-field>label{display:block;margin-bottom:5px;font-size:9.5px;text-transform:uppercase;letter-spacing:0.3px;color:var(--text-muted);font-weight:700;white-space:normal;}

/* 13 sep 2026 - het KTP/KITAS-vinkje in de zoekbalken van de hero staat standaard uit en wordt
   door script.js aangezet zodra Nusa Penida of Nusa Lembongan gekozen is. */
.fbg-ktp-hero[hidden]{display:none !important;}


/* 13 sep 2026, klantvoorstel: rustiger resultaatkaart. De tarieven staan niet meer onder elkaar in
   de prijskolom maar op een regel onder de vertrektijden (daar stond toch ruimte leeg), "Details
   bekijken" staat gecentreerd onder de foto - die link gaat immers naar de operatorpagina - en de
   foto ligt groter tegen de linker- en bovenrand van de kaart. Alles alleen op desktop; onder
   961 px blijft de kaart precies zoals hij was. De kaart krijgt bewust GEEN overflow:hidden: het
   transportpaneel klapt binnen de kaart uit en zou dan afgeknipt worden - de ronding staat daarom
   op de foto zelf. */
@media (min-width:1151px){
  /* 13 sep 2026 (correctie): de kaart houdt zijn linkerpadding - anders plakken het transport-
     paneel en het groene bevestigingsvak, die ook kinderen van de kaart zijn, tegen de rand. Alleen
     de foto steekt eruit, via een negatieve marge. */
  .result-card:has(.rc-photo-link){grid-template-columns:182px 1fr auto;align-items:stretch;}
  .result-card:has(.rc-photo-link) .result-photo{position:relative;width:auto;height:auto;background:none;}
  /* 13 sep 2026 (correctie): de foto stond in de flow, dus kreeg elke kaart de natuurlijke hoogte van
     zijn eigen foto - kaarten en fotos verschilden daardoor per rij. Nu absoluut gepositioneerd binnen
     de uitgerekte fotokolom: de foto bepaalt de hoogte niet meer maar volgt hem, en alle kaarten in een
     lijst zijn even hoog. */
  .rc-photo-media{position:absolute;top:-16px;bottom:-16px;left:-18px;width:200px;border-radius:15px 12px 12px 15px;overflow:hidden;background:var(--ink-soft);}
  .rc-photo-media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
  /* 13 sep 2026: Promo / Lage prijs blijft hangen zoals vroeger - half over de linkerbovenhoek van
     de foto heen, met de ronde pilvorm en het schaduwtje. Nu de foto tegen de kaartrand ligt, steekt
     hij daarmee ook een stukje buiten de kaart uit; dat is precies de oude sticker-look. */
  .result-card:has(.rc-photo-link) .result-photo[data-deal-type]::before{top:-8px;left:-26px;}
  /* 13 sep 2026 (bijgesteld): de foto vult nu de volle kaarthoogte, dus is er onder de foto geen
     plek meer voor de link - die staat weer in de prijskolom, zoals in de schets van de klant. */
  .rc-photo-link{display:none;}
  .result-card:has(.rc-photo-link) .result-info{display:flex;flex-direction:column;}
  .rc-fares{margin-top:0;padding-top:9px;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;font-size:12px;color:var(--text-muted);}
  .rc-fares span{white-space:nowrap;}
  .rc-fares b{color:var(--text);font-weight:600;}
  /* 14 sep 2026 - geen scheidingsteken tussen de tarieven meer: de tussenruimte doet dat
     werk, net als op mobiel en tablet. Breekt de regel af (kaart met een KTP/KITAS-badge op een
     smal desktopvenster), dan bleef het puntje anders los aan het eind van de eerste regel staan. */
  .rc-fares .rc-fare-sep{display:none;}
  /* de losse tariefregels en de tweede "Details bekijken" in de prijskolom vervallen op desktop */
  .result-price .per{display:none;}
}
@media (max-width:1150px){
  .rc-fares,.rc-photo-link{display:none;}
  /* 13 sep 2026: de wrapper .rc-photo-media bestaat alleen voor de desktopindeling. Op mobiel moet
     hij voor de opmaak onzichtbaar zijn, anders klopt de hoogte van de foto niet meer en schuiven de
     badges die onder de foto horen eroverheen. display:contents laat de foto en de knoppen weer
     rechtstreekse kinderen van .result-photo zijn. */
  .rc-photo-media{display:contents;}
}


/* 13 sep 2026: de KTP/KITAS-rij heeft een lang label. Zodra die rij zichtbaar is wordt het
   pax-dropdown breder, anders breekt "Volwassenen Indonesisch ID / KITAS" over drie regels. */
.pax-field .pax-dropdown:has(.pax-row.fbg-ktp-hero:not([hidden])){min-width:296px;}


/* 13 sep 2026: foutpagina's (error.php). Eigen klassen zodat de rest van de site hier niets van
   merkt - de foutpagina gebruikt verder gewoon de site-header en dezelfde kleurvariabelen. */
.fbg-err-inner{max-width:720px;margin:0 auto;padding:62px 20px 86px;display:flex;flex-direction:column;gap:14px;}
.fbg-err-status{display:flex;align-items:center;gap:9px;margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.fbg-err-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;}
.fbg-err-dot--ok{background:#1F6B57;}
.fbg-err-dot--warn{background:#B07908;}
.fbg-err-dot--bad{background:var(--coral);}
.fbg-err-title{margin:0;font-size:34px;line-height:1.12;color:var(--ink);max-width:20ch;}
.fbg-err-text{margin:0;color:var(--text-muted);max-width:58ch;}
.fbg-err-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.fbg-err-btn{display:inline-block;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;border:1px solid transparent;text-decoration:none;}
.fbg-err-btn--primary{background:var(--coral);color:#fff;}
.fbg-err-btn--ghost{background:transparent;border-color:var(--border);color:var(--ink);}
.fbg-err-btn--wa{background:#25D366;color:#07331A;}
.fbg-err-btn:hover{opacity:.9;}
.fbg-err-routes{margin-top:26px;padding-top:20px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:11px;}
.fbg-err-routes-label{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);}
.fbg-err-chips{display:flex;flex-wrap:wrap;gap:8px;}
.fbg-err-chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 14px;font-size:13px;color:var(--ink);text-decoration:none;}
.fbg-err-chip:hover{border-color:var(--coral);color:var(--coral);}
.fbg-err-debug{margin-top:24px;font-size:12px;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word;}
.fbg-err-foot{background:var(--ink);color:rgba(255,255,255,.7);}
.fbg-err-foot-inner{max-width:1180px;margin:0 auto;padding:18px 20px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;font-size:13px;}
.fbg-err-foot-links{display:flex;flex-wrap:wrap;gap:18px;}
.fbg-err-foot-links a{color:rgba(255,255,255,.7);text-decoration:none;}
.fbg-err-foot-links a:hover{color:#fff;}
@media (max-width:600px){
  .fbg-err-inner{padding:34px 18px 54px;}
  .fbg-err-title{font-size:26px;}
  .fbg-err-actions .fbg-err-btn{flex:1 1 100%;text-align:center;}
}


/* 13 sep 2026: breadcrumbs op alle pagina's (opgebouwd in index.php, ingevoegd in .page-hero-inner).
   Zelfde uiterlijk als het bestaande kruimelpad op de operatorpagina's: lichte tekst op de foto-hero. */
.fbg-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 18px;font-size:13px;line-height:1.4;color:rgba(255,255,255,0.7);}
.fbg-crumbs a{color:rgba(255,255,255,0.7);text-decoration:none;}
.fbg-crumbs a:hover{color:#fff;text-decoration:underline;}
.fbg-crumbs span[aria-current]{color:#fff;}
.fbg-crumbs .fbg-crumbs-sep{color:rgba(255,255,255,0.4);}
@media (max-width:600px){
  .fbg-crumbs{font-size:12px;gap:5px;margin-bottom:14px;}
}


/* 13 sep 2026: terugreizen die te snel na aankomst van de heenreis vertrekken. Ze blijven staan,
   maar gedimd en onklikbaar, met een uitleg eronder. Zie de regel in js/script.js. */
/* 13 sep 2026 (correctie): niet de hele kaart dimmen - opacity op de kaart dimt ook de
   waarschuwing zelf, en die was daardoor slecht leesbaar. Nu worden alleen de drie kolommen
   gedimd; de melding hangt los aan de kaart en houdt vol contrast. */
.result-card.rc-too-early .result-photo,
.result-card.rc-too-early .result-info,
.result-card.rc-too-early .result-price{opacity:.45;}
.result-card.rc-too-early .result-photo img,.result-card.rc-too-early .rc-photo-media img{filter:grayscale(1);}
.result-card.rc-too-early .btn-select{background:var(--ink-soft);border-color:var(--ink-soft);cursor:not-allowed;}
.rc-too-early-note{grid-column:1 / -1;width:100%;margin:12px 0 0;display:flex;gap:10px;align-items:flex-start;
  background:#FCE8E1;border:1px solid #EFB09C;border-radius:10px;padding:11px 14px;
  font-size:14px;line-height:1.45;font-weight:600;color:#8A2A0E;}
.rc-too-early-note::before{content:'!';flex:none;width:19px;height:19px;border-radius:50%;background:#C4441C;color:#fff;
  font-size:13px;font-weight:700;line-height:19px;text-align:center;margin-top:1px;}
@media (max-width:600px){
  .rc-too-early-note{font-size:13.5px;padding:10px 12px;margin-top:10px;}
}


/* 13 sep 2026: de sitemap-link staat niet meer onder de kop Juridisch maar in de onderste balk. */
.foot-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;}
.foot-bottom-link{color:inherit;opacity:.75;text-decoration:none;}
.foot-bottom-link:hover{opacity:1;text-decoration:underline;}


/* 14 sep 2026 - labeltje met de KTP/KITAS-korting, direct achter het tarief waar het bij hoort.
   Verschijnt alleen als de bezoeker zelf zo een reiziger heeft geselecteerd. Het reizigerstype
   staat al in de regel, dus de badge noemt alleen KTP/KITAS en het percentage. */
.rc-ktp-badge{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;
  background:#E4F0E9;border:1px solid #BEDCCC;color:#3F6656;
  font-size:11.5px;line-height:1.5;white-space:nowrap;vertical-align:1px;}
.rc-fares .rc-ktp-badge b{font-weight:700;color:#1D5A40;}
@media (max-width:1150px){
  /* de tariefregel is hier normaal verborgen; met badges erin juist niet, want dan is het de
     enige plek waar een lokale reiziger zijn korting ziet. 14 sep 2026: deze regel stond eerst
     op 700px, terwijl .rc-fares tot 960px verborgen wordt. Op tablets in portret (iPad mini 768,
     iPad Air 820, iPad Pro 11" 834) viel de hele tariefregel daardoor weg - inclusief de
     kinderprijs, want trip_card.php laat de losse .per-child-regel weg zodra er badges zijn. */
  .result-card .rc-fares.rc-fares-ktp{display:flex;flex-wrap:wrap;gap:2px 14px;
    align-items:baseline;margin-top:0;padding-top:9px;font-size:12px;line-height:1.7;
    color:var(--text-muted);}
  .result-card .rc-fares.rc-fares-ktp > span{white-space:nowrap;}
  .result-card .rc-fares.rc-fares-ktp b{color:var(--text);font-weight:600;}
  .result-card .rc-fares.rc-fares-ktp .rc-ktp-badge{font-size:11px;margin-left:6px;}
  /* geen scheidingsteken hier: de tussenruimte doet dat werk. Zo belandt er bij het afbreken
     nooit een losse punt aan het begin van een regel, en is er dus ook geen apart telefoon-
     breekpunt nodig - de regel past zichzelf aan de beschikbare breedte aan. */
  .result-card .rc-fares.rc-fares-ktp .rc-fare-sep{display:none;}
}


/* 14 sep 2026 - de balk met de gekozen vaart: scheidingsteken tussen tijd en prijs, plus een
   labeltje dat het KTP/KITAS-tarief is toegepast wanneer die reizigers in de zoekopdracht zitten. */
.leg-tab-summary-price::before{content:"\00b7";margin:0 8px;color:#9FB9A8;font-weight:400;}
.leg-tab-ktp{display:inline-block;margin-left:9px;padding:1px 8px;border-radius:999px;
  background:#FFFFFF;border:1px solid #BEDCCC;color:#1D5A40;
  font-size:11px;font-weight:600;line-height:1.55;white-space:nowrap;vertical-align:1px;}


/* 14 sep 2026 - het nog lege vakje in de balk onderin is klikbaar: het springt naar de lijst
   met vaarten voor dat deel van de reis. Alleen het lege vakje, het gevulde heeft zijn kruisje. */
.sel-item:not(.filled){cursor:pointer;transition:background .15s ease;}
.sel-item:not(.filled):hover,
.sel-item:not(.filled):focus-visible{background:rgba(46,125,91,.07);}
.sel-item:not(.filled):focus-visible{outline:2px solid #2E7D5B;outline-offset:2px;}
.sel-item:not(.filled):hover .sel-leg-detail{color:#2E7D5B;text-decoration:underline;text-underline-offset:2px;}


/* -------------------------------------------------------------------------
   16 sep 2026 - Mobiel: tikvlak van de native <select> velden.
   De <select> in From/To was maar 18px hoog in een vak van 44px, en bij
   Adult/Child/Infant zelfs 42x17 in een vak van 99x44. Het grootste deel van
   het witte vak reageerde dus niet op een tik. De select ligt nu over het hele
   vak (het pictogram blijft zichtbaar maar vangt geen tikken meer) en krijgt
   font-size 16px, waardoor iOS Safari niet meer inzoomt bij het openen.
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .search-card .box.pax-select-icon-box { position: relative; }
  .search-card .box.pax-select-icon-box > svg { position: relative; z-index: 1; pointer-events: none; }
  .search-card .box.pax-select-icon-box > select.pax-select {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0 4px 0 43px;
    border: 0;
    background: transparent;
    font-size: 16px;
    line-height: 1.2;
  }
}


/* -------------------------------------------------------------------------
   16 sep 2026 - Betaalmethode kiezen: de rij is nu aanklikbaar.
   BookPro rendert de keuzerondjes als een kale <input> met een los <span> ernaast,
   zonder <label for>. Alleen het bolletje van 16 bij 16 pixels reageerde dus op een
   klik - met een vinger nauwelijks te raken. De klik zelf wordt afgehandeld in de
   template-override van formpayment; dit maakt alleen zichtbaar dat de hele rij werkt.
   ------------------------------------------------------------------------- */
.pay-option,
.pay-option .pay-label,
.pay-option input[name="payment_plugin"] {
  cursor: pointer;
}


/* -------------------------------------------------------------------------
   16 sep 2026 - Merklogo's en geruststellende regel bij de PayPal-betaalmethode.
   De logo's staan links uitgelijnd onder het keuzerondje, op dezelfde hoogte als het
   label, zodat het een blokje wordt in plaats van los zwevende plaatjes. De kaartjes
   zijn even hoog gehouden; het PayPal-wordmark is breder en mag iets lager.
   ------------------------------------------------------------------------- */
.pay-brands {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0 28px;
}

.pay-brands img {
  display: block;
  width: auto;
  height: 20px;
}

.pay-brands img[alt="PayPal"] {
  height: 17px;
  margin-right: 2px;
}

.pay-note {
  margin: 7px 0 0 28px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #5C6E6B;
}

/* FBG-PAYNOTE-20260927: een uitgeschakelde betaaloptie heeft geen keuzerondje, dus die 28px
   inspringing (die voor het rondje bedoeld is) zet de toelichting scheef onder de titel.
   Alleen in de uitgeschakelde variant terug naar 0, zodat titel en tekst uitlijnen. */
.pay-option.is-disabled .pay-note { margin-left: 0; }

@media (max-width: 600px) {
  .pay-brands,
  .pay-note {
    margin-left: 0;
  }
}
/* 20 sep 2026 - gemiddelde cijfer in de mobiele header, alleen homepage (fbg-rating.php) */
.hdr-rating{display:none;}
@media (max-width:960px){
  .site-header .logo{display:flex;align-items:center;column-gap:0;row-gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0;margin-right:-4px;}
  .site-header .burger{flex:0 0 auto;}
  .site-header .hdr-rating{display:inline-flex;align-items:baseline;gap:4px;margin-left:auto;margin-right:auto;color:#fff;line-height:1;white-space:nowrap;text-shadow:0 1px 6px rgba(4,32,22,.6);}
  .site-header .hdr-rating b{font-size:15px;font-weight:800;}
  .site-header .hdr-rating i{font-style:normal;color:var(--amber);font-size:13px;}
  .site-header .hdr-rating em{font-style:normal;font-weight:600;font-size:10.5px;opacity:.92;}
}

/* 20 sep 2026 - Continue op de passagierspagina uit tot alles ingevuld is, zelfde grijs als .btn-continue bij stap 1 */
.btn-confirm-continue:disabled,.btn-confirm-continue:disabled:hover{background:var(--border);color:var(--text-muted);cursor:not-allowed;animation:none;box-shadow:none;}

/* 20 sep 2026 - eigen telefoonveld met vlag en landnummer op de passagierspagina */
.fbg-tel{position:relative;display:flex;align-items:stretch;border:1px solid var(--border);border-radius:10px;background:#fff;overflow:visible;}
.fbg-tel:focus-within{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal);}
.fbg-tel-knop{display:flex;align-items:center;gap:7px;border:0;background:none;padding:0 10px 0 12px;font:inherit;color:var(--ink);cursor:pointer;border-right:1px solid var(--border);border-radius:10px 0 0 10px;}
.fbg-tel-knop:hover{background:var(--cream);}
.fbg-tel-vlag{font-size:19px;line-height:1;}
.fbg-tel-pijl{color:var(--text-muted);flex:0 0 auto;}
.fbg-tel-code{font-weight:600;font-size:15px;color:var(--text-muted);}
.fbg-tel .fbg-tel-nr{flex:1 1 auto;min-width:0;border:0!important;background:none!important;box-shadow:none!important;border-radius:0 10px 10px 0!important;}
.fbg-tel .fbg-tel-nr:focus{box-shadow:none!important;border:0!important;}
.fbg-tel-paneel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:min(340px,100%);max-width:100vw;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(11,36,48,.16);padding:8px;}
.fbg-tel-zoek{width:100%;border:1px solid var(--border);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;margin-bottom:6px;}
.fbg-tel-lijst{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;}
.fbg-tel-lijst li{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:14px;}
.fbg-tel-lijst li:hover{background:var(--cream);}
.fbg-tel-lijst li[hidden]{display:none;}
.fbg-tel-naam{flex:1 1 auto;color:var(--ink);}
.fbg-tel-plus{color:var(--text-muted);font-weight:600;}

.fbg-tel-vlag{display:inline-flex;align-items:center;flex:0 0 auto;}
.fbg-tel-vlag img{display:block;flex:0 0 auto;min-width:24px;width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(11,36,48,.12);}
.fbg-tel-lijst .fbg-tel-vlag{flex:0 0 auto;}

/* 20 sep 2026 - sterretjes bij verplichte velden op de passagierspagina */
.fbg-ster{color:var(--coral);margin-left:3px;font-weight:700;}
.fbg-verplicht-uitleg{margin:0 0 16px;font-size:13.5px;color:var(--text-muted);}
.fbg-knop-hint{float:left;margin:12px 0 0;font-size:13.5px;color:var(--text-muted);max-width:58%;}
.fbg-knop-hint[hidden]{display:none;}
@media (max-width:600px){.fbg-knop-hint{float:none;max-width:none;text-align:center;margin:0 0 10px;}}

/* 20 sep 2026 - teller, spring-knopje en markering van onvolledige passagiers */
.fbg-knop-tel{color:var(--coral-dark);font-weight:700;}
.fbg-toon{border:0;background:none;padding:0;margin-left:8px;font:inherit;font-weight:700;color:var(--teal);text-decoration:underline;cursor:pointer;}
.fbg-toon:hover{color:#1F7A46;}
.fbg-blok-merk{margin-left:10px;font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--coral-dark);background:rgba(255,107,74,.13);border-radius:999px;padding:3px 10px;vertical-align:middle;}
.fbg-blok-merk[hidden]{display:none;}
.form-field.fbg-mist input,.form-field.fbg-mist select,.form-field.fbg-mist .fbg-tel{border-color:var(--coral)!important;box-shadow:0 0 0 1px var(--coral)!important;}
.form-field.fbg-mist label{color:var(--coral-dark);}

/* 21 sep 2026 - naam van de rederij per etappe in de samenvatting (bevestiging en betaalpagina).
   Stond alleen in de bevestigingsmail en op het e-ticket, terwijl de klant juist tijdens het
   boeken wil zien met wie hij vaart. Bron: agent.company, hetzelfde veld als in de mail. */
.trip-leg-operator{font-size:12.5px;font-weight:600;color:var(--text-muted);margin:2px 0 10px;}

/* 21 sep 2026: transport als groene link "Add transport" i.p.v. de witte knop (label "Hotel pick-up" op verzoek weer weggehaald). */
.result-card .tp-toggle.tp-toggle-link,.result-card .tp-toggle.tp-toggle-link:hover{background:transparent;border:0;border-radius:0;box-shadow:none;padding:6px 0;color:var(--teal);font-weight:800;font-size:13px;text-decoration:underline;text-underline-offset:3px;}
.result-card .tp-toggle.tp-toggle-link svg{display:none;}
.result-card .tp-toggle.tp-toggle-link::after{content:"\203A";display:inline-block;margin-left:4px;text-decoration:none;}
/* 21 sep 2026: desktop - foto 223 breed (was 200). Mobiel ongewijzigd. */
@media (min-width:1151px){.result-card:has(.rc-photo-link){grid-template-columns:205px minmax(0,1fr) auto;}.result-card .rc-photo-media{width:223px;}}
/* 21 sep 2026: desktop - Select in het midden tussen prijs en "Add transport" (gelijke ruimte boven en onder). */
@media (min-width:1151px){.result-card .result-price .btn-select{margin-top:7px;}.result-card .result-price .tp-toggle.tp-toggle-link{margin-top:3px;}}
/* 21 sep 2026: busje links voor Add transport (mobiel en desktop), zelfde icoon als in bevestiging en mail. */
.result-card .tp-toggle.tp-toggle-link svg{display:inline-block;width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin:0 2px 0 0;vertical-align:-3px;}

/* 21 sep 2026 (fbgKalKnop): kalender-knopje rechts in de datumvelden (ontwerp C, zie ontwerpen/kalender-icoon.html).
   Geldt voor elk .box-veld met een datum: zoekbalk op home/route/bestemming/rederij (.date-field/.return-field)
   en de zoekbalk op de resultatenpagina (.box met een input[type=date]). Het oude lijnicoon wordt het knopje. */
.date-field .box > svg.field-icon,
.return-field .box > svg.field-icon,
.box:has(> input[type="date"]) > svg.field-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  height: auto;
  margin: 0;
  background: #F3F0E9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' shape-rendering='crispEdges' fill='%2312211f'%3E%3Cpath fill-rule='evenodd' d='M1 3h15v13H1zM2 7h13v8H2z'/%3E%3Cpath d='M4 1h2v4H4zM11 1h2v4h-2zM3 9h2v2H3zM6 9h2v2H6zM9 9h2v2H9zM12 9h2v2h-2zM3 12h2v2H3zM6 12h2v2H6zM9 12h2v2H9z'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
  border-left: 1px solid rgb(231, 225, 211);
  border-radius: 0 9px 9px 0;
  transition: background-color .15s;
}
.date-field .box,
.return-field .box,
.box:has(> input[type="date"]) { position: relative; padding-right: 52px !important; }
.date-field .box > svg.field-icon > *,
.return-field .box > svg.field-icon > *,
.box:has(> input[type="date"]) > svg.field-icon > * { display: none; }
.date-field .box > span,
.return-field .box > span,
.box:has(> input[type="date"]) > span { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
.date-field .box:hover > svg.field-icon,
.return-field .box:hover > svg.field-icon,
.box:has(> input[type="date"]):hover > svg.field-icon { background-color: #EAE5DA; }


/* 21 sep 2026 (fbgKalKnopFA): kalendericoon in het knopje is nu exact hetzelfde Font Awesome-icoon (fa-calendar, \f073)
   als op de oude site: scherper dan een getekende SVG. Font Awesome 4 wordt al geladen (use.fontawesome.com-kit).
   Het svg.field-icon wordt verborgen; het knopje is nu een ::after van het veld (klik gaat naar het veld, opent onze kalender). */
.date-field .box > svg.field-icon,
.return-field .box > svg.field-icon,
.box:has(> input[type="date"]) > svg.field-icon { display: none !important; }
.date-field .box::after,
.return-field .box::after,
.box:has(> input[type="date"])::after {
  content: "\f073";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 1;
  color: #3d4a48;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F0E9;
  border-left: 1px solid rgb(231, 225, 211);
  border-radius: 0 9px 9px 0;
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
  transition: background-color .15s;
}
.date-field .box:hover::after,
.return-field .box:hover::after,
.box:has(> input[type="date"]):hover::after { background-color: #EAE5DA; }

/* 21 sep 2026 (fbgKalKnopSVG): het Font Awesome-kalendericoon (fa-calendar) staat nu als vorm in de CSS zelf, niet meer als lettertype.
   Reden: bij Dimitri laadde het Font Awesome-lettertype niet altijd (leeg vierkantje). Zelfde vorm, overgenomen uit het FA 4-bestand
   van de oude template (templates/as002065/fonts/fontawesome-webfont.svg). Geen afhankelijkheid van use.fontawesome.com meer. */
.date-field .box::after,
.return-field .box::after,
.box:has(> input[type="date"])::after {
  content: "" !important;
  font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -31 1567 1567'%3E%3Cpath fill='%233d4a48' transform='matrix(1 0 0 -1 0 1536)' d='M0 117v1147q0 47 35 81.5t82 34.5h39v13q0 31 10 62.5t32.5 56t59.5 40t90 15.5t90 -15.5t59.5 -40t33 -56.5t10.5 -62v-13h49v13q0 31 10 62.5t32.5 56t59.5 40t90 15.5t90 -15.5t60.5 -40t34 -56.5t10.5 -62v-13h49v13q0 31 10.5 62.5t33 56t59 40t90.5 15.5 q53 0 90 -15.5t59.5 -40t32.5 -56.5t10 -62v-13h39q47 0 82 -34.5t35 -81.5v-1147q0 -47 -35 -82t-82 -35h-1333q-47 0 -82 35t-35 82zM158 158h282v250h-282v-250zM158 446h282v252h-282v-252zM158 737h282v252h-282v-252zM272 1165q0 -57 76 -57t76 57v228q0 57 -76 57 t-76 -57v-228zM479 158h285v250h-285v-250zM479 446h285v252h-285v-252zM479 737h285v252h-285v-252zM709 1165q0 -31 16 -44t57 -13t58.5 13.5t17.5 43.5v228q0 29 -17.5 43t-58.5 14t-57 -14.5t-16 -42.5v-228zM803 158h284v250h-284v-250zM803 446h284v252h-284v-252z M803 737h284v252h-284v-252zM1126 158h283v250h-283v-250zM1126 446h283v252h-283v-252zM1126 737h283v252h-283v-252zM1143 1165q0 -57 76 -57t75 57v228q0 57 -75 57q-76 0 -76 -57v-228z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}


/* 24-09-2026: Non-refundable-pil op de resultcard. Zelfde plek en vorm als
   "Free cancellation" (daarom ook .cancel, waar de positioneringsregels op
   mikken), maar neutraal grijs - het is geen pluspunt. */
.badge.cancel.is-nonref{background:#fff;color:#6b7280;border:1px solid #cbd5e1;}

/* 25 sep 2026 - aanbetaling bij een gemengde boeking: wat nu betaald wordt en wat
   bij het inchecken in de haven. Staat boven de betaalmethodes op de betaalpagina. */
.fbg-split{border:1px solid var(--border);border-radius:12px;background:#fff;padding:4px 18px 14px;margin:0 0 16px;}
.fbg-split-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.fbg-split-row:last-of-type{border-bottom:0;}
.fbg-split-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.fbg-split-title{font-weight:800;font-size:14.5px;color:var(--ink);}
.fbg-split-legs{font-size:12.5px;line-height:1.45;color:#5C6E6B;}
.fbg-split-amount{margin-left:auto;font-weight:800;font-size:16px;color:var(--coral);white-space:nowrap;}
.fbg-split-row.is-later .fbg-split-title{color:var(--text-muted);}
.fbg-split-row.is-later .fbg-split-amount{color:var(--text-muted);font-weight:700;}
.fbg-split-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#5C6E6B;}
@media (max-width:600px){
  .fbg-split{padding:2px 14px 12px;}
  .fbg-split-row{flex-wrap:wrap;gap:6px;}
  .fbg-split-amount{margin-left:auto;font-size:15px;}
}

/* 26 sep 2026 (fbgVolgendeDatum): melding boven de resultaten wanneer de gevraagde dag geen
   afvaarten had en we de eerstvolgende dag tonen. Lichte waarschuwingskleur, want het is geen
   fout maar de klant moet het wel zien. */
.fbg-datum-verschoven{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:10px 0 16px;padding:10px 14px;background:#FFF6E5;border:1px solid #F0D9A8;border-radius:10px;color:#6B4E16;font-size:14px;line-height:1.45}
@media (max-width:600px){.fbg-datum-verschoven{font-size:13px;padding:9px 12px}}

/* 26 sep 2026 (fbgGeenVerleden): de vorige-pijl van de datumstrook is uitgeschakeld zodra het
   venster al op de ondergrens staat (vandaag, of de heenreisdatum bij de terugstrook). */
.date-strip-nav.is-uit{opacity:.3;pointer-events:none;cursor:default}

/* 26 sep 2026 (fbgLokaalTarief): kleine badge op routes met een Indonesian ID / KITAS-tarief.
   Amber en bewust NIET dezelfde geel als .fbg-datum-verschoven: die balk betekent op deze site
   "let op, er is iets met je zoekopdracht", en deze badge is juist goed nieuws. Contrast van de
   tekst op de achtergrond is 5,63:1 - ruim boven de 4,5 die je voor zulke kleine letters wilt. */
.fbg-lokaal-badge{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap;padding:4px 10px;border-radius:99px;background:#FDF0D2;color:#7A5A12;border:1px solid #E8C97A}
.fbg-lokaal-badge svg{width:13px;height:13px;flex:none}
.trip-count .fbg-lokaal-badge{margin-left:10px}
/* In de zoekkaart staat hij naast de accommodatie-schakelaar. Die is inline-flex met 16px marge
   boven, dus de badge krijgt dezelfde marge en gaat er inline naast staan. Staat de schakelaar
   sitebreed uit, dan vervalt de linkermarge vanzelf (de + geldt dan niet). */
.fbg-lokaal-zoek{margin:16px 0 0}
.accom-toggle-row + .fbg-lokaal-zoek{margin-left:14px}
@media (max-width:640px){
.accom-toggle-row{display:flex}
.fbg-lokaal-zoek,.accom-toggle-row + .fbg-lokaal-zoek{margin:10px 0 0}
}

/* 26 sep 2026 (fbgLokaalTarief): zonder deze regel doet het hidden-attribuut niets, omdat de
   display:inline-flex hierboven de browserregel [hidden]{display:none} overstemt. De badge zou
   dan op elke pagina met een zoekbalk zichtbaar zijn, ook zonder lokaal tarief. */
.fbg-lokaal-badge[hidden]{display:none}

/* 26 sep 2026 (fbgLokaalTarief): de badge zakte onder de schakelaar weg. Twee inline-flex
   elementen naast elkaar lijnen standaard op hun tekstbasislijn, en die van de schakelaar ligt
   lager dan die van de badge. Allebei op vertical-align:middle zet ze op hun gemeenschappelijke
   midden. De regelhoogte van de schakelaar wordt gelijkgetrokken zodat er geen restverschil is. */
.accom-toggle-row{vertical-align:middle;line-height:1.3}
.fbg-lokaal-zoek{vertical-align:middle;line-height:1.3}

/* 26 sep 2026 (fbgLokaalTarief): badge weg op smalle schermen. Onder 1150px klapt de
   reizigerskiezer uit in de kaart (.pax-ktp-mob) en staan "Adults Indonesian ID / KITAS" en
   "Children Indonesian ID / KITAS" voluit in beeld. De badge maakt er dan een derde vermelding
   van hetzelfde op een klein scherm - ruis voor de toerist die gewoon een gewoon kaartje wil.
   Boven 1150px zit die kiezer in een dichtgeklapt menu en is de badge het enige signaal.
   De regel is dus: de badge verschijnt waar de KITAS-optie niet al zichtbaar is. Daarmee zijn
   de .fbg-lokaal-zoek-regels in de 640px-query hierboven dood hout geworden; ze staan er nog
   voor het geval dit breekpunt ooit terugschuift. */
@media (max-width:1150px){
.fbg-lokaal-zoek{display:none}
}

/* 26 sep 2026 (fbgKalOpruimen): "Clear" en "Continue as one-way" waren onderstreepte tekst en
   lazen als bijzin. Het zijn allebei echte acties, dus ze krijgen een echte knop - omlijnd in
   de merkkleur, niet vol oranje, want dat is de kleur van "Search boats" en die blijft de
   hoofdactie. Volle breedte omdat de twee teksten sterk in lengte verschillen; zo staan ze in
   beide kalenders even breed. */
.fbg-cal-footer{justify-content:stretch}
.fbg-cal-btn-clear{flex:1 1 auto;width:100%;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;background:#fff;color:#E4603C;border:1.5px solid #E4603C;font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.fbg-cal-btn-clear:hover,.fbg-cal-btn-clear:focus-visible{background:#E4603C;color:#fff;text-decoration:none}

/* 26 sep 2026: bedragen per etappe (fbg-etappeprijs.php). .tlt-row wordt een regel met de tekst
   links en het bedrag rechts. Die klasse is gedeeld tussen busconfirm en de betaalpagina, dus
   beide krijgen vanzelf dezelfde opmaak - dat is hier de bedoeling, de klant hoort op beide
   pagina's hetzelfde te zien. Een regel zonder bedrag blijft er hetzelfde uitzien, want met
   maar een kind links doet space-between niets. */
.tlt-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.tlt-aantal{display:block;font-size:12px;font-weight:400;color:var(--text-muted);margin-top:2px}
.tlt-bedrag{flex:none;white-space:nowrap}
.trip-leg-fare{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);font-size:13px;font-weight:700;color:var(--ink)}
.tlf-aantal{display:block;font-size:12px;font-weight:400;color:var(--text-muted);margin-top:2px}
.tlf-bedrag{flex:none;white-space:nowrap}

/* 26 sep 2026: bedragen per etappe op de boekingsdetails; zie fbg-etappeprijs.php. */
.od-table th.od-prijs,.od-table td.od-prijs{text-align:right;white-space:nowrap}
.od-prijs-sub{display:block;font-size:12px;font-weight:400;color:var(--text-muted);margin-top:2px;white-space:nowrap}
.odt-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.odt-aantal{display:block;font-size:12px;font-weight:400;color:var(--text-muted);margin-top:2px}
.odt-bedrag{flex:none;white-space:nowrap}

/* 27 sep 2026: de bootprijs per passagierstype onder de Fast boat-regel, dezelfde
   kleine grijze stijl als het aantal onder een halte. */
.tlf-types{display:block;margin-top:6px}
.tlf-type{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:12px;font-weight:400;color:var(--text-muted);padding:1px 0}
.tlf-type-bedrag{flex:none;white-space:nowrap}

/* 27 sep 2026: de regel moet de volle breedte pakken, anders lijnen de bedragen per
   type niet uit met het etappetotaal. */
.trip-leg-fare .tlf-tekst{flex:1 1 auto;min-width:0}

/* 27 sep 2026, klantverzoek: op mobiel stond het eerste invulveld van stap 2 ruim twee
   schermen onder de vouw, omdat de samenvattingskaart erboven staat. Onder 900px wordt de
   kaart daarom ingeklapt tot een balkje; het script onderaan
   html/com_bookpro/busconfirm/default.php vult dat balkje en klapt hem om. Op desktop staat
   de kaart naast het formulier en verandert er niets - daar blijft .fbg-trip-toggle verborgen. */
.fbg-trip-toggle{display:none}
@media (max-width:900px){
    .confirm-shell aside .fbg-trip-toggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card,#fff);border:1px solid var(--border,#e6e0d4);border-radius:12px;padding:12px 14px;margin:0 0 14px;cursor:pointer;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
    .confirm-shell aside .fbg-tt-text{flex:1 1 auto;min-width:0;display:block}
    .confirm-shell aside .fbg-tt-title{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#6b7572)}
    .confirm-shell aside .fbg-tt-route{display:block;font-weight:700;font-size:15px;margin-top:2px}
    .confirm-shell aside .fbg-tt-meta{display:block;font-size:13px;color:var(--text-muted,#6b7572);margin-top:3px}
    .confirm-shell aside .fbg-tt-chev{flex:none;font-size:16px;line-height:1;color:var(--text,#12211f);transition:transform .18s ease}
    .confirm-shell aside.fbg-trip-open .fbg-tt-chev{transform:rotate(180deg)}
    .confirm-shell aside.fbg-trip-dicht .trip-card{display:none}
}

/* FBG-PIJLTJES-20260927 - klantverzoek: de open/dicht-pijltjes van de samenvatting waren
   nauwelijks zichtbaar, een dun grijs streepje rechts in de balk. Ze krijgen nu een eigen rond
   vlak met randje, meer contrast en een dikkere lijn, zodat het als knop leest. Twee plekken
   met dezelfde behandeling: .trip-mini-chevron op de betaalpagina (stap 3) en .fbg-tt-chev op
   de ingeklapte samenvatting van busconfirm op mobiel (stap 2). Alleen opmaak - de werking en
   de draaiing bij openklappen blijven zoals ze waren. Deze regels staan bewust achteraan zodat
   ze de eerdere definities (regel 1235 en 2996) overschrijven. */
.trip-mini-chevron{box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:999px;border:1px solid var(--border,#e6e0d4);background:var(--card,#fff);stroke:var(--text,#12211f);stroke-width:2.4;transition:transform .18s ease,background .18s ease}
.trip-mini:hover .trip-mini-chevron{background:#eef5f1}
.confirm-shell aside .fbg-tt-chev{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;border:1px solid var(--border,#e6e0d4);background:var(--card,#fff);font-size:13px;line-height:1;color:var(--text,#12211f);transition:transform .18s ease,background .18s ease}
.confirm-shell aside .fbg-trip-toggle:hover .fbg-tt-chev{background:#eef5f1}

/* FBG-PIJLTJES-20260927 vervolg: het tekstpijltje in de mobiele samenvatting is vervangen
   door dezelfde SVG-chevron als op de betaalpagina, zodat beide er hetzelfde uitzien en de
   lijn even dik is. */
.confirm-shell aside .fbg-tt-chev svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* FBG-PRINTKOP-20260927 - klantverzoek: op de printversies (Booking, Receipt, Ticket) stond
   nog de zware groene balk met het witte logo. Net als in de bevestigingsmail staat daar nu
   het groene logo op wit. Alleen zichtbaar bij printen, dus in een eigen @media print-blok
   achteraan zodat het de definitie op regel 1420 overschrijft. */
@media print{
    .od-print-header{background:transparent !important;padding:0 0 16px !important;border-radius:0 !important;border-bottom:1px solid #dfe3e0 !important;margin-bottom:22px !important}
    .od-print-header img{height:32px !important}
}


/* FBG-PRINTPAGINA-20260927 */
@media print{
	.od-totals + .od-info-section{break-before:page;page-break-before:always;}
	.od-info-section{break-inside:avoid;page-break-inside:avoid;}
	.od-info-section li{break-inside:avoid;page-break-inside:avoid;}
	.od-info-section h2{break-after:avoid;page-break-after:avoid;}
	.od-table tr,.od-transport,.od-transport-leg,.od-totals{break-inside:avoid;page-break-inside:avoid;}
	.orderdetail h2{break-after:avoid;page-break-after:avoid;}
}


/* FBG-ALINEABREEDTE-20260927 */
.hero p{max-width:700px;}

/* 28 sep 2026, klantverzoek: de transfer-toeslagen in de keuzelijsten zijn per persoon.
   Op de andere pagina's staat het aantal reizigers naast de prijs, hier niet - vandaar
   dit regeltje boven de keuzelijsten. */
.tp-perperson {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #6b7280;
    font-weight: 600;
}