/* ============================================================
   RUI AERO LTD - RFQ PAGE STYLES
   File: css/rfq.css

   Purpose:
   Phase 3/4 ready RFQ layout and static frontend validation
   styling. Back-end processing can be added later depending on
   Hostinger Business Web Hosting options.

   Patch note:
   This version adds a Job Position field and a multiple-file
   drag-and-drop attachment area while keeping the current
   polished RFQ form layout.
============================================================ */

.form-page {
    min-height: 720px;
    background: linear-gradient(180deg, #4d88d4 0%, #3f78c4 100%);
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
}

.form-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(1.4rem, 3vw, 2rem);
    background: rgba(7, 27, 61, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--shadow-soft);
}

.form-shell h1 {
    margin-bottom: 0.5rem;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.form-shell > p {
    max-width: 760px;
    margin-bottom: 1.6rem;
}

/* =========================
   GLOBAL RFQ CLOCK PANEL
========================= */
.rfq-clock-panel {
    display: grid;
    grid-template-columns: minmax(170px, 0.7fr) minmax(0, 2.3fr);
    align-items: stretch;
    gap: 0.8rem;
    margin: 1.3rem 0 1.7rem;
    padding: 0.85rem;
    background: rgba(8, 25, 54, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 16px 36px rgba(5, 18, 41, 0.18);
}

.rfq-clock-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border-left: 4px solid rgba(255, 255, 255, 0.8);
}

.clock-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.82;
}

.rfq-clock-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.rfq-clock-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 78px;
    padding: 0.65rem 0.6rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.rfq-clock-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.34);
}

.clock-flag {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1;
}

.clock-copy {
    display: grid;
    gap: 0.04rem;
    min-width: 0;
}

.clock-location {
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.15;
}

.clock-zone {
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    opacity: 0.82;
}

.clock-time {
    margin-top: 0.08rem;
    font-variant-numeric: tabular-nums;
    font-size: clamp(0.92rem, 1.45vw, 1.12rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* =========================
   FORM LAYOUT
========================= */
.rfq-form {
    display: grid;
    gap: 1rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
}

.form-field {
    display: grid;
    gap: 0.35rem;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-field label,
.option-group legend,
.checkbox-group legend {
    font-weight: 700;
    font-size: 0.92rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(7, 27, 61, 0.25);
    border-radius: 0;
    font: inherit;
}

.form-field textarea {
    resize: vertical;
    min-height: 130px;
}

/* =========================
   COMPACT CHECKBOX GROUPS
   The group title now sits above the box, aligned like the
   normal input field labels, instead of sitting on the border.
========================= */
.option-group,
.checkbox-group {
    padding: 0;
    margin: 0;
    border: 0;
    min-width: 0;
}

.option-group legend,
.checkbox-group legend {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 0.35rem;
    line-height: 1.2;
}

.option-panel {
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.055);
}

.checkbox-grid {
    display: grid;
    gap: 0.45rem 0.55rem;
    margin: 0;
}

.compact-checkbox-grid,
.support-checkbox-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.option-group--aircraft .compact-checkbox-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.option-group--delivery .compact-checkbox-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-grid label {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    min-height: 32px;
    padding: 0.35rem 0.45rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    line-height: 1.2;
    cursor: pointer;
}

.checkbox-grid label:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.24);
}

.checkbox-grid input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #0b2248;
}

.checkbox-grid span {
    display: inline-block;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* =========================
   MULTIPLE FILE UPLOAD AREA
   This is a professional-looking frontend drop zone only.
   The input is still a normal HTML file input, so it remains
   accessible and can later be connected to backend handling.
========================= */
.file-drop-zone {
    position: relative;
    display: grid;
    min-height: 128px;
    border: 2px dashed rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.07);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.file-drop-zone:hover,
.file-drop-zone.is-drag-over {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.75);
    transform: translateY(-1px);
}

.file-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-label {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.28rem;
    min-height: 128px;
    padding: 1.1rem;
    text-align: center;
    color: var(--rui-white);
    cursor: pointer;
}

.file-drop-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.45rem;
}

.file-drop-title {
    font-size: 1rem;
    font-weight: 800;
}

.file-drop-text,
.file-drop-meta {
    font-size: 0.86rem;
    opacity: 0.9;
}

.file-drop-meta {
    max-width: 650px;
    opacity: 0.72;
}

.file-list {
    display: grid;
    gap: 0.35rem;
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
}

.file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.86rem;
}

.file-list .file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-list .file-size {
    flex: 0 0 auto;
    opacity: 0.78;
    font-size: 0.78rem;
}

.file-note {
    font-size: 0.82rem;
    opacity: 0.9;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--rui-white);
    font-weight: 700;
    cursor: pointer;
}

.primary-button {
    background: var(--rui-navy);
    color: var(--rui-white);
}

.secondary-button {
    background: transparent;
    color: var(--rui-white);
}

.primary-button:hover,
.secondary-button:hover {
    transform: translateY(-1px);
}

.form-message {
    font-size: 0.92rem;
    font-weight: 700;
}

@media (max-width: 1100px) {
    .rfq-clock-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-checkbox-grid,
    .support-checkbox-grid,
    .option-group--aircraft .compact-checkbox-grid,
    .option-group--delivery .compact-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .rfq-clock-panel {
        grid-template-columns: 1fr;
    }

    .rfq-clock-intro {
        border-left: 0;
        border-top: 4px solid rgba(255, 255, 255, 0.8);
    }
}

@media (max-width: 720px) {
    .form-grid,
    .rfq-clock-grid,
    .compact-checkbox-grid,
    .support-checkbox-grid,
    .option-group--aircraft .compact-checkbox-grid,
    .option-group--delivery .compact-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .rfq-clock-card {
        min-height: 72px;
    }
}


/* ============================================================
   METALLIC ALUMINIUM UI POLISH PATCH - RFQ PAGE
   Purpose:
   Reduces the large blue area, introduces graphite/aluminium
   surfaces, and keeps the form highly readable.
============================================================ */
.form-page {
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,0.5), transparent 18rem),
        linear-gradient(180deg, var(--rui-aluminium-light) 0%, var(--rui-steel) 46%, #D9DDE1 100%);
}

.form-shell {
    color: var(--rui-white);
    background:
        radial-gradient(circle at 85% 10%, rgba(230, 232, 234, 0.12), transparent 18rem),
        linear-gradient(135deg, var(--rui-navy) 0%, #17365A 45%, var(--rui-graphite) 100%);
    border: 1px solid rgba(230, 232, 234, 0.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 26px 64px rgba(11,31,58,0.24);
}

.rfq-clock-panel {
    background: rgba(23, 35, 43, 0.72);
    border-color: rgba(199, 204, 209, 0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 36px rgba(5, 18, 41, 0.22);
}

.rfq-clock-intro {
    border-left-color: var(--rui-aluminium);
}

.rfq-clock-card {
    background:
        linear-gradient(145deg, rgba(230, 232, 234, 0.15), rgba(255,255,255,0.055));
    border-color: rgba(199, 204, 209, 0.28);
}

.rfq-clock-card:hover {
    background:
        linear-gradient(145deg, rgba(230, 232, 234, 0.22), rgba(61,141,255,0.09));
    border-color: rgba(230, 232, 234, 0.58);
}

.clock-flag {
    background: linear-gradient(145deg, #ffffff, var(--rui-aluminium-light));
    box-shadow: 0 6px 14px rgba(0,0,0,0.16);
}

.form-field input,
.form-field select,
.form-field textarea {
    border: 1px solid rgba(174, 182, 191, 0.85);
    background: linear-gradient(180deg, #ffffff 0%, #F7F8F9 100%);
    color: var(--rui-charcoal);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid rgba(61, 141, 255, 0.45);
    outline-offset: 2px;
    border-color: var(--rui-sky);
}

.option-panel {
    border-color: rgba(199, 204, 209, 0.36);
    background: rgba(230, 232, 234, 0.07);
}

.checkbox-grid label,
.file-list li {
    background: rgba(230, 232, 234, 0.08);
    border-color: rgba(199, 204, 209, 0.24);
}

.checkbox-grid label:hover {
    background: rgba(230, 232, 234, 0.15);
    border-color: rgba(230, 232, 234, 0.48);
}

.checkbox-grid input[type="checkbox"] {
    accent-color: var(--rui-blue-dark);
}

.file-drop-zone {
    border-color: rgba(199, 204, 209, 0.58);
    background: rgba(230, 232, 234, 0.08);
}

.file-drop-zone:hover,
.file-drop-zone.is-drag-over {
    background: rgba(230, 232, 234, 0.15);
    border-color: rgba(255, 255, 255, 0.82);
}

.file-drop-icon {
    background: linear-gradient(145deg, rgba(230, 232, 234, 0.24), rgba(199, 204, 209, 0.12));
    border: 1px solid rgba(199, 204, 209, 0.32);
}

.primary-button {
    background: linear-gradient(135deg, var(--rui-navy-deep), var(--rui-navy));
    border-color: rgba(230, 232, 234, 0.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 24px rgba(0,0,0,0.18);
}

.secondary-button {
    background: rgba(230, 232, 234, 0.08);
    border-color: rgba(230, 232, 234, 0.7);
}

.primary-button:hover,
.secondary-button:hover {
    background: linear-gradient(135deg, var(--rui-graphite), var(--rui-blue-dark));
}

@media (max-width: 900px) {
    .rfq-clock-intro {
        border-left: 0;
        border-top-color: var(--rui-aluminium);
    }
}



/* ============================================================
   RFQ FORM WORKFLOW PREPARATION PATCH
   Purpose:
   Adds clearer frontend validation states, RFQ workflow guidance,
   file upload status styling, and submission-state placeholders.
============================================================ */

.rfq-validation-summary {
    margin: 0 0 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(255, 225, 160, 0.65);
    background: rgba(255, 207, 112, 0.16);
    color: var(--rui-white);
}

.rfq-validation-summary:focus {
    outline: 2px solid rgba(255, 255, 255, 0.78);
    outline-offset: 3px;
}

.rfq-validation-summary strong {
    display: block;
    margin-bottom: 0.4rem;
}

.rfq-validation-summary ul {
    margin: 0;
    padding-left: 1.15rem;
}

.rfq-validation-summary li {
    margin-bottom: 0.25rem;
}

.field-hint,
.field-error,
.file-note,
.backend-note {
    font-size: 0.82rem;
    line-height: 1.45;
}

.field-hint {
    color: rgba(255, 255, 255, 0.74);
}

.field-error {
    display: none;
    color: #ffdca8;
    font-weight: 750;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    /*
       v30F required-field highlight refinement:
       The amber/orange warning is now drawn fully inside the input box.
       Do not use outline or outer box-shadow here, because both can
       visually bleed into the dark blue form background.
    */
    box-sizing: border-box;
    border: 2px solid #ff9d00;
    outline: none;
    outline-offset: 0;
    box-shadow:
        inset 0 0 0 1px rgba(255, 157, 0, 0.88),
        inset 0 0 8px rgba(255, 157, 0, 0.18);
    background-clip: padding-box;
}

/*
   When a required field is focused while invalid, override the normal
   blue focus outline so the highlight stays inside the white field box.
*/
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
    outline: none;
    outline-offset: 0;
    border-color: #ff9d00;
    box-shadow:
        inset 0 0 0 1px rgba(255, 157, 0, 0.95),
        inset 0 0 8px rgba(255, 157, 0, 0.2);
}

.form-field.has-error label {
    color: #ffd28a;
}

.form-field.has-error .field-error {
    display: block;
}

.form-field.is-valid input,
.form-field.is-valid select,
.form-field.is-valid textarea {
    border-color: rgba(174, 230, 196, 0.72);
}

.form-message {
    min-height: 1.5rem;
    padding-top: 0.15rem;
}

.form-message.is-error {
    color: #ffdca8 !important;
}

.form-message.is-success {
    color: #d6ffe4 !important;
}

.form-message.is-info {
    color: rgba(255, 255, 255, 0.86) !important;
}

.backend-note {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.72);
}

.file-limit-note {
    margin-top: 0.2rem;
}

.file-drop-zone.has-file-warning {
    border-color: rgba(255, 210, 128, 0.9);
    background: rgba(255, 210, 128, 0.11);
}

.file-upload-status {
    margin-top: 0.6rem;
    font-size: 0.84rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.84);
}

.file-upload-status.is-warning {
    color: #ffdca8;
}

.file-list li {
    align-items: flex-start;
    gap: 0.7rem;
}

.file-list .file-meta {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
}

.primary-button.is-loading {
    opacity: 0.78;
    cursor: wait;
}

@media (max-width: 720px) {
    .rfq-validation-summary {
        padding: 0.85rem;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
    }
}



/* ============================================================
   PHASE 3D FRONTEND TO BACKEND CONNECTION PATCH
   Purpose:
   Adds clearer message styling for the RFQ form when the frontend
   submits to the local Node backend dry-run route.
============================================================ */

.form-message {
    display: block;
    line-height: 1.45;
}

.form-message.is-success {
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(174, 230, 196, 0.62);
    background: rgba(174, 230, 196, 0.12);
}

.form-message.is-error {
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 210, 128, 0.72);
    background: rgba(255, 210, 128, 0.12);
}

.form-message.is-info {
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}


/* ============================================================
   PHASE 5G RFQ POLISH PATCH
   Purpose:
   - Standardises input/select/textarea box sizing and alignment.
   - Adds a restrained selected-state treatment for checkbox tiles.
   - Improves the live RFQ note and message/textarea spacing.
   - Keeps the existing blue checkbox tick from clashing with the
     selected tile background.
============================================================ */

.form-field input,
.form-field select,
.form-field textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    box-sizing: border-box;
    line-height: 1.35;
}

.form-field select {
    appearance: auto;
}

.form-field textarea {
    min-height: 150px;
    padding-top: 0.85rem;
    line-height: 1.5;
}

/* Keeps hints from visually pushing/selecting fields out of alignment. */
.field-hint {
    margin-top: 0.08rem;
}

.checkbox-grid label {
    position: relative;
    min-height: 38px;
    box-sizing: border-box;
    background: rgba(230, 232, 234, 0.08);
    border-color: rgba(199, 204, 209, 0.24);
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.checkbox-grid label:hover {
    background: rgba(230, 232, 234, 0.14);
    border-color: rgba(230, 232, 234, 0.46);
}

.checkbox-grid label:focus-within {
    outline: 2px solid rgba(190, 215, 230, 0.56);
    outline-offset: 2px;
}

.rfq-live-note {
    margin: 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(199, 204, 209, 0.28);
    background: rgba(230, 232, 234, 0.07);
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.45;
    font-size: 0.92rem;
}

.form-message {
    margin: 0;
}

@media (max-width: 720px) {
    .form-field input,
    .form-field select,
    .form-field textarea {
        min-height: 44px;
    }

    .form-field textarea {
        min-height: 135px;
    }
}


/* ============================================================
   PHASE 5G-B RFQ UI CORRECTION PATCH
   Purpose:
   - Reverts checkbox selected tiles back to the previous restrained state.
   - Locks standard input/select heights so Part Description aligns with Enquiry Type.
   - Keeps the new Subject field but swaps it above Telephone / WhatsApp.
   - Preserves the live RFQ note styling.
============================================================ */

/* Standard text/select controls should occupy the same visual height.
   This avoids the Part Description input appearing lower/taller than
   the Enquiry Type selector on desktop. */
.form-field input:not([type="checkbox"]):not([type="file"]),
.form-field select {
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    box-sizing: border-box;
    line-height: 1.2;
}

.form-field--enquiry-type,
.form-field--part-description {
    align-self: start;
}

/* The Message textarea remains deliberately taller than normal inputs. */
.form-field textarea {
    min-height: 150px;
    height: auto;
    max-height: none;
}

/* Revert selected checkbox tile colour changes from v29.
   The checkbox tick remains the only strong selected indicator, matching
   the pre-v29 behaviour and avoiding a clash with the blue tick. */
.checkbox-grid label,
.checkbox-grid label.is-selected,
.checkbox-grid label:has(input[type="checkbox"]:checked) {
    background: rgba(230, 232, 234, 0.08);
    border-color: rgba(199, 204, 209, 0.24);
    box-shadow: none;
}

.checkbox-grid label:hover,
.checkbox-grid label.is-selected:hover,
.checkbox-grid label:has(input[type="checkbox"]:checked):hover {
    background: rgba(230, 232, 234, 0.15);
    border-color: rgba(230, 232, 234, 0.48);
    box-shadow: none;
}

@media (max-width: 720px) {
    .form-field input:not([type="checkbox"]):not([type="file"]),
    .form-field select {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
    }
}


/* ============================================================
   PHASE 5G-C FIELD ALIGNMENT CORRECTION
   Purpose:
   Prevents grid fields from vertically stretching inside taller
   rows. This keeps the Part Description input aligned with the
   Enquiry Type select, even though Enquiry Type has helper text
   underneath it.
============================================================ */

.form-field {
    align-content: start;
    align-items: stretch;
}

.form-field--enquiry-type,
.form-field--part-description {
    display: grid;
    grid-template-rows: auto 46px auto;
    align-content: start;
}

.form-field--part-description input {
    align-self: start;
}

@media (max-width: 720px) {
    .form-field--enquiry-type,
    .form-field--part-description {
        grid-template-rows: auto 44px auto;
    }
}


/* ============================================================
   PHASE 5G-D BALANCED HELPER ROW FIX
   Purpose:
   Keeps the Enquiry Type helper text in place while reserving
   matching hidden helper-text space under Part Description.
   This balances the two-column grid row without visible layout
   clutter or manual margin hacks.
============================================================ */

.form-field--balanced-hint .field-hint--spacer {
    visibility: hidden;
    display: block;
    min-height: 1.19em;
    line-height: 1.45;
}

.form-field--enquiry-type,
.form-field--part-description {
    align-self: start;
}


/* ============================================================
   PHASE 6A / v30C - COMPACT ATTACHMENT LIST POLISH
   Purpose:
   Keeps selected attachments compact, readable and controllable.
   Users can see file name, type, size and remove files before sending.
============================================================ */

.file-list {
    gap: 0.25rem;
}

.file-list li.file-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(6rem, 8rem) minmax(5rem, 7rem) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.38rem 0.55rem;
}

.file-list .file-type {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.78rem;
    white-space: nowrap;
}

.file-list .file-size {
    text-align: right;
}

.file-remove-button {
    appearance: none;
    border: 1px solid rgba(230, 232, 234, 0.6);
    background: rgba(255, 255, 255, 0.08);
    color: var(--rui-white);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.25rem 0.45rem;
}

.file-remove-button:hover,
.file-remove-button:focus {
    background: rgba(255, 210, 128, 0.16);
    border-color: rgba(255, 210, 128, 0.85);
    outline: none;
}

@media (max-width: 720px) {
    .file-list li.file-list-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .file-list .file-type {
        grid-column: 1 / 2;
    }

    .file-list .file-size,
    .file-remove-button {
        grid-column: 2 / 3;
    }
}


/* ============================================================
   6005 / v30G - Stakeholder RFQ Category + Email Fallback Polish
   Purpose:
   - Keeps Condition Required tiles on one desktop row.
   - Makes Delivery Location compact while giving Country useful width.
   - Keeps Support Required tidy after extra category tiles.
============================================================ */

.option-group--condition .condition-checkbox-grid {
    /*
       6006 / v30H:
       Keep all five condition states on one row on desktop/tablet views.
       The previous 1100px rule forced this group into two rows too early.
    */
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.option-group--condition .condition-checkbox-grid label {
    min-width: 0;
}

.option-group--delivery .delivery-checkbox-grid {
    /*
       6006 / v30H:
       Bunch the four delivery region tiles and give the Country field
       the useful width. This keeps the delivery row cleaner for
       stakeholder review without changing the submitted field names.
    */
    grid-template-columns:
        repeat(4, minmax(82px, 0.58fr))
        minmax(360px, 3fr);
    align-items: stretch;
}

.delivery-country-control {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 32px;
    padding: 0.35rem 0.45rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.delivery-country-control label {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.delivery-country-control input {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 0.35rem 0.45rem;
    border: 1px solid rgba(174, 182, 191, 0.85);
    background: linear-gradient(180deg, #ffffff 0%, #F7F8F9 100%);
    color: var(--rui-charcoal);
    font: inherit;
    box-sizing: border-box;
}

.delivery-country-control input:focus {
    outline: 2px solid rgba(61, 141, 255, 0.45);
    outline-offset: 2px;
    border-color: var(--rui-sky);
}

.support-checkbox-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    /*
       Support Required has six tiles, so two columns is more readable at
       medium widths. Condition and Delivery stay on their designed rows
       until the narrower mobile breakpoint below.
    */
    .support-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .option-group--condition .condition-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .option-group--delivery .delivery-checkbox-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .delivery-country-control {
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(180px, 1fr);
    }
}

@media (max-width: 720px) {
    .option-group--condition .condition-checkbox-grid,
    .option-group--delivery .delivery-checkbox-grid,
    .support-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .delivery-country-control {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   6015 / v30P - Aircraft Type Alignment Patch
   Purpose:
   - Replaces the older detailed aircraft family tile layout with the
     agreed stakeholder layout: Airbus, Boeing and an Other Aircraft
     text field.
   - Keeps the Other Aircraft input the same visual type/height as the
     Delivery Location Country input, so both rows feel aligned and
     controlled.
   - This is a front-end layout patch only. The existing backend endpoint
     still receives the fields through FormData.
============================================================ */

.option-group--aircraft .aircraft-type-grid {
    grid-template-columns:
        repeat(2, minmax(170px, 0.75fr))
        minmax(170px, 0.7fr)
        minmax(360px, 3fr);
    align-items: stretch;
}

.aircraft-type-control {
    display: grid;
    grid-column: span 2;
    grid-template-columns: minmax(150px, 0.75fr) minmax(260px, 2.25fr);
    align-items: center;
    gap: 0.55rem;
    min-height: 32px;
    padding: 0.35rem 0.45rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.aircraft-type-control label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.25rem 0.45rem;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.aircraft-type-control input {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 0.35rem 0.45rem;
    border: 1px solid rgba(174, 182, 191, 0.85);
    background: linear-gradient(180deg, #fffbd0 0%, #fff9bd 100%);
    color: var(--rui-charcoal);
    font: inherit;
    box-sizing: border-box;
}

.aircraft-type-control input::placeholder {
    color: rgba(18, 49, 82, 0.9);
}

.aircraft-type-control input:focus {
    outline: 2px solid rgba(61, 141, 255, 0.45);
    outline-offset: 2px;
    border-color: var(--rui-sky);
}

@media (max-width: 820px) {
    .option-group--aircraft .aircraft-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aircraft-type-control {
        grid-column: 1 / -1;
        grid-template-columns: minmax(140px, 0.6fr) minmax(180px, 1.4fr);
    }
}

@media (max-width: 720px) {
    .option-group--aircraft .aircraft-type-grid {
        grid-template-columns: 1fr;
    }

    .aircraft-type-control {
        grid-template-columns: 1fr;
    }

    .aircraft-type-control label {
        justify-content: flex-start;
    }
}


/* ============================================================
   6022 / v30W - Aircraft Type Forced Single-Line Delivery Clone
   Purpose:
   - Corrects the persistent layout problem where the Other Aircraft
     label and text field appeared as a stacked block.
   - This deliberately mirrors the working Delivery Location pattern:
       [Europe] [US] [Asia] [Other] [Country + input]
     but adapted to:
       [Airbus] [Boeing] [Other Aircraft + input]
   - The rules below use the new class aircraft-type-grid--single-line
     so they only affect this one RFQ section.
   - !important is used deliberately here because previous patches were
     being overridden by earlier checkbox/grid rules and responsive rules.
============================================================ */

@media (min-width: 821px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(520px, 1.35fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > label {
        grid-column: auto !important;
        grid-row: auto !important;
        min-width: 0 !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: auto !important;
        grid-row: auto !important;
        display: grid !important;
        grid-template-columns: auto minmax(340px, 1fr) !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 0.35rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 30px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0.25rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: var(--rui-white) !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        display: block !important;
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        border: 1px solid rgba(174, 182, 191, 0.85) !important;
        background: linear-gradient(180deg, #fffbd0 0%, #fff9bd 100%) !important;
        color: var(--rui-charcoal) !important;
        font: inherit !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 820px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: auto minmax(180px, 1fr) !important;
        align-items: stretch !important;
    }
}

@media (max-width: 720px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        grid-template-columns: 1fr !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   6023 / v30X - Aircraft Type Country-Control Match
   Purpose:
   - Final alignment correction based directly on the visible Delivery
     Location / Country control.
   - At medium widths the previous Aircraft Type layout differed because
     "Other Aircraft" consumed too much horizontal width, leaving the
     aircraft make/model input short and visually unlike the Country row.
   - This override makes the Other Aircraft pair behave like the Country
     pair: small label box + long input box on the same row, spanning the
     full available row when the main option grid wraps.
============================================================ */

/* Desktop / wide view: Airbus, Boeing and a compact Other+input control stay on one row. */
@media (min-width: 821px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns:
            minmax(220px, 1fr)
            minmax(220px, 1fr)
            minmax(520px, 1.55fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        display: grid !important;
        grid-template-columns: max-content minmax(360px, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
    }
}

/* Medium view: copy the Delivery Location Country row behaviour exactly.
   Airbus and Boeing can sit above; Other Aircraft + input becomes a full-width
   Country-style control with a narrow label and long type box. */
@media (max-width: 820px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Narrow mobile view: stack label and input only when the available width is genuinely too small. */
@media (max-width: 520px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line,
    .option-group--delivery .delivery-checkbox-grid {
        grid-template-columns: 1fr !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control,
    .delivery-country-control {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   6024 / v30Y - Aircraft Type Input Containment + Mobile Height
   Purpose:
   - The 6023 layout was close, but the yellow aircraft text box could
     overrun the right side of the RFQ form at desktop/tablet widths.
   - This patch removes the hard minimum widths that caused overflow and
     makes the Aircraft Type control obey the same safe containment logic
     as the Delivery Location / Country row.
   - It also makes the "Other Aircraft" label box use the same outer
     control height behaviour as the Country label box on narrow/mobile
     layouts.
============================================================ */

/* Shared containment safety: prevent grid children from forcing the form wider than its box. */
.option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line,
.option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > label,
.option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control,
.option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label,
.option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Wide desktop: keep all four visual items on one row, but allow the input to shrink inside the form. */
@media (min-width: 1101px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns:
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            minmax(0, 1.95fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        width: 100% !important;
        overflow: hidden !important;
    }
}

/* Tablet / reduced desktop: match Delivery Location behaviour more closely.
   Airbus and Boeing take the top two cells; Other Aircraft + input becomes
   a full-width country-style row underneath, with the input contained. */
@media (max-width: 1100px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-height: 32px !important;
        padding: 0.35rem 0.45rem !important;
        overflow: hidden !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 30px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        line-height: 1.2 !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 30px !important;
        margin: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Mobile: clone the Country row mobile behaviour.
   Keep Other Aircraft and its input side-by-side until the same small-width
   breakpoint where Country also stacks. This avoids the label box looking
   taller/different from Country on normal mobile widths. */
@media (max-width: 720px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-template-columns: max-content minmax(0, 1fr) !important;
    }
}

@media (max-width: 520px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   6025 / v30Z - Aircraft Type Reduce Airbus/Boeing + Match Country Input
   Purpose:
   - Correction based on stakeholder review: the Airbus and Boeing tick-box
     areas can be narrower so the aircraft make/model input can match the
     visual length and alignment of the Delivery Location Country input.
   - Uses the same principle as Delivery Location: compact option tiles first,
     then a compact label + long text entry box.
   - This override is intentionally placed at the end of rfq.css so it wins
     over earlier 6015-6024 test rules without needing to delete them yet.
============================================================ */

/* Desktop / laptop: keep Aircraft Type on one line and make Airbus/Boeing compact. */
@media (min-width: 821px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns:
            minmax(130px, 0.55fr)
            minmax(130px, 0.55fr)
            minmax(0, 3.15fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > label {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.35rem 0.45rem !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 30px !important;
        height: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Tablet / mobile: behave like Delivery Location.
   Airbus and Boeing become the first row, then Other Aircraft + input is a
   full-width Country-style row beneath with matching label height. */
@media (max-width: 820px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.35rem 0.45rem !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label,
    .delivery-country-control > label {
        min-height: 30px !important;
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0.35rem 0.45rem !important;
        line-height: 1.2 !important;
        box-sizing: border-box !important;
    }
}

/* Small phone: only stack Other Aircraft above the input at the same sort of
   narrow width where side-by-side text input becomes genuinely cramped. */
@media (max-width: 520px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   6026 / v30AA - Aircraft Type: Match Country Behaviour Final
   Purpose:
   - Final correction based on visual review screenshots.
   - Aircraft Type must behave like Delivery Location.
   - Desktop: keep [Airbus] [Boeing] [Other Aircraft] [text input]
     on one row, with the text input contained inside the same right edge
     as the Country input.
   - Mobile/narrow: make Other Aircraft + input stack the same way Country
     + input stacks, so the label box height and behaviour match.

   Important:
   - This override is intentionally at the very end of rfq.css so it wins
     over the earlier 6015-6025 alignment attempts.
============================================================ */

/* Desktop / laptop view: four direct columns, no nested oversized tile. */
@media (min-width: 821px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns:
            minmax(170px, 0.72fr)
            minmax(170px, 0.72fr)
            max-content
            minmax(360px, 2.1fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > label {
        grid-column: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Flatten the Other Aircraft control so its label and input become
       separate grid items in the same row. This makes it behave like the
       Country label + Country input pattern rather than as a stacked block. */
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        display: contents !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 32px !important;
        height: auto !important;
        width: auto !important;
        max-width: max-content !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        box-sizing: border-box !important;
    }
}

/* Tablet / narrow view: match the Delivery Location pattern.
   Airbus and Boeing can sit as two tiles, then the Other Aircraft control
   becomes a full-width row underneath. */
@media (max-width: 820px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.35rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 32px !important;
        height: auto !important;
        padding: 0.35rem 0.45rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 32px !important;
        box-sizing: border-box !important;
    }
}

/* Phone view: exact Country-like stacked behaviour.
   This is the key correction for the mobile screenshot: Other Aircraft should
   no longer sit in a shorter side label while Country stacks cleanly. */
@media (max-width: 720px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line,
    .option-group--delivery .delivery-checkbox-grid {
        grid-template-columns: 1fr !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control,
    .delivery-country-control {
        grid-template-columns: 1fr !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label,
    .delivery-country-control > label {
        width: 100% !important;
        min-height: 32px !important;
    }
}

/* ============================================================
   6027 / v30AB - Aircraft Type: Delivery Location Behaviour Correction
   Purpose:
   - Corrects the visual issues identified after 6026:
     1) the Aircraft Type input lost its surrounding control box on desktop;
     2) the Other Aircraft label/input were not vertically centred like Country;
     3) the aircraft type text field should behave like the Country text field;
     4) the Country text field is given the same pale-yellow entry style so both
        typed free-text fields behave consistently.

   Important:
   - This override deliberately restores the Aircraft Type control wrapper.
   - It removes the previous desktop display: contents behaviour that caused
     the visible containing box to disappear.
============================================================ */

/* Shared free-text entry appearance: Aircraft Type and Country now match. */
.aircraft-type-control input,
.delivery-country-control input {
    background: linear-gradient(180deg, #fffbd0 0%, #fff9bd 100%) !important;
    color: var(--rui-charcoal) !important;
}

.aircraft-type-control input::placeholder,
.delivery-country-control input::placeholder {
    color: rgba(18, 49, 82, 0.9) !important;
}

/* Desktop/laptop: keep the whole aircraft row in one line and keep the box. */
@media (min-width: 821px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns:
            minmax(135px, 0.62fr)
            minmax(135px, 0.62fr)
            minmax(0, 2.9fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > label {
        min-width: 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* Restore the containing box around Other Aircraft + input.
       This is the box that disappeared when display: contents was used. */
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 32px !important;
        padding: 0.35rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: max-content !important;
        min-height: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: var(--rui-white) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        border: 1px solid rgba(174, 182, 191, 0.85) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Tablet/mobile: Aircraft Type now follows the Country control behaviour.
   Airbus and Boeing can sit above; Other Aircraft + input becomes one boxed row. */
@media (max-width: 820px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.35rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 32px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 32px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}

/* Phone: stack Other Aircraft above input in the same way Country stacks above its input. */
@media (max-width: 720px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line,
    .option-group--delivery .delivery-checkbox-grid {
        grid-template-columns: 1fr !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control,
    .delivery-country-control {
        grid-template-columns: 1fr !important;
    }

    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > label,
    .delivery-country-control > label {
        width: 100% !important;
        min-height: 32px !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   6028 / v30AC - Aircraft Type Input Length Match Country
   Purpose:
   - Fine-tune only the Aircraft Type free-text input length.
   - 6027 restored the correct containing box and general behaviour.
   - This final adjustment keeps the right edge contained and shortens the
     yellow aircraft make/model input so its visual length better matches the
     Delivery Location Country input.
   - Airbus, Boeing, Other Aircraft label, mobile stacking, and the restored
     surrounding box are otherwise left alone.
============================================================ */

@media (min-width: 821px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--single-line > .aircraft-type-control > input {
        /*
           Keep the aircraft text field aligned to the right of its control,
           but reduce its visual length to match the Country entry field below.
           The blank space remains inside the dark boxed control, so the row
           still reads as one complete Delivery-Location-style control.
        */
        width: calc(100% - clamp(3.75rem, 5vw, 5.5rem)) !important;
        justify-self: end !important;
    }
}


/* ============================================================
   6029 / v30AD - Aircraft Type Match Delivery Input Width
   Purpose:
   - Final fine-tune from Adrian's marked screenshot.
   - Aircraft Type is now constructed like the Delivery Location row rather
     than being treated as a separate nested control.
   - Airbus and Boeing remain equal.
   - A controlled spacer absorbs the missing aircraft-option space.
   - Other Aircraft keeps its compact label size.
   - The yellow Aircraft Type input uses the same type of width behaviour as
     the Country input below, so the two free-text fields visually match.
   - Mobile/narrow behaviour mirrors Delivery Location: choices wrap first,
     then Other Aircraft + input stack into a clean full-width row.
============================================================ */

/* Shared yellow text-entry styling for both free-text helper fields. */
.aircraft-type-other-input,
.delivery-country-control input {
    background: linear-gradient(180deg, #fffbd0 0%, #fff9bd 100%) !important;
    color: var(--rui-charcoal) !important;
}

.aircraft-type-other-input::placeholder,
.delivery-country-control input::placeholder {
    color: rgba(18, 49, 82, 0.9) !important;
}

@media (min-width: 821px) {
    /* Match the Delivery Location concept:
       [choice] [choice] [controlled spacing] [Other Aircraft] [free-text input]
       The controlled spacing replaces the two missing aircraft option boxes
       so the input length can match the Country input more closely. */
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--delivery-match {
        display: grid !important;
        grid-template-columns:
            minmax(130px, 0.78fr)
            minmax(130px, 0.78fr)
            minmax(18px, 0.32fr)
            max-content
            minmax(360px, 3fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-choice {
        min-width: 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-spacer {
        display: block !important;
        min-width: 0 !important;
        pointer-events: none !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-other-label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        max-width: max-content !important;
        min-height: 32px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0.35rem 0.55rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: var(--rui-white) !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-other-input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 32px !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0.35rem 0.55rem !important;
        border: 1px solid rgba(174, 182, 191, 0.85) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font: inherit !important;
    }
}

@media (max-width: 820px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--delivery-match {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-spacer {
        display: none !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-other-label {
        grid-column: 1 / 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0.35rem 0.55rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: var(--rui-white) !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-other-input {
        grid-column: 2 / 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0.35rem 0.55rem !important;
        border: 1px solid rgba(174, 182, 191, 0.85) !important;
        box-sizing: border-box !important;
        font: inherit !important;
    }
}

@media (max-width: 720px) {
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--delivery-match {
        grid-template-columns: 1fr !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-choice,
    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-other-label,
    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-other-input {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   6030 / v30AE - Aircraft Type + Delivery Location Matched Grid
   Purpose:
   - Final alignment correction based on stakeholder markup.
   - Aircraft Type and Delivery Location now use the same column logic.
   - The free-text input column starts at the same horizontal position
     and ends at the same right-hand position in both sections.
   - Airbus and Boeing remain equal and compact; the two blank spacer
     columns absorb the missing aircraft choices so Other Aircraft + input
     lands in the same place as Country + input.
   - The Other Aircraft wrapper behaves like the Country wrapper.
============================================================ */

/* Shared yellow entry styling for both helper inputs. */
.aircraft-type-other-control input,
.delivery-country-control input {
    background: linear-gradient(180deg, #fffbd0 0%, #fff9bd 100%) !important;
    color: var(--rui-charcoal) !important;
}

.aircraft-type-other-control input::placeholder,
.delivery-country-control input::placeholder {
    color: rgba(18, 49, 82, 0.9) !important;
}

@media (min-width: 821px) {
    /* Use the same 5-column parent grid as Delivery Location:
       1 = first option, 2 = second option, 3 = third option/spacer,
       4 = fourth option/spacer, 5 = label + free-text control.
       This makes the aircraft input align with the Country input. */
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--delivery-match,
    .option-group--delivery .delivery-checkbox-grid {
        display: grid !important;
        grid-template-columns:
            repeat(4, minmax(82px, 0.58fr))
            minmax(360px, 3fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-choice,
    .option-group--delivery .delivery-checkbox-grid > label {
        min-width: 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* The aircraft section only has two real option tiles.
       These empty cells deliberately fill the Airbus/Boeing-to-Other gap
       so the Other Aircraft control sits where Country sits below. */
    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-spacer {
        display: block !important;
        min-width: 0 !important;
        pointer-events: none !important;
    }

    /* Make Other Aircraft behave like Country: one bordered wrapper,
       label on the left, yellow free-text input on the right. */
    .option-group--aircraft .aircraft-type-other-control,
    .delivery-country-control {
        display: grid !important;
        grid-template-columns: auto minmax(260px, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        min-height: 32px !important;
        padding: 0.35rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .option-group--aircraft .aircraft-type-other-control > label,
    .delivery-country-control > label {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-height: 30px !important;
        padding: 0.35rem 0.45rem !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        color: var(--rui-white) !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-other-control > input,
    .delivery-country-control > input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        border: 1px solid rgba(174, 182, 191, 0.85) !important;
        box-sizing: border-box !important;
        font: inherit !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 820px) {
    /* Match Delivery Location mobile behaviour: two columns first,
       then the free-text control spans the row. */
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--delivery-match,
    .option-group--delivery .delivery-checkbox-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-spacer {
        display: none !important;
    }

    .option-group--aircraft .aircraft-type-other-control,
    .delivery-country-control {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        min-height: 32px !important;
        padding: 0.35rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.055) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .option-group--aircraft .aircraft-type-other-control > label,
    .delivery-country-control > label {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 30px !important;
        padding: 0.35rem 0.45rem !important;
        margin: 0 !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-other-control > input,
    .delivery-country-control > input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0.35rem 0.45rem !important;
        border: 1px solid rgba(174, 182, 191, 0.85) !important;
        box-sizing: border-box !important;
        font: inherit !important;
    }
}

@media (max-width: 560px) {
    /* Small phone: both Aircraft Other and Country stack label above input. */
    .option-group--aircraft .aircraft-type-other-control,
    .delivery-country-control {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   6031 / v30AF - Aircraft Type Equal-Gap Field Layout
   Purpose:
   - Corrects the v30AE interpretation after stakeholder feedback.
   - The design parameter is NOT to force the aircraft input to start at
     exactly the same x-position as Country.
   - The design parameter is consistent spacing between category field boxes,
     like the Condition Required row.
   - Airbus and Boeing therefore expand equally to absorb the previous blank
     spacer gap, while the Other Aircraft + input control keeps its compact
     label/input construction.
   - Delivery Location remains unchanged except for shared yellow input styling.
============================================================ */

@media (min-width: 821px) {
    /* Aircraft row: three visible field areas with equal gaps:
       [Airbus] [Boeing] [Other Aircraft + free-text input]
       The previous blank spacer columns are removed from desktop layout. */
    .option-group--aircraft .aircraft-type-grid.aircraft-type-grid--delivery-match {
        display: grid !important;
        grid-template-columns:
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            minmax(460px, 2.85fr) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-choice--airbus {
        grid-column: 1 !important;
    }

    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-choice--boeing {
        grid-column: 2 !important;
    }

    /* Remove the artificial blank gap that made the layout look inconsistent. */
    .option-group--aircraft .aircraft-type-grid--delivery-match > .aircraft-type-spacer {
        display: none !important;
    }

    .option-group--aircraft .aircraft-type-other-control {
        grid-column: 3 !important;
        display: grid !important;
        grid-template-columns: auto minmax(260px, 1fr) !important;
        align-items: center !important;
        gap: 0.55rem !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .option-group--aircraft .aircraft-type-other-control > label {
        min-width: max-content !important;
    }

    .option-group--aircraft .aircraft-type-other-control > input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ============================================================
   7018_v31S RFQ SUBMISSION FEEDBACK PATCH
   Purpose:
   Makes it obvious to the customer that the RFQ is actively being
   prepared/sent and that their official reference is being generated.
============================================================ */
.form-message.is-sending,
.form-message.is-reference-confirmed {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 0;
}

.form-message.is-sending {
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff !important;
}

.form-message.is-reference-confirmed {
    border: 1px solid rgba(174, 230, 196, 0.72);
    background: rgba(174, 230, 196, 0.16);
    color: #eafff0 !important;
}

.submit-spinner {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    margin-top: 0.15rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ruiSubmitSpin 0.85s linear infinite;
}

.submit-message-copy {
    display: grid;
    gap: 0.25rem;
}

.submit-message-copy strong {
    font-size: 1rem;
}

.submit-message-copy span,
.submit-message-copy em {
    font-style: normal;
    font-weight: 700;
}

.submit-reference-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(7, 27, 61, 0.84);
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.primary-button.is-loading {
    opacity: 0.82;
    cursor: progress;
}

.rfq-form[aria-busy="true"] {
    cursor: progress;
}

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

@media (max-width: 620px) {
    .form-message.is-sending,
    .form-message.is-reference-confirmed {
        flex-direction: column;
    }

    .submit-reference-badge {
        width: fit-content;
    }
}

/* ============================================================
   7019_v31T RFQ SUBMISSION PROGRESS BAR PATCH
   Purpose:
   Makes the in-progress submission state much clearer for clients,
   especially when attachments take longer to upload/send.

   Important:
   This is an indeterminate progress indicator, not a percentage bar.
   The browser fetch API being used here does not provide reliable
   upload percentage progress for this simple form workflow.
============================================================ */
.form-message.is-sending.has-submit-progress {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.95rem;
    padding: 1.15rem 1.2rem;
    border: 2px solid rgba(245, 211, 72, 0.95);
    background: linear-gradient(135deg, rgba(245, 211, 72, 0.20), rgba(245, 211, 72, 0.08));
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(245, 211, 72, 0.10), 0 16px 34px rgba(0, 0, 0, 0.18);
}

.form-message.is-sending.has-submit-progress::before {
    content: "RFQ SUBMISSION IN PROGRESS";
    position: absolute;
    top: -0.8rem;
    left: 1rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #f5d348;
    color: #071b3d;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.form-message.is-sending.has-submit-progress .submit-spinner {
    border-color: rgba(245, 211, 72, 0.35);
    border-top-color: #f5d348;
}

.form-message.is-sending.has-submit-progress .submit-message-copy strong {
    color: #fff6b8;
    font-size: 1.05rem;
}

.form-message.is-sending.has-submit-progress .submit-message-copy em {
    color: #fff6b8;
}

.rfq-submit-progress {
    position: relative;
    display: block;
    width: 100%;
    height: 14px;
    margin-top: 0.65rem;
    overflow: hidden;
    border: 1px solid rgba(245, 211, 72, 0.85);
    border-radius: 999px;
    background: rgba(7, 27, 61, 0.72);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
}

.rfq-submit-progress__bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f5d348 0%, #fff6b8 50%, #f5d348 100%);
    box-shadow: 0 0 18px rgba(245, 211, 72, 0.58);
    animation: ruiRfqProgressSweep 1.15s ease-in-out infinite;
}

.rfq-submit-progress-text {
    display: block;
    margin-top: 0.45rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    font-weight: 700;
}

@keyframes ruiRfqProgressSweep {
    0% {
        transform: translateX(-105%);
    }
    50% {
        transform: translateX(80%);
    }
    100% {
        transform: translateX(245%);
    }
}

@media (max-width: 620px) {
    .form-message.is-sending.has-submit-progress {
        grid-template-columns: 1fr;
    }

    .form-message.is-sending.has-submit-progress::before {
        position: static;
        display: inline-flex;
        width: fit-content;
        margin-bottom: 0.15rem;
        grid-column: 1;
    }
}