/*
 * Shared booking form layout (reserv) -- central defaults for all clients.
 * Loaded from default/hostel.css or via @import in client hostel.css.
 * Client-specific overrides: place later rules in that client's hostel.css (same specificity or higher).
 * reserve_cal.php calendar: .font_*, table.calendar, div.calendarcell (global) + .book_form px sizes below.
 * Calendar #tooltip/#fixedtip: high z-index in each client hostel.css; narrow viewport bump also in this file.
 * #numNightsRefresh (LANG_CHECK_AGAIN): min-width rule near end of this file.
 *
 * Vertical rhythm (field rows + Step 3 controls), target ~10px between row baselines:
 *   row gap  = td padding-top (5px) + td padding-bottom (5px) = 10px between adjacent rows
 *   captions = margin/padding on .form_caption inside #fielddata reset to 0 (hostel.css adds 8px)
 *   inputs   = own padding inside the control (5px top + 5px bottom) for touch; row gap stays on td
 *
 * Full-width on phones/tablets/narrow windows:
 * - Requires width=device-width in HTML viewport meta on mobile (else Android uses ~980px layout width).
 * - max-width: 1024px: narrow landscape windows (desktop devtools resize).
 * - max-width: 100vmin: portrait or square *viewport* (width <= height). Unlike orientation:portrait,
 *   this follows the browser window, so a tall narrow desktop window matches phone layout.
 * Do not use orientation:portrait here -- on desktop OS it often tracks the monitor, not the window.
 * Use max-width: 100% (not 100vw) where possible -- 100vw can overflow on Android (scrollbar).
 *
 * Narrow viewports: intro uses very light gray (#f2f4f6) plus fading top/bottom hairlines (multi-layer
 * background -- not ::before on td, which browsers often skip). Card blocks use
 * div.rateblock-style chrome (1px #dddddd border + light shadow + #f8f8f8). Messages (li.form_msg /
 * li.form_error): same box-shadow only; border/bg from hostel.css. Step 0: #fielddata width matches
 * table.calendar (75%). Step 3: #fielddata card matches prior steps; birthday label/select tweaks inside
 * the mobile block; read-only summary rows: td * use font-size initial !important (not inherit) so labels/values
 * match -- inherit/1em still chained competing em rules from hostel.css after @import and nested .form_caption/ids.
 * Arrival date selects #book_form_ar_d / #book_form_ar_m: margin-right 5px (gap between day/month/year).
 *
 * Calendar (reserve_cal.php -> table.calendar): .font_* and table.calendar base live here (single source;
 * default/hostel.css no longer duplicates them). .book_form scoped px sizes override tiny client html roots.
 */

/*
 * reserve_cal.php: weekday/day number colors and calendar chrome (global classes; same markup on all clients).
 */
.font_red  { color: #ff0000; font-size: 0.9em; text-align: center; }
.font_d_red  { color: #aa0000; font-size: 0.9em; text-align: center; }
.font_grey  { color: #cccccc; font-size: 0.9em; text-align: center; }
.font_pink { color: #aa8888; font-size: 0.9em; text-align: center; }
.font_black { color: #000000; font-size: 0.9em; text-align: center; }

table.calendar {
    margin: 15px;
    border: 5px solid white;
    outline: 1px solid #aaaaaa;
    background-color: white;
    vertical-align: center;
}
table.calendar td.calendarcell {
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
}
table.calendar img {
    vertical-align: middle;
    margin: 0 5px 0 5px;
}
div.calendarcell {
    padding: 2px;
    margin: 1px 3px 1px 3px;
    text-align: center;
    line-height: 1.2em;
    color: #666666;
    background-color: transparent;
    cursor: pointer;
}
@media (max-device-width: 600px) and (min-resolution: 120dpi) {
    div.calendarcell {
        padding: 2px;
        margin: 1px 7px 1px 7px;
        text-align: center;
        font-size: 1.6em;
        line-height: 1.8em;
        color: #666666;
        background-color: transparent;
        cursor: pointer;
    }
}

/* Booking shell only: legible day digits vs 8pt client skins (hog, sin, test). */
.book_form table.calendar div.calendarcell {
    font-size: 14px;
    line-height: 1.5;
}
.book_form table.calendar .font_red,
.book_form table.calendar .font_d_red,
.book_form table.calendar .font_grey,
.book_form table.calendar .font_pink,
.book_form table.calendar .font_black {
    font-size: 13px;
}

/*
 * #fielddata (ar, dauer, ) and #bookdata (rooms) must share the same table font-size.
 * In hostel.css #bookdata is 1.2em but #fielddata was 1em; selects use em, so date/duration looked ~20% smaller.
 */
.book_form table#fielddata {
    /* setting is important for step0 inputs dont change to adjust other step inputs, create separate rule instead */
    font-size: 1.4em;
    _width: 100% !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
}

/* Date/duration selects (class bv_input_select from request.class.php); width without this follows option text and overflows narrow cells. */
.book_form #fielddata select.bv_input_select {
    width: 7em;
    max-width: 100%;
    box-sizing: border-box;
}

/* #fielddata rows: 10px vertical rhythm via td only (see file header). */
.book_form #fielddata tr.default_tpl_fields td.field-label-cell,
.book_form #fielddata tr.default_tpl_fields td.field-value-cell,
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field td.field-control-cell {
    padding-top: 0px !important;
    padding-bottom: 5px !important;
}
.book_form #fielddata tr.default_tpl_fields td.field-label-cell .form_caption,
.book_form #fielddata tr.default_tpl_fields td.field-value-cell .form_caption,
.book_form #fielddata tr.default_tpl_fields td.field-value-cell .form_form_bookvar.form_caption,
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field td.field-control-cell .form_form_bookvar.form_caption {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    /* Strip hostel .form_caption 8px 10px on all viewports (dauer add_2 used two blocks; double padding looked larger). */
    padding: 0 !important;
}

/* Step 3: colspan=5 control rows; table-layout fixed is on .book_form table#fielddata for all steps. */

/* Unified helper/small text in booking flow: legacy <span class="s"> and <small>. */
.book_form span.s,
.book_form small {
    font-size: 0.8em !important;
    color: #666666 !important;
}

@media (max-device-width: 600px) and (min-resolution: 120dpi) {
    .book_form table#fielddata {
        font-size: 1em;
    }
}

@media (max-width: 768px), (orientation: portrait) and (max-width: 1200px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        font-size: 120%;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Standalone shells (e.g. sun) use fixed px widths on #content / #wrapper */
    div#wrapper,
    div#content,
    #book_form_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
    }

    div#top_bg,
    #mainContent {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
    }

    .book_form {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .book_form table {
        _width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #rooms_data,
    #fielddata,
    .tr_block table {
        min-width: 0 !important;
    }

    #mainContent img,
    #mainContent svg,
    #book_form_wrapper img,
    .book_form img {
        max-width: 100%;
        height: auto;
    }

    #mainContent input[type="text"],
    #mainContent input[type="email"],
    #mainContent input[type="tel"],
    #mainContent select,
    #mainContent textarea,
    .book_form input[type="text"],
    .book_form input[type="email"],
    .book_form select,
    .book_form textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Narrow viewports: one column, visually centered (fixes mixed left/center/right from margins + td align).
     * Use ONLY direct children of #book_form_head -- nested table.calendar rows must stay table-row/table-cell. */
    table#book_form_head {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #book_form_head > tbody {
        display: block;
        width: 100%;
    }
    #book_form_head > tbody > tr {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0 auto;
    }
    #book_form_head > tbody > tr > td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Base calendar sizing in narrow mode; step-0 below pins exact width to table#fielddata. */
    table.calendar {
        display: table !important;
        width: 75% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 8px auto !important;
        border-collapse: separate;
        table-layout: fixed !important;
    }
    table.calendar tbody {
        display: table-row-group !important;
    }
    table.calendar tr {
        display: table-row !important;
    }
    table.calendar td,
    table.calendar th {
        display: table-cell !important;
    }

    #calendar_container {
        text-align: center !important;
        padding: 10px 12px !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* All steps: intro as solid card container (no transparent gaps in sticky/no-scroll area).
     * Text is wrapped in request_form.html: #intro_txt_container > .intro_txt_content for positioning. */
    .book_form #intro_txt_container {
        text-align: center !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box;
        border: none;
        box-shadow: none;
        background-color: #f8f8f8;
    }
    .book_form #intro_txt_container .intro_txt_content {
        text-align: center !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        background-color: #f8f8f8;
    }

    .book_form.booking-step-0 #intro_txt_container {
        _width: 75% !important;
        max-width: 100% !important;
    }

    .book_form.booking-step-1 #intro_txt_container,
    .book_form.booking-step-2 #intro_txt_container,
    .book_form.booking-step-3 #intro_txt_container,
    .book_form.booking-step-4 #intro_txt_container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Narrow: slightly larger than base px (touch / short viewports). */
    .book_form table.calendar div.calendarcell {
        font-size: 16px;
        line-height: 2em;
    }

    .book_form table.calendar tr:first-child td {
        font-size: 16px;
        line-height: 2em;
    }
    .book_form table.calendar tr:first-child select {
        font-size: 14px;
    }
    .book_form table.calendar tr:nth-child(2) td {
        font-size: 16px;
        line-height: 2em;
    }
    .book_form table.calendar tr:nth-child(2) td .font_black,
    .book_form table.calendar tr:nth-child(2) td .font_d_red {
        font-size: 13px;
    }

    #fielddata th {
        text-align: center;
    }

/* Keep labels and controls in the same vertical alignment within field rows. */
#fielddata td {
    vertical-align: middle;
}

    /* Default captions outside #fielddata (messages, calendar hints, etc.) */
    .book_form .form_caption {
        padding: 5px 10px 5px 0px !important;
        text-align: inherit;
        margin-bottom: 5px;
    }
    /* #fielddata rows: rhythm only on td (see header); strip hostel/extra caption padding here */
    .book_form #fielddata tr.default_tpl_fields .form_caption {
        padding: 0 !important;
        margin-bottom: 5px !important;
    }

    /* Calendar tooltips: above #dont_scroll (z-index 255) and message list chrome on all clients. */
    #tooltip {
        z-index: 99999 !important;
    }
    #fixedtip {
        z-index: 100000 !important;
    }

    #dont_scroll {
        text-align: center !important;
        max-width: 100% !important;
    }

    /* Equal horizontal inset; +25% text vs base (desktop portrait matched to phone). */
    #dont_scroll_content {
        text-align: center !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 105% !important;
        /* Block margin-collapse: ul.form_msg_list margin-top was collapsing through #scroll_info */
        display: flow-root !important;
    }

    ul.form_msg_list {
        margin: 13px auto 8px auto !important;
        padding: 0 !important;
        list-style: none !important;
        text-align: center !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .book_form.booking-step-0 ul.form_msg_list {
        width: 75% !important;
        max-width: 100% !important;
    }

    .book_form.booking-step-1 ul.form_msg_list,
    .book_form.booking-step-2 ul.form_msg_list,
    .book_form.booking-step-3 ul.form_msg_list,
    .book_form.booking-step-4 ul.form_msg_list {
        width: 100% !important;
    }

    /* Same shadow as rateblock / room cards; border + background stay from hostel.css */
    ul.form_msg_list li.form_msg,
    ul.form_msg_list li.form_error {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    ul.form_msg_list li,
    li.form_msg,
    li.form_error {
        margin: 8px auto !important;
        text-align: center !important;
    }
    .form_error {
        margin: 10px auto !important;
        text-align: center !important;
    }

    .price_info_cont {
        text-align: center !important;
    }

    #bookdata,
    #bookdata td {
        text-align: center !important;
    }

    /*
     * Step 0: calendar + date/duration table must have identical content width.
     */
    .book_form.booking-step-0 table.calendar {
        width: 75% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /*
     * Booking step 1: match div.rateblock (hostel.css) for date/duration table, room rows.
     */
    .book_form.booking-step-1 table#fielddata {
        border: 1px solid #dddddd;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        background-color: #f8f8f8;
        border-collapse: separate;
        border-spacing: 0;
        box-sizing: border-box;
        padding: 8px 10px;
    }

    /* No vertical border-spacing: head + detail must sit flush (one block when expanded).
     * Space between room groups: padding-top on each head after the first (see below). */
    .book_form.booking-step-1 #bookdata {
        border-collapse: separate;
        border-spacing: 0;
    }

    .book_form.booking-step-1 #bookdata tr.form_row_head ~ tr.form_row_head td {
        padding-top: 12px;
    }

    /* Outer frame only: no vertical dividers between cells in the same row. */
    .book_form.booking-step-1 #bookdata tr.form_row_head td {
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        background-color: #f8f8f8;
    }

    .book_form.booking-step-1 #bookdata tr.form_row_head td:first-child {
        border-left: 1px solid #dddddd;
    }

    .book_form.booking-step-1 #bookdata tr.form_row_head td:last-child {
        border-right: 1px solid #dddddd;
    }

    .book_form.booking-step-1 #bookdata tr.form_row_head {
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    }

    /*
     * Detail row visible (toggle clears display:none on inline style): merge with head into one card.
     * When still display:none, :has() below is false so head keeps full border + shadow.
     */
    .book_form.booking-step-1 #bookdata tr.form_row_head:has(+ tr.form_row_content:not([style*="display:none"]):not([style*="display: none"])) td {
        border-bottom: none;
    }

    .book_form.booking-step-1 #bookdata tr.form_row_head:has(+ tr.form_row_content:not([style*="display:none"]):not([style*="display: none"])) {
        box-shadow: none;
    }

    .book_form.booking-step-1 #bookdata tr.form_row_head + tr.form_row_content:not([style*="display:none"]):not([style*="display: none"]) td {
        border: 1px solid #dddddd;
        border-top: none;
        background-color: #f8f8f8;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }

    /* Detail row collapsed or unmerged fallback: keep distinct block if rule above does not apply. */
    .book_form.booking-step-1 #bookdata tr.form_row_content td {
        border: 1px solid #dddddd;
        background-color: #fafafa;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }

    /*
     * Step 3: #fielddata card matches step 1 field table; drop per-cell blue tint on narrow.
     */
    .book_form.booking-step-3 table#fielddata {
        border: 1px solid #dddddd;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
        background-color: #f8f8f8;
        border-collapse: separate;
        border-spacing: 0;
        box-sizing: border-box;
        padding: 8px 10px;
    }

    .book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field .field-control-cell {
        background: transparent !important;
    }

    /* Step 0/1 Change / submit: real phone uses max-device-width input rules; scale ~+25% here. */
    .book_form input.submit,
    .book_form button.submit,
    .book_form a.submit,
    .book_form div.submit {
        font-size: 1em !important;
        padding: 0.5em 0.6em !important;
        margin: 0.6em !important;
    }

    /* Mobile: control chrome 5px+5px inside the field; row spacing stays on td (10px total). */
    .book_form input[type="text"],
    .book_form input[type="email"],
    .book_form input[type="tel"],
    .book_form select,
    .book_form textarea {
        line-height: 1.25 !important;
        min-height: 0;
        padding: 5px 10px !important;
        margin: 0 !important;
    }
}

/*
 * Step 1 room rows: apply card chrome on all viewports (desktop + mobile),
 * not only in the narrow media block.
 */
.book_form.booking-step-1 #bookdata {
    border-collapse: separate;
    border-spacing: 0;
}

.book_form.booking-step-1 #bookdata tr.form_row_head ~ tr.form_row_head td {
    padding-top: 12px;
}

.book_form.booking-step-1 #bookdata tr.form_row_head td {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background-color: #f8f8f8;
}

.book_form.booking-step-1 #bookdata tr.form_row_head td:first-child {
    border-left: 1px solid #dddddd;
}

.book_form.booking-step-1 #bookdata tr.form_row_head td:last-child {
    border-right: 1px solid #dddddd;
}

.book_form.booking-step-1 #bookdata tr.form_row_head {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.book_form.booking-step-1 #bookdata tr.form_row_head:has(+ tr.form_row_content:not([style*="display:none"]):not([style*="display: none"])) td {
    border-bottom: none;
}

.book_form.booking-step-1 #bookdata tr.form_row_head:has(+ tr.form_row_content:not([style*="display:none"]):not([style*="display: none"])) {
    box-shadow: none;
}

.book_form.booking-step-1 #bookdata tr.form_row_head + tr.form_row_content:not([style*="display:none"]):not([style*="display: none"]) td {
    border: 1px solid #dddddd;
    border-top: none;
    background-color: #f8f8f8;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

.book_form.booking-step-1 #bookdata tr.form_row_content td {
    border: 1px solid #dddddd;
    background-color: #fafafa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
}

/* Refresh prices/availability: long LANG_CHECK_AGAIN label (request.class.php #numNightsRefresh). */
.book_form input#numNightsRefresh.submit,
.book_form div#numNightsRefresh.submit {
    min-width: min(100%, 24rem);
    max-width: 100%;
    box-sizing: border-box;
}

/*
 * Step 2 extras: single card on #extra_products_section (request_form.html). Inner .extra-products-section
 * (extra_products.html inline style) is reset so it does not stack a second border (see booking_layout).
 */
.book_form.booking-step-2 #extra_products_section {
    border: 1px solid #dddddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    background-color: #f8f8f8;
    box-sizing: border-box;
    padding: 8px 10px;
}

.book_form.booking-step-2 #extra_products_section .extra-products-section {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/*
 * dont_scroll sticky bar: JS sets .dont_scroll_fixed when scrollY >= scrollmax
 * (scrollmax = #book_form_head height + #fielddata height + 10px; see book/remote/js/scripts.js).
 * Bottom shadow only while fixed (separates bar from #bookdata below).
 */
.dont_scroll_fixed {
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
}

/*
 * Step 2 (extras): hide calendar column. PHP sets CALENDAR_ID to calendar_container_hidden (request.class.php);
 * .booking-step-2 covers stale DOM / AJAX where id is still #calendar_container.
 */
#calendar_container_hidden,
.booking-step-2 #calendar_container {
    display: none !important;
}

/*
 * Dauer row: hostel.css uses float + uneven padding on #DepartureInfo / #dateOfDeparture.
 * Unify nights + departure fragments (request.class.php add_2: span#DepartureInfo, span#dateOfDeparture) on one line/baseline.
 * font-size: initial (not inherit) avoids em stacking vs other #fielddata rows and id/caption rules.
 */
.book_form #fielddata tr.field-row-dauer td.dauer-value-cell {
    display: table-cell !important;
    white-space: nowrap;
    text-align: center !important;
}

.book_form #fielddata tr.field-row-dauer td.dauer-value-cell .form_form_bookvar,
.book_form #fielddata tr.field-row-dauer td.dauer-value-cell #DepartureInfo,
.book_form #fielddata tr.field-row-dauer td.dauer-value-cell #dateOfDeparture {
    display: inline-block;
    float: none !important;
    vertical-align: middle;
    padding: 0 3px;
    margin: 0;
    /* initial: same unified approach as step3-prev td * (inherit/1em still diverged across fragments). */
    font-size: initial;
    line-height: 1.35;
    font-weight: normal;
    color: #000000;
    border: 0 none;
    box-sizing: border-box;
}

.book_form #fielddata tr.field-row-dauer #book_form_bookvarsdauer_errorloc {
    display: inline-block;
    float: none !important;
    vertical-align: middle;
}

.book_form #fielddata tr.field-row-dauer #book_form_bookvarsdauer_errorloc:empty {
    display: none;
}

/* Step 3 form controls: one-column layout rendered directly by fields.html (no JS DOM rewrite). */
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field .field-control-cell {
    width: 100%;
    box-sizing: border-box;
    text-align: center !important;
    vertical-align: top;
    background: transparent;
}
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field .form_form_bookvar {
    float: none !important;
    display: block !important;
    padding-top: 0 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field input[type="text"],
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field input[type="email"],
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field input[type="tel"],
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field textarea,
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field select {
    width: 90% !important;
    max-width: 90% !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    font-size: 0.9em !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 5px 10px !important;
}
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field input::placeholder,
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field textarea::placeholder {
    font-size: 0.9em;
}
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field .field-select-label {
    display: none;
}

/* Exception: birthday keeps its label above and 3 selects in one row. */
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field.step3-birthday .field-select-label {
    display: block;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 10px;
    /* initial: avoid em chain from hidden sibling .field-select-label rules / step-3 controls */
    font-size: initial;
    color: #000000;
    text-align: center;
}
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field.step3-birthday select {
    width: 27% !important;
    max-width: 27% !important;
    display: inline-block !important;
    margin: 0 0.833% !important;
    vertical-align: top;
}
/* Fallback: if birthday row class is missing, still detect birth_date selects. */
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field .form_form_bookvar select[id^="book_form_birth_date_"],
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field .form_form_bookvar select[name^="bookvars[birth_date]"] {
    width: 27% !important;
    max-width: 27% !important;
    display: inline-block !important;
    margin: 0 0.833% !important;
    vertical-align: top;
}

/* Message textarea: white field on gray card */
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-field textarea[name="bookvars[msg]"] {
    background-color: #ffffff !important;
}

/* Step 3: read-only step 0/1 rows match table fill; one thin divider before step-3 inputs. */
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-prev-field td {
    background-color: transparent;
    border: none;
    box-shadow: none;
    /* Lock base size vs table#fielddata (1.4em); !important beats later hostel.css on same element. */
    font-size: 1em !important;
    line-height: 1.35;
}

/*
 * Summary row text: font-size initial !important on descendants. inherit did not give one stable size -- it still
 * followed parent computed sizes and later hostel.css (.form_caption, #DepartureInfo, ids) after @import. initial
 * uses the property's initial value (medium) per element, breaking that chain so arrival/dauer fragments align.
 */
.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-prev-field td * {
    font-size: initial !important;
    line-height: 1.35 !important;
}

.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-prev-field .field-separator {
    margin-left: 10px;
    margin-right: 10px;
}

.book_form.booking-step-3 #fielddata tr.default_tpl_fields.step3-prev-field + tr.default_tpl_fields.step3-current-field td {
    border-top: 1px solid #cccccc;
    padding-top: 10px !important;
}

/* Step 3: hide inline room-info tooltip icon (onmouseover ddrivetip) to prevent layout shifts. */
.book_form.booking-step-3 #fielddata .room_info {
    display: none !important;
}

/* Step 0/1: keep classic two-column alignment (labels right, values not centered). */
.book_form #fielddata tr.default_tpl_fields td.field-label-cell {
    text-align: right !important;
}
.book_form #fielddata tr.default_tpl_fields > td.field-label-cell.form_caption {
    text-align: right !important;
    vertical-align: middle;
}
.book_form #fielddata tr.default_tpl_fields td.field-label-cell.form_caption {
    text-align: right !important;
}
.book_form #fielddata tr.default_tpl_fields td.field-label-cell .form_caption {
    text-align: right !important;
}
.book_form #fielddata tr.default_tpl_fields > td.field-label-cell.form_caption * {
    text-align: right !important;
}
.book_form #fielddata tr.default_tpl_fields td.field-label-cell .field-label-text {
    display: inline-block;
    position: relative;
    top: 2px;
}
.book_form #fielddata tr.default_tpl_fields td.field-label-cell .field-separator {
    display: inline-block;
    margin-left: 4px;
    position: relative;
    top: 2px;
}
.book_form #fielddata tr.default_tpl_fields td.field-value-cell {
    text-align: left !important;
}
.book_form #fielddata tr.default_tpl_fields:not(.field-row-dauer) td.field-value-cell .form_form_bookvar {
    text-align: left !important;
    float: none !important;
    display: block !important;
}
.book_form #fielddata tr.default_tpl_fields:not(.field-row-dauer) td.field-value-cell .form_form_bookvar select {
    display: inline-block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Arrival date: three selects (book_form_ar_d/m/y in request.class.php / fields.html) -- 5px gaps */
.book_form #fielddata tr.default_tpl_fields:not(.field-row-dauer) td.field-value-cell .form_form_bookvar select#book_form_ar_d,
.book_form #fielddata tr.default_tpl_fields:not(.field-row-dauer) td.field-value-cell .form_form_bookvar select#book_form_ar_m {
    margin-right: 5px !important;
}
.book_form #fielddata tr.default_tpl_fields:not(.field-row-dauer) td.field-value-cell .form_form_bookvar input,
.book_form #fielddata tr.default_tpl_fields:not(.field-row-dauer) td.field-value-cell .form_form_bookvar textarea {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/*
 * Persons-per-room UI in #dont_scroll_content (TOTAL_AND_AZ): #persons-info-row, #persons-edit-panel.
 * Spacer height replaces margin-bottom on the info row; panel top border is suppressed when stacked under
 * the info row to avoid a double line next to the info row bottom border.
 */
#persons-info-row {
    margin-bottom: 0 !important;
    padding-bottom: 5px;
    border-bottom: 1px solid #d3d3d3;
    box-sizing: border-box;
}

#persons-info-row + #persons-edit-panel,
#persons-info-row + .spacer + #persons-edit-panel {
    border-top: 0 !important;
}

/*
 * Do NOT use display:flex !important on #persons-edit-panel alone -- it overrides JS inline
 * display:none (toggle stays open; click on Adjust fights the stylesheet).
 * Apply flex only when the panel is not hidden.
 */
#persons-edit-panel {
    box-sizing: border-box !important;
    max-width: 100% !important;
    font-size: 0.8em;
    line-height: 1.35;
}

#persons-edit-panel:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    justify-content: flex-start;
}

#persons-edit-panel label {
    white-space: normal !important;
    margin-bottom: 4px;
}

#persons-info-row + .spacer,
#persons-edit-panel + .spacer {
    clear: both;
    height: 5px;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

/*
 * Bill page: bg_plain wrapper table around the payment-selection block.
 * German labels (e.g. "Zahlungsweise ausw?hlen") are longer than English and previously
 * pushed the table past the .book_form column on narrow viewports. Cap + center so the
 * payment block stays visually aligned with the bill table above it.
 */
table.bg_plain {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Bill page: prepayment amount radios (request.class.php fn_create_select_payment_radios).
 * Not always inside table.book_form (some bill.html use bg_plain only) -- scope by .payment-selection.
 * Tokens match #guest-checkin in guest_checkin/css/main.css.
 */
.payment-selection {
    --choice-border: #dddddd;
    --choice-bg: rgba(255, 255, 255, 0.92);
    --choice-bg-hover: rgba(249, 249, 249, 0.92);
    --choice-bg-selected: rgba(232, 245, 233, 0.85);
    --choice-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --choice-shadow-selected: 0 2px 5px rgba(0, 0, 0, 0.08);
    margin: 20px 0;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--choice-border);
    background: var(--choice-bg);
    box-shadow: var(--choice-shadow);
    box-sizing: border-box;
}

.payment-option {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 6px;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--choice-border, #dddddd);
    background: var(--choice-bg, rgba(255, 255, 255, 0.92));
    box-sizing: border-box;
}

.payment-option:last-child {
    margin-bottom: 0;
}

.payment-option-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    margin: 0;
}

.payment-option-radio {
    margin-right: 10px;
    margin-top: 3px;
    flex-shrink: 0;
}

.payment-option--selected {
    background: var(--choice-bg-selected, rgba(232, 245, 233, 0.85));
    border-color: var(--choice-border, #dddddd);
    box-shadow: var(--choice-shadow-selected, 0 2px 5px rgba(0, 0, 0, 0.08));
}

.payment-option:not(.payment-option--selected):hover {
    background: var(--choice-bg-hover, rgba(249, 249, 249, 0.92));
}

.payment-option:focus-within {
    outline: 2px solid #cccccc;
    outline-offset: 2px;
}

/*
 * Calendar Loading Spinner: shared styles for all clients.
 * Spinner shows "Loading calendar + rates for you..." during calendar operations.
 * Defined in scripts.js window.showCalendarSpinner() / window.hideCalendarSpinner().
 */
#calendar_loading_spinner {
    display: none;
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 8px;
    margin: 10px 0;
}

#calendar_loading_spinner .spinner-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top-color: #4CAF50;
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
    margin-right: 12px;
    vertical-align: middle;
}

#calendar_loading_spinner .spinner-text {
    color: #666;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}