/* ==========================================================================
   luxury-forminator-skin.css
   --------------------------------------------------------------------------
   YouTu Travel — YouTu Editorial skin for Forminator custom forms.

   PURPOSE
     Reproduce, on Forminator's output DOM, the visual result the site's
     Elementor forms (pages 213 / 1200 "Contact" and 498 / 1202 "Bespoke
     Concierge") have today. Same design tokens, same visual outcome.

   SCOPE / LOADING
     * Only .forminator-ui.forminator-custom-form is touched.
     * This file does NOT touch and does NOT depend on any .elementor-form
       rule; the Elementor forms keep their existing CSS untouched.
     * Load it ONLY on pages where Forminator is actually rendered
       (conditional enqueue), so it never costs bytes on Elementor-only pages.

   WHY !important
     Forminator ships namespaced base rules of the form
     `.forminator-ui.forminator-custom-form[data-design=default] .forminator-input`
     (specificity 0,4,0) plus per-design overrides (default/bold/flat/material)
     and a `[data-color-option=theme]` palette. The site's own historical
     patches (luxury-ui.css, wp-custom-css) also used !important. Using
     !important here keeps the skin independent of whichever design/palette
     the admin picks in the Forminator editor, i.e. one skin, one result.

   SOURCE OF TRUTH (see NOTES.md for line numbers)
     The token values below are the *computed final* values of the live
     Elementor forms, extracted from _audit/baseline-20261015/postA_contact.html
     (the inlined, minified luxury-ui.css cascade).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. DESIGN TOKENS  (single source of truth — mirrors :root in luxury-ui.css)
   -------------------------------------------------------------------------- */
:root {
    /* Typography — identical to luxury-ui.css:1800-1801 */
    --youtu-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    /* Labels only: the Elementor form's .elementor-field-label resolved to the
       platform system stack (Segoe UI on Windows), not Plus Jakarta Sans. */
    --youtu-label-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    /* Ink / label */
    --youtu-ink:            #182026;   /* input text */
    --youtu-label-ink:      #182026;   /* field label */

    /* Surfaces / hairlines */
    --youtu-field-bg:       #FFFFFF;   /* input background */
    --youtu-field-bg-hover: #F8FAFC;
    --youtu-field-bg-focus: #FFFFFF;
    --youtu-line:           #CBD5E1;   /* input/select/textarea border */
    --youtu-line-soft:      #E2E8F0;   /* option-pill / card border */
    --youtu-card-bg:        #FFFFFF;
    --youtu-card-line:      #E2E8F0;

    /* Accent — Dynamically adaptive to Hero via --yt-accent */
    --youtu-accent:         var(--yt-accent, #1B5E4A);   /* focus border */
    --youtu-accent-strong:  var(--yt-accent-hover, #134636);   /* checked text / button hover */
    --youtu-accent-tint:    var(--yt-accent-soft, #EEF6F3);   /* checked pill background */
    --youtu-accent-tint-2:  var(--yt-tint-bg, #F6F9F8);   /* pill hover background */

    /* Submit button */
    --youtu-btn-bg:         var(--yt-accent, #1B5E4A);
    --youtu-btn-hover-bg:   var(--yt-accent-hover, #134636);
    --youtu-btn-ink:        #FFFFFF;

    /* Error / validation */
    --youtu-error-ink:      #9b3322;   /* same token family as #youtu-budget-hint-box */
    --youtu-error-bg:       #fcf6f5;
    --youtu-required:       #b91c1c;   /* luxury-ui.css:886-887 (.req) */

    /* Geometry */
    --youtu-radius:         6px;       /* inputs / textarea / select */
    --youtu-radius-btn:     6px;       /* submit button */
    --youtu-field-h:        48px;      /* "Perfect 48px Height Baseline" */
    --youtu-textarea-min:   172px;     /* Elementor textarea rendered height */
    --youtu-gutter:         5px;       /* row half-gutter -> 10px between cols (Elementor gap) */
    --youtu-row-gap:        26px;      /* Elementor: .elementor-field-group margin-bottom 10px
                                          + .elementor-form-fields-wrapper row-gap 16px */
    --youtu-ring:           0 0 0 3px var(--yt-accent-soft, rgba(27, 94, 74, .16));
}

/* --------------------------------------------------------------------------
   1. FORM CARD  (opt-in)
   Adds the "Bespoke Concierge Form Card" shell. Opt-in on purpose: wrap the
   Forminator shortcode output in  <div class="youtu-form-card">  ... </div>
   so unrelated Forminator forms (polls, other pages) are not turned into cards.
   -------------------------------------------------------------------------- */
.youtu-form-card .forminator-ui.forminator-custom-form {
    max-width: 880px !important;
    margin: 0 auto 56px auto !important;
    padding: 44px 48px !important;
    background: var(--youtu-card-bg) !important;
    border: 1px solid var(--youtu-card-line) !important;
    border-radius: var(--youtu-radius) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
@media (max-width: 680px) {
    .youtu-form-card .forminator-ui.forminator-custom-form {
        padding: 24px 18px !important;
    }
}

/* Every form (carded or not) uses the sans stack. */
.forminator-ui.forminator-custom-form {
    font-family: var(--youtu-font-sans) !important;
}

/* --------------------------------------------------------------------------
   2. GRID — symmetric gutters (replaces Forminator's -7px / 0 7px default)
   Old Elementor reference: .elementor-498 .elementor-form-fields-wrapper
                            { gap: 16px 0 }
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-row,
.forminator-ui.forminator-custom-form .forminator-row-inside {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: calc(-1 * var(--youtu-gutter)) !important;
    margin-right: calc(-1 * var(--youtu-gutter)) !important;
    margin-bottom: var(--youtu-row-gap) !important;
}
.forminator-ui.forminator-custom-form .forminator-row:last-child,
.forminator-ui.forminator-custom-form .forminator-row-last {
    margin-bottom: 0 !important;
}
.forminator-ui.forminator-custom-form .forminator-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 var(--youtu-gutter) !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}
/* Keep Forminator's own md widths, they already produce 50% / 100% columns. */
@media (max-width: 782px) {
    .forminator-ui.forminator-custom-form .forminator-col {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: var(--youtu-row-gap) !important;
    }
}

/* --------------------------------------------------------------------------
   3. LABELS
   Old Elementor (computed final, postA_contact.html @105158):
     .elementor-form .elementor-field-group > .elementor-field-label
     font-size 11.5px / 600 / letter-spacing 1.2px / uppercase / #2c2825
   (the earlier, lower-specificity luxury rules used 12.5px / .6px / #3b352f;
    the higher-specificity rule above is the one that actually renders)
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-label {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    font-family: var(--youtu-label-font) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--youtu-ink) !important;
}
/* Inline radio/checkbox group headings are rendered as <span class="forminator-label">.
   They get a touch more breathing room, mirroring the Elementor subgroup's
   margin-top:6px / margin-bottom:10px (luxury-ui.css:2146-2153). */
.forminator-ui.forminator-custom-form .forminator-field > .forminator-label,
.forminator-ui.forminator-custom-form [role="radiogroup"] > .forminator-label,
.forminator-ui.forminator-custom-form [role="group"] > .forminator-label {
    display: block !important;
    margin-bottom: 8px !important;
}
/* Required asterisk (forminator_get_required_icon -> <span class="forminator-required">) */
.forminator-ui.forminator-custom-form .forminator-label .forminator-required,
.forminator-ui.forminator-custom-form .forminator-required {
    color: inherit !important;   /* Elementor rendered the asterisk in label ink */
    margin-left: 2px !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   4. TEXT INPUTS / SELECTS / TEXTAREAS
   Old Elementor: .elementor-form .elementor-field-textual
                  .elementor-form .elementor-select-wrapper select
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-select,
.forminator-ui.forminator-custom-form select.forminator-select2,
.forminator-ui.forminator-custom-form .forminator-select--field {
    width: 100% !important;
    height: var(--youtu-field-h) !important;
    min-height: var(--youtu-field-h) !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: 1px solid var(--youtu-line) !important;
    border-radius: var(--youtu-radius) !important;
    background-color: var(--youtu-field-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: var(--youtu-ink) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.forminator-ui.forminator-custom-form .forminator-textarea {
    width: 100% !important;
    height: auto !important;
    min-height: var(--youtu-textarea-min) !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    border: 1px solid var(--youtu-line) !important;
    border-radius: var(--youtu-radius) !important;
    background-color: var(--youtu-field-bg) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    color: var(--youtu-ink) !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

/* Native caret for the plain (non-select2) select */
.forminator-ui.forminator-custom-form .forminator-select--field,
.forminator-ui.forminator-custom-form select.forminator-select {
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233b352f' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
}

/* Placeholder */
.forminator-ui.forminator-custom-form .forminator-input::placeholder,
.forminator-ui.forminator-custom-form .forminator-textarea::placeholder {
    color: #94A3B8 !important;
    font-family: inherit !important;
    opacity: 1 !important;
}

/* Focus / hover — identical ring to the Elementor luxury focus state */
.forminator-ui.forminator-custom-form .forminator-input:hover,
.forminator-ui.forminator-custom-form .forminator-select:hover,
.forminator-ui.forminator-custom-form .forminator-textarea:hover {
    border-color: var(--youtu-accent) !important;
}
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-input:focus-visible,
.forminator-ui.forminator-custom-form .forminator-select:focus,
.forminator-ui.forminator-custom-form select.forminator-select2:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus-visible {
    outline: 0 !important;
    background-color: var(--youtu-field-bg-focus) !important;
    border-color: var(--youtu-accent) !important;
    box-shadow: var(--youtu-ring) !important;
}

/* --------------------------------------------------------------------------
   5. RADIO / CHECKBOX PILLS  (the "Contact Pills: Symmetrical
      Full-width Distribution" pattern; class field_2648a15 in Elementor)

   Forminator DOM contract (verified in library/fields/radio.php:256-340 and
   library/fields/multivalue.php:227-320):
     <label class="forminator-radio [forminator-radio-inline]">
         <input type="radio" …>                       <- visually clipped by base css
         <span class="forminator-radio-bullet"></span>
         <span class="forminator-radio-label">…</span>
     </label>
   and the identical structure for .forminator-checkbox / .forminator-checkbox-box
   / .forminator-checkbox-label.
   There is NO `--checked` modifier class: the selected marker is driven by
   `input:checked + .forminator-radio-bullet:before`. We therefore style the
   *pill container* with :has(input:checked) and also keep the marker visible.
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-field-radio,
.forminator-ui.forminator-custom-form .forminator-field-checkbox {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio,
.forminator-ui.forminator-custom-form .forminator-field-checkbox .forminator-checkbox {
    display: inline-flex !important;
    flex: 0 1 calc(25% - 9px) !important;   /* no grow: a lone option keeps its 25% cell */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    background: var(--youtu-field-bg) !important;
    border: 1px solid var(--youtu-line-soft) !important;
    border-radius: var(--youtu-radius) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
    color: var(--youtu-ink) !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease !important;
    pointer-events: auto !important;
}
.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio:hover,
.forminator-ui.forminator-custom-form .forminator-field-checkbox .forminator-checkbox:hover {
    border-color: var(--youtu-accent) !important;
    background: var(--youtu-accent-tint-2) !important;
}
/* Selected pill — mirrors .elementor-field-option:has(input:checked) */
.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio:has(input:checked),
.forminator-ui.forminator-custom-form .forminator-field-checkbox .forminator-checkbox:has(input:checked) {
    border-color: var(--youtu-accent) !important;
    background: var(--youtu-accent-tint) !important;
    box-shadow: 0 2px 8px rgba(140, 115, 85, .15) !important;
}
.forminator-ui.forminator-custom-form .forminator-radio:has(input:checked) .forminator-radio-label,
.forminator-ui.forminator-custom-form .forminator-checkbox:has(input:checked) .forminator-checkbox-label,
.forminator-ui.forminator-custom-form .forminator-radio input:checked ~ .forminator-radio-label,
.forminator-ui.forminator-custom-form .forminator-checkbox input:checked ~ .forminator-checkbox-label {
    font-weight: 700 !important;
    color: var(--youtu-accent-strong) !important;
}
/* Vertical (stacked) option lists keep the pill look but go full width. */
.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-radio:not(.forminator-radio-inline),
.forminator-ui.forminator-custom-form .forminator-field-checkbox > .forminator-checkbox:not(.forminator-checkbox-inline) {
    flex: 1 1 100% !important;
    margin: 0 0 10px 0 !important;
}

/* Marker shape + accent (bullet = round, box = square) */
.forminator-ui.forminator-custom-form .forminator-radio .forminator-radio-bullet {
    border-color: var(--youtu-line) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 50% !important;
}
.forminator-ui.forminator-custom-form .forminator-radio input:checked + .forminator-radio-bullet {
    border-color: var(--youtu-accent-strong) !important;
}
.forminator-ui.forminator-custom-form .forminator-radio .forminator-radio-bullet:before {
    background: var(--youtu-accent-strong) !important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-box {
    border-color: var(--youtu-line) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 2px !important;
}
.forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box {
    border-color: var(--youtu-accent-strong) !important;
    color: var(--youtu-accent-strong) !important;
}

/* Checkbox options are not bold in Elementor (radio options are 500). */
.forminator-ui.forminator-custom-form .forminator-field-checkbox .forminator-checkbox {
    font-weight: 400 !important;
}

/* Labels inside pills inherit the pill text style */
.forminator-ui.forminator-custom-form .forminator-radio-label,
.forminator-ui.forminator-custom-form .forminator-checkbox-label,
.forminator-ui.forminator-custom-form .forminator-checkbox__label {
    display: block !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 13.5px !important;   /* Elementor inner option label */
    line-height: 1.65 !important;   /* 22.275px — Elementor's computed value */
    color: inherit !important;
    /* Elementor's inner <label> carried margin-bottom:6px; it is what makes the
       stretched option box 76.5px tall instead of 72.2px. */
    margin-bottom: 6px !important;
}

/* --------------------------------------------------------------------------
   6. SUBMIT BUTTON
   Old Elementor: .elementor-form .elementor-button[type="submit"]
   Forminator DOM: <button class="forminator-button forminator-button-submit">
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-button-submit {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 10px 0 0 0 !important;
    padding: 16px 38px !important;
    border: 0 !important;
    border-radius: var(--youtu-radius-btn) !important;
    background: var(--yt-accent, #1B5E4A) !important;
    background-image: none !important;
    box-shadow: none !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    color: var(--youtu-btn-ink) !important;
    cursor: pointer !important;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form .forminator-button-submit:focus {
    background: var(--yt-accent-hover, #134636) !important;
    box-shadow: none !important;
    outline: 0 !important;
    transform: translateY(-1px) !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:focus-visible {
    box-shadow: var(--youtu-ring) !important;
}
/* Spinner / loader colour on submit-in-progress */
.forminator-ui.forminator-custom-form .forminator-button-submit .forminator-icon-loader:before {
    color: var(--youtu-btn-ink) !important;
}
/* Submit row is full width, centred like the Elementor form */
.forminator-ui.forminator-custom-form .forminator-row-last .forminator-col,
.forminator-ui.forminator-custom-form .forminator-pagination-footer {
    text-align: left !important;
}

/* Secondary buttons (previous / save draft) */
.forminator-ui.forminator-custom-form .forminator-button:not(.forminator-button-submit) {
    border-radius: var(--youtu-radius-btn) !important;
    font-family: var(--youtu-font-sans) !important;
}

/* --------------------------------------------------------------------------
   7. VALIDATION / ERROR STATE
   DOM contract (Forminator 1.58.2):
     .forminator-has_error  (wrapper) > .forminator-error-message (message)
     .forminator-response-message.forminator-error (form-level banner)
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-error-message {
    display: none;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: var(--youtu-error-ink) !important;
}
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-error-message,
.forminator-ui.forminator-custom-form .forminator-uploaded-file.forminator-has_error .forminator-error-message {
    display: block !important;
}
/* Highlight the offending control itself */
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-input,
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-select,
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea {
    border-color: var(--youtu-error-ink) !important;
    background-color: var(--youtu-error-bg) !important;
}
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-select:focus,
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-textarea:focus {
    box-shadow: 0 0 0 3px rgba(155, 51, 34, .14) !important;
}
/* Form-level banner (success + error share .forminator-response-message) */
.forminator-ui.forminator-custom-form .forminator-response-message {
    margin: 0 0 20px 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-left: 4px solid var(--youtu-error-ink) !important;
    border-radius: var(--youtu-radius) !important;
    background: var(--youtu-error-bg) !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--youtu-error-ink) !important;
}
.forminator-ui.forminator-custom-form .forminator-response-message.forminator-success {
    border-left-color: var(--youtu-accent) !important;
    background: var(--youtu-field-bg) !important;
    color: var(--youtu-ink) !important;
}

/* --------------------------------------------------------------------------
   8. DESCRIPTION / COUNTER (character/word counters under textarea)
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-description {
    display: block !important;
    margin: 6px 0 0 0 !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #64748B !important;
}
.forminator-ui.forminator-custom-form .forminator-label + .forminator-description {
    margin: -2px 0 8px 0 !important;
}

/* --------------------------------------------------------------------------
   9. SELECT2 (the enhanced dropdown Forminator uses for long option lists)
   -------------------------------------------------------------------------- */
/* `.selection` is a wrapper INSIDE `.select2-container` and `.select2-selection`
   is inside it. Painting a border on BOTH produced the double-box dropdown.
   Only the inner element owns the visible box. */
.forminator-ui.forminator-custom-form .forminator-select2 + .forminator-select .selection {
    min-height: var(--youtu-field-h) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.forminator-ui.forminator-custom-form .forminator-select2 + .forminator-select .select2-selection {
    min-height: var(--youtu-field-h) !important;
    border: 1px solid var(--youtu-line) !important;
    border-radius: var(--youtu-radius) !important;
    background: var(--youtu-field-bg) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}
.forminator-ui.forminator-custom-form .forminator-select2 + .forminator-select .select2-selection__rendered {
    padding: 0 40px 0 16px !important;
    line-height: calc(var(--youtu-field-h) - 2px) !important;
    font-family: var(--youtu-font-sans) !important;
    font-size: 14.5px !important;
    color: var(--youtu-ink) !important;
}
.forminator-ui.forminator-custom-form .forminator-select2 + .forminator-select.focused .select2-selection,
.forminator-ui.forminator-custom-form .forminator-select2 + .forminator-select .select2-selection:focus {
    border-color: var(--youtu-accent) !important;
    background: var(--youtu-field-bg-focus) !important;
    box-shadow: var(--youtu-ring) !important;
}

/* --------------------------------------------------------------------------
   10. DATE PICKER (ui-datepicker, Forminator's own calendar widget)
   -------------------------------------------------------------------------- */
.ui-datepicker.forminator-calendar--default {
    border: 1px solid var(--youtu-line-soft) !important;
    border-radius: var(--youtu-radius) !important;
    background: var(--youtu-card-bg) !important;
    box-shadow: 0 10px 30px rgba(44, 40, 37, .08) !important;
    font-family: var(--youtu-font-sans) !important;
}
.ui-datepicker.forminator-calendar--default .ui-datepicker-header {
    background: var(--youtu-field-bg) !important;
    border-color: var(--youtu-line-soft) !important;
}
.ui-datepicker.forminator-calendar--default td a,
.ui-datepicker.forminator-calendar--default td span {
    border-radius: var(--youtu-radius) !important;
    font-family: var(--youtu-font-sans) !important;
}
.ui-datepicker.forminator-calendar--default .ui-state-active {
    background: var(--youtu-btn-bg) !important;
    color: var(--youtu-btn-ink) !important;
}
.ui-datepicker.forminator-calendar--default td a:hover {
    background: var(--youtu-accent-tint) !important;
    color: var(--youtu-accent-strong) !important;
}

/* --------------------------------------------------------------------------
   11. HONEYPOT / HIDDEN FIELDS must never become visible or add spacing
   -------------------------------------------------------------------------- */
.forminator-ui.forminator-custom-form .forminator-field-hidden,
.forminator-ui.forminator-custom-form .forminator-field-hidden .forminator-col {
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   12. HIGH-CONTRAST / REDUCED-MOTION safety
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .forminator-ui.forminator-custom-form .forminator-button-submit,
    .forminator-ui.forminator-custom-form .forminator-input,
    .forminator-ui.forminator-custom-form .forminator-textarea,
    .forminator-ui.forminator-custom-form .forminator-select {
        transition: none !important;
    }
    .forminator-ui.forminator-custom-form .forminator-button-submit:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   FIX 2026-10-15: Forminator 1.58.2 不自带 .forminator-col-6/12 的宽度规则，
   导致 50/50 双列字段（name|email、phone|help_type 等）全部塌成整行。
   这里补回 12 栅格宽度：col-6=50%、col-12=100%，移动端全部回整行。
   ========================================================================== */
.forminator-ui.forminator-custom-form .forminator-col-12 { width: 100%; }
.forminator-ui.forminator-custom-form .forminator-col-6 { width: 50%; }
@media (max-width: 782px) {
	.forminator-ui.forminator-custom-form .forminator-col-6 { width: 100%; }
}


/* ==========================================================================
   FIX 2026-10-15 (iter 1) — GRID WIDTHS
   Forminator's grid CSS only defines widths for `.forminator-col-md-*`; for a
   plain `.forminator-col-6` / `.forminator-col-12` it falls back to
       .forminator-col { flex: 1; padding: 0 15px }
   `flex:1` implies `flex-basis:0`, which *beats* a plain `width:100%` on the
   same element — so every col-6 / col-12 collapsed to an equal share of the
   row (dates|notes rendered 50/50, the trust badge was squeezed next to the
   submit button). Setting flex-basis + max-width (not just width) is what
   actually pins the column.
   ========================================================================== */
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-12,
.forminator-ui.forminator-custom-form .forminator-row-inside > .forminator-col-12 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6,
.forminator-ui.forminator-custom-form .forminator-row-inside > .forminator-col-6 {
	width: 50% !important;
	max-width: 50% !important;
	flex: 0 0 50% !important;
}
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-md-12,
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-md-6,
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-md-4,
.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-md-3 {
	max-width: 100% !important;   /* never exceed the row */
}
@media (max-width: 782px) {
	.forminator-ui.forminator-custom-form .forminator-row > .forminator-col-6,
	.forminator-ui.forminator-custom-form .forminator-row-inside > .forminator-col-6 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
}

/* ==========================================================================
   FIX 2026-10-15 (iter 1) — SELECT2 ACCESSIBILITY-HIDE
   `.select2-hidden-accessible` normally lives in Forminator's bundled
   `assets/forminator-ui/css/src/form/select2.min.css`. That stylesheet is not
   among the Forminator stylesheets this site serves, so the rule never reaches
   the browser and the ORIGINAL <select> stays painted underneath the Select2
   widget -> the double/nested dropdown box. (Compounding: this skin styles
   `select.forminator-select2` itself, which out-specifies a lone
   `.select2-hidden-accessible`.) Restored here, scoped to the Forminator form.
   ========================================================================== */
.forminator-ui.forminator-custom-form select.select2-hidden-accessible {
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	position: absolute !important;
	white-space: nowrap !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
}


/* ==========================================================================
   FIX 2026-10-15 (iter 2) — NESTED WRAPPER ROWS
   F1's form meta uses Forminator "wrapper groups", so each field (or field
   pair) sits in its OWN `.forminator-row` nested inside the outer row. Those
   nested rows are themselves flex items of the outer row, so two sibling
   wrapper rows shared the line 50/50 — which is why `dates` and `notes`
   (both col-12) rendered side-by-side at ~281px / ~251px, why the trust badge
   was squeezed next to the submit button, and why the submit button was only
   274px wide. A wrapper row is a logical form row: it must span the full
   width. The column classes then decide the split *inside* it.
   ========================================================================== */
.forminator-ui.forminator-custom-form .forminator-row .forminator-row,
.forminator-ui.forminator-custom-form .forminator-row .forminator-row-inside,
.forminator-ui.forminator-custom-form .forminator-row-inside .forminator-row,
.forminator-ui.forminator-custom-form .forminator-row-inside .forminator-row-inside {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	margin-bottom: var(--youtu-row-gap) !important;
}
.forminator-ui.forminator-custom-form .forminator-row .forminator-row:last-child,
.forminator-ui.forminator-custom-form .forminator-row-inside .forminator-row:last-child,
.forminator-ui.forminator-custom-form .forminator-row .forminator-row-inside:last-child {
	margin-bottom: 0 !important;
}

/* ==========================================================================
   FIX 2026-10-15 (iter 2) — OPTION PILL ROW
   The pills' real flex parent is `.forminator-field[role=radiogroup]` /
   `[role=group]` — the `forminator-field-radio` / `-checkbox` class lives on
   the enclosing *column*, one level up. The skin was therefore applying
   `display:flex / gap` to the grandparent and the pills stayed shrink-to-fit
   inline boxes. Making the direct parent the flex row is what gives the
   Elementor 4-up, equal-width, equal-height pill grid.
   ========================================================================== */
.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-field,
.forminator-ui.forminator-custom-form .forminator-field-checkbox > .forminator-field {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	align-items: stretch !important;
}
/* ...and keep the group heading on its own line inside that flex row. */
.forminator-ui.forminator-custom-form .forminator-field-radio > .forminator-field > .forminator-label,
.forminator-ui.forminator-custom-form .forminator-field-checkbox > .forminator-field > .forminator-label {
	flex: 0 0 100% !important;
	width: 100% !important;
	margin-bottom: 8px !important;
}

/* ==========================================================================
   FIX 2026-10-15 (iter 7) — SELECT2 CONTAINER IS NOT A FIELD
   Forminator puts the `forminator-select` class on the Select2 *container*
   (`<span class="select2 select2-container forminator-select">`) as well as
   on the native <select>, so the "visible field" rule above was giving the
   container its own border + 16px padding — hence a box inside a box. The
   container is pure layout; only `.select2-selection` draws the control.
   ========================================================================== */
.forminator-ui.forminator-custom-form .forminator-select.select2-container {
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}


/* ==========================================================================
   FIX 2026-10-15 (form-v2) — 联络方式药丸行：这是「字歪」的真正根因
   --------------------------------------------------------------------------
   现象（1440px 实测，见 evidence/probe/before-live-desktop.json）：
     #contact_pref          rect [317, 1929.58, 396,   151.77]  ← 只有半行宽
     #contact_pref .forminator-field  width 386
     .forminator-radio(药丸) rect [317, 1974.55,  87.5,  98.80]  ← 88×99 的窄高盒
     其中 .forminator-radio-bullet rect x = 306.88  ← 圆点被挤到药丸左**边框之外**
          .forminator-radio-label  rect x = 344.88 (宽 69.75)
   两个叠加缺陷：
   (1) mu-plugins/youtu-trip-form/trip-form-{en,it}.js 的 initDynamicContactSwitcher()
       在选中任何联络方式时把 #contact_pref 从 forminator-col-12 改成
       forminator-col-6；而本文件 (iter 1) 的
           .forminator-row > .forminator-col-6 { width:50%!important; flex:0 0 50%!important }
       又把这个 50% 钉死。三个传送字段（whatsapp/email/wechat_id）删掉之后，
       右半边空着 —— 药丸行只剩表单一半宽（396px），而参考版 Elementor 表单里
       这一行是整行 782px。
   (2) 药丸尺寸写死成「固定 4 等分」：
           .forminator-radio { flex: 0 1 calc(25% - 9px) }
       它既不换行也不给内容留最小宽度。半行时每颗 = 386×25% − 9 = 87.5px，
       而一颗药丸自己的固有内容 = 20(圆点) + 8(gap) + 69.75(标签) + 28(padding)
       + 2(border) ≈ 127.75px —— 装不下。因为同时有
           justify-content: center
       溢出的内容被「居中」摊到两边：圆点被画到左边框外 ~10px，标签被画到
       右边框外 ~10px（就是截图里被切掉的 “WhatsApp”、以及圆点骑在边框上的样子）。
       430px 视口下同理：4×25% 直接顶出卡片右边缘，第 4 颗 “WeChat (if you use it)”
       被卡片裁掉。
   参考值（_fixes/skin-iter2/work/base-baseline.html，原 Elementor 表单）：
           .elementor-field-option { rect [309.5, 1956.55, 186.5, 76.53] }
       每颗 186.5px，4 颗铺满 782px 整行，圆点在盒内。

   修法（2 条声明，只压这两处异常值）：
     a) 把 #contact_pref 钉回整行（坐标 1 用 id，特异性压过 .forminator-col-6）；
     b) 药丸改成「基准 150px、可伸可缩」——整行时自动长到 186.5px（= 参考值），
        半行/手机时自动换行成 2 列，永远不会窄到把圆点和文字挤出去。
        150px 这个数来自参考版自己的网格：
            .elementor-subgroup-inline { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)) }
   ========================================================================== */
.forminator-ui.forminator-custom-form #contact_pref {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

.forminator-ui.forminator-custom-form .forminator-field-radio .forminator-radio,
.forminator-ui.forminator-custom-form .forminator-field-checkbox .forminator-checkbox {
	/* was: flex: 0 1 calc(25% - 9px) !important;  —— 固定 4 等分，装不下就外溢
	   150px = 参考版 Elementor 网格的 minmax(150px,1fr) 下限；
	   4×150 + 3×12 = 636 ≤ 782 → 桌面仍是一行 4 颗，grow 后每颗 = (782−36)/4 = 186.5px。 */
	flex: 1 1 150px !important;
}