/*
 * new-layout.css  —  v3
 * ---------------------------------------------------------------
 * Laad NA stylesheet-min-xxx.css:
 *   <link href="style/new-layout.css" rel="stylesheet">
 * ---------------------------------------------------------------
 */


/* ================================================================
   1. CSS VARIABELEN
   ================================================================ */
:root {
    --color-primary:   #00103C;
    --color-accent:    #698FC0;
    --shadow-card:     0 2px 10px rgba(0,0,0,0.10);
    --container-max:   1400px;
    --form-max: 1200px;    /* was 900px */
}


/* ================================================================
   2. BODY — witte achtergrond, geen grijs meer aan de zijkanten
   ================================================================ */
body {
    background-color: #e8e8e8 !important;
    padding:          0 !important;     /* was 15px — veroorzaakte grijze rand */
    font-size:        17px !important;
}


/* ================================================================
   3. CONTAINER — van 960px naar 1400px, geen afgeronde hoeken
   ================================================================ */
.container {
    max-width:     var(--container-max) !important;
    border-radius: 0 !important;
    box-shadow:    0 0 30px rgba(0,0,0,0.15);
}

.kccontainer {
    max-width: var(--container-max) !important;
}


/* ================================================================
   4. HEADER — full-width achtergrond, content uitlijnen
   ================================================================ */
header {
    background-color: #ffffff;
    padding:          16px 0 0 !important;
    min-height:       120px !important;
    box-sizing:       border-box !important;
    position:         relative;
}

.header-cars {
    position:       absolute;
    top:            10px;
    left:           50%;
    transform:      translateX(-50%);
    pointer-events: none;
    line-height:    0;
}

.header-cars img {
    height: 110px;
    width:  auto;
    display: block;
}

/* Logo, live-chat etc. get 40px side padding — hero/trust have their own padding */
header > :not(.menu-container):not(.idx-hero):not(.idx-trust-strip) {
    padding-left:  40px !important;
    padding-right: 40px !important;
}

.logo-text {
    font-size: 15px !important;
}

.live-chat {
    right: 40px !important;
    top:   50px !important;
}


/* ================================================================
   5. NAVIGATIE — full-width donkerblauw, inhoud uitgelijnd
   ================================================================ */
#navigation {
    max-width:        100% !important;
    background-color: var(--color-primary) !important;
}

#navbar {
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    0 40px;
    box-sizing: border-box;
}

/* Menu-container: just the sticky nav bar — no top margin, above dropdowns */
.menu-container {
    background-color: var(--color-primary) !important;
    margin-top:       0 !important;
    position:         relative;
    z-index:          1200 !important;
}

/* Grayed-out secties: zichtbaar maar niet interactief */
.section-disabled {
    opacity:        0.35;
    pointer-events: none;
    user-select:    none;
}

/* Witte achtergrond voor alle form-wrappers zodat de grijze body (#ccc) niet doorlekt */
main,
article,
#screenconfirmation,
#main,
#data,
#returndata,
#basicdata,
#coupontable,
#pickertable,
#servicetable,
.res-confirm-wrap {
    background-color: #fff !important;
}

/* When JS adds .sticky to #navbar: anchor it properly so it doesn't overflow the container */
#navbar.sticky {
    left:      50% !important;
    right:     auto !important;
    width:     var(--container-max) !important;
    max-width: 100% !important;
    transform: translateX(-50%);
}

/* Mobile nav-btn: full-height, hamburger icon via CSS instead of broken PNG */
@media (max-width: 960px) {
    #navigation a.nav-btn {
        height:      45px !important;
        line-height: 1 !important;
        display:     flex !important;
        align-items: center !important;
        gap:         10px;
        padding:     0 18px !important;
    }

    /* Three-line hamburger: the span itself is the middle line, box-shadow adds top & bottom */
    #navigation a.nav-btn span.arr,
    #navigation a.nav-btn span.arr.active {
        background: #fff !important;
        width:      20px !important;
        height:     2px !important;
        position:   static !important;
        display:    inline-block !important;
        box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff;
        flex-shrink: 0;
    }
}


/* ================================================================
   6. MAIN — ruimere padding op brede schermen
   ================================================================ */
@media (min-width: 1100px) {
    main {
        padding: 16px 60px 60px !important;
    }
}

main {
    padding-top: 10px !important;
}


/* ================================================================
   6b. 2-KOLOMS LAYOUT RESERVERINGSFORMULIER
   ================================================================ */
@media (min-width: 1100px) {
    /* Boven: Reservation info | Passenger info */
    .top-columns {
        display: flex;
        gap:     24px;
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .top-col {
        flex: 1;
        min-width: 0;
    }

    /* Onder: Heenreis | Terugreis */
    .trips-columns {
        display: flex;
        gap:     24px;
        align-items: flex-start;
    }

    .trip-col {
        flex: 1;
        min-width: 0;
    }

    /* Inputs vullen de kolombreedte */
    .trip-col .col-25 {
        width: 30% !important;
    }

    .trip-col .col-75 {
        width: 68% !important;
    }

    .trip-col .input,
    .trip-col select.bigtext,
    .trip-col select.dropdown,
    .trip-col input[type="text"]:not([id$="date"]):not(.time-input) {
        width:     100% !important;
        max-width: 100% !important;
    }

    /* Date: smal genoeg voor dd-mm-yyyy */
    .trip-col input[id$="date"] {
        width:     155px !important;
        max-width: 155px !important;
    }

    /* Time: smal genoeg voor hh:mm */
    .trip-col input.time-input {
        width:     55px !important;
        max-width: 55px !important;
    }

    /* Other requirements: zelfde breedte als de dropdowns (100% van col-75) */
    .trip-col textarea {
        width:     100% !important;
        max-width: 100% !important;
    }
}

/* ================================================================
   7. FORMULIER — breedte en uitlijning
   ================================================================ */
#main {
    max-width: var(--form-max) !important;
    width:     100% !important;
    margin:    0 !important;
}

.page-reservation {
    max-width:        var(--form-max) !important;
    margin:           0 !important;
    background-color: #fff !important;
}

/* fastrow dezelfde padding als <main> zodat intro-tekst uitlijnt met het formulier eronder */
.fastrow {
    padding-left:  50px !important;
    padding-right: 50px !important;
}

@media (min-width: 1100px) {
    .fastrow {
        padding-left:  60px !important;
        padding-right: 60px !important;
    }
}


/* ================================================================
   8. FORMULIER KOLOMMEN + FONT DESKTOP
   ================================================================ */
@media (min-width: 1100px) {
    .col-25 {
        width:     18% !important;
        font-size: 12px !important;
    }
    .col-75 {
        width:     79% !important;
        font-size: 13px !important;
    }

    /* Inputs, selects en textareas meeschalen */
    .col-75 input,
    .col-75 select,
    .col-75 textarea {
        font-size: 13px !important;
    }
}


/* ================================================================
   9. INPUTS
   ================================================================ */
@media (min-width: 1100px) {
    .input,
    .input-2,
    input[type="text"],
    input[type="email"],
    input[type="tel"] {
        width:     400px !important;
        max-width: 400px !important;
    }

    select.bigtext,
    select.dropdown,
    select#pickup,
    select#dropoff,
    select#returnpickup,
    select#returndropoff {
        width:     400px !important;
        max-width: 400px !important;
        font-size: 16px !important;
    }

    .textarea,
    textarea {
        width:     400px !important;
        max-width: 400px !important;
    }

    /* Datum: net voldoende voor dd-mm-yyyy (id eindigt op "date") */
    input[id$="date"] {
        width:     155px !important;
        max-width: 155px !important;
    }

    /* Tijd: clockpicker time-input, net voldoende voor hh:mm */
    input.time-input {
        width:     45px !important;
        max-width: 45px !important;
    }

    /* Roundtrip: "One way only" / "Roundtrip" — smal houden */
    select#roundtrip {
        width:     170px !important;
        max-width: 170px !important;
    }

    /* Vluchtnummer: korte code (bijv. KL871), geen 400px nodig */
    input[id$="flightnr"] {
        width:     150px !important;
        max-width: 150px !important;
    }
}


/* ================================================================
   10. SECTIE-HEADERS
   ================================================================ */
h3.bar {
    background:     var(--color-primary) !important;
    color:          #fff !important;
    padding:        10px 16px !important;
    border-radius:  4px 4px 0 0 !important;
    font-size:      18px !important;
    letter-spacing: 0.4px;
    margin-bottom:  8px !important;
}


/* Paginatitel met witte tekst op primaire achtergrond (zoals fast-track-immigration.php) */
/* Staat direct in .menu-container (geen fastrow padding), dus width:100% volstaat */
h1.inside-title {
    color:            #fff !important;
    text-align:       center !important;
    padding:          25px 0 !important;
    background-color: var(--color-primary) !important;
    display:          block !important;
    width:            100% !important;
    box-sizing:       border-box !important;
    margin:           0 !important;
    border:           none !important;
    font-size:        21px !important;
    line-height:      1.4 !important;
}

/* Fastheader-bar: zelfde stijl als .responstable th */
h1.fastheader-bar {
    background-color: #1c3461 !important;
    color:            #fff !important;
    padding:          10px 8px !important;
    display:          block !important;
    width:            100% !important;
    box-sizing:       border-box !important;
    margin:           0 0 12px !important;
    text-align:       center !important;
    border:           none !important;
    font-size:        15px !important;
    line-height:      1.4 !important;
}


/* Precheck-tarieven tabel: gecentreerd, niet volledig breed */
table.precheck-rates {
    margin-left:  auto !important;
    margin-right: auto !important;
    width:        auto !important;
    min-width:    500px !important;
    max-width:    720px !important;
}
table.precheck-rates th,
table.precheck-rates td {
    white-space: nowrap !important;
}

/* ================================================================
   11. SECTIE-BLOKKEN — card-look
   ================================================================ */
#servicetable,
#data,
#returndata,
#basicdata,
#coupontable,
#pickertable {
    border:        none !important;
    border-radius: 0 0 6px 6px !important;
    margin-bottom: 20px !important;
    overflow:      visible;
    box-shadow:    var(--shadow-card);
    padding-left:  0 !important;
    padding-right: 0 !important;
}


/* ================================================================
   12. RIJEN
   ================================================================ */
.clr.even,
.clr.odd,
.clr.mid {
    padding-top:    4px !important;
    padding-bottom: 4px !important;
    padding-left:   12px !important;
    padding-right:  12px !important;
}


/* ================================================================
   13. VERSTUURKNOP
   ================================================================ */
#sendbutton input[type="submit"],
#sendbutton button {
    padding:       12px 40px !important;
    font-size:     16px !important;
    border-radius: 6px !important;
    min-width:     200px;
    cursor:        pointer;
    transition:    background 0.2s ease, transform 0.2s ease;
}

#sendbutton input[type="submit"]:hover,
#sendbutton button:hover {
    transform: translateY(-2px);
}


/* ================================================================
   14. FOOTER
   ================================================================ */
footer,
.foot {
    border-radius: 0 !important;
}

@media (min-width: 1100px) {
    footer, .foot {
        padding: 20px 60px !important;
    }
}


/* ================================================================
   15. MOBILE — alles terug naar origineel onder 1100px
   ================================================================ */
@media (max-width: 1099px) {

    body {
        padding: 0 !important;
    }

    header {
        padding: 20px 20px !important;
    }

    #navbar {
        padding: 0 !important;
    }

    #main,
    .page-reservation {
        max-width: 100% !important;
        margin:    0 !important;
    }
}


/* ================================================================
   16. HERO SECTIE (reservation.php)
   ================================================================ */
.res-hero {
    display:          flex;
    align-items:      stretch;
    gap:              40px;
    padding:          0;
    min-height:       240px;
    background-color: var(--color-primary);
    clear:            both;
}

.res-hero__photo {
    flex-shrink: 0;
    width:       38%;
    max-width:   460px;
    overflow:    hidden;
}

.res-hero__photo img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
}

.res-hero__content {
    flex:            1;
    padding:         28px 40px 28px 0;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    text-align:      center;
}

.res-hero__badge {
    display:        inline-block;
    border:         1px solid rgba(255,255,255,0.4);
    color:          rgba(255,255,255,0.75);
    font-size:      13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding:        4px 12px;
    border-radius:  20px;
    margin-bottom:  12px;
}

.res-hero__title {
    color:       #fff;
    font-size:   28px;
    font-weight: 700;
    line-height: 1.25;
    margin:      0 0 8px;
    font-family: 'Montserrat', sans-serif;
}

.res-hero__sub {
    color:       rgba(255,255,255,0.75);
    font-size:   14px;
    line-height: 1.55;
    margin:      0 0 16px;
}

.res-hero__trust {
    list-style:      none;
    margin:          0;
    padding:         0;
    display:         flex;
    flex-wrap:       wrap;
    gap:             2px 32px;
    justify-content: center;
}

.res-hero__trust li {
    color:     rgba(255,255,255,0.85);
    font-size: 13px;
    padding:   4px 0 4px 22px;
    position:  relative;
}

.res-hero__trust li::before {
    content:      '✓';
    position:     absolute;
    left:         0;
    top:          4px;
    color:        var(--color-accent);
    font-size:    12px;
    font-weight:  700;
    line-height:  1.4;
}


/* Section 17 removed — progress bar not used */


/* ================================================================
   18. CONFIRM-BUTTON BAR
   ================================================================ */
.res-confirm-wrap {
    display:        block;
    background:     transparent;
    border:         none;
    padding:        4px 0;
    margin-top:     0;
    text-align:     center;
}

.res-confirm-terms {
    margin:     0 0 1em;
    color:      #999;
    font-size:  12px;
    text-align: center;
}

#buttonspace {
    margin: 0 !important;
    padding: 0 !important;
    border:  none !important;
    background: transparent !important;
}

#sendbutton input[type="submit"],
#sendbutton button {
    background:     var(--color-primary) !important;
    color:          #fff !important;
    border:         none !important;
    padding:        14px 44px !important;
    font-size:      15px !important;
    font-weight:    700 !important;
    border-radius:  6px !important;
    letter-spacing: 0.3px;
    min-width:      220px;
    cursor:         pointer;
    transition:     background 0.2s ease, transform 0.15s ease;
}

#sendbutton input[type="submit"]:hover,
#sendbutton button:hover {
    background: #1a2f6e !important;
    transform:  translateY(-2px);
}


/* ================================================================
   16B. HEADER ACHTERGROND — verwijder de auto-foto
   ================================================================ */
header {
    background-image: none !important;
}


/* ================================================================
   16C. FORMULIER RIJEN — wit, subtiele scheidingslijn
   ================================================================ */

/* Alle rijen: uniforme zachte grijze achtergrond, geen strepen */
#servicetable .clr,
#data          .clr,
#returndata    .clr,
#basicdata     .clr,
#coupontable   .clr,
#pickertable   .clr {
    background:    #f0f0f0 !important;
    border-bottom: none !important;
    text-align:    left !important;
}

/* Spacer-rijen: globaal inklappen zodat ze geen witruimte toevoegen */
.clr.extraline,
.clr.extraradio {
    height:        0 !important;
    padding:       0 !important;
    margin:        0 !important;
    border-bottom: none !important;
    overflow:      hidden !important;
    background:    transparent !important;
}

/* Laatste rij: geen scheidingslijn */
#servicetable .clr:last-child,
#data          .clr:last-child,
#returndata    .clr:last-child,
#basicdata     .clr:last-child {
    border-bottom: none !important;
}

/* Coupon / info tekst boven het formulier */
/* "How this works" footer — outside <main>, needs matching side padding */
.how-this-works-section {
    margin-top:    24px;
    padding-right: 75px;
    box-sizing:    border-box;
}

/* Declaration row: keep normal col-25/col-75 float layout so checkbox aligns with inputs */
#linedeclare .col-25 {
    text-align: right !important;
}
#linedeclare .col-75 {
    text-align: left !important;
}
#linedeclare {
    overflow:       hidden !important;
    padding-bottom: 4px !important;
}

#linesendbutton {
    margin-top: 2px !important;
}

#final {
    padding-top: 0 !important;
}

#sendbutton {
    clear:      both !important;
    text-align: center !important;
}

#linesendbutton {
    background-color: transparent !important;
    padding:          8px 0 !important;
}

.loader {
    margin: 8px auto !important;
}

/* Reservation.php: button inspringen met label-kolom breedte */
.page-reservation #sendbutton {
    text-align:   left !important;
    padding-left: 30% !important;
}

/* Confirm-wrap: knop en tekst beide gecentreerd */
.res-confirm-wrap #sendbutton {
    padding-left: 0 !important;
    text-align:   center !important;
}

#sendbutton input[type="submit"],
#sendbutton button {
    display: inline-block !important;
}

#screenconfirmation > p.textleft {
    font-size:   15px !important;
    margin:      0 0 6px !important;
    color:       #444 !important;
    text-align:  left !important;
}

#screenconfirmation > p.textleft a {
    color: var(--color-accent) !important;
}

#info {
    font-size:     14px !important;
    padding:       6px 10px !important;
    margin-bottom: 12px !important;
    border-left:   3px solid #CC0000;
    background:    #fff5f5 !important;
    border-radius: 0 4px 4px 0;
    display:       inline-block;
}

/* Homepage-title als h2 — klein en muted */
h2.homepage-title {
    font-size:   13px !important;
    color:       #999 !important;
    font-weight: 400 !important;
    margin:      8px 0 12px !important;
    text-align:  left !important;
}


/* ================================================================
   19. INDEX.PHP HERO
   ================================================================ */
.idx-hero {
    display:          flex;
    align-items:      center;
    gap:              40px;
    padding:          28px 40px 20px 40px;
    background-color: var(--color-primary);
    clear:            both;
}

.idx-hero__text {
    flex:       1;
    text-align: left !important;
}

.idx-hero__title {
    color:       #fff;
    font-size:   26px;
    font-weight: 700;
    line-height: 1.3;
    margin:      0 0 12px;
    font-family: 'Montserrat', sans-serif;
}

.idx-hero__sub {
    color:       rgba(255,255,255,0.75);
    font-size:   15px;
    line-height: 1.65;
    margin:      0 0 20px;
    max-width:   440px;
}

.idx-hero__cta {
    display:         inline-block;
    background:      var(--color-accent);
    color:           #fff !important;
    font-size:       16px;
    font-weight:     700;
    padding:         12px 28px;
    border-radius:   6px;
    text-decoration: none !important;
    letter-spacing:  0.3px;
    transition:      background 0.2s, transform 0.15s;
}

.idx-hero__cta:hover {
    background: #5a7fb0;
    transform:  translateY(-2px);
}

.idx-hero__image {
    flex-shrink: 0;
    width:       38%;
    max-width:   500px;
    max-height:  260px;
    overflow:    hidden;
    border-radius: 6px;
}

.idx-hero__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.idx-trust-strip {
    display:          flex;
    flex-wrap:        wrap;
    gap:              6px 28px;
    padding:          12px 40px 16px;
    background-color: var(--color-primary);
    border-top:       1px solid rgba(255,255,255,0.12);
}

.idx-trust-strip span {
    color:     rgba(255,255,255,0.78);
    font-size: 14px;
    padding-left: 16px;
    position:  relative;
}

.idx-trust-strip span::before {
    content:  '✓';
    position: absolute;
    left:     0;
    color:    var(--color-accent);
    font-weight: 700;
}


/* ================================================================
   20. SECTIE-HEADER ICONEN (reservation.php)
   ================================================================ */



/* ================================================================
   21. H2 SUBHEAD RESERVATION (minder dominant)
   ================================================================ */
h2.subhead {
    font-size:   19px !important;
    font-weight: 700 !important;
    color:       #222 !important;
    margin:      0 0 6px !important;
    padding:     0 !important;
    border:      none !important;
    background:  none !important;
}

main > article > p.textleft {
    font-size:   17px !important;
    color:       #444 !important;
    line-height: 1.6;
    margin:      0 0 18px !important;
}


/* ================================================================
   22. NAVIGATIE — actief item en hover
   ================================================================ */

/* Actief menu-item: accent-achtergrond + witte onderlijn */
#navigation ul li.active a {
    background:    var(--color-accent) !important;
    border-bottom: 3px solid #fff !important;
    padding-bottom: 0 !important;
}

/* Hover iets zachter dan de standaard blauwe override */
#navigation ul li a:hover {
    background: #5a7fb0 !important;
}


/* ================================================================
   23. LIVE CHAT BUTTON
   ================================================================ */
.live-chat {
    border:        1px solid #ccc !important;
    border-radius: 5px !important;
    padding:       4px 8px !important;
    background:    #fff !important;
}


/* ================================================================
   24. FORM POLISH — labels, inputs, spacing
   ================================================================ */

/* Label column — globaal padding-right zodat labels niet tegen inputs aanzitten */
.col-25 {
    padding-right: 10px !important;
    box-sizing:    border-box !important;
}

/* Verticale uitlijning label + input — login pagina rijen */
#lineemailcode,
#linelogincode,
#linelogincode2,
#lineemailcode2 {
    display:     flex !important;
    align-items: center !important;
}

#lineemailcode .col-25,
#lineemailcode .col-75,
#linelogincode .col-25,
#linelogincode .col-75 {
    float: none !important;
}

#servicetable .col-25,
#data          .col-25,
#returndata    .col-25,
#basicdata     .col-25,
#coupontable   .col-25,
#pickertable   .col-25 {
    padding-right: 10px !important;
    padding-top:   6px !important;
    padding-bottom: 6px !important;
    margin-top:    0 !important;
    line-height:   1.4;
    font-size:     13px !important;
}

/* Input column */
#servicetable .col-75,
#data          .col-75,
#returndata    .col-75,
#basicdata     .col-75,
#coupontable   .col-75,
#pickertable   .col-75 {
    padding-top:    6px !important;
    padding-bottom: 6px !important;
    margin-top:    0 !important;
    font-size:      17px !important;
}

/* ================================================================
   24. INPUT POLISH — compact, warm, readable
   ================================================================ */

/* Consistent vertical alignment for inline select+input combos */
select, input, .input, .input-2 {
    vertical-align: middle;
}

/* Inputs and selects */
select.bigtext,
select.dropdown,
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
.input,
.input-2,
textarea.textarea {
    border:        1px solid #b8c4d4 !important;
    border-radius: 4px !important;
    padding:       5px 9px !important;
    font-size:     16px !important;
    font-family:   inherit !important;
    background:    #fff !important;
    color:         #222 !important;
    transition:    border-color .15s, box-shadow .15s;
}

/* Focus ring */
select.bigtext:focus,
select.dropdown:focus,
select:focus,
input[type="text"]:focus,
.input-2:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
.input:focus,
textarea.textarea:focus {
    border-color: var(--color-accent) !important;
    outline:      none !important;
    box-shadow:   0 0 0 3px rgba(105,143,192,0.2) !important;
}

/* Labels */
#servicetable [id^="ask"],
#data          [id^="ask"],
#returndata    [id^="ask"],
#basicdata     [id^="ask"],
#coupontable   [id^="ask"] {
    color:       #333 !important;
    font-weight: 400 !important;
    padding-top: 7px !important;
    font-size:   17px !important;
}


/* Firstname: select#titlename (~80px) zit er voor, dus smaller dan 400px */
input#firstname {
    width:     325px !important;
    max-width: 325px !important;
}

/* Upload sectie: zelfde font en grootte als de rest, vet/cursief behouden */
.drop-area,
.drop-dummy,
.drop-dummy span,
.drop-dummy b,
.drop-dummy i {
    font-family: inherit !important;
    font-size:   17px !important;
}

/* Upload rij: flex zodat label verticaal gecentreerd staat naast de drop box */
[id^="lineupload"] {
    display:     flex !important;
    align-items: center !important;
    float:       none !important;
    overflow:    hidden;
}

[id^="lineupload"] .col-25 {
    float:         none !important;
    flex:          0 0 18% !important;
    min-width:     18% !important;
    margin:        0 !important;
    padding-right: 8px !important;
}

[id^="lineupload"] .col-75 {
    float:  none !important;
    flex:   1 !important;
    margin: 0 !important;
}

/* Drop-area even breed als de andere inputs */
[id^="lineupload"] .drop-area {
    width:     400px !important;
    max-width: 400px !important;
}

/* Placeholder: zelfde font als de rest */
::placeholder {
    font-family: inherit !important;
    font-style:  normal !important;
}

/* Number stepper: visueel compact, touch-target 44px via padding */
.number-input {
    height: 32px !important;
}

.number-input button {
    width:        32px !important;
    height:       32px !important;
    min-width:    32px !important;
    font-size:    16px !important;
    position:     relative !important;
    background:   #e8f0f0 !important;
    border-color: #b8c4d4 !important;
    color:        var(--color-primary) !important;
    font-weight:  700 !important;
    transition:   background .12s;
}

/* Vergroot het klikbare gebied zonder de visuele grootte te veranderen */
.number-input button::after {
    content:  '' !important;
    position: absolute !important;
    top:      -6px !important;
    bottom:   -6px !important;
    left:     -6px !important;
    right:    -6px !important;
}

.number-input input[type="number"] {
    height:    32px !important;
    width:     44px !important;
    font-size: 15px !important;
}

.number-input button:hover {
    background:   var(--color-accent) !important;
    color:        #fff !important;
    border-color: var(--color-accent) !important;
}

/* Radio labels */
.extraradio label {
    cursor:       pointer;
    font-size:    17px !important;
    color:        #333 !important;
    margin-right: 16px;
}

/* Prijs/opmerking rij onder de auto-keuze */
#ansamount {
    font-size:   15px;
    font-weight: 600;
    color:       var(--color-primary);
    padding-top: 8px !important;
}

/* "Fields in red" en coupon-link wat meer ruimte boven het formulier */
#screenconfirmation > p.textleft,
#info {
    margin-top: 0 !important;
}

/* Coupon-link in zwart */
#couponinfo a,
#screenconfirmation > p.textleft > a {
    color: #000 !important;
}

/* Subhead + intro-tekst op reservation.php — minder ruimte erna */
h2.subhead + p.textleft,
h2.subhead + p.textleft + p {
    margin-bottom: 8px !important;
}


/* ================================================================
   19M. MOBILE — HERO, PROGRESS, CONFIRM
   ================================================================ */
@media (max-width: 1099px) {

    .header-cars { display: none; }

    .how-this-works-section {
        padding-right: 20px;
    }

    /* reservation hero */
    .res-hero {
        flex-direction: column;
        gap:            0;
        min-height:     0;
    }

    .res-hero__photo {
        display: none;
    }

    .res-hero__content {
        padding: 20px;
    }

    .res-hero__title {
        font-size: 22px;
    }

    .res-hero__sub {
        max-width: 100%;
    }

    /* index hero */
    .idx-hero {
        flex-direction: column-reverse;
        padding:        20px;
        gap:            16px;
    }

    .idx-hero__image {
        display: none;
    }

    .idx-hero__title {
        font-size: 21px;
    }

    .idx-trust-strip {
        padding: 10px 20px 14px;
        gap:     4px 20px;
    }

    /* Oude vaste Book-now knop op mobile — vervangen door hero CTA */
    .book_button {
        display: none !important;
    }




    /* confirm bar */
    .res-confirm-wrap {
        flex-direction: column;
        align-items:    stretch;
    }

    #sendbutton input[type="submit"],
    #sendbutton button {
        width:     100% !important;
        min-width: unset;
    }

    /* Chat widget: van rechter-zijkant naar rechter-onderhoek op mobile */
    #scsEW4,
    div[id^="scs"] {
        top:    auto !important;
        bottom: 10px !important;
        right:  0 !important;
    }


    /* Minimale rij-padding op mobiel */
    #servicetable .clr.odd,
    #servicetable .clr.even,
    #servicetable .clr.mid,
    #data          .clr.odd,
    #data          .clr.even,
    #data          .clr.mid,
    #returndata    .clr.odd,
    #returndata    .clr.even,
    #returndata    .clr.mid,
    #basicdata     .clr.odd,
    #basicdata     .clr.even,
    #basicdata     .clr.mid {
        padding: 0 10px !important;
    }

    /* Voorkom horizontale overflow op alle pagina's */
    body {
        overflow-x: hidden !important;
    }

    .container {
        width:      100% !important;
        max-width:  100% !important;
        overflow-x: hidden !important;
        box-shadow: none !important;
    }

    /* Form secties: op mobile terug naar hidden zodat ze container niet oprekken */
    #servicetable,
    #data,
    #returndata,
    #basicdata,
    #coupontable,
    #pickertable {
        overflow: hidden !important;
    }

    /* Login + overige pagina's: col-25 en col-75 stapelen */
    .clr .col-25 {
        width:      100% !important;
        text-align: left !important;
        float:      none !important;
    }

    .clr .col-75 {
        width:        100% !important;
        float:        none !important;
        padding-left: 0 !important;
    }

    /* Form-secties: col-25/col-75 blijven naast elkaar tot 600px */
    #servicetable .col-25,
    #data          .col-25,
    #returndata    .col-25,
    #basicdata     .col-25,
    #coupontable   .col-25,
    #pickertable   .col-25 {
        width: 30% !important;
        float: left !important;
    }

    #servicetable .col-75,
    #data          .col-75,
    #returndata    .col-75,
    #basicdata     .col-75,
    #coupontable   .col-75,
    #pickertable   .col-75 {
        width: 70% !important;
        float: left !important;
    }

    /* Login rijen: op mobiel stapelen (flex-direction: column) */
    #lineemailcode,
    #linelogincode,
    #linelogincode2,
    #lineemailcode2 {
        flex-direction: column !important;
        align-items:    flex-start !important;
    }

    .clr .col-75 input[type="text"],
    .clr .col-75 input[type="email"],
    .clr .col-75 input[type="tel"],
    .clr .col-75 .input,
    .clr .col-75 .input-2,
    input#firstname {
        width:     92% !important;
        max-width: 92% !important;
    }

    /* Inputs full width on mobile — time stays narrow so "24h format" fits beside it */
    select.bigtext,
    select.dropdown,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    .input,
    .input-2,
    textarea.textarea {
        width:     100% !important;
        max-width: 100% !important;
    }

    /* Datum en tijd: enkel zo breed als nodig — hogere specificiteit dan .clr .col-75 input */
    .clr .col-75 input.time-input,
    input.time-input {
        width:     80px !important;
        max-width: 80px !important;
    }

    .clr .col-75 input[id$="date"],
    input[id$="date"] {
        width:     140px !important;
        max-width: 140px !important;
    }

    /* Zijkant-padding voor alle .clr rijen in formulier-secties (ook zonder odd/even/mid) */
    #servicetable .clr,
    #data          .clr,
    #returndata    .clr,
    #basicdata     .clr {
        padding-left:  10px !important;
        padding-right: 10px !important;
    }

    /* limitbasicdata is een wrapper, geen rij — padding resetten */
    #basicdata #limitbasicdata {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
}

/* ================================================================
   24b. FORM STACKING — alleen op kleine schermen (<600px)
   ================================================================ */
@media (max-width: 600px) {

    #servicetable .col-25,
    #data          .col-25,
    #returndata    .col-25,
    #basicdata     .col-25 {
        width:          100% !important;
        float:          none !important;
        padding-top:    2px !important;
        padding-bottom: 0 !important;
        font-weight:    600 !important;
        text-align:     left !important;
    }

    #servicetable .col-75,
    #data          .col-75,
    #returndata    .col-75,
    #basicdata     .col-75 {
        width:          100% !important;
        float:          none !important;
        padding-top:    0 !important;
        padding-bottom: 2px !important;
    }
}

/* ================================================================
   25. RATE TABEL (index.php)
   ================================================================ */

/* "Find your rate" sectie */
main > article > div[style*="text-align:center"] {
    margin: 24px 0 12px !important;
}

#dest {
    border:        1px solid #ccc !important;
    border-radius: 4px !important;
    padding:       6px 10px !important;
    font-size:     14px !important;
    font-family:   'Montserrat', sans-serif !important;
    min-width:     220px;
    vertical-align: middle !important;
}

/* H2.boxed: weg met het grijze gradient, primary navy */
h2.boxed {
    background:    var(--color-primary) !important;
    border-radius: 6px 6px 0 0 !important;
    font-size:     15px !important;
    font-weight:   400 !important;
    padding:       12px 20px !important;
    min-height:    0 !important;
    line-height:   1.6 !important;
    margin-bottom: 0 !important;
}

/* Tabel zelf: card-styling consistent met formulier */
.widescreen > .responstable {
    border-radius: 0 0 6px 6px !important;
    box-shadow:    var(--shadow-card) !important;
    margin-bottom: 28px !important;
    overflow:      visible !important;
}

/* Scroll-wrapper zodat brede tabellen alleen naar rechts scrollen */
.table-scroll-wrap {
    overflow-x: auto;
    overflow-y: visible;
    width:      100%;
    margin-bottom: 28px;
}
.table-scroll-wrap > .responstable {
    margin-bottom: 0 !important;
    min-width:  600px;
}

/* Kolomkoppen */
.responstable th {
    background-color: #1c3461 !important;
    border:           none !important;
    border-right:     1px solid rgba(255,255,255,0.1) !important;
    border-bottom:    2px solid rgba(255,255,255,0.08) !important;
    padding:          10px 8px !important;
    font-size:        15px !important;
    color:            #fff !important;
    line-height:      1.4;
}

/* Sectie-subheaders (Bangkok Tours, Day trips, etc.) */
.responstable .table-subheader {
    background:  #2a4070 !important;
    color:       rgba(255,255,255,0.9) !important;
    font-size:   15px !important;
    padding:     8px 12px !important;
}

.responstable .table-subheader h2 {
    font-size:   15px !important;
    color:       rgba(255,255,255,0.9) !important;
    margin:      0 !important;
    font-weight: 600 !important;
    text-align:  center !important;
    background:  none !important;
    padding:     0 !important;
    min-height:  0 !important;
    border-radius: 0 !important;
}

/* "Special Promotion!" span heeft inline color:#990061 — override naar geel op donkerblauw */
.responstable .table-subheader h2 span,
#daytours.table-subheader h2 span {
    color: #ffd055 !important;
}

/* Rijen: lichte teal-strepen (dichter bij origineel, beter scanbaar) */
.responstable tr:nth-child(odd),
tr.rowcolor:nth-child(odd) {
    background-color: #fff !important;
}

.responstable tr:nth-child(even),
tr.rowcolor:nth-child(2n) {
    background-color: #eaf3f3 !important;
}

/* Tabelcellen */
.responstable td {
    padding:        9px 12px !important;
    font-size:      16px !important;
    border-bottom:  1px solid #dde8e8 !important;
    vertical-align: middle !important;
    color:          #333 !important;
}

/* Bestemmingskolom */
.responstable td:first-child {
    color:       #222 !important;
    font-weight: 400 !important;
}

/* Rate-kolommen: gecentreerd, niet afbreken, normaal gewicht (cijfers lezen beter zonder bold) */
/* nth-child(n+3) = kolom 3 en verder; kolommen 1+2 (From/To) blijven links uitgelijnd */
.responstable td:nth-child(n+3) {
    text-align:   center !important;
    font-size:    17px !important;
    font-weight:  400 !important;
    white-space:  nowrap !important;
}

/* "Click on a blue rate" rij — not(.table-subheader) to avoid overriding section headers */
.responstable td[colspan]:not(.table-subheader) {
    background:  #f8f9fc !important;
    font-size:   13px !important;
    font-weight: 400 !important;
    padding:     6px 10px !important;
}
.responstable td[colspan]:not(.table-subheader) h2 {
    font-size:   1.5rem !important;
    font-weight: 700 !important;
}

/* Hover op tabelrijen */
.responstable tr:hover td {
    background-color: #c8e5e5 !important;
}

/* JS voegt class "klik" toe aan klikbare rate-cellen (op de td zelf, niet een child).
   .responstable td { color:#333 !important } overschrijft anders .klik { color:#00f }.
   Hogere specificiteit (0,2,1) wint van (0,1,1), ook als beide !important hebben. */
.responstable td.klik {
    color:  #1a4fad !important;
    cursor: pointer !important;
}
.responstable td.klik:hover {
    color:           #0a3a8a !important;
    text-decoration: underline !important;
}

/* Fallback voor .c1/.c2 en <a> inside td (andere websites / toekomstig) */
.responstable td .c1,
.responstable td .c2,
.responstable td a {
    color: #1a4fad !important;   /* iets beter blauw dan raw #00f */
}


/* ================================================================
   26. CHOICES.JS — font-size override (widget renders eigen HTML)
   ================================================================ */
.choices__inner,
.choices__input,
.choices__item,
.choices__placeholder,
.choices__list--single .choices__item,
.choices__list--dropdown .choices__item {
    font-size: 16px !important;
}

.choices__inner {
    padding:       4px 8px !important;
    border:        1px solid #b8c4d4 !important;
    border-radius: 4px !important;
    background:    #fff !important;
    min-height:    0 !important;
    max-width:     400px !important;
    box-sizing:    border-box !important;
}

/* How fast track works: 2-column flow on desktop */
@media (min-width: 1100px) {
    .howworks-grid {
        column-count: 2;
        column-gap:   40px;
    }
    .howworks-block {
        break-inside: avoid;
    }
}

/* ================================================================
   CROSS-LINKS — also visit our other services
   ================================================================ */
.also-services {
    margin:        32px 0 16px;
    padding:       0;
}
.also-services h3 {
    font-size:     14px;
    font-weight:   600;
    color:         #666;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin:        0 0 12px;
}
.also-services-grid {
    display:       flex;
    flex-wrap:     wrap;
    gap:           10px;
}
.also-card {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       10px 14px;
    border:        1px solid #d0d8e8;
    border-radius: 6px;
    background:    #f5f8fd;
    text-decoration: none !important;
    color:         #1a4fad !important;
    font-size:     13px;
    font-weight:   500;
    transition:    background 0.15s, border-color 0.15s;
    white-space:   nowrap;
}
.also-card:hover {
    background:    #e8eef8;
    border-color:  #1a4fad;
    color:         #0d3080 !important;
    text-decoration: none !important;
}
.also-card .also-flag {
    font-size:     18px;
    line-height:   1;
}
.also-card .also-label {
    display:       flex;
    flex-direction: column;
    gap:           1px;
}
.also-card .also-dest {
    font-weight:   600;
    color:         inherit;
}
.also-card .also-sub {
    font-size:     11px;
    color:         #667;
    font-weight:   400;
}
.also-card .also-desc {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space:nowrap;
    border:     0;
}

/* Double-check date hint: nooit wrappen om CLS te voorkomen */
.smallblueletter,
.xsmallblueletter {
    white-space: nowrap;
}