/********************************************************************
/*
/* flixx - The Swiss TYPO3 agency
/* www.flixx.ch || hello@flixx.ch
/*
/* OR-X booking request form
/*
/* Palette and breakpoints mirror flixx_template_orx
/* ($color-green #009999, $color-green-light #80D7D2,
/*  $color-grey-light #B9B9B9, tablet 867px, mobile 576px).
/*
*********************************************************************/
.flixx_orxbookingrequest{
    padding-top: 40px;
}

.orx-booking {
    --orx-green: #009999;
    --orx-green-light: #80D7D2;
    --orx-green-lighter: #CCEFED;
    --orx-grey-light: #B9B9B9;
    --orx-grey-bg: #F6F6F6;
    --orx-white: #ffffff;
    --orx-error: #D90000;
    --orx-radius: 28px;

    color: var(--orx-green);
    font-size: 16px;
    line-height: 25px;
}

.orx-booking *,
.orx-booking *::before,
.orx-booking *::after {
    box-sizing: border-box;
}

/*
 * The component hides optional blocks with the `hidden` attribute. An author
 * `display` rule outranks the user agent's `[hidden] { display: none }`
 * regardless of specificity, so anything carrying a display of its own — the
 * legend, the calendar head, the counters — would stay visible. Restating the
 * rule at class level puts the attribute back in charge.
 */
.orx-booking [hidden] {
    display: none;
}

.orx-booking__title {
    font-size: 40px;
    line-height: 48px;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.orx-booking__intro {
    margin: 0 0 32px;
}

.orx-booking__subtitle {
    font-size: 22px;
    line-height: 29px;
    margin: 24px 0 16px;
}

/* ---------------------------------------------------------------- Layout */

.orx-booking__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

@media only screen and (max-width: 1236px) {
    .orx-booking__layout {
        grid-template-columns: 220px 1fr;
        gap: 24px;
    }
}

@media only screen and (max-width: 867px) {
    .orx-booking__layout {
        grid-template-columns: 1fr;
    }

    /* On small screens the accordion headers are the navigation. */
    .orx-booking__steps {
        display: none;
    }
}

/* ------------------------------------------------------------ Step nav */

.orx-booking__steps {
    position: sticky;
    top: 100px;
    /*
     * The site stylesheet sets `nav { margin: auto }` for the main navigation.
     * On a grid item auto margins absorb the free space of the row, which
     * centred this column vertically — it started roughly half the form's
     * height too low and only reached its sticky offset far down the page.
     * align-self is stated as well so the placement no longer depends on the
     * container's align-items.
     */
    margin: 0;
    align-self: start;
}

.orx-booking__steps ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.orx-booking__stepnav-button {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px 0;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.orx-booking__stepnav-number {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--orx-grey-light);
    color: var(--orx-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.orx-booking__stepnav--active .orx-booking__stepnav-number {
    background: var(--orx-green);
}

.orx-booking__stepnav--locked .orx-booking__stepnav-button {
    opacity: 0.45;
    cursor: not-allowed;
}

.orx-booking__stepnav-sub {
    display: block;
    font-size: 14px;
    color: var(--orx-grey-light);
}

/* -------------------------------------------------------------- Steps */

.orx-booking__step {
    background: var(--orx-white);
    border: 1px solid var(--orx-green-lighter);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.orx-booking__step-header {
    display: block;
    width: 100%;
    padding: 20px 48px 20px 24px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}

.orx-booking__step-header::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--orx-green);
    border-bottom: 2px solid var(--orx-green);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.orx-booking__step--open > .orx-booking__step-header::after {
    transform: rotate(-135deg);
    margin-top: -3px;
}

.orx-booking__step-title {
    display: block;
    font-size: 18px;
    text-transform: uppercase;
}

.orx-booking__step-subtitle {
    display: block;
    font-size: 14px;
    color: var(--orx-grey-light);
}

.orx-booking__step-body {
    display: none;
    padding: 0 24px 24px;
}

.orx-booking__step--open > .orx-booking__step-body {
    display: block;
}

.orx-booking__step--locked > .orx-booking__step-header {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ------------------------------------------------------------- Fields */

.orx-booking__field {
    margin-bottom: 20px;
}

.orx-booking__row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.orx-booking__row > .orx-booking__field,
.orx-booking__row > .orx-booking__fieldset {
    flex: 1 1 220px;
}

/*
 * The From/To pair repeats the grid of the two months underneath, so each
 * field sits exactly above the month it refers to. Kept in sync with
 * .orx-booking__calendar-months, including its breakpoint.
 */
.orx-booking__period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.orx-booking__period > .orx-booking__field {
    margin-bottom: 12px;
}

.orx-booking__period-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

@media only screen and (max-width: 867px) {
    .orx-booking__period {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.orx-booking__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.orx-booking__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--orx-green);
    border-radius: 50px;
    background: transparent;
    color: var(--orx-green);
    font: inherit;
}

.orx-booking__input:focus {
    outline: 2px solid var(--orx-green-light);
    outline-offset: 2px;
}

.orx-booking__input--textarea {
    border-radius: var(--orx-radius);
    min-height: 90px;
    resize: vertical;
}

/* Short free text: two lines are enough for BMI, age and the like. */
.orx-booking__input--textarea-small {
    min-height: 0;
    height: 72px;
}

.orx-booking__input[readonly] {
    background: var(--orx-grey-bg);
}

.orx-booking__hint {
    font-size: 14px;
    color: var(--orx-grey-light);
    margin: 4px 0 12px;
}

.orx-booking__fieldset {
    border: 0;
    margin: 0 0 24px;
    padding: 0;
}

.orx-booking__legend-title {
    display: block;
    padding: 0;
    margin-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
}

.orx-booking__error {
    display: block;
    margin-top: 6px;
    color: var(--orx-error);
    font-size: 14px;
}

.orx-booking__error--summary {
    margin-bottom: 20px;
}

.orx-booking__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.orx-booking__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------ Choices */

.orx-booking__choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
}

.orx-booking__choice--inline {
    display: inline-flex;
    margin-right: 20px;
}

.orx-booking__choice--bare {
    display: inline-flex;
    padding: 0;
}

.orx-booking__choice input {
    /* 13px box centred on a 25px line: (25 - 13) / 2 */
    margin-top: 6px;
    accent-color: var(--orx-green);
    flex: 0 0 auto;
}

.orx-booking__choice-label {
    display: block;
}

.orx-booking__choice-hint {
    display: block;
    font-size: 14px;
    color: var(--orx-grey-light);
}

.orx-booking__itemrow {
    padding: 6px 0;
    border-bottom: 1px solid var(--orx-grey-bg);
}

.orx-booking__itemrow:last-child {
    border-bottom: 0;
}

/* -------------------------------------------------------------- Pills */

.orx-booking__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.orx-booking__pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 24px;
    border: 1px solid var(--orx-green);
    border-radius: 50px;
    background: transparent;
    color: var(--orx-green);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.orx-booking__pill:hover {
    background: var(--orx-green-lighter);
}

.orx-booking__pill--active,
.orx-booking__pill--radio:has(input:checked) {
    background: var(--orx-green);
    color: var(--orx-white);
}

.orx-booking__pill--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/*
 * The last remaining room stays selected and fully legible — it simply has
 * nothing left to toggle, so it loses the hover affordance rather than being
 * greyed out like an unavailable option.
 */
.orx-booking__pill--locked {
    cursor: default;
}

.orx-booking__pill--locked:hover {
    background: var(--orx-green);
    color: var(--orx-white);
}

.orx-booking__itemrow--locked .orx-booking__choice {
    cursor: default;
}

.orx-booking__itemrow--locked .orx-booking__choice input {
    cursor: default;
}

.orx-booking__pill--radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.orx-booking__pill-time {
    font-size: 13px;
    opacity: 0.8;
}

/* ----------------------------------------------------------- Counters */

.orx-booking__counter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 0 8px 28px;
}

.orx-booking__counter-label {
    font-size: 14px;
    margin-right: 4px;
}

.orx-booking__counter-button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--orx-green);
    border-radius: 50%;
    background: transparent;
    color: var(--orx-green);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.orx-booking__counter-button:hover {
    background: var(--orx-green-lighter);
}

.orx-booking__counter-input {
    width: 64px;
    padding: 6px 8px;
    text-align: center;
    /* The native spin buttons take up the right third of the box and push the
       number off centre; the component has its own +/- buttons. */
    -moz-appearance: textfield;
    appearance: textfield;
    border: 1px solid var(--orx-green);
    border-radius: 50px;
    background: transparent;
    color: var(--orx-green);
    font: inherit;
}

.orx-booking__counter-input::-webkit-outer-spin-button,
.orx-booking__counter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* A counter that is a field of its own rather than the tail of a checkbox row. */
.orx-booking__counter--standalone {
    padding-left: 0;
}

.orx-booking__counter-max {
    font-size: 13px;
    color: var(--orx-grey-light);
}

.orx-booking__scope {
    padding: 4px 0 8px 28px;
}

/* ---------------------------------------------------------- Equipment */

/*
 * Each group is a native details element: collapsed by default so the long
 * list reads as a short table of contents, expanded on demand. The summary
 * carries a badge with the number of items ticked inside.
 */
.orx-booking__equipment {
    margin-bottom: 24px;
}

.orx-booking__equipment-group {
    border: 1px solid var(--orx-green-lighter);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 0 18px;
}

.orx-booking__equipment-group[open] {
    padding-bottom: 6px;
}

.orx-booking__equipment-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 28px 14px 0;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.orx-booking__equipment-title::-webkit-details-marker {
    display: none;
}

.orx-booking__equipment-title::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--orx-green);
    border-bottom: 2px solid var(--orx-green);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.orx-booking__equipment-group[open] > .orx-booking__equipment-title::after {
    transform: rotate(-135deg);
    margin-top: -2px;
}

/* Explicit display: the site hides every span inside a form (see the note
   near the end of this file). */
.orx-booking__equipment-name {
    display: inline;
}

.orx-booking__equipment-count {
    display: inline-block;
    min-width: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: var(--orx-green);
    color: var(--orx-white);
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
}

.orx-booking__equipment-count:empty {
    display: none;
}

/* Step 4: a chosen room, shown without its (hidden) checkbox. */
.orx-booking__itemrow--room {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 12px 0;
}

.orx-booking__room-title {
    font-size: 16px;
}

.orx-booking__itemrow--room .orx-booking__counter {
    padding-left: 0;
}

/* ----------------------------------------------------------- Calendar */

.orx-booking__calendar {
    margin: 16px 0;
}

.orx-booking__calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.orx-booking__calendar-titles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1 1 auto;
    text-align: center;
    text-transform: uppercase;
}

.orx-booking__calendar-nav {
    width: 36px;
    height: 36px;
    border: 1px solid var(--orx-green);
    border-radius: 50%;
    background: transparent;
    color: var(--orx-green);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.orx-booking__calendar-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/*
 * minmax(0, 1fr) rather than 1fr throughout the calendar: a plain 1fr track
 * resolves to minmax(auto, 1fr) and so refuses to shrink below the widest cell
 * it contains. With two digit day numbers landing in different columns from
 * month to month, that pushed the last weekday column out of view.
 */
.orx-booking__calendar-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.orx-booking__month {
    min-width: 0;
}

/* The per month caption only shows where the shared header does not fit. */
.orx-booking__month-caption {
    display: none;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.orx-booking__month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.orx-booking__weekday {
    text-align: center;
    font-size: 12px;
    color: var(--orx-grey-light);
    padding-bottom: 4px;
}

.orx-booking__day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--orx-grey-bg);
    color: var(--orx-green);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.orx-booking__day:hover:not(:disabled) {
    border-color: var(--orx-green);
}

.orx-booking__day--empty {
    background: none;
    cursor: default;
}

/* Out of the bookable window (past, or beyond 24 months): merely muted. */
.orx-booking__day--disabled {
    background: transparent;
    color: var(--orx-grey-light);
    cursor: not-allowed;
}

/*
 * Occupied: outlined, matching the legend, so it reads differently from both
 * a free day (filled circle) and a day outside the window (plain text). Any
 * occupancy — even half a day — blocks the whole day.
 */
.orx-booking__day--occupied {
    background: transparent;
    color: var(--orx-grey-light);
    border-color: var(--orx-grey-light);
    cursor: not-allowed;
}

.orx-booking__day--inrange {
    background: var(--orx-green-lighter);
    border-radius: 0;
}

.orx-booking__day--selected {
    background: var(--orx-green);
    color: var(--orx-white);
}

.orx-booking__calendar-empty {
    color: var(--orx-grey-light);
    font-size: 14px;
}

.orx-booking__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: var(--orx-grey-light);
    margin-bottom: 20px;
}

.orx-booking__legend-item::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: -1px;
    background: var(--orx-grey-bg);
}

.orx-booking__legend-item--occupied::before {
    background: transparent;
    border: 1px solid var(--orx-grey-light);
}

.orx-booking__legend-item--selected::before {
    background: var(--orx-green);
}

@media only screen and (max-width: 867px) {
    .orx-booking__calendar-months {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .orx-booking__calendar-titles {
        display: none;
    }

    .orx-booking__month-caption {
        display: block;
    }
}

/* --------------------------------------------------------- Info boxes */

.orx-booking__infoboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 24px 0;
}

@media only screen and (max-width: 867px) {
    .orx-booking__infoboxes {
        grid-template-columns: 1fr;
    }
}

.orx-booking__infobox {
    background: var(--orx-grey-bg);
    border-radius: 12px;
    padding: 20px;
    font-size: 14px;
    line-height: 22px;
}

.orx-booking__infobox p {
    margin: 0 0 8px;
}

.orx-booking__infobox-title {
    font-weight: bold;
    text-transform: uppercase;
}

.orx-booking__capacity {
    list-style: none;
    margin: 0;
    padding: 0;
}

.orx-booking__capacity li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
}

.orx-booking__capacity-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.orx-booking__capacity-room {
    min-width: 90px;
}

.orx-booking__capacity-max {
    margin-left: auto;
    color: var(--orx-grey-light);
}

/* ------------------------------------------------------------- Tables */

.orx-booking__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.orx-booking__table th,
.orx-booking__table td {
    text-align: left;
    padding: 10px 12px;
    /* Reset the site's all-round cell border before drawing a single rule. */
    border: 0;
    border-bottom: 1px solid var(--orx-green-lighter);
}

.orx-booking__table th {
    font-size: 14px;
    text-transform: uppercase;
    border-bottom-color: var(--orx-green);
}

.orx-booking__table th:not(:first-child),
.orx-booking__table td:not(:first-child) {
    width: 80px;
    text-align: center;
}

/* ------------------------------------------------------------- Review */

.orx-booking__review-group {
    border-bottom: 1px solid var(--orx-grey-bg);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.orx-booking__review-title {
    font-size: 16px;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.orx-booking__review-list {
    display: grid;
    grid-template-columns: minmax(140px, 240px) 1fr;
    gap: 4px 20px;
    margin: 0;
}

.orx-booking__review-list dt {
    color: var(--orx-grey-light);
}

.orx-booking__review-list dd {
    margin: 0;
}

@media only screen and (max-width: 576px) {
    .orx-booking__review-list {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .orx-booking__review-list dd {
        margin-bottom: 8px;
    }
}

.orx-booking__review-edit {
    margin-top: 10px;
}

/* ------------------------------------------------------------ Actions */

.orx-booking__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.orx-booking__button {
    padding: 14px 32px;
    border: 1px solid var(--orx-green);
    border-radius: 50px;
    background: var(--orx-green);
    color: var(--orx-white);
    font: inherit;
    cursor: pointer;
}

.orx-booking__button:hover:not(:disabled) {
    background: var(--orx-white);
    color: var(--orx-green);
}

.orx-booking__button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.orx-booking__button--ghost {
    background: transparent;
    color: var(--orx-green);
}

.orx-booking__link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--orx-green);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ------------------------------------------------------------ Success */

.orx-booking__success {
    background: var(--orx-grey-bg);
    border-radius: 12px;
    padding: 40px;
}

.orx-booking__notice {
    font-size: 14px;
    color: var(--orx-grey-light);
}

/* ------------------------------------------ Global form reset overrides */

/*
 * The site stylesheet hides every label and span inside a form:
 *
 *     form label { display: none; }
 *     form span  { display: none; }
 *
 * (flixx_template_orx, private/css/flixx/_form.scss)
 *
 * A class selector outranks those element selectors, so each label and span
 * of this component has to state its own display — otherwise it renders as an
 * empty box. The declarations are collected here rather than scattered so the
 * reason stays visible; anything added to the markup later needs an entry too.
 */
.orx-booking__pill-label,
.orx-booking__pill-time,
.orx-booking__stepnav-label,
.orx-booking__stepnav-title,
.orx-booking__capacity-desc,
.orx-booking__calendar-title,
.orx-booking__weekday {
    display: block;
}

.orx-booking__counter-label,
.orx-booking__counter-max,
.orx-booking__capacity-room,
.orx-booking__capacity-max,
.orx-booking__capacity-dot,
.orx-booking__sr-only {
    display: inline-block;
}

/*
 * The same site rule also gives every span inside a form `margin-top: 8px`,
 * which pushed the label text below its checkbox. Reset it for the component's
 * text spans; the error message keeps its own margin on purpose.
 */
.orx-booking__choice-label,
.orx-booking__choice-hint,
.orx-booking__pill-label,
.orx-booking__pill-time,
.orx-booking__stepnav-label,
.orx-booking__stepnav-title,
.orx-booking__stepnav-sub,
.orx-booking__step-title,
.orx-booking__step-subtitle,
.orx-booking__counter-max,
.orx-booking__capacity-room,
.orx-booking__capacity-desc,
.orx-booking__capacity-max,
.orx-booking__legend-item,
.orx-booking__calendar-title,
.orx-booking__weekday,
.orx-booking__equipment-name,
.orx-booking__equipment-count,
.orx-booking__room-title {
    margin-top: 0;
}

.orx-booking__legend-item {
    display: inline-flex;
    align-items: center;
}

/*
 * The same stylesheet styles every form input as a wide rounded text field:
 *
 *     form input { width: calc(100% - 32px); padding: 16px;
 *                  border: 1px solid …; border-radius: 50px; }
 *
 * That is meant for text fields and turns checkboxes and radios into large
 * pills, so they are reset to their native box here.
 */
.orx-booking input[type="checkbox"],
.orx-booking input[type="radio"] {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}