/*
 * 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: #ab002c; /* quantity +/- buttons (client choice) */
    --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;
}

/* Product photo fills its column (client choice: 100%). !important overrides
   the "max-width: 300px" the form writes inline on each image. */
.rom-order-form .modal-img {
    display: block; /* no inline-image baseline strip under the photo, card closes at the image edge like live */
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    border-radius: 6px;
    cursor: pointer;
}

.rom-order-form .ff_columns_total_3.item-container .ff-t-column-1 p {
    margin: 0;
}

/* Space between the step content and the Previous / Next buttons. */
.rom-order-form .fluentform-step .step-nav,
.rom-order-form .ff-inner_submit_container {
    margin-top: 24px !important;
}

/* Next / Previous / Pay (the submit button on the last step): one size for
   all three (client choice): white on #e03127, 6px radius, 16px text, 42px
   tall, 25px side padding, Pay on the right like Next. !important because
   the form's own Styler CSS (.fluentform_wrapper_29.ffs_custom_wrap ...,
   higher specificity) makes the submit button a full-width 32px bar. */
.rom-order-form .step-nav .ff-btn-next,
.rom-order-form .step-nav .ff-btn-prev,
.rom-order-form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    /* flex drops the space in "Pay <total>"; put one back between the parts */
    column-gap: 0.3em;
    box-sizing: border-box !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px;
    margin: 0;
    padding: 0 25px !important;
    color: #fff;
    background-color: var(--rom-accent);
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

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

/* last step: Previous on the left, Pay on the right, on one line */
.rom-order-form .ff-inner_submit_container {
    align-items: center;
}

.rom-order-form .ff-inner_submit_container .ff_submit_btn_wrapper {
    margin-bottom: 0;
    text-align: right;
}

.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%;
}

/* Desktop / tablet: the quantity column is as wide as the control (123px)
   instead of a fixed 10%, so the control never overflows the card at
   in-between widths; the text column takes the rest. */
@media only screen and (min-width: 769px) {
    /* fixed width: room for the 123px control plus the cell's padding */
    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-3 {
        flex: 0 0 150px !important;
        width: 150px !important;
        max-width: 150px !important;
        box-sizing: border-box;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-2 {
        flex: 1 1 0 !important;
        min-width: 0;
    }
}

.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%;
    }

    /* Product cards on phones, laid out like a food-ordering app:
         [ photo, full width, 16:10 ]
         Title
         Description (left aligned, no justified gaps)
         Price: <sign> 1,399          [-][ 0 ][+]
       The card becomes a grid; the text column and the payment-item group
       are "display: contents" so their parts can sit in these rows. */
    .rom-order-form .ff-t-container.ff-column-container.ff_columns_total_3.item-container:not(.ff_excluded) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "photo photo"
            "title title"
            "desc  desc"
            "price qty";
        column-gap: 12px;
        row-gap: 6px;
        align-items: center;
        padding: 12px 12px 14px !important;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-cell {
        width: auto !important;
        max-width: none;
        padding: 0 !important;
        margin: 0;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-1 {
        grid-area: photo;
        margin-bottom: 6px;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-2,
    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-2 > .ff-el-group:not(.item-description) {
        display: contents;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-2 .ff-el-input--label {
        grid-area: title;
        margin: 0;
        padding: 0;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-2 .ff-el-input--label label {
        font-size: 17px;
        line-height: 1.3;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-2 .ff-el-input--content {
        grid-area: price;
        margin: 0;
    }

    .rom-order-form .ff_columns_total_3.item-container .ff_item_price_wrapper {
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-2 > .ff-el-group.item-description {
        grid-area: desc;
        margin: 0 0 4px !important;
        max-width: none;
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
    }

    .rom-order-form .ff_columns_total_3.item-container > .ff-t-column-3 {
        grid-area: qty;
        justify-self: end;
    }

    .rom-order-form .ff_columns_total_3.item-container .ff-t-column-3 .ff-el-group {
        margin-bottom: 0;
    }

    .rom-order-form .ff_columns_total_3.item-container .modal-img {
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 8px;
    }

    /* compact stepper with 44px touch targets */
    .rom-order-form span.plus-minus-buttons {
        width: auto;
        justify-content: flex-end;
    }

    .rom-order-form .plus-minus-buttons button.minus,
    .rom-order-form .plus-minus-buttons button.plus {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

    .rom-order-form span.plus-minus-buttons input,
    .rom-order-form span.plus-minus-buttons input.ff-el-form-control {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 44px !important;
        font-size: 17px;
    }

    .rom-order-form .plus-minus-buttons svg {
        width: 18px;
        height: 18px;
    }

    /* Step header: only the current step's title, on one line, so the four
       titles no longer wrap into two cramped lines. */
    .rom-order-form .ff-step-titles li .ff-step-title-text {
        visibility: hidden;
        white-space: nowrap;
    }

    .rom-order-form .ff-step-titles li.ff_active .ff-step-title-text {
        visibility: visible;
    }

    /* the first and last titles hug the header's edges instead of being
       centred under their box and cut off by the header */
    .rom-order-form .ff-step-titles li:first-child.ff_active .ff-step-title-text {
        position: absolute;
        left: 0;
    }

    .rom-order-form .ff-step-titles li:last-child.ff_active .ff-step-title-text {
        position: absolute;
        right: 0;
    }

    .rom-order-form .ff-step-titles li {
        font-size: 13px;
    }

    /* Order summary tables (menu step overview, last step): compact cells so
       item names don't break into four lines. */
    .rom-order-form .ff_dynamic_payment_summary table th,
    .rom-order-form .ff_dynamic_payment_summary table td,
    .rom-order-form .ff_payment_summary table th,
    .rom-order-form .ff_payment_summary table td {
        padding: 8px 6px !important;
        font-size: 14px;
        line-height: 1.35;
        vertical-align: middle;
    }

    .rom-order-form .ff_dynamic_payment_summary table th:first-child,
    .rom-order-form .ff_payment_summary table th:first-child {
        width: 44%;
    }

    .rom-order-form .ff_dynamic_payment_summary table td:not(:first-child),
    .rom-order-form .ff_payment_summary table td:not(:first-child) {
        white-space: nowrap;
    }
}

/* Delivery / pick-up + date step: 15px more above Previous / Next so they
   don't look glued to the grey date / time box (client choice). The live
   form marks this step "next_turkey"; :has() covers any other form. */
.rom-order-form .fluentform-step.next_turkey .step-nav,
.rom-order-form .fluentform-step:has(.rom-date-field) .step-nav {
    margin-top: 39px !important;
}

/* Last step: Previous sits inside the submit row, which already has the
   top margin; without this it is pushed 24px below the Pay button. */
.rom-order-form .ff-inner_submit_container .step-nav {
    margin-top: 0 !important;
}

@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);
}

/* ------------------------------------------------------------------ */
/* 10. Pick-up location dropdown: same height and inset as the text    */
/*     boxes (the form pads inputs 11px 15px but selects only 7px).    */
/*     The form's custom CSS gives selects a chevron, then its own     */
/*     ".ff-el-form-control { background-image: none }" rule removes   */
/*     it again, so the dropdown looked like a text box. Same chevron. */
/* ------------------------------------------------------------------ */
.rom-order-form select.ff-el-form-control:not([multiple]) {
    padding: 11px 40px 11px 15px !important;
    line-height: normal !important;
    height: auto !important;
    cursor: pointer;
    -webkit-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 12px 12px !important;
}