/**
 * Bookly booking form fixes.
 *
 * Date-picker popup hidden behind the footer
 * ------------------------------------------
 * Betheme sets `#Content { position: relative; z-index: 0 }`, which makes it a
 * stacking context. `#Footer` is a later sibling inside `#Wrapper` with
 * `position: relative; z-index: auto`, so it paints *above* everything inside
 * `#Content` — no matter how high the z-index within `#Content` is.
 *
 * Bookly's date picker (`.bookly-js-datepicker-container`, z-index 10) drops
 * below the fold on step 1, so the footer clipped it.
 *
 * Lifting `#Content` above the footer fixes it. Scoped to pages that actually
 * render a Bookly form so the site-wide stacking order stays untouched.
 * Safe against the sticky header: `#Top_bar` sits at z-index 30 in the same
 * (`#Wrapper`) stacking context, so it still paints over the content.
 */
body:has(.bookly-form) #Content {
    z-index: 2;
}

/**
 * "Na voljo ni ustreznega termina?" CTA below the booking form.
 *
 * Markup comes from oktoved_booking_contact_cta() in functions.php and reuses
 * Betheme's own button classes, so the button follows the theme accent colour
 * and button style (solid/stroke) without restating either here.
 */
.oktoved-booking-cta {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(38, 70, 83, .12);   /* Primary Dark, faint */
    text-align: center;
}

.oktoved-booking-cta__text {
    margin-bottom: 15px;
    color: #264653;                                 /* Primary Dark */
    font-size: 18px;
}

/* Betheme centres via this wrapper; kill its default bottom margin so the
   CTA block's own spacing is the only thing in play. */
.oktoved-booking-cta .button_align {
    margin-bottom: 0;
}

/**
 * Select text running under the dropdown arrow
 * --------------------------------------------
 * Betheme replaces the native select arrow with its own: be.css sets
 * `-webkit-appearance: none` (line ~3858) and then
 * `select { padding-right: 25px; background: #fff url(<chevron svg>) no-repeat
 * right 5px top 55% }` (line ~5470) — the 25px is what keeps text clear of the
 * chevron it paints.
 *
 * Bookly's `.bookly-form select { padding: 5px 6px 4px !important }` is a
 * *shorthand*, so it wipes that reservation out while the chevron stays where
 * it is, leaving only 6px — hence "8:00" and "18:00" colliding with the arrow
 * on the "Od"/"Do" time range.
 *
 * Restore just the right padding. `body` prefix lifts specificity above
 * Bookly's own !important rule so this holds regardless of stylesheet order,
 * and the time-range selects are `width: auto`, so they simply grow to fit.
 */
body .bookly-form select {
    padding-right: 25px !important;
}

/**
 * Note under the terms checkbox on the details step.
 *
 * Bookly renders the step over AJAX from a plugin template with no hook after
 * the terms box, and template overrides aren't supported, so the note is
 * generated content on the step wrapper — the terms box is its last child,
 * so this lands right under the checkbox and above the Back/Next buttons.
 */
.bookly-form .bookly-details-step::after {
    content: "Plačilo se izvede po opravljeni storitvi. Če se termina ne morete udeležiti, vas prosimo, da ga odpoveste ali prestavite najmanj 24 ur prej.";
    display: block;
    padding: 0 20px 10px;
    color: #264653;                                 /* Primary Dark */
    font-size: 14px;
    line-height: 1.5;
}