:root{
    --navy-950:#0e2340;
    --navy-900:#123156;
    --navy-800:#173d69;
    --navy-700:#1e4b80;
    --teal-300:#8fd9e6;
    --teal-500:#22a9c4;
    --teal-600:#1a8ea6;
    --teal-700:#146d80;
    --gold-500:#eaa93b;
    --gold-700:#b8791f;
    --white:#ffffff;
    --ivory-dim:#f3f7f9;
    --sky:#e7f5f8;
    --ink:#14181f;
    --ink-soft:#5a6472;
    --line:rgba(20,40,60,0.1);
    --line-teal:rgba(34,169,196,0.28);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  .serif{font-family:'Fraunces',serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  @media (max-width:720px){.wrap{padding:0 20px;}}

  /* NAV */
  header.nav{
    position:sticky;top:0;left:0;right:0;z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding:2px 0;
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;}
  .logo-mark{display:flex;align-items:center;gap:12px;}
  .logo-img{display:block;object-fit:contain;}
  .logo-img-nav{height:56px;width:auto;}
  .logo-img-footer{height:110px;width:auto;}
  @media (max-width:720px){.logo-img-nav{height:80px;}}
  nav.links{display:flex;gap:14px;list-style:none;margin:0;padding:0;}
  nav.links li{position:relative;}
  nav.links > li > a{
    color:var(--navy-900);text-decoration:none;font-size:14px;
    letter-spacing:0.02em;font-weight:600;
    border-bottom:2px solid transparent;padding-bottom:4px;
    transition:border-color .2s, color .2s;
    display:inline-flex;align-items:center;gap:5px;
  }
  nav.links > li > a:hover{color:var(--teal-600);border-color:var(--teal-500);}
  nav.links .caret{width:8px;height:8px;border:1.5px solid currentColor;border-top:none;border-left:none;transform:rotate(45deg) translateY(-2px);}
  .dropdown{
    position:absolute;top:100%;left:0;margin-top:14px;
    background:#fff;border:1px solid var(--line);border-radius:10px;
    box-shadow:0 20px 40px -16px rgba(14,35,64,0.25);
    min-width:220px;padding:10px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:60;
  }
  nav.links li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown a{
    display:block;padding:8px 12px;border-radius:6px;font-size:13.5px;
    color:var(--ink-soft);text-decoration:none;font-weight:500;
  }
  .dropdown a:hover{background:var(--sky);color:var(--teal-700);}
  @media (max-width:880px){ nav.links{display:none;} }
  @media (max-width:880px){ .nav-cta{display:none;} }
  .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:0;flex-shrink:0;}
  .hamburger span{display:block;width:24px;height:2px;background:var(--navy-900);border-radius:2px;}
  @media (max-width:880px){ .hamburger{display:flex;} }
  .mobile-menu-backdrop{position:fixed;inset:0;background:rgba(14,35,64,0.45);z-index:99;opacity:0;visibility:hidden;transition:opacity .2s;}
  .mobile-menu-backdrop.open{opacity:1;visibility:visible;}
  .mobile-menu{position:fixed;top:0;right:-100%;width:86%;max-width:360px;height:100%;background:#fff;z-index:100;box-shadow:-10px 0 30px rgba(0,0,0,0.15);transition:right .25s ease;overflow-y:auto;padding:0 0 40px;}
  .mobile-menu.open{right:0;}
  .mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);}
  .mobile-menu-close{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--navy-900);padding:4px 8px;}
  .mobile-menu ul{list-style:none;margin:0;padding:6px 0;}
  .mobile-menu>ul>li{border-bottom:1px solid var(--line);}
  .mobile-menu>ul>li>a,.mobile-menu .msub-toggle{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:var(--navy-900);text-decoration:none;font-weight:600;font-size:15px;background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;}
  .mobile-menu .msub-toggle .mcaret{width:8px;height:8px;border:1.5px solid currentColor;border-top:none;border-left:none;transform:rotate(45deg);transition:transform .2s;flex-shrink:0;}
  .mobile-menu .msub-toggle.open .mcaret{transform:rotate(225deg);}
  .mobile-menu .msub{max-height:0;overflow:hidden;transition:max-height .25s ease;background:var(--sky);}
  .mobile-menu .msub.open{max-height:600px;}
  .mobile-menu .msub a{display:block;padding:11px 20px 11px 34px;color:var(--ink-soft);text-decoration:none;font-size:14px;}
  .mobile-menu .msub a:hover{color:var(--teal-700);}
  .mobile-menu-cta{display:block;margin:20px;padding:13px;text-align:center;background:var(--teal-500);color:#fff;border-radius:6px;font-weight:700;text-decoration:none;}
  .nav-cta{
    background:var(--teal-500);color:#fff;
    padding:11px 22px;font-size:13.5px;letter-spacing:0.02em;
    text-decoration:none;font-weight:700;border-radius:6px;
    transition:background .2s;
  }
  .nav-cta:hover{background:var(--teal-600);}
  /* FOOTER */
  footer{background:var(--ivory-dim);color:var(--ink-soft);padding:70px 0 28px;border-top:1px solid var(--line);}
  .footer-top{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;
    padding-bottom:48px;border-bottom:1px solid var(--line);
  }
  @media (max-width:800px){.footer-top{grid-template-columns:1fr 1fr;}}
  .footer-tag{margin-top:14px;font-size:14px;line-height:1.6;max-width:270px;color:var(--ink-soft);}
  .footer-col h4{
    color:var(--navy-900);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;
    font-weight:700;margin:0 0 16px;
  }
  .footer-col ul{list-style:none;margin:0;padding:0;}
  .footer-col li{margin-bottom:10px;font-size:14px;}
  .footer-col a{text-decoration:none;color:inherit;transition:color .2s;}
  .footer-col a:hover{color:var(--teal-600);}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:26px;font-size:12.5px;color:var(--ink-soft);opacity:0.7;
    flex-wrap:wrap;gap:12px;
  }

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

  :focus-visible{outline:2px solid var(--teal-500);outline-offset:3px;}

  /* HERO */
  .hero{
    position:relative;
    background:linear-gradient(180deg, var(--sky) 0%, #ffffff 78%);
    overflow:hidden;
    padding:88px 0 70px;
  }
  .hero-wave{
    position:absolute;left:0;right:0;bottom:0;height:140px;
    opacity:0.5;
  }
  .hero-inner{position:relative;z-index:2;text-align:center;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    color:var(--gold-700);font-size:13px;letter-spacing:0.12em;text-transform:uppercase;
    margin-bottom:22px;font-weight:700;
    background:#fdf0da;border-radius:20px;padding:7px 16px;
  }
  .eyebrow svg{width:13px;height:13px;}
  h1.hero-head{
    color:var(--navy-950);
    font-size:clamp(36px, 5.6vw, 62px);
    line-height:1.08;
    font-weight:400;
    margin:0 auto 20px;
    max-width:760px;
  }
  h1.hero-head em{
    font-style:italic;color:var(--teal-600);font-weight:400;
  }
  p.hero-sub{
    color:var(--ink-soft);
    font-size:17.5px;line-height:1.6;
    max-width:520px;margin:0 auto;
    font-weight:500;
  }

  /* SEARCH — boarding pass card */
  .pass-wrap{
    position:relative;z-index:3;
    margin:48px auto 0;
    max-width:1040px;
    text-align:left;
  }
  .pass{
    background:#fff;
    border-radius:10px;
    border:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr auto;
    align-items:stretch;
    box-shadow:0 24px 50px -20px rgba(14,35,64,0.22);
    position:relative;
  }
  .pass-field{
    padding:20px 22px;
    border-right:1px dashed var(--line);
  }
  .pass-field:last-of-type{border-right:none;}
  .pass-label{
    font-size:11px;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--teal-600);font-weight:700;margin-bottom:8px;
  }
  .pass-value{
    font-family:'IBM Plex Mono',monospace;
    font-size:16.5px;font-weight:500;color:var(--navy-950);
  }
  .pass-value.muted{color:var(--ink-soft);font-weight:400;}
  .pass-cta{
    background:var(--navy-950);color:#fff;border:none;
    padding:0 38px;
    font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
    letter-spacing:0.02em;
    cursor:pointer;border-radius:0 10px 10px 0;
    transition:background .2s;
  }
  .pass-cta:hover{background:var(--teal-600);}
  .perforation{
    display:flex;justify-content:space-between;padding:0 22px;
    position:relative;top:-1px;
  }
  .perforation span{
    width:8px;height:8px;border-radius:50%;background:var(--sky);
    border:1px solid var(--line);
    transform:translateY(-4px);
  }
  @media (max-width:900px){
    .pass{grid-template-columns:1fr 1fr;}
    .pass-field{border-bottom:1px dashed var(--line);}
    .pass-cta{grid-column:1 / -1;padding:18px;border-radius:0 0 10px 10px;}
  }

  /* SECTION HEADS */
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:48px;gap:24px;flex-wrap:wrap;
  }
  .section-eyebrow{
    color:var(--teal-600);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
    font-weight:700;margin-bottom:14px;
  }
  .section-title{
    font-size:clamp(26px,3.2vw,38px);font-weight:400;margin:0;color:var(--navy-950);
  }
  .section-desc{
    max-width:380px;color:var(--ink-soft);font-size:15px;line-height:1.6;
  }

  /* ROUTES */
  .routes{padding:100px 0;}
  .route-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  }
  @media (max-width:900px){.route-grid{grid-template-columns:1fr;}}
  .ticket{
    background:#fff;border-radius:10px;
    border:1px solid var(--line);
    box-shadow:0 10px 26px -18px rgba(14,35,64,0.2);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .ticket:hover{transform:translateY(-4px);box-shadow:0 20px 36px -18px rgba(14,35,64,0.3);border-color:var(--teal-300);}
  .ticket-top{padding:12px 18px 8px;}
  .ticket-codes{
    display:flex;align-items:center;gap:12px;
    font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:500;color:var(--navy-950);
    margin-bottom:2px;
  }
  .ticket-codes .arrow{color:var(--teal-500);display:inline-flex;align-items:center;}
  .ticket-route-name{color:var(--ink-soft);font-size:12.5px;font-weight:500;}
  .ticket-perf{
    display:flex;justify-content:space-between;
    position:relative;margin:0;
  }
  .ticket-perf::before{
    content:'';position:absolute;top:50%;left:0;right:0;height:1px;
    background-image:linear-gradient(to right, var(--line) 55%, transparent 0%);
    background-size:10px 1px;background-repeat:repeat-x;
  }
  .notch{width:14px;height:14px;border-radius:50%;background:var(--white);position:relative;z-index:1;}
  .notch.left{margin-left:-7px;}
  .notch.right{margin-right:-7px;}
  .ticket-bottom{
    padding:8px 18px 12px;display:flex;justify-content:space-between;align-items:flex-end;
  }
  .ticket-price-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:1px;font-weight:600;}
  .ticket-price{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500;color:var(--navy-950);}
  .ticket-duration{font-size:12px;color:var(--gold-700);font-weight:700;background:#fdf0da;padding:3px 9px;border-radius:12px;}

  /* WHY BAND */
  .why{background:var(--sky);padding:100px 0;}
  .why .section-title{color:var(--navy-950);}
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:52px;}
  @media (max-width:900px){.why-grid{grid-template-columns:1fr;gap:36px;}}
  .why-item{background:#fff;border-radius:12px;padding:30px 26px;box-shadow:0 10px 24px -18px rgba(14,35,64,0.18);}
  .why-icon{
    width:48px;height:48px;border-radius:10px;background:var(--sky);
    display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  }
  .why-item h3{font-family:'Fraunces',serif;font-weight:400;font-size:20px;margin:0 0 10px;color:var(--navy-950);}
  .why-item p{color:var(--ink-soft);font-size:14.5px;line-height:1.65;margin:0;}

  /* OPERATORS */
  .operators{padding:90px 0;text-align:center;}
  .operators .section-eyebrow{justify-content:center;display:flex;}
  .op-strip{
    display:flex;flex-wrap:wrap;justify-content:center;gap:14px 36px;
    margin-top:44px;
  }
  .op-name{
    font-family:'Fraunces',serif;font-style:italic;font-size:18px;
    color:var(--ink-soft);opacity:0.7;transition:opacity .2s, color .2s;
  }
  .op-name:hover{opacity:1;color:var(--teal-600);}
  .op-logo{
    height:44px;width:auto;object-fit:contain;
    filter:grayscale(1);opacity:0.55;
    transition:filter .25s ease, opacity .25s ease;
  }
  .op-logo:hover{filter:grayscale(0);opacity:1;}

  /* FOOTER */
  footer{background:var(--ivory-dim);color:var(--ink-soft);padding:70px 0 28px;border-top:1px solid var(--line);}
  .footer-top{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;
    padding-bottom:48px;border-bottom:1px solid var(--line);
  }
  @media (max-width:800px){.footer-top{grid-template-columns:1fr 1fr;}}
  .footer-tag{margin-top:14px;font-size:14px;line-height:1.6;max-width:270px;color:var(--ink-soft);}
  .footer-col h4{
    color:var(--navy-900);font-size:12px;text-transform:uppercase;letter-spacing:0.08em;
    font-weight:700;margin:0 0 16px;
  }
  .footer-col ul{list-style:none;margin:0;padding:0;}
  .footer-col li{margin-bottom:10px;font-size:14px;}
  .footer-col a{text-decoration:none;color:inherit;transition:color .2s;}
  .footer-col a:hover{color:var(--teal-600);}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:26px;font-size:12.5px;color:var(--ink-soft);opacity:0.7;
    flex-wrap:wrap;gap:12px;
  }

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}


  /* SEARCH RESULTS PAGE */
  .crumb{padding:22px 0 0;font-size:13px;color:var(--ink-soft);}
  .crumb a:hover{color:var(--teal-600);}
  .crumb span{margin:0 6px;color:var(--line);}

  .page-title{padding:14px 0 28px;}
  .page-title h1{font-family:'Fraunces',serif;font-weight:400;font-size:30px;color:var(--navy-950);margin:0 0 6px;}
  .page-title p{margin:0;color:var(--ink-soft);font-size:14.5px;}

  .layout{display:grid;grid-template-columns:300px 1fr;gap:28px;padding-bottom:100px;align-items:start;}
  @media (max-width:900px){.layout{grid-template-columns:1fr;}}

  /* SEARCH PANEL (compact sidebar) */
  .search-panel{
    background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:22px;position:sticky;top:96px;
  }
  .search-panel h3{font-family:'Fraunces',serif;font-weight:400;font-size:19px;color:var(--navy-950);margin:0 0 18px;}
  .trip-toggle{display:flex;gap:16px;margin-bottom:16px;}
  .trip-toggle label{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-soft);font-weight:600;cursor:pointer;}
  .trip-toggle input{accent-color:var(--teal-500);}
  .field-row{border-bottom:1px dashed var(--line);padding:12px 0;}
  .field-row label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--teal-600);font-weight:700;margin-bottom:6px;}
  .field-row .val{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--navy-950);font-weight:500;}
  .pax-row{display:flex;justify-content:space-between;padding:14px 0;}
  .pax-item{text-align:center;}
  .pax-item span{display:block;font-size:11px;color:var(--teal-600);font-weight:700;margin-bottom:4px;}
  .pax-count{font-family:'IBM Plex Mono',monospace;font-weight:600;}
  .find-btn{
    width:100%;margin-top:16px;background:var(--navy-950);color:#fff;border:none;
    padding:13px;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;transition:background .2s;
  }
  .find-btn:hover{background:var(--teal-600);}

  /* RESULTS */
  .leg-header{
    display:flex;justify-content:space-between;align-items:center;
    background:var(--navy-950);color:#fff;border-radius:10px;padding:16px 22px;margin-bottom:16px;
  }
  .leg-badge{
    display:inline-block;background:var(--gold-500);color:var(--navy-950);font-size:11px;font-weight:800;
    letter-spacing:0.06em;padding:3px 10px;border-radius:4px;margin-bottom:6px;
  }
  .leg-route{display:flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:500;}
  .leg-route .arrow{color:var(--teal-300);display:inline-flex;}
  .leg-date{font-size:13.5px;color:rgba(255,255,255,0.75);}

  .result-row{
    background:#fff;border:1px solid var(--line);border-radius:10px;
    display:grid;grid-template-columns:2fr 1.1fr 1.1fr 1fr auto;align-items:center;
    padding:18px 22px;margin-bottom:12px;gap:12px;
    transition:box-shadow .2s, border-color .2s;
  }
  .result-row:hover{box-shadow:0 12px 26px -16px rgba(14,35,64,0.25);border-color:var(--teal-300);}
  @media (max-width:900px){.result-row{grid-template-columns:1fr 1fr;}}
  .company{display:flex;flex-direction:column;gap:3px;}
  .company .name{font-weight:700;color:var(--navy-950);font-size:15px;}
  .company .boat{font-size:12.5px;color:var(--ink-soft);}
  .company .badges{display:flex;gap:6px;margin-top:4px;}
  .badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.03em;}
  .badge.best{background:#e6f6e8;color:#1a8a4a;}
  .badge.fast{background:var(--sky);color:var(--teal-700);}
  .badge.promo{background:#fdf0da;color:var(--gold-700);}
  .time-block{text-align:left;}
  .time-block .lbl{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:2px;}
  .time-block .val{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:var(--navy-950);}
  .time-block .sub{font-size:11.5px;color:var(--ink-soft);}
  .price-block{text-align:right;}
  .price-block .lbl{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;margin-bottom:2px;}
  .price-block .val{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;color:var(--navy-950);}
  .select-btn{
    background:transparent;border:2px solid var(--teal-500);color:var(--teal-600);
    padding:9px 20px;border-radius:7px;font-weight:700;font-size:13px;cursor:pointer;
    transition:background .2s, color .2s;white-space:nowrap;
  }
  .select-btn:hover, .select-btn.selected{background:var(--teal-500);color:#fff;}

  .continue-wrap{display:flex;justify-content:flex-end;margin-top:20px;}
  .continue-btn{
    background:var(--navy-950);color:#fff;border:none;padding:14px 34px;border-radius:8px;
    font-weight:700;font-size:14.5px;cursor:pointer;transition:background .2s;
  }
  .continue-btn:hover{background:var(--teal-600);}

  /* BOAT DETAIL PAGE */
  .crumb{padding:22px 0 0;font-size:13px;color:var(--ink-soft);}
  .crumb a{text-decoration:none;color:var(--ink-soft);}
  .crumb a:hover{color:var(--teal-600);}
  .crumb span{margin:0 6px;color:var(--line);}

  .op-hero{
    margin-top:26px;border-radius:14px;overflow:hidden;
    background:linear-gradient(120deg,var(--navy-950),var(--navy-800));
    color:#fff;padding:46px 44px;position:relative;
  }
  .op-hero-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.12);border-radius:20px;
    padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:0.04em;
    text-transform:uppercase;color:var(--teal-300);margin-bottom:18px;
  }
  .op-hero h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(28px,4vw,42px);margin:0 0 10px;max-width:640px;}
  .op-hero p{color:rgba(255,255,255,0.72);font-size:15.5px;max-width:520px;line-height:1.6;margin:0 0 22px;}
  .op-hero-meta{display:flex;gap:26px;flex-wrap:wrap;}
  .op-hero-meta div{font-family:'IBM Plex Mono',monospace;}
  .op-hero-meta .m-label{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--teal-300);margin-bottom:4px;}
  .op-hero-meta .m-value{font-size:16px;font-weight:500;}

  .op-body{display:grid;grid-template-columns:1fr 320px;gap:40px;margin:48px 0 90px;align-items:start;}
  @media (max-width:900px){.op-body{grid-template-columns:1fr;}}

  .op-section{margin-bottom:40px;}
  .op-section h2{font-family:'Fraunces',serif;font-weight:400;font-size:22px;color:var(--navy-950);margin:0 0 14px;}
  .op-section p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:0 0 14px;}

  .op-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px;}
  .op-gallery div{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,var(--sky),var(--teal-300));opacity:0.55;}
  @media (max-width:560px){.op-gallery{grid-template-columns:1fr 1fr;}}

  .op-feature-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;}
  @media (max-width:560px){.op-feature-list{grid-template-columns:1fr;}}
  .op-feature-list li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);}
  .op-feature-list .check{width:18px;height:18px;border-radius:50%;background:var(--sky);color:var(--teal-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700;}

  table.op-schedule{width:100%;border-collapse:collapse;font-size:14.5px;}
  table.op-schedule th{
    text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;
    color:var(--ink-soft);font-weight:700;padding:0 10px 10px;border-bottom:1px solid var(--line);
  }
  table.op-schedule td{padding:14px 10px;border-bottom:1px solid var(--line);color:var(--navy-950);}
  table.op-schedule td.mono{font-family:'IBM Plex Mono',monospace;}
  table.op-schedule tr:last-child td{border-bottom:none;}
  .sched-badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:10px;background:var(--sky);color:var(--teal-700);}

  .op-booking-box{
    position:sticky;top:100px;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:26px;box-shadow:0 20px 40px -22px rgba(14,35,64,0.22);
  }
  .op-booking-box .price-from{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);font-weight:700;}
  .op-booking-box .price-amt{font-family:'IBM Plex Mono',monospace;font-size:28px;color:var(--navy-950);font-weight:500;margin:6px 0 20px;}
  .op-booking-box .price-amt span{font-size:14px;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:500;}
  .op-field{margin-bottom:14px;}
  .op-field label{display:block;font-size:12px;font-weight:700;color:var(--navy-900);margin-bottom:6px;}
  .op-field select,.op-field input{
    width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:7px;
    font-family:'Manrope',sans-serif;font-size:14px;color:var(--navy-950);background:#fff;
  }
  .op-book-btn{
    width:100%;margin-top:6px;background:var(--teal-500);color:#fff;border:none;
    padding:14px;border-radius:7px;font-weight:700;font-size:15px;cursor:pointer;transition:background .2s;
  }
  .op-book-btn:hover{background:var(--teal-600);}
  .op-trust{margin-top:16px;font-size:12.5px;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start;line-height:1.5;}

  .related-heading{font-family:'Fraunces',serif;font-weight:400;font-size:24px;color:var(--navy-950);margin:0 0 24px;}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:100px;}
  @media (max-width:900px){.related-grid{grid-template-columns:1fr;}}

  /* TOUR DETAIL PAGE */
  .crumb{padding:22px 0 0;font-size:13px;color:var(--ink-soft);}
  .crumb a{text-decoration:none;color:var(--ink-soft);}
  .crumb a:hover{color:var(--teal-600);}
  .crumb span{margin:0 6px;color:var(--line);}

  .tour-hero{
    margin-top:26px;border-radius:14px;overflow:hidden;position:relative;
    background:linear-gradient(135deg,var(--teal-700),var(--navy-800));
    color:#fff;padding:50px 44px;
  }
  .tour-hero-badge{
    display:inline-flex;align-items:center;gap:8px;background:var(--gold-500);color:var(--navy-950);
    border-radius:20px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:0.02em;margin-bottom:18px;
  }
  .tour-hero h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(28px,4vw,42px);margin:0 0 12px;max-width:620px;}
  .tour-hero p{color:rgba(255,255,255,0.75);font-size:15.5px;max-width:520px;line-height:1.6;margin:0;}

  .tour-body{display:grid;grid-template-columns:1fr 320px;gap:40px;margin:48px 0 90px;align-items:start;}
  @media (max-width:900px){.tour-body{grid-template-columns:1fr;}}

  .tour-section{margin-bottom:42px;}
  .tour-section h2{font-family:'Fraunces',serif;font-weight:400;font-size:22px;color:var(--navy-950);margin:0 0 18px;}
  .tour-section p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:0 0 14px;}

  .itinerary{position:relative;padding-left:28px;}
  .itin-stop{position:relative;padding-bottom:26px;}
  .itin-stop:last-child{padding-bottom:0;}
  .itin-stop::before{
    content:'';position:absolute;left:-28px;top:4px;width:12px;height:12px;border-radius:50%;
    background:var(--teal-500);border:3px solid var(--sky);
  }
  .itin-stop::after{
    content:'';position:absolute;left:-23px;top:16px;bottom:-10px;width:2px;background:var(--line);
  }
  .itin-stop:last-child::after{display:none;}
  .itin-time{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--teal-600);font-weight:700;margin-bottom:4px;}
  .itin-title{font-weight:700;color:var(--navy-950);font-size:15.5px;margin-bottom:4px;}
  .itin-desc{color:var(--ink-soft);font-size:14px;line-height:1.6;}

  .inc-exc{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  @media (max-width:560px){.inc-exc{grid-template-columns:1fr;}}
  .inc-exc ul{list-style:none;margin:0;padding:0;}
  .inc-exc li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink);margin-bottom:10px;line-height:1.5;}
  .inc-exc .yes{color:var(--teal-600);font-weight:700;}
  .inc-exc .no{color:#c65b4f;font-weight:700;}

  .tour-booking-box{
    position:sticky;top:100px;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:26px;box-shadow:0 20px 40px -22px rgba(14,35,64,0.22);
  }
  .tour-booking-box .price-from{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);font-weight:700;}
  .tour-booking-box .price-amt{font-family:'IBM Plex Mono',monospace;font-size:28px;color:var(--navy-950);font-weight:500;margin:6px 0 20px;}
  .tour-booking-box .price-amt span{font-size:14px;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:500;}
  .tour-field{margin-bottom:14px;}
  .tour-field label{display:block;font-size:12px;font-weight:700;color:var(--navy-900);margin-bottom:6px;}
  .tour-field select,.tour-field input{
    width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:7px;
    font-family:'Manrope',sans-serif;font-size:14px;color:var(--navy-950);background:#fff;
  }
  .tour-book-btn{
    width:100%;margin-top:6px;background:var(--gold-500);color:var(--navy-950);border:none;
    padding:14px;border-radius:7px;font-weight:700;font-size:15px;cursor:pointer;transition:background .2s;
  }
  .tour-book-btn:hover{background:var(--gold-700);color:#fff;}

  /* BOOKING CONFIRMATION PAGE */
  .confirm-wrap{max-width:720px;margin:0 auto;padding:60px 0 100px;}
  .confirm-icon{
    width:64px;height:64px;border-radius:50%;background:var(--sky);color:var(--teal-600);
    display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 22px;
  }
  .confirm-head{text-align:center;margin-bottom:40px;}
  .confirm-head h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(26px,3.5vw,34px);color:var(--navy-950);margin:0 0 10px;}
  .confirm-head p{color:var(--ink-soft);font-size:15px;max-width:420px;margin:0 auto;line-height:1.6;}

  .e-ticket{
    background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:0 24px 50px -24px rgba(14,35,64,0.25);overflow:hidden;margin-bottom:28px;
  }
  .e-ticket-top{background:var(--navy-950);color:#fff;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
  .e-ticket-ref{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--teal-300);}
  .e-ticket-ref strong{color:#fff;font-size:15px;}
  .e-ticket-status{background:rgba(255,255,255,0.14);border-radius:14px;padding:5px 12px;font-size:12px;font-weight:700;letter-spacing:0.03em;}
  .e-ticket-body{padding:26px;}
  .e-route{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .e-route .pt{text-align:center;}
  .e-route .pt .code{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:500;color:var(--navy-950);}
  .e-route .pt .name{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
  .e-route .mid{flex:1;text-align:center;padding:0 18px;position:relative;}
  .e-route .mid .line{border-top:1px dashed var(--line);position:relative;top:-2px;}
  .e-route .mid .dur{font-size:12px;color:var(--gold-700);background:#fdf0da;padding:3px 10px;border-radius:10px;display:inline-block;margin-top:-10px;}

  .e-ticket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px dashed var(--line);padding-top:20px;}
  @media (max-width:560px){.e-ticket-grid{grid-template-columns:1fr 1fr;}}
  .e-field-label{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);font-weight:700;margin-bottom:5px;}
  .e-field-value{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--navy-950);font-weight:500;}

  .confirm-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
  .btn-primary,.btn-secondary{
    flex:1;min-width:180px;text-align:center;padding:14px;border-radius:8px;font-weight:700;font-size:14.5px;
    text-decoration:none;transition:background .2s,border-color .2s;
  }
  .btn-primary{background:var(--teal-500);color:#fff;border:1px solid var(--teal-500);}
  .btn-primary:hover{background:var(--teal-600);}
  .btn-secondary{background:#fff;color:var(--navy-900);border:1px solid var(--line);}
  .btn-secondary:hover{border-color:var(--teal-500);color:var(--teal-600);}

  .confirm-next{background:var(--sky);border-radius:12px;padding:26px;}
  .confirm-next h3{font-family:'Fraunces',serif;font-weight:400;font-size:18px;color:var(--navy-950);margin:0 0 14px;}
  .confirm-next ol{margin:0;padding-left:20px;color:var(--ink-soft);font-size:14.5px;line-height:1.9;}

  /* GENERIC CONTENT PAGE (About / FAQ / Contact / articles) */
  .crumb{padding:22px 0 0;font-size:13px;color:var(--ink-soft);}
  .crumb a{text-decoration:none;color:var(--ink-soft);}
  .crumb a:hover{color:var(--teal-600);}
  .crumb span{margin:0 6px;color:var(--line);}

  .content-hero{padding:36px 0 10px;max-width:720px;}
  .content-hero .section-eyebrow{color:var(--teal-600);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;margin-bottom:14px;}
  .content-hero h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(28px,4vw,40px);color:var(--navy-950);margin:0 0 14px;}
  .content-hero p{color:var(--ink-soft);font-size:16px;line-height:1.65;}

  /* .fbb-boat-article reusable article template */
  .fbb-boat-article{max-width:720px;margin:30px 0 24px;}
  .fbb-boat-article h2{font-family:'Fraunces',serif;font-weight:400;font-size:22px;color:var(--navy-950);margin:36px 0 14px;}
  .fbb-boat-article h2:first-child{margin-top:0;}
  .fbb-boat-article p{color:var(--ink-soft);font-size:15px;line-height:1.75;margin:0 0 16px;}
  .fbb-boat-article .stat-row{display:flex;gap:36px;flex-wrap:wrap;margin:26px 0;padding:24px;background:var(--sky);border-radius:12px;}
  .fbb-boat-article .stat-row div{font-family:'IBM Plex Mono',monospace;}
  .fbb-boat-article .stat-row .s-num{font-size:26px;color:var(--navy-950);font-weight:500;}
  .fbb-boat-article .stat-row .s-label{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;margin-top:2px;}
  .fbb-boat-article .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0;}
  @media (max-width:560px){.fbb-boat-article .team-grid{grid-template-columns:1fr 1fr;}}
  .fbb-boat-article .team-card{text-align:center;}
  .fbb-boat-article .team-avatar{width:100%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--teal-300));margin-bottom:10px;}
  .fbb-boat-article .team-name{font-weight:700;font-size:14px;color:var(--navy-950);}
  .fbb-boat-article .team-role{font-size:12.5px;color:var(--ink-soft);}

  /* FAQ accordion */
  .faq-section{max-width:720px;margin:0 0 90px;}
  .faq-section h2{font-family:'Fraunces',serif;font-weight:400;font-size:26px;color:var(--navy-950);margin:0 0 24px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    width:100%;background:none;border:none;text-align:left;cursor:pointer;
    padding:18px 0;font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:700;color:var(--navy-950);
  }
  .faq-q .fcaret{width:9px;height:9px;border:1.5px solid var(--teal-600);border-top:none;border-left:none;transform:rotate(45deg);transition:transform .2s;flex-shrink:0;}
  .faq-q.open .fcaret{transform:rotate(225deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .faq-a.open{max-height:400px;}
  .faq-a p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;margin:0 0 18px;}

  /* Contact section */
  .contact-section{max-width:960px;margin:0 0 100px;display:grid;grid-template-columns:1fr 1fr;gap:50px;}
  @media (max-width:800px){.contact-section{grid-template-columns:1fr;}}
  .contact-section h2{font-family:'Fraunces',serif;font-weight:400;font-size:26px;color:var(--navy-950);margin:0 0 18px;}
  .contact-info-list{list-style:none;margin:0;padding:0;}
  .contact-info-list li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
  .contact-info-list .c-icon{width:38px;height:38px;border-radius:8px;background:var(--sky);color:var(--teal-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .contact-info-list .c-label{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;}
  .contact-info-list .c-value{font-size:15px;color:var(--navy-950);font-weight:600;}
  .contact-info-list .c-value a{color:inherit;text-decoration:none;}
  .contact-info-list .c-value a:hover{color:var(--teal-600);}

  .contact-form .cf-field{margin-bottom:16px;}
  .contact-form label{display:block;font-size:12.5px;font-weight:700;color:var(--navy-900);margin-bottom:6px;}
  .contact-form input,.contact-form textarea{
    width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:7px;
    font-family:'Manrope',sans-serif;font-size:14.5px;color:var(--navy-950);background:#fff;resize:vertical;
  }
  .contact-form button{
    background:var(--teal-500);color:#fff;border:none;padding:13px 26px;border-radius:7px;
    font-weight:700;font-size:14.5px;cursor:pointer;transition:background .2s;
  }
  .contact-form button:hover{background:var(--teal-600);}

  /* =========================================================
     COM_FASTBOATBOOKING component + mod_fastboatbooking_search
     These views are built with Bootstrap 5 markup (card, btn,
     btn-check, form-select …). Bootstrap itself is loaded via
     Joomla's bundled media/vendor/bootstrap css in index.php —
     these rules only re-skin it to the navy/teal brand.
     ========================================================= */
  .fbb-search-wrap .fbb-search-form.card{border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.05);border:1px solid var(--line);}
  .fbb-search-wrap .card-title{color:var(--teal-600);font-family:'Fraunces',serif;font-weight:400;}
  .fbb-search-wrap .btn-check + .btn-outline-primary{border-color:var(--teal-500);color:var(--teal-600);}
  .fbb-search-wrap .btn-check:checked + .btn-outline-primary{background:var(--teal-500);border-color:var(--teal-500);color:#fff;}
  .fbb-search-wrap .form-select:focus,.fbb-search-wrap .form-control:focus{border-color:var(--teal-500);box-shadow:0 0 0 0.2rem rgba(34,169,196,0.25);}
  .fbb-search-wrap .btn-primary,.fbb-results-wrap .btn-primary{background-color:var(--teal-500);border-color:var(--teal-500);}
  .fbb-search-wrap .btn-primary:hover,.fbb-results-wrap .btn-primary:hover{background-color:var(--teal-600);border-color:var(--teal-600);}
  .fbb-results-wrap .fbb-result-card.card{border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
  .fbb-results-wrap .text-primary{color:var(--teal-600) !important;}
  .fbb-search-panel{background:#fff;border-radius:12px;border:1px solid var(--line);}

  /* =========================================================
     Real Joomla mod_menu output (position="menu")
     Joomla 5's default mod_menu renders <ul class="mod-menu">
     with li.parent items and a nested <ul class="mod-menu-sub">
     for children. These selectors re-skin that structure to
     match the dropdown design used in the mockups. Class names
     can vary slightly by Joomla point-release — if the menu
     doesn't pick up this styling after install, right-click →
     Inspect the rendered <nav> and adjust the selectors below
     (same approach used earlier for the search-page title fix).
     ========================================================= */
  #fbb-nav-wrap{display:flex;}
  #fbb-nav-wrap li{position:relative;list-style:none;}
  #fbb-nav-wrap > ul{
    display:flex;gap:16px;list-style:none;margin:0;padding:0;
    align-items:center;flex-wrap:nowrap;white-space:nowrap;
  }
  #fbb-nav-wrap > ul > li > a{
    color:var(--navy-900);text-decoration:none;font-size:14px;
    letter-spacing:0.02em;font-weight:600;
    border-bottom:2px solid transparent;padding-bottom:4px;
    transition:border-color .2s,color .2s;
    display:inline-flex;align-items:center;gap:5px;
  }
  #fbb-nav-wrap > ul > li > a:hover,#fbb-nav-wrap > ul > li.active > a,#fbb-nav-wrap > ul > li.current > a{
    color:var(--teal-600);border-color:var(--teal-500);
  }
  #fbb-nav-wrap > ul > li.parent > a::after{
    content:'';display:inline-block;width:7px;height:7px;margin-left:4px;
    border:1.5px solid currentColor;border-top:none;border-left:none;transform:rotate(45deg) translateY(-2px);
  }
  /* any nested <ul> (submenu) inside the menu, regardless of exact class Joomla gives it */
  #fbb-nav-wrap li ul{
    position:absolute;top:100%;left:0;margin-top:14px;
    background:#fff;border:1px solid var(--line);border-radius:10px;
    box-shadow:0 20px 40px -16px rgba(14,35,64,0.25);
    min-width:220px;padding:10px;list-style:none;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
    z-index:60;
    display:block;
  }
  #fbb-nav-wrap li:hover > ul{opacity:1;visibility:visible;transform:translateY(0);}
  #fbb-nav-wrap li ul a{
    display:block;padding:8px 12px;border-radius:6px;font-size:13.5px;
    color:var(--ink-soft);text-decoration:none;font-weight:500;border-bottom:none;
  }
  #fbb-nav-wrap li ul a:hover{background:var(--sky);color:var(--teal-700);}
  @media (max-width:880px){ #fbb-nav-wrap{display:none;} }

  /* Mobile off-canvas menu is BUILT FROM the real #fbb-nav-wrap
     markup by js/template.js (cloned at runtime), so menu items
     managed in Joomla → Menus stay in sync automatically. */
  .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:0;flex-shrink:0;}
  .hamburger span{display:block;width:24px;height:2px;background:var(--navy-900);border-radius:2px;}
  @media (max-width:880px){ .hamburger{display:flex;} .nav-cta{display:none;} }
  .mobile-menu-backdrop{position:fixed;inset:0;background:rgba(14,35,64,0.45);z-index:99;opacity:0;visibility:hidden;transition:opacity .2s;}
  .mobile-menu-backdrop.open{opacity:1;visibility:visible;}
  .mobile-menu{position:fixed;top:0;right:-100%;width:86%;max-width:360px;height:100%;background:#fff;z-index:100;box-shadow:-10px 0 30px rgba(0,0,0,0.15);transition:right .25s ease;overflow-y:auto;padding:0 0 40px;}
  .mobile-menu.open{right:0;}
  .mobile-menu-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);}
  .mobile-menu-close{background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--navy-900);padding:4px 8px;}
  .mobile-menu ul{list-style:none;margin:0;padding:6px 0;}
  .mobile-menu>ul>li{border-bottom:1px solid var(--line);}
  .mobile-menu>ul>li>a,.mobile-menu .msub-toggle{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:var(--navy-900);text-decoration:none;font-weight:600;font-size:15px;background:none;border:none;width:100%;text-align:left;cursor:pointer;font-family:inherit;}
  .mobile-menu .msub-toggle .mcaret{width:8px;height:8px;border:1.5px solid currentColor;border-top:none;border-left:none;transform:rotate(45deg);transition:transform .2s;flex-shrink:0;}
  .mobile-menu .msub-toggle.open .mcaret{transform:rotate(225deg);}
  .mobile-menu .msub{max-height:0;overflow:hidden;transition:max-height .25s ease;background:var(--sky);}
  .mobile-menu .msub.open{max-height:600px;}
  .mobile-menu .msub a{display:block;padding:11px 20px 11px 34px;color:var(--ink-soft);text-decoration:none;font-size:14px;}
  .mobile-menu .msub a:hover{color:var(--teal-700);}
  .mobile-menu-cta{display:block;margin:20px;padding:13px;text-align:center;background:var(--teal-500);color:#fff;border-radius:6px;font-weight:700;text-decoration:none;}

  /* Breadcrumbs module (position="breadcrumbs") */
  #fbb-breadcrumbs{padding:22px 0 0;font-size:13px;color:var(--ink-soft);list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:0;}
  #fbb-breadcrumbs li{display:flex;align-items:center;}
  #fbb-breadcrumbs li:not(:last-child)::after{content:'/';margin:0 8px;color:var(--line);}
  #fbb-breadcrumbs a{text-decoration:none;color:var(--ink-soft);}
  #fbb-breadcrumbs a:hover{color:var(--teal-600);}

  /* Generic Joomla pagination / alerts so core & 3rd-party
     component output stays on-brand without extra overrides */
  .pagination{list-style:none;display:flex;gap:6px;padding:0;margin:30px 0;flex-wrap:wrap;}
  .pagination .page-link{
    display:inline-block;padding:8px 13px;border:1px solid var(--line);border-radius:6px;
    color:var(--navy-900);text-decoration:none;font-size:13.5px;background:#fff;
  }
  .pagination .page-item.active .page-link{background:var(--teal-500);border-color:var(--teal-500);color:#fff;}
  .pagination .page-link:hover{border-color:var(--teal-500);color:var(--teal-600);}
  .alert{border-radius:8px;padding:14px 18px;font-size:14.5px;margin-bottom:20px;}
  .alert-success{background:#e6f6e8;color:#1a8a4a;}
  .alert-danger{background:#fbeae8;color:#c0392b;}
  .alert-info{background:var(--sky);color:var(--teal-700);}

  /* =========================================================
     Generic sidebar layout used by index.php whenever
     sidebar-left and/or sidebar-right modules are published
     (this is what carries the Fast Boat Search widget, the
     mobile booking banner, Pay Later, etc.)
     ========================================================= */
  .fbb-sidebar-layout{
    display:grid;grid-template-columns:300px 1fr;gap:28px;
    padding-top:26px;padding-bottom:90px;align-items:start;
  }
  .fbb-sidebar-layout:has(.fbb-sidebar-right):not(:has(.fbb-sidebar-left)){
    grid-template-columns:1fr 300px;
  }
  .fbb-sidebar-layout:has(.fbb-sidebar-left):has(.fbb-sidebar-right){
    grid-template-columns:280px 1fr 260px;
  }
  @media (max-width:900px){
    .fbb-sidebar-layout,
    .fbb-sidebar-layout:has(.fbb-sidebar-right):not(:has(.fbb-sidebar-left)),
    .fbb-sidebar-layout:has(.fbb-sidebar-left):has(.fbb-sidebar-right){
      grid-template-columns:1fr;
    }
  }
  .fbb-sidebar{min-width:0;}
  .fbb-content-col{min-width:0;}

  /* Third-party modules (e.g. Smile Pack logo gallery) dropped
     into position="bottom-a" — generic fallback so raw <img>
     output still looks like the mockup operator strip even
     without editing that module's own template. */
  .op-strip img{
    height:44px;width:auto;object-fit:contain;
    filter:grayscale(1);opacity:0.55;
    transition:filter .25s ease,opacity .25s ease;
  }
  .op-strip img:hover{filter:grayscale(0);opacity:1;}
  .op-strip .moduletable,.op-strip > div{display:contents;}

  /* Error page */
  .error-page main .btn-primary{
    background:var(--teal-500);color:#fff;padding:13px 28px;border-radius:8px;font-weight:700;
  }
  .error-page main .btn-primary:hover{background:var(--teal-600);}

/* ===== NAV FIXES ===== */
/* 1. Override Bootstrap's .nav (die de balk samenkneep) */
header.nav { display: block; }
header.nav .nav-inner { max-width: 1320px; }
/* 2. Groter logo */
.logo-img-nav { height: 120px; }
/* op mobiel kleiner (moet ná de 120px-regel staan om te winnen) */
@media (max-width: 720px) { .logo-img-nav { height: 80px; } }
/* 3. Kop-items (Destinations, Fast Boats) zelfde letter als de links */
#fbb-nav-wrap > ul > li > span {
  color: var(--navy-900);
  font-size: 14px;
  letter-spacing: 0.02em;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
#fbb-nav-wrap > ul > li.parent > span::after {
  content: '';
  display: inline-block;
  width: 7px; height: 7px; margin-left: 4px;
  border: 1.5px solid currentColor;
  border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-2px);
}
#fbb-nav-wrap > ul > li:hover > span {
  color: var(--teal-600);
  border-color: var(--teal-500);
}

/* ===== HERO: zie het geconsolideerde hero-blok onderaan dit bestand ===== */

/* ============================================================
   FAST BOAT SEARCH — teal recolor + hero boarding-pass (FINAL v3)
   ============================================================ */

/* --- Teal recolor (overrides the module's built-in green #2a9d8f) --- */
.fbb-module-wrap .fbb-search-title { color: #22a9c4; }
.fbb-module-wrap .fbb-radio-label input,
.fbb-module-wrap .fbb-select-radio input[type="radio"] { accent-color: #22a9c4; }
.fbb-module-wrap .fbb-date-label,
.fbb-module-wrap .fbb-date-input,
.fbb-module-wrap .fbb-pax-group label { color: #22a9c4; }
.fbb-module-wrap .fbb-pax-btn:hover { color: #22a9c4; }
.fbb-module-wrap .fbb-find-btn { background: linear-gradient(135deg, #22a9c4, #1a8ea6); }
.fbb-module-wrap .fbb-continue-btn,
.fbb-module-wrap .fbb-book-without-return-btn { background: linear-gradient(135deg, #22a9c4, #146d80); }
.fbb-module-wrap .fbb-sort-btn:hover { color: #22a9c4; }
.fbb-module-wrap .fbb-transfer-badge { color: #22a9c4; border-color: #22a9c4; }
.fbb-module-wrap .fbb-arrow { color: #22a9c4; }
.fbb-module-wrap .fbb-leg-header-outbound { border-left-color: #22a9c4; }
.fbb-module-wrap .fbb-leg-header-outbound .fbb-leg-badge { background: #22a9c4; }

/* --- Hero boarding-pass (homepage only) --- */
body.is-home .pass-wrap { max-width: none; }
body.is-home .fbb-hero-search { max-width: none; margin: 0; }
body.is-home .fbb-module-wrap { font-family: inherit; }
body.is-home .fbb-module-inner { display: block; }
body.is-home .fbb-search-panel { max-width: none; width: 100%; border: none; background: transparent; padding: 0; }
body.is-home .fbb-search-title { display: none; }
body.is-home .fbb-search-form {
  position: relative; padding-right: 172px; margin-top: 46px;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  background: #fff; border-radius: 16px;
  box-shadow: 0 30px 70px -35px rgba(14, 35, 64, .45);
}

/* trip-type: segmented-pill BOVEN de balk (compacter — balk = 1 rij) */
body.is-home .fbb-trip-type-row {
  position: absolute; top: -46px; left: 0; z-index: 6;
  display: inline-flex; gap: 0; margin: 0; padding: 4px;
  background: rgba(255,255,255,.94); border-radius: 999px; border-bottom: none;
  box-shadow: 0 10px 26px -12px rgba(8,22,40,.55);
}
body.is-home .fbb-radio-label {
  display: inline-flex; align-items: center; margin: 0; cursor: pointer;
  padding: 7px 18px; border-radius: 999px; white-space: nowrap;
  font-weight: 700; font-size: 13px; color: var(--navy-900);
  transition: background .2s, color .2s;
}
body.is-home .fbb-radio-label input { position: absolute; opacity: 0; width: 0; height: 0; }
body.is-home .fbb-radio-label:has(input:checked) { background: linear-gradient(135deg,#22a9c4,#1a8ea6); color: #fff; }

/* fields — top-aligned so all labels line up on one row */
body.is-home .fbb-field-row {
  flex: 1 1 0; min-width: 0; margin: 0; padding: 20px 22px 16px; gap: 2px;
  border-bottom: none; border-right: 1px solid #eef1f4;
  flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 90px;
}
body.is-home .fbb-field-row .fbb-field-icon { display: none; }
body.is-home .fbb-field-row .fbb-date-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 4px; color: #22a9c4; line-height: 1; }

/* FROM / TO labels above the selects */
body.is-home .fbb-field-row:has(#fbb-from-port)::before,
body.is-home .fbb-field-row:has(#fbb-to-port)::before {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #22a9c4; margin-bottom: 4px; line-height: 1;
}
body.is-home .fbb-field-row:has(#fbb-from-port)::before { content: "FROM"; }
body.is-home .fbb-field-row:has(#fbb-to-port)::before { content: "TO"; }

body.is-home .fbb-field-row .fbb-select,
body.is-home .fbb-field-row .fbb-date-input { font-size: 15px; font-weight: 600; color: var(--navy-900); line-height: 1.4; height: auto; }

/* calendar icon inside the date field (thin-line teal); hide old emoji */
body.is-home .fbb-field-row > span[onclick] { display: none; }
body.is-home .fbb-field-row .fbb-date-input {
  width: 100%; padding-right: 24px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a9c4' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") right center/17px no-repeat;
}

/* passengers — top-aligned to match the field labels */
body.is-home .fbb-passengers-row {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 20px 22px 16px; gap: 12px;
  border-bottom: none; border-right: none;
  align-items: flex-start; justify-content: center; min-height: 90px;
}
body.is-home .fbb-passengers-row .fbb-pax-group { gap: 4px; }
body.is-home .fbb-passengers-row .fbb-pax-group label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #22a9c4; line-height: 1; }

/* find button — full height, both right corners rounded, label "Find a boat" */
body.is-home .fbb-find-btn {
  position: absolute; top: 0; right: 0; bottom: 0; width: 172px;
  margin: 0; border-radius: 0 16px 16px 0; font-size: 0;
}
body.is-home .fbb-find-btn::after { content: "Find a boat"; font-size: 15px; font-weight: 700; letter-spacing: .02em; }

/* stack on narrower screens */
@media (max-width: 860px) {
  body.is-home .fbb-search-form { flex-direction: column; padding-right: 0; margin-top: 0; }
  body.is-home .fbb-field-row,
  body.is-home .fbb-passengers-row { border-right: none; border-bottom: 1px solid #eef1f4; flex-basis: auto; }
  body.is-home .fbb-find-btn { position: static; width: 100%; padding: 14px; }
  /* One way / Roundtrip op mobiel ÍN de kaart (bovenaan), niet los erboven */
  body.is-home .fbb-trip-type-row {
    position: static; order: -1; flex: 0 0 100%;
    display: flex; gap: 6px; margin: 0; padding: 12px 14px;
    background: #fff; border: none; border-bottom: 1px solid #eef1f4;
    border-radius: 0; box-shadow: none;
  }
  body.is-home .fbb-radio-label { flex: 1; justify-content: center; padding: 9px 12px; }
}

/* ===== FOOTER MENU MODULES (bottom-b) ===== */
.footer-top .bottom-b h3 { font-family: 'Manrope', sans-serif; color: var(--navy-900); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 0 0 16px; line-height: 1.5; max-width: 178px; }
.footer-top .bottom-b ul { list-style: none; margin: 0; padding: 0; }
.footer-top .bottom-b li { margin-bottom: 10px; font-size: 14px; line-height: 1.4; }
.footer-top .bottom-b a { text-decoration: none; color: var(--ink-soft); transition: color .2s; }
.footer-top .bottom-b a:hover { color: var(--teal-600); }
/* Op mobiel de footer-linkkolommen (Our Fast Boat Operators + de 2 route-lijsten)
   verbergen — scheelt veel scrollen. Logo + copyright blijven staan. */
@media (max-width: 600px) {
  .footer-top .bottom-b { display: none; }
}

/* ===== Fast Boat Search-pagina: zoekmodule + resultaten netjes gecentreerd ===== */
.fbb-search-page { max-width: 1040px; margin-left: auto; margin-right: auto; padding-top: 36px; }
.fbb-search-page .fbb-module-wrap { width: 100%; }
/* Dubbele paginatitel (SITE-BREED): Joomla toont zowel de menu-"Page
   Heading" (H1) als de artikel-titel (H2), meestal identiek. Verberg de
   tweede, opeenvolgende .page-header zodat de titel maar één keer
   verschijnt (H1 blijft staan, goed voor SEO). */
.page-header + .page-header { display: none; }
/* lege artikel-body geen ruimte laten innemen */
.com-content-article__body:empty { display: none; }

/* Losse "Schedule & Booking →"-knop (Custom HTML-module #128,
   class .fbb-mobile-booking-banner op sidebar-left) verscheen op elke
   pagina onder het zoekformulier en linkte naar "/". Verbergen —
   overbodig naast de "Find a boat"-knop in de nav. */
.fbb-mobile-booking-banner { display: none; }

/* ===== Banner-slider op de overige pagina's (top-a, "Slider website") =====
   Twee (of meer) afbeeldingen worden over elkaar gelegd en wisselen met een
   zachte crossfade (aangestuurd door js/template.js). */
.fbb-static-banner {
  position: relative;
  width: 100%;
  height: clamp(220px, 32vw, 420px);
  overflow: hidden;
  background: var(--sky);
}
.fbb-static-banner-inner { position: absolute; inset: 0; }
.fbb-static-banner-inner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity 1.2s ease;
}
/* de eerste afbeelding heeft in de HTML al class="active" → ook zonder
   JS is er meteen een foto zichtbaar */
.fbb-static-banner-inner img.active { opacity: 1; }
@media (max-width: 600px) {
  .fbb-static-banner { height: clamp(170px, 46vw, 260px); }
}

/* ============================================================
   ZOEKMODULE op de overige pagina's (sidebar + zoekpagina) —
   look afgestemd op de site. Home houdt zijn eigen hero-versie
   (body.is-home ...), dus alles hier is body:not(.is-home).
   ============================================================ */
body:not(.is-home) .fbb-module-wrap { font-family: inherit; color: var(--navy-900); }

/* kaart */
body:not(.is-home) .fbb-search-panel {
  max-width: 300px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 20px 48px -32px rgba(14, 35, 64, .4);
}

/* titel in de sitefont */
body:not(.is-home) .fbb-search-title {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: 18px; color: var(--navy-950); margin: 0 0 12px;
}

/* trip-type */
body:not(.is-home) .fbb-trip-type-row { display: flex; gap: 16px; margin: 0 0 12px; }
body:not(.is-home) .fbb-radio-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--navy-900); }
body:not(.is-home) .fbb-radio-label input { accent-color: var(--teal-500); }

/* velden als nette invoervakken; emoji-icoon weg */
body:not(.is-home) .fbb-field-row {
  position: relative; display: block;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 5px 12px 7px; margin: 0 0 9px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
body:not(.is-home) .fbb-field-row:focus-within { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(34,169,196,.12); }
body:not(.is-home) .fbb-field-row .fbb-field-icon,
body:not(.is-home) .fbb-field-row > span[onclick] { display: none; }

/* mini-labels (From/To via ::before, Depart/Return via bestaande label, pax-labels) */
body:not(.is-home) .fbb-field-row::before,
body:not(.is-home) .fbb-date-label,
body:not(.is-home) .fbb-passengers-row .fbb-pax-group label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--teal-600); line-height: 1;
}
body:not(.is-home) .fbb-field-row::before { display: block; margin-bottom: 3px; }
body:not(.is-home) .fbb-field-row:has(#fbb-from-port)::before { content: "From"; }
body:not(.is-home) .fbb-field-row:has(#fbb-to-port)::before { content: "To"; }
body:not(.is-home) .fbb-date-label { display: block; margin-bottom: 3px; }

/* de select / datum */
body:not(.is-home) .fbb-field-row .fbb-select,
body:not(.is-home) .fbb-field-row .fbb-date-input {
  width: 100%; border: none; background: transparent; padding: 0;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--navy-900); height: auto; outline: none; cursor: pointer;
}
body:not(.is-home) .fbb-field-row .fbb-date-input {
  padding-right: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a9c4' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") right center/15px no-repeat;
}

/* passagiers-steppers */
body:not(.is-home) .fbb-passengers-row { display: flex; gap: 8px; margin-top: 2px; }
body:not(.is-home) .fbb-passengers-row .fbb-pax-group { flex: 1 1 0; min-width: 0; }
body:not(.is-home) .fbb-passengers-row .fbb-pax-group label { display: block; margin-bottom: 5px; }
body:not(.is-home) .fbb-pax-counter { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
body:not(.is-home) .fbb-pax-counter input {
  width: 100%; min-width: 0; text-align: center; border: none; outline: none;
  font-family: inherit; font-weight: 700; font-size: 13px; color: var(--navy-900);
  -moz-appearance: textfield; appearance: textfield;
}
body:not(.is-home) .fbb-pax-counter input::-webkit-outer-spin-button,
body:not(.is-home) .fbb-pax-counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body:not(.is-home) .fbb-pax-btn {
  border: none; background: #fff; color: var(--teal-600);
  font-weight: 700; font-size: 15px; width: 26px; height: 30px; line-height: 1; cursor: pointer;
}
body:not(.is-home) .fbb-pax-btn:hover { background: var(--sky); }

/* knop (zelfde label als in de nav) */
body:not(.is-home) .fbb-find-btn {
  width: 100%; border: none; border-radius: 10px; padding: 11px; margin-top: 14px;
  color: #fff; font-family: inherit; font-size: 0; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #22a9c4, #1a8ea6);
}
body:not(.is-home) .fbb-find-btn::after { content: "Find a boat"; font-size: 14px; letter-spacing: .02em; }

/* ============================================================
   CONTENT-PAGINA'S (About, enz.) — meer lucht naast de zoekmodule
   + koppen in de huisstijl (Fraunces + kleur i.p.v. kleurloos zwart)
   ============================================================ */
.fbb-sidebar-layout { column-gap: 56px; }

.com-content-article h1 {
  font-family: 'Fraunces', serif; font-weight: 400; color: var(--navy-950);
}
.com-content-article h2 {
  font-family: 'Fraunces', serif; font-weight: 400;
  color: var(--teal-600); font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2; margin: 36px 0 12px;
}
.com-content-article h3 {
  font-family: 'Fraunces', serif; font-weight: 500;
  color: var(--navy-950); font-size: 19px;
  line-height: 1.3; margin: 24px 0 6px;
}
/* op smalle schermen staat de zoekmodule bóven de tekst → normale ruimte */
@media (max-width: 900px) {
  .fbb-sidebar-layout { column-gap: 0; }
}

/* ============================================================
   FONT-CONSISTENTIE: het contactformulier (ConvertForms, cf-*)
   bracht Arial mee. Alles naar de sitefont Manrope.
   ============================================================ */
[class^="cf-"], [class*=" cf-"],
.cf-content-wrap, .cf-content-wrap * {
  font-family: 'Manrope', sans-serif !important;
}

/* ============================================================
   FASTBOAT-PRIJSBLOKKEN (One Way / Round-Trip) — naast elkaar in
   een net kader, op mobiel onder elkaar. De bedragen komen uit de
   back-end; dit is puur de opmaak van .fbb-price-boxes/.fbb-price-box.
   ============================================================ */
/* nette dunne divider onder het foto/route-blok, met weinig ruimte eronder */
.fbb-boat-divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0 0; }

/* "Why book" lijst — teal vinkjes i.p.v. (niet-ladende) Font Awesome-iconen */
.fbb-why-book { margin-top: 6px; }
.fbb-why-book ul { list-style: none; margin: 12px 0 0; padding: 0; }
.fbb-why-book li {
  position: relative; padding-left: 30px; margin: 0 0 10px;
  color: var(--navy-900); font-size: 15px; line-height: 1.5;
}
.fbb-why-book li:last-child { margin-bottom: 0; }
.fbb-why-book li i { display: none; }
.fbb-why-book li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a9c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Pagina's zonder sidebar (tours): ruimte onder de banner + leesbare,
   LINKS-uitgelijnde kolom (op één lijn met de titel, niet gecentreerd) */
.fbb-page { padding-top: 34px; padding-bottom: 70px; }
.fbb-page .com-content-article__body { max-width: 860px; }
.fbb-tour-article { margin: 0; }

/* ===== TOUR-PAGINA'S — elementen in de huisstijl ===== */
/* Verberg de dubbele bovenkop (menu-paginakop/artikel-titel) op tour-DETAIL-
   pagina's: die hebben al een eigen titel-met-badge (.fbb-tour-title).
   Overzichtspagina's (zonder .fbb-tour-title) houden hun kop gewoon. */
.fbb-page .com-content-article:has(.fbb-tour-title) > .page-header { display: none; }
.fbb-tour-rating { color: #f5a623; font-size: 15px; letter-spacing: 1px; margin: 0 0 8px; }
.fbb-tour-rating span { color: var(--ink-soft); font-weight: 600; letter-spacing: 0; margin-left: 4px; }

.fbb-tour-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 22px; margin: 0 0 14px; }
.fbb-tour-header .fbb-tour-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.fbb-tour-header .fbb-price-badge { flex: 0 0 auto; }

/* "Best price"-badge */
.fbb-price-badge {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  background: linear-gradient(135deg, #22a9c4, #1a8ea6); color: #fff;
  border-radius: 14px; padding: 9px 18px; white-space: nowrap;
  box-shadow: 0 16px 34px -16px rgba(34,169,196,.55);
}
.fbb-badge-label { flex: 0 0 100%; text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; opacity: .9; margin-bottom: 2px; }
.fbb-badge-old { text-decoration: line-through; opacity: .72; font-weight: 600; font-size: 15px; }
.fbb-badge-new { font-weight: 800; font-size: 21px; letter-spacing: .2px; }

.fbb-tour-intro { font-size: 17px; line-height: 1.65; color: var(--navy-900); margin: 0 0 16px; }
.fbb-highlight-box { background: var(--sky); border-left: 4px solid var(--teal-500); border-radius: 10px; padding: 14px 18px; margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--navy-900); }
.fbb-highlight-box strong { color: #146d80; }
.fbb-tour-description { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 24px; }
.fbb-old-price { text-decoration: line-through; color: #9aa7b4; font-weight: 600; }

/* Includes-lijst met teal vinkjes */
.fbb-includes-list { list-style: none; margin: 12px 0 0; padding: 0; }
.fbb-includes-list li { position: relative; padding-left: 28px; margin-bottom: 9px; color: var(--navy-900); font-size: 15px; }
.fbb-includes-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a9c4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Itinerary-tijdlijn */
.fbb-itinerary-item { position: relative; padding: 0 0 6px 22px; margin: 0 0 16px; border-left: 2px solid var(--line); }
.fbb-itinerary-item::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 3px #fff; }
.fbb-itinerary-item strong { color: var(--navy-950); font-size: 15.5px; }
.fbb-itinerary-item p { color: var(--ink-soft); font-size: 14.5px; margin: 4px 0 0; }
.fbb-itinerary-stops { list-style: none; margin: 8px 0 0; padding: 0; }
.fbb-itinerary-stops li { position: relative; padding-left: 22px; margin-bottom: 6px; color: var(--navy-900); font-size: 14.5px; }
.fbb-itinerary-stops li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); }
.fbb-itinerary-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }

@media (max-width: 600px) {
  .fbb-tour-header { flex-direction: column; align-items: flex-start; }
  .fbb-tour-header .fbb-price-badge { align-self: stretch; }
}

.fbb-price-boxes { display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0; }
.fbb-price-box {
  flex: 1 1 240px; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; padding: 20px 24px;
  box-shadow: 0 12px 32px -22px rgba(14, 35, 64, .4);
}
.fbb-price-box h3 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fbb-price-box p { margin: 0 0 8px; color: var(--ink-soft); font-size: 15px; }
.fbb-price-box p:last-child { margin-bottom: 0; }
.fbb-price-box p strong { color: var(--navy-950); }
@media (max-width: 600px) {
  .fbb-price-boxes { flex-direction: column; }
  .fbb-price-box { flex: 0 0 auto; width: 100%; }
}

/* ===== OPERATORS heading left-aligned (match Why book here) ===== */
.operators { text-align: left; }
.operators .section-eyebrow { justify-content: flex-start; }

/* ===== FIX: Tassos operators-slider normaal laten renderen ===== */
.operators .op-strip { display: block; }
.operators .op-strip > div,
.operators .op-strip .moduletable { display: block; }

/* ===== Operators = doorlopende logo-marquee (gelijke hoogte + tussenruimte) ===== */
.operators .op-strip .swiper { overflow: hidden !important; }
.operators .op-strip .swiper-wrapper { display: flex !important; width: max-content !important; align-items: center !important; gap: 64px !important; animation: fbbMarquee 45s linear infinite; }
.operators .op-strip .swiper:hover .swiper-wrapper { animation-play-state: paused; }
.operators .op-strip .swiper-slide { width: auto !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
.operators .op-strip .swiper-slide a { display: flex !important; align-items: center; justify-content: center; }
.operators .op-strip img { height: 56px !important; width: auto !important; max-width: none !important; object-fit: contain !important; filter: grayscale(1); opacity: .6; transition: filter .25s, opacity .25s; }
.operators .op-strip img:hover { filter: grayscale(0); opacity: 1; }
@keyframes fbbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   HERO — fotobanner (boot altijd zichtbaar) + losse zoekbalk
   Robuust op elk scherm: de boot staat in de fotobanner, de
   zoekmodule staat eronder en overlapt alleen de onderste
   water-strook van de foto. De boot verdwijnt dus nooit meer
   achter de balk, en op mobiel blijft de boot in beeld.
   ============================================================ */

/* Fotobanner: alleen kop + subtekst erin, hoog geplaatst boven de
   horizon (donkerste deel) zodat de witte tekst niet wegvalt op de
   boot; de boot zelf blijft volledig zichtbaar in het midden. */
.hero {
  position: relative;
  min-height: clamp(430px, 47vw, 640px);
  display: flex;
  align-items: flex-start;
  padding: 30px 0 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6,20,38,0.60) 0%, rgba(6,20,38,0.34) 24%, rgba(6,20,38,0.08) 40%, rgba(6,20,38,0) 52%),
    url('/images/headers/fastboat-hero.jpg') center 70% / cover no-repeat;
}
.hero-inner { width: 100%; }
h1.hero-head { color: #ffffff; margin-bottom: 16px; }
h1.hero-head em { color: #9fe6f4; }
p.hero-sub { color: rgba(255,255,255,0.97); }
h1.hero-head, p.hero-sub { text-shadow: 0 2px 14px rgba(8,22,40,0.65), 0 1px 3px rgba(8,22,40,0.55); }

/* Zoekbalk-band: los ónder de foto, opgetild zodat de kaart net
   over de onderrand (water) van de foto valt — nooit over de boot */
.hero-search-band {
  position: relative;
  z-index: 4;
  margin-top: -64px;
  padding: 0 0 8px;
}

/* Regio-regel onder de zoekbalk (verplaatst vanaf de oude eyebrow) */
.hero-regions {
  margin: 18px auto 0;
  text-align: center;
  color: var(--teal-600);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-search-band .pass-wrap,
body.is-home .pass-wrap {
  position: relative;
  z-index: 5;
  margin: 0 auto;
  max-width: none; /* volle .wrap-breedte = even breed als de kaartjes eronder */
  text-align: left;
}

/* Mobiel: iets meer hoogte + donkerder waas zodat de witte tekst
   leesbaar blijft, en de zoekbalk stapelt netjes onder de foto */
@media (max-width: 600px) {
  .hero {
    min-height: 480px;
    padding-top: 24px;
    /* aparte staande foto zodat de HELE boot in beeld blijft op smalle schermen */
    background:
      linear-gradient(180deg, rgba(6,20,38,0.58) 0%, rgba(6,20,38,0.36) 30%, rgba(6,20,38,0.12) 55%, rgba(6,20,38,0) 78%),
      url('/images/headers/fastboat-hero-mobile-v2.jpg') center 50% / cover no-repeat;
  }
  .hero-search-band { margin-top: -40px; }
}

/* ============================================================
   MOBIEL — zoekmodule op de overige pagina's volle kolombreedte.
   Staat bewust HELEMAAL onderaan zodat hij de eerdere
   basisregel (.fbb-search-panel{max-width:300px}) overrulet.
   ============================================================ */
@media (max-width: 900px) {
  body:not(.is-home) .fbb-search-panel { max-width: none; }
}

/* ============================================================
   "Book your trip here" — EngageBox zwevende knop (box eb-1).
   Navy met teal-rand, 14px ronding, geen schaduw, teal hover.
   De knop is de INNER div (.eb-floating-button > [data-ebox]);
   de wrapper .eb-floating-button is alleen de positionering.
   ============================================================ */
.eb-floating-button [data-ebox] {
  background: var(--navy-950, #0b1f3a) !important;
  color: #fff !important;
  border: 2px solid var(--teal-500, #22a9c4) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  padding: 12px 22px !important;
  transition: background .2s, border-color .2s !important;
}
.eb-floating-button [data-ebox]:hover {
  background: var(--teal-500, #22a9c4) !important;
  border-color: var(--teal-500, #22a9c4) !important;
  color: #fff !important;
}

/* ============================================================
   com_fastboatbooking — boekingsflow bijstellingen.
   1) Meer ruimte ONDER de "continue"-knop op de resultatenpagina.
   2) "Confirm Booking"-knop (.fbb-submit-btn) van groen/cyaan
      verloop naar de huisstijl-teal.
   ============================================================ */
.fbb-continue-wrap { margin-bottom: 48px !important; }

.fbb-submit-btn {
  background: linear-gradient(135deg, #22a9c4, #1a8ea6) !important;
}
.fbb-submit-btn:hover {
  background: linear-gradient(135deg, #1a8ea6, #146d80) !important;
}

/* ============================================================
   Zoekbalk (homepage hero) — volle breedte (= kaartjes eronder) +
   betere veldverdeling. FROM/TO breed genoeg voor lange havennamen
   (bv. "Nusa Lembongan"), DEPART/RETURN ruim voor "Select date...".
   FROM/TO-select en datumveld: ZELFDE lettergrootte (13.5px) én
   zelfde verticale uitlijning (datumveld is een Bootstrap
   .form-control, standaard 31px hoog → teruggebracht naar 20px zodat
   de tekst gelijk staat met de select). Desktop-only (mobiel <=860px
   blok blijft ongewijzigd). :has() → werkt in one-way én roundtrip.
   ============================================================ */
@media (min-width: 861px) {
  body.is-home .fbb-field-row:has(#fbb-from-port),
  body.is-home .fbb-field-row:has(#fbb-to-port) { flex: 1 1 180px; max-width: 215px; }
  body.is-home .fbb-field-row:has(.fbb-date-input) { flex: 1 1 160px; }
  body.is-home .fbb-field-row .fbb-select,
  body.is-home .fbb-field-row .fbb-date-input { font-size: 13.5px; line-height: 20px; }
  body.is-home .fbb-field-row .fbb-date-input { padding: 0 18px 0 0; height: 20px; min-height: 0; }
  body.is-home .fbb-passengers-row { flex: 0 0 auto; gap: 8px; padding-left: 14px; padding-right: 14px; }
  body.is-home .fbb-passengers-row .fbb-pax-group { gap: 2px; }
  body.is-home .fbb-passengers-row .fbb-pax-counter { gap: 2px; padding: 2px 4px; }
}

/* ============================================================
   com_fastboatbooking — groene tinten → huisstijl (sky + teal + navy).
   OUTBOUND/RETURN-banner (resultaten), samenvatting-/betaalblokken,
   "Total" en de kop "Complete Your Booking" waren mintgroen
   (#e0f7f2 / #f0faf8 / tekst+rand #2a9d8f). Nu: hemelsblauw #e7f5f8
   + teal-rand #22a9c4 + navy koppen. (!important want component-defaults.)
   ============================================================ */
.fbb-leg-header,
.fbb-leg-header-outbound,
.fbb-leg-header-return { background: linear-gradient(135deg, #e7f5f8, #d5eef4) !important; }

.fbb-booking-page h1,
.fbb-booking-page h2,
.fbb-booking-page h3 { color: #0b1f3a !important; }

.fbb-booking-summary,
.fbb-payment-info { background: #e7f5f8 !important; border-color: #22a9c4 !important; }

.fbb-price-total,
.fbb-price-total * { color: #146d80 !important; border-color: #22a9c4 !important; }

/* ============================================================
   MOBIEL — zoekmodule bijstellingen (2 punten).
   1) Homepage-zoekbalk was op mobiel buiten proportie groot: de velden
      hielden de desktop-padding (20/22/16) + min-height:90px terwijl ze
      onder elkaar staan. Nu compact (in verhouding, zoals About-us).
   2) Op de booking-pagina (body.com-fastboatbooking) verschijnt de
      zoek-sidebar bovenaan op mobiel; niet nodig naast "Complete Your
      Booking" → verborgen. (Layout wordt op <900px toch 1 kolom, dus
      component vult netjes de volle breedte, geen gat.)
   ============================================================ */
@media (max-width: 860px) {
  body.is-home .fbb-field-row { min-height: 0; padding: 9px 16px 10px; }
  body.is-home .fbb-passengers-row { min-height: 0; padding: 10px 16px 12px; gap: 8px; }
  body.is-home .fbb-passengers-row .fbb-pax-group { gap: 2px; }
  body.is-home .fbb-passengers-row .fbb-pax-counter { gap: 2px; padding: 2px 4px; }
}
@media (max-width: 900px) {
  body.com-fastboatbooking .fbb-sidebar-left { display: none; }
}

/* ============================================================
   Content-/destination-foto's responsive maken.
   Zonder deze regel schalen artikel-afbeeldingen niet mee → op mobiel
   te groot / niet gecentreerd. Nu: max-width:100% (vult de kolom op
   mobiel = schermbreed met gelijke paginamarges), height:auto
   (proportioneel), gecentreerd op bredere schermen. Wordt NIET
   opgerekt boven de eigen breedte, dus blijft scherp. (Operator-strip
   logo's vallen hier buiten en houden hun eigen regels.)
   ============================================================ */
.com-content-article img,
.fbb-boat-article img,
.fbb-tour-article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* ============================================================
   Zoekresultaten — cosmetische verbeteringen (13 aug)
   Plak dit blok ONDERAAN /templates/fastboatbooking/css/template.css
   (de .fbb-module-wrap-selectors overschrijven de inline component-stijl
   dankzij hogere specificiteit — !important is niet nodig).
   ============================================================ */

/* Compactere kolommen: bredere maatschappij-kolom (namen op 1 regel),
   smallere prijskolom → minder witruimte tussen aankomst en prijs. */
.fbb-module-wrap .fbb-results-head,
.fbb-module-wrap .fbb-result-row {
    grid-template-columns: 2.4fr 1.1fr 1.2fr 1.1fr 44px;
}

/* Steviger "Transport options in booking form"-kadertje +
   nette afbreking ("in" naar de tweede regel). */
.fbb-module-wrap .fbb-transfer-badge {
    display: block;
    width: 106px;
    box-sizing: border-box;
    margin-top: 5px;
    padding: 2px 6px;
    background: rgba(34, 169, 196, 0.10);
    border: 1px solid #22a9c4;
    border-radius: 4px;
    color: #17879c;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
}
/* ============================================================
   BINNENPAGINA'S — rustige basislaag (typografie & ritme)
   Geldt voor ALLE artikelpagina's (com_content): bestemmingen,
   boten, routes, tours, FAQ, info — de homepage blijft ongemoeid.
   Plak dit blok ONDERAAN /templates/fastboatbooking/css/template.css
   (elke upload bust automatisch de cache via de filemtime-versie).
   ============================================================ */

/* Subtitel onder de titel (bv. "From IDR 350.000") — rustig accent i.p.v. grote grijze kop */
.com-content-article .page-header h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    color: #12718a;
    margin-top: 2px;
    margin-bottom: 1.5rem;
}

/* Body — prettige leesregel en tussenruimte */
.com-content-article__body {
    color: #3c4657;
    line-height: 1.75;
}
.com-content-article__body p {
    margin-bottom: 1.05rem;
}

/* Links in de tekst (o.a. de maatschappijen) duidelijk klikbaar in teal */
.com-content-article__body a {
    color: #0f7f99;
    font-weight: 600;
    text-decoration: none;
}
.com-content-article__body a:hover {
    color: #0b6076;
    text-decoration: underline;
}

/* Sectiekoppen (h3) met rustig ritme + fijne scheidingslijn erboven */
.com-content-article__body h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #0e2340;
    margin: 2.4rem 0 1rem;
    padding-top: 1.9rem;
    border-top: 1px solid #e5eaf0;
}

/* Afbeeldingen in de tekst: zachte hoeken + subtiele schaduw */
.com-content-article__body img {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(14, 35, 64, .10);
}
/* ===== BESTEMMINGSPAGINA GILI AIR (itemid 114) — rijke opmaak (#72) ===== */
body.itemid-114 .wrap.fbb-sidebar-layout{display:block;position:relative;padding-bottom:0;}
body.itemid-114 .fbb-content-col{width:100%;padding-top:30px;padding-bottom:0;}
body.itemid-114 .fbb-sidebar-left{position:absolute;top:-250px;right:0;left:auto;width:350px;max-width:350px;margin:0;z-index:6;}
body.itemid-114 .fbb-search-panel{box-shadow:0 22px 55px rgba(14,35,64,.28);border-radius:16px;}
body.itemid-114 .com-content-article .page-header{display:none;}
body.itemid-114 .com-content-article,body.itemid-114 .com-content-article__body{max-width:none;margin-bottom:0;padding-bottom:0;}
.fbb-dest{font-family:'Manrope',sans-serif;color:#3c4657;max-width:1120px;margin:0 auto;padding:0 24px;}
.fbb-dest .dest-eyebrow,.fbb-dest .sec-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#12718a;margin-bottom:10px;}
.fbb-dest .dest-title{font-family:'Fraunces',serif;font-weight:600;color:#0e2340;font-size:3rem;line-height:1.1;margin:0 0 12px;letter-spacing:-.01em;}
.fbb-dest .dest-lead{font-size:1.12rem;color:#5a6472;max-width:640px;}
.fbb-dest h2{font-family:'Fraunces',serif;font-weight:600;color:#0e2340;font-size:2rem;line-height:1.15;margin:0 0 16px;}
.fbb-dest p{line-height:1.75;margin:0 0 14px;}
.fbb-dest .dest-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 8px;}
.fbb-dest .dstat{background:#fff;border:1px solid #e5eaf0;border-radius:16px;padding:18px 20px;box-shadow:0 4px 14px rgba(14,35,64,.06);}
.fbb-dest .dstat .n{font-family:'Fraunces',serif;font-weight:600;font-size:1.55rem;color:#0e2340;white-space:nowrap;}
.fbb-dest .dstat .l{font-size:.82rem;color:#5a6472;margin-top:4px;}
.fbb-dest .dest-sec{padding:44px 0;}
.fbb-dest .dest-split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;margin-top:8px;}
.fbb-dest .dest-copy p:last-child{margin-bottom:0;}
.fbb-dest .dest-media img{width:100%;display:block;border-radius:16px;box-shadow:0 14px 34px rgba(14,35,64,.16);aspect-ratio:4/3;object-fit:cover;}
.fbb-dest .band{background:linear-gradient(180deg,#eaf5f9,#f3f9fb);width:100vw;margin-left:calc(-50vw + 50%);padding:52px 0;}
.fbb-dest .band>.bandin{max-width:1120px;margin:0 auto;padding:0 24px;}
.fbb-dest .dest-sec.band:last-of-type{padding-bottom:48px;}
.fbb-dest .dcards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.fbb-dest .dcard h3{font-family:'Fraunces',serif;font-weight:600;color:#0e2340;font-size:1.2rem;margin:0 0 6px;display:flex;align-items:center;gap:10px;}
.fbb-dest .dcard p{color:#5a6472;font-size:.95rem;margin:0;}
.fbb-dest .dcard .dic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:#e3eff4;position:relative;}
.fbb-dest .dcard .dic::before{content:'';position:absolute;inset:0;margin:auto;width:19px;height:19px;background-color:#0f7f99;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
.fbb-dest .eat2{display:grid;grid-template-columns:1fr 1fr;gap:20px 34px;}
.fbb-dest .eitem{display:flex;gap:13px;align-items:flex-start;}
.fbb-dest .edot{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#fff6e8;position:relative;}
.fbb-dest .edot::before{content:'';position:absolute;inset:0;margin:auto;width:19px;height:19px;background-color:#b9822a;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
.fbb-dest .eitem b{font-family:'Fraunces',serif;color:#0e2340;font-weight:600;}
.fbb-dest .eitem p{font-size:.9rem;color:#5a6472;margin:2px 0 0;}
.fbb-dest .dops{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;margin-top:18px;}
.fbb-dest .dop h4{font-family:'Fraunces',serif;font-weight:600;color:#0e2340;font-size:1.02rem;margin:0 0 13px;display:flex;align-items:center;gap:7px;}
.fbb-dest .dop h4::before{content:'';width:15px;height:15px;flex:0 0 auto;background-color:#0f7f99;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a7%207%200%200%201%207%207c0%205-7%2013-7%2013S5%2014%205%209a7%207%200%200%201%207-7z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202a7%207%200%200%201%207%207c0%205-7%2013-7%2013S5%2014%205%209a7%207%200%200%201%207-7z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.fbb-dest .chips{display:flex;flex-wrap:wrap;gap:6px;}
.fbb-dest .chips a{font-size:.72rem;font-weight:600;color:#2c3b4f;background:#fff;border:1px solid #dbe3ec;padding:4px 10px;border-radius:999px;text-decoration:none;transition:border-color .15s,color .15s;}
.fbb-dest .chips a:hover{border-color:#0f7f99;color:#0f7f99;}
.fbb-dest .dsched{margin-top:24px;display:flex;gap:11px;align-items:center;font-size:.92rem;color:#5a6472;background:#fff;border:1px solid #dbe3ec;border-radius:12px;padding:14px 18px;}
.fbb-dest .dsched::before{content:'';width:18px;height:18px;flex:0 0 auto;background-color:#0f7f99;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;}
.fbb-dest .dsched b{color:#0e2340;}
.fbb-dest .dcard .ic-fish{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.7%207.4a7%207%200%200%200%200%209.2%22%2F%3E%3Cpath%20d%3D%22M2%209.5c7.7%208.6%2014.8-.8%2020%202.5-5.2%203.3-12.3-6.2-20%202.5%22%2F%3E%3Cpath%20d%3D%22M18%2011v.01%22%2F%3E%3Cpath%20d%3D%22M11.5%2010.5c-.7%201-.7%202%200%203%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .dcard .ic-bike{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M15%2017.5h-6l4-9h3M9%208.5h4%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .dcard .ic-sun{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M5%205l2%202M17%2017l2%202M19%205l-2%202M7%2017l-2%202%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .eitem .ic-fish{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.7%207.4a7%207%200%200%200%200%209.2%22%2F%3E%3Cpath%20d%3D%22M2%209.5c7.7%208.6%2014.8-.8%2020%202.5-5.2%203.3-12.3-6.2-20%202.5%22%2F%3E%3Cpath%20d%3D%22M18%2011v.01%22%2F%3E%3Cpath%20d%3D%22M11.5%2010.5c-.7%201-.7%202%200%203%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .eitem .ic-leaf{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%204%2013C4%206%2012%204%2020%204c0%208-2%2016-9%2016z%22%2F%3E%3Cpath%20d%3D%22M4%2013c6%200%209-3%209-9%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .eitem .ic-pizza{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207l9%2014%209-14C15%204%209%204%203%207z%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%2213%22%20r%3D%22.7%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .eitem .ic-music{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5l12-2v13%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .eitem .ic-cocktail{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h14l-7%208zM12%2012v7M8%2021h8%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .eitem .ic-sun{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M5%205l2%202M17%2017l2%202M19%205l-2%202M7%2017l-2%202%22%2F%3E%3C%2Fsvg%3E");}
@media(max-width:820px){.fbb-dest .dest-stats{grid-template-columns:1fr 1fr;}.fbb-dest .dcards3,.fbb-dest .dops,.fbb-dest .eat2,.fbb-dest .dest-split{grid-template-columns:1fr;}body.itemid-114 .fbb-sidebar-left{position:static;width:100%;max-width:100%;margin:0 0 20px;}}

/* ===== BESTEMMINGSPAGINA'S (alle 6) — gedeelde layout-override + iconen (#73) =====
   APPEND-ONLY: plak dit ONDERAAN template.css, NIETS vervangen.
   Vervangt de itemid-114-scope door body:has(.fbb-dest) zodat elke
   bestemmingspagina met het .fbb-dest-blok automatisch de rijke layout krijgt. */
body:has(.fbb-dest) .wrap.fbb-sidebar-layout{display:block;position:relative;padding-bottom:0;}
body:has(.fbb-dest) .fbb-content-col{width:100%;padding-top:30px;padding-bottom:0;}
body:has(.fbb-dest) .fbb-sidebar-left{position:absolute;top:-250px;right:0;left:auto;width:350px;max-width:350px;margin:0;z-index:6;}
body:has(.fbb-dest) .fbb-search-panel{box-shadow:0 22px 55px rgba(14,35,64,.28);border-radius:16px;}
body:has(.fbb-dest) .com-content-article .page-header{display:none;}
body:has(.fbb-dest) .com-content-article,body:has(.fbb-dest) .com-content-article__body{max-width:none;margin-bottom:0;padding-bottom:0;}
.fbb-dest .ic-fish{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16.7%207.4a7%207%200%200%200%200%209.2%22%2F%3E%3Cpath%20d%3D%22M2%209.5c7.7%208.6%2014.8-.8%2020%202.5-5.2%203.3-12.3-6.2-20%202.5%22%2F%3E%3Cpath%20d%3D%22M18%2011v.01%22%2F%3E%3Cpath%20d%3D%22M11.5%2010.5c-.7%201-.7%202%200%203%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-bike{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%225.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Ccircle%20cx%3D%2218.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M15%2017.5h-6l4-9h3M9%208.5h4%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-sun{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M5%205l2%202M17%2017l2%202M19%205l-2%202M7%2017l-2%202%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-leaf{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%2020A7%207%200%200%201%204%2013C4%206%2012%204%2020%204c0%208-2%2016-9%2016z%22%2F%3E%3Cpath%20d%3D%22M4%2013c6%200%209-3%209-9%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-pizza{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207l9%2014%209-14C15%204%209%204%203%207z%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%2213%22%20r%3D%22.7%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-music{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018V5l12-2v13%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-cocktail{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%204h14l-7%208zM12%2012v7M8%2021h8%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-coffee{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%208h1a4%204%200%200%201%200%208h-1%22%2F%3E%3Cpath%20d%3D%22M3%208h14v9a4%204%200%200%201-4%204H7a4%204%200%200%201-4-4z%22%2F%3E%3Cpath%20d%3D%22M6%202v2M10%202v2M14%202v2%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-heart{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.8%205.6a5.5%205.5%200%200%200-7.8%200L12%206.6l-1-1a5.5%205.5%200%200%200-7.8%207.8L12%2021l8.8-8.6a5.5%205.5%200%200%200%200-6.8z%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-wave{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%208c1.5-2%203.5-2%205%200s3.5%202%205%200%203.5-2%205%200%203.5%202%205%200%22%2F%3E%3Cpath%20d%3D%22M2%2015c1.5-2%203.5-2%205%200s3.5%202%205%200%203.5-2%205%200%203.5%202%205%200%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-mountain{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%203l4%208%205-5%205%2015H2L8%203z%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-camera{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204h-5L7%207H4a2%202%200%200%200-2%202v9a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2h-3z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E");}
@media(max-width:820px){body:has(.fbb-dest) .fbb-sidebar-left{position:static;width:100%;max-width:100%;margin:0 0 20px;}}

.fbb-dest .ic-shield{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l7%203v5c0%204.5-3%208-7%2010-4-2-7-5.5-7-10V6z%22%2F%3E%3Cpath%20d%3D%22M9%2012l2%202%204-4%22%2F%3E%3C%2Fsvg%3E");}
.fbb-dest .ic-ticket{--ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202%202%202%200%200%200%200%204%202%202%200%200%201-2%202H5a2%202%200%200%201-2-2%202%202%200%200%200%200-4z%22%2F%3E%3Cpath%20d%3D%22M13%207v2M13%2011v2M13%2015v2%22%2F%3E%3C%2Fsvg%3E");}