/*
 * Turkey Module v2 – front-end styles for the Fluent Forms order form.
 *
 * The order form carries its own Form Styler CSS and Custom CSS (product
 * cards, section headers, labels, inputs, Next/Previous buttons, step
 * header). This sheet therefore does two things only:
 *   1. styles what the plugin adds: the quantity minus/plus control, the
 *      time-slot tiles with their remaining counts, the inline calendar,
 *      the "Next" gate note and the product image viewer;
 *   2. provides low-specificity fallbacks that repeat the live form's own
 *      values, so a form without that CSS still looks the same.
 *
 * Scope: every rule is limited to the configured order form. The plugin adds
 * the class "rom-order-form" to that form's wrapper div (the same div as
 * ".fluentform"), so other Fluent Forms and pages are never restyled.
 * ".rom-order-form" keeps the specificity the former ".fluentform" prefix
 * had; rules that had no prefix use ":where(.rom-order-form)", which adds
 * none, so the cascade (and the look of the form) is unchanged.
 *
 * Palette (from the live form): #ab002c primary, #e03127 buttons/accents,
 * #ea5d5d quantity minus/plus, #f6f6f6 product card, #ffedf2 dine-in card.
 */

.rom-order-form {
    --rom-red: #ab002c;
    --rom-accent: #e03127;
    --rom-qty: #ea5d5d;
    --rom-card: #f6f6f6;
    --rom-pink: #ffedf2;
    --rom-grey: #878787;
    --rom-green: #008000;
    --rom-border: rgba(0, 0, 0, 0.2);
    --rom-font-body: "cq-myriadpro-regular", "Myriad Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --rom-font-display: "cq-belleroselight", "Trebuchet MS", Helvetica, Arial, sans-serif;
}

/* ======================================================================
 * 1. Fallbacks – same values as the form's Styler / Custom CSS, no !important
 * ====================================================================== */

/* The site body font; the form's custom CSS forces it on every field group. */
.rom-order-form {
    font-family: var(--rom-font-body);
}

/* Section headers written into the form ("Turkey selection", "Sides selection") */
.rom-order-form .first-line {
    font-family: var(--rom-font-display);
    font-size: 25px;
    padding: 5px 0;
}

.rom-order-form .second-line {
    font-family: var(--rom-font-body);
    font-size: 16px;
    padding: 5px 0;
}

/* Labels: 16px bold black, red asterisk */
.rom-order-form .ff-el-input--label label {
    color: #000;
    font-size: 16px;
    font-weight: 700;
}

.rom-order-form .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.rom-order-form .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
    color: var(--rom-accent);
}

.rom-order-form .text-danger,
.rom-order-form .ff-el-is-error .ff-el-form-check-label {
    color: var(--rom-accent);
}

.rom-order-form .ff-el-is-error .ff-el-form-control {
    border-color: var(--rom-accent);
}

/* Inputs: 14px black on white, 1px 20% black border, 5px radius, red focus */
.rom-order-form .ff-el-form-control {
    color: #000;
    background-color: #fff;
    font-size: 14px;
    border: 1px solid var(--rom-border);
    border-radius: 5px;
}

.rom-order-form .ff-el-form-control:focus {
    color: var(--rom-red);
    border-color: var(--rom-red);
    outline: none;
}

.rom-order-form .ff-el-form-control::placeholder {
    color: rgba(0, 0, 0, 0.2);
    opacity: 1;
}

/* Custom HTML blocks (product descriptions, notes) */
.rom-order-form .ff-custom_html {
    color: #000;
    font-size: 14px;
}

/* Spacing the live form relies on: HTML blocks and card paragraphs carry no margin,
   the product description sits 14px justified right under the "Price:" line. */
.rom-order-form .ff-el-group.ff-custom_html {
    margin: 0;
}

.rom-order-form .item-container p {
    margin: 0;
}

.rom-order-form .ff-el-group.ff-custom_html.item-description {
    font-size: 14px;
    max-width: 95%;
    text-align: justify;
    margin-top: -18px;
}

/* Product cards: grey, 10px radius, image | title + price + description | quantity */
:where(.rom-order-form) .item-container {
    background-color: var(--rom-card);
}

:where(.rom-order-form) .ff-t-container.ff-column-container.ff_columns_total_3.item-container {
    background: var(--rom-card);
    margin-bottom: 10px;
    padding: 15px 10px 0;
    border-radius: 10px;
    align-items: center;
}

:where(.rom-order-form) .ff-t-container.ff-column-container.ff_columns_total_3.item-container.item-container2 {
    background-color: var(--rom-pink);
}

:where(.rom-order-form) .ff-t-container.ff-column-container.ff_columns_total_1.item-container {
    background: #fff;
    margin-bottom: 10px;
    padding: 15px 10px 5px;
    border-radius: 10px;
    align-items: center;
}

:where(.rom-order-form) .modal-img {
    display: block; /* no inline-image baseline strip under the photo, card closes at the image edge like live */
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
}

/* Next / Previous / submit buttons: white on #e03127, 6px radius, black hover */
.rom-order-form .step-nav .ff-btn-next,
.rom-order-form .step-nav .ff-btn-prev {
    color: #fff;
    background-color: var(--rom-accent);
    border: 0;
    border-radius: 6px;
    font-size: 16px;
}

.rom-order-form .step-nav .ff-btn-next {
    padding: 11px 25px;
}

.rom-order-form .step-nav .ff-btn-prev {
    padding: 12px;
}

.rom-order-form .step-nav .ff-btn-next:hover,
.rom-order-form .step-nav .ff-btn-prev:hover {
    background-color: #000;
}

.rom-order-form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
    color: #fff;
    background-color: var(--rom-accent);
    border: 0;
    border-radius: 6px;
    font-size: 16px;
    width: 100%;
}

.rom-order-form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):hover {
    background-color: rgba(0, 174, 3, 1);
}

/* Numbered step header: black boxes and line, active/completed in red */
.rom-order-form .ff-step-titles li,
.rom-order-form .ff-step-titles li:before {
    color: #000;
}

.rom-order-form .ff-step-titles li:after {
    background: #000;
}

.rom-order-form .ff-step-titles li.ff_active,
.rom-order-form .ff-step-titles li.ff_completed {
    color: var(--rom-red);
}

.rom-order-form .ff-step-titles li.ff_active:before,
.rom-order-form .ff-step-titles li.ff_completed:before {
    background: var(--rom-red);
    color: #fff;
}

.rom-order-form .ff-step-titles li.ff_active:after,
.rom-order-form .ff-step-titles li.ff_completed:after {
    background: var(--rom-red);
}

/* Fluent Forms moves focus to the step's first block; no ring on decorative blocks */
.rom-order-form .ff-custom_html:focus,
.rom-order-form .fluentform-step:focus {
    outline: none;
}

/* ======================================================================
 * 2. Quantity control – plugin markup:
 *    span.plus-minus-buttons > button.minus + input + button.plus
 * ====================================================================== */

/* The quantity component keeps its label in the form builder; the card shows only the control. */
:where(.rom-order-form) .ff_columns_total_3.item-container .ff-t-column-3 .ff-el-input--label {
    display: none;
}

.rom-order-form span.plus-minus-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
}

.rom-order-form .plus-minus-buttons button.minus,
.rom-order-form .plus-minus-buttons button.plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 41px;
    box-sizing: border-box;
    width: 41px;
    height: 41px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--rom-qty);
    color: #fff;
    line-height: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s, color 0.15s;
}

.rom-order-form .plus-minus-buttons button.minus {
    border-radius: 5px 0 0 5px;
}

.rom-order-form .plus-minus-buttons button.plus {
    border-radius: 0 5px 5px 0;
}

.rom-order-form .plus-minus-buttons button.minus:hover,
.rom-order-form .plus-minus-buttons button.plus:hover {
    background: #fff;
    color: var(--rom-red);
    border: 1px solid var(--rom-red);
}

.rom-order-form .plus-minus-buttons button.minus:hover {
    border-right: 0;
}

.rom-order-form .plus-minus-buttons button.plus:hover {
    border-left: 0;
}

.rom-order-form .plus-minus-buttons button:focus-visible {
    outline: 2px solid var(--rom-red);
    outline-offset: 2px;
}

.rom-order-form .plus-minus-buttons svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.rom-order-form span.plus-minus-buttons input,
.rom-order-form span.plus-minus-buttons input.ff-el-form-control {
    flex: 0 0 41px;
    box-sizing: border-box;
    width: 41px;
    min-width: 0;
    height: 41px;
    margin: 0;
    padding: 0 2px;
    /* !important: the live page's own "#section-2-563 .fluentform .ff-el-form-control" rule (radius 7px, #dadbdd) would otherwise win */
    border: 1px solid var(--rom-border) !important;
    border-radius: 0 !important;
    background: #fff;
    color: #000;
    font-size: 14px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.rom-order-form .plus-minus-buttons input::-webkit-outer-spin-button,
.rom-order-form .plus-minus-buttons input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ======================================================================
 * 3. Time-slot tiles – radio field with container class "time-slot" and
 *    the "list buttons" layout; the JS adds .available / .not-available
 *    to each tile's span and a <p> with the remaining count.
 * ====================================================================== */

/* The date/time (and delivery address) container gets the same inner padding
   as the product cards so nothing sits flush on the grey box's edges. */
.rom-order-form .ff-t-container.ff-column-container.ff_columns_total_2.item-container {
    padding: 15px 12px 10px;
    align-items: flex-start;
}

/* tiles fill the column edge to edge: as many 150px+ tiles per row as fit,
   stretched evenly, 10px apart */
.rom-order-form .ff-el-group.time-slot .ff-el-input--content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    columns: auto;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check {
    width: auto;
    min-width: 0;
    margin: 0;
    float: none;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label.ff-el-form-check-label {
    display: block;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* The tile is the control; the native radio stays in the DOM for keyboard and screen readers. */
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 9px 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--rom-red);
    background: #fff;
    border: 2px solid var(--rom-red) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    transition: background-color 0.15s, color 0.15s;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span br {
    display: none;
}

/* second line: "4 left" / "Available" / "Not Available" */
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span p {
    margin: 3px 0 0;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span.available p {
    color: var(--rom-green);
}

/* hover + selected: red tile, white text */
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span:not(.not-available):hover,
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check.ff_item_selected label > span,
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check input[type="radio"]:checked + span {
    background: var(--rom-red) !important;
    border-color: var(--rom-red) !important;
    color: #fff !important;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span:not(.not-available):hover p,
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check.ff_item_selected label > span p,
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check input[type="radio"]:checked + span p {
    color: #fff !important;
}

/* full slot with "Hide them": ff-front-end.js adds .rom-slot-hidden. The
   live form's own CSS forces display:inline-block !important on the tiles on
   phones, so this needs !important and a higher specificity (0,5,0). */
.rom-order-form .ff-el-group.time-slot .ff-el-form-check.rom-slot-hidden {
    display: none !important;
}

/* full slot: grey tile, white text, not clickable */
.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span.not-available {
    background: var(--rom-grey) !important;
    border-color: #000 !important; /* v1 / live: grey fill with a black border */
    color: #fff !important;
    cursor: not-allowed;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check label > span.not-available p {
    color: #fff !important;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check input[type="radio"]:disabled + span {
    cursor: not-allowed;
}

.rom-order-form .ff-el-group.ff_list_buttons.time-slot .ff-el-form-check input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--rom-red);
    outline-offset: 2px;
}

/* ======================================================================
 * 4. Date field + inline calendar (flatpickr)
 * ====================================================================== */

.rom-order-form .rom-date-field input.ff-el-datepicker {
    max-width: 78%;
}

/* ff-front-end.js marks the date field's group with .rom-date-field (works
   whether the form puts the "order-date" class on the group or on the input,
   as the live form does) and adds .rom-cal-inline once an inline calendar is
   actually on screen. Only then is the text input kept for Fluent Forms and
   flatpickr but taken out of view, so the red month bar sits directly under
   the "Date" label; without an inline calendar the input stays visible. */
.rom-order-form .rom-date-field .ff-el-input--content {
    position: relative;
}

.rom-order-form .rom-date-field.rom-cal-inline input.ff-el-datepicker.flatpickr-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* the calendar is a white card that fills its column */
.rom-order-form .rom-date-field .flatpickr-calendar.inline {
    top: 0;
    margin: 0;
    width: 100% !important;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--rom-border);
    border-radius: 8px;
    box-shadow: none;
    overflow: hidden;
}

.rom-order-form .rom-date-field .flatpickr-calendar.inline:before,
.rom-order-form .rom-date-field .flatpickr-calendar.inline:after {
    display: none;
}

.rom-order-form .rom-date-field .flatpickr-innerContainer,
.rom-order-form .rom-date-field .flatpickr-rContainer,
.rom-order-form .rom-date-field .flatpickr-weekdays,
.rom-order-form .rom-date-field .flatpickr-days,
.rom-order-form .rom-date-field .dayContainer {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.rom-order-form .rom-date-field .flatpickr-weekdays {
    height: 34px;
    background: #fff;
}

.rom-order-form .rom-date-field span.flatpickr-weekday {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: #000;
    background: #fff;
}

.rom-order-form .rom-date-field .dayContainer {
    padding: 4px 6px 8px;
}

.rom-order-form .rom-date-field .flatpickr-day {
    flex: 1 0 14.2857%;
    max-width: none;
    height: 38px;
    line-height: 38px;
    margin: 2px 0;
    border-radius: 8px;
    font-size: 14px;
    color: #000;
}

.rom-order-form .rom-date-field .flatpickr-day.flatpickr-disabled,
.rom-order-form .rom-date-field .flatpickr-day.flatpickr-disabled:hover,
.rom-order-form .rom-date-field .flatpickr-day.prevMonthDay,
.rom-order-form .rom-date-field .flatpickr-day.nextMonthDay {
    color: rgba(0, 0, 0, 0.25);
}

.rom-order-form .rom-date-field .flatpickr-day.today {
    border-color: var(--rom-red);
}

.rom-order-form .rom-date-field .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
    background: var(--rom-pink);
    border-color: var(--rom-pink);
}

/* month bar: red, white arrows, month + year in one white pill */
.rom-order-form .flatpickr-months .flatpickr-month {
    background: var(--rom-red);
    color: #fff;
    fill: #fff;
    height: 48px;
    border-radius: 0;
}

.rom-order-form .flatpickr-months .flatpickr-prev-month,
.rom-order-form .flatpickr-months .flatpickr-next-month {
    height: 48px;
    padding: 16px 12px;
    color: #fff;
    fill: #fff;
}

.rom-order-form .flatpickr-months .flatpickr-prev-month:hover,
.rom-order-form .flatpickr-months .flatpickr-next-month:hover {
    color: #000;
}

.rom-order-form .flatpickr-months .flatpickr-prev-month:hover svg,
.rom-order-form .flatpickr-months .flatpickr-next-month:hover svg {
    fill: #000;
}

.rom-order-form .flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0;
}

/* month name: left half of the white pill (the live page's own select rule
   keeps a white background and black text, the rest is ours) */
.rom-order-form .flatpickr-current-month .flatpickr-monthDropdown-months {
    box-sizing: border-box;
    height: 30px !important;
    margin: 0;
    padding: 0 30px 0 12px !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    color: #000;
    background-color: #fff;
    border: 0 !important;
    border-radius: 6px 0 0 6px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}

.rom-order-form .flatpickr-current-month .flatpickr-monthDropdown-months option {
    color: #000;
    background: #fff;
}

/* year: right half of the pill, bold black digits, no spinner arrows */
.rom-order-form .flatpickr-current-month .numInputWrapper {
    width: auto;
    height: 30px;
    background-color: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0 6px 6px 0;
}

.rom-order-form .flatpickr-current-month input.cur-year {
    box-sizing: border-box;
    height: 30px;
    width: 64px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    color: #000;
    background-color: #fff;
}

.rom-order-form .flatpickr-current-month .numInputWrapper span.arrowUp,
.rom-order-form .flatpickr-current-month .numInputWrapper span.arrowDown {
    display: none;
}

/* selected day */
.rom-order-form .flatpickr-day.selected,
.rom-order-form .flatpickr-day.selected:hover,
.rom-order-form .flatpickr-day.selected:focus,
.rom-order-form .flatpickr-day.startRange,
.rom-order-form .flatpickr-day.endRange {
    background: var(--rom-accent);
    border-color: var(--rom-accent);
    color: #fff;
}

/* ======================================================================
 * 5. Step lock note ("Next" gate / dine-in stop rule) and locked Next button
 * ====================================================================== */

.rom-order-form .rom-gate-note {
    clear: both;
    margin: 8px 0 0;
    text-align: right;
    font-size: 14px;
    color: var(--rom-red);
}

.rom-order-form .ff-btn-next.rom-gate-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ======================================================================
 * 6. Product image viewer (modal markup is written into the form)
 * ====================================================================== */

:where(.rom-order-form) .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 80px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

:where(.rom-order-form) .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

:where(.rom-order-form) .modal-content img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

:where(.rom-order-form) .modal-content,
:where(.rom-order-form) #caption {
    animation: rom-zoom 0.4s;
}

@keyframes rom-zoom {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

:where(.rom-order-form) #caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    font-size: 14px;
    padding: 10px 0;
}

:where(.rom-order-form) .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

:where(.rom-order-form) .close:hover,
:where(.rom-order-form) .close:focus {
    color: #bbb;
}

/* ======================================================================
 * 7. Small screens: date and time-slot columns stack, tiles wrap 2 per row
 * ====================================================================== */

@media only screen and (max-width: 768px) {
    :where(.rom-order-form) .frm-fluent-form .ff-t-container.ff_cond_v {
        flex-direction: column !important;
    }

    :where(.rom-order-form) .frm-fluent-form .ff-t-container.ff_cond_v .ff-t-column-1,
    :where(.rom-order-form) .frm-fluent-form .ff-t-container.ff_cond_v .ff-t-column-2 {
        flex-basis: 100% !important;
        width: 100%;
    }

    .rom-order-form .rom-date-field input.ff-el-datepicker {
        max-width: 100%;
    }
}

@media only screen and (max-width: 700px) {
    :where(.rom-order-form) .modal-content {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* 8. UAE dirham sign – the front-end script swaps the "AED" code that  */
/*    Fluent Forms prints for this inline SVG glyph (see ff-front-end.js) */
/* ------------------------------------------------------------------ */
/* sign + space + "1,399", never split across lines */
.rom-order-form .rom-price {
    white-space: nowrap;
}

.rom-order-form .rom-aed {
    display: inline-block;
    height: 0.8em;
    width: auto;
    margin: 0;
    line-height: 0;
    vertical-align: -0.04em;
}

.rom-order-form .rom-aed svg {
    display: block;
    height: 100%;
    width: auto;
    fill: currentColor;
}

/* ------------------------------------------------------------------ */
/* 9. Phone field country list (Fluent Forms Pro intl-tel-input)        */
/*    The multi-step wrappers clip overflow for their slide animation,  */
/*    which cut the open country list down to a single row. While the   */
/*    list is open the wrappers clip only horizontally, so the list     */
/*    drops below the step at full height, above the step navigation.   */
/* ------------------------------------------------------------------ */
.rom-order-form .ff-step-container:has(.iti__dropdown-content:not(.iti__hide)),
.rom-order-form .fluentform-step.active:has(.iti__dropdown-content:not(.iti__hide)) {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

.rom-order-form .iti--inline-dropdown .iti__dropdown-content {
    z-index: 50;
    background: #fff;
    border: 1px solid var(--rom-border, rgba(0, 0, 0, 0.2));
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.rom-order-form .iti--inline-dropdown .iti__country-list {
    max-height: 260px;
}

.rom-order-form .iti__search-input:focus {
    outline: none;
    border-color: var(--rom-red, #ab002c);
    box-shadow: 0 0 0 1px var(--rom-red, #ab002c);
}