/* Wrapper */
#visa-form{
    max-width: 880px;
    margin: 24px auto;
    background: #ffffff;
    border: 1px solid #e6e8ee;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(16,24,40,.08);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Headings */
#visa-form h2{
    margin: 0 0 14px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f6f9ff;
    border: 1px solid #dbe7ff;
    color: #0b2a5a;
    font-size: 18px;
    font-weight: 800;
}

/* Steps animation */
.vf-step{
    display:none;
    opacity:0;
    max-height:0;
    overflow:hidden;
    transition: opacity .25s ease-in-out, max-height .25s ease-in-out;
}
.vf-step.active{
    display:block;
    opacity:1;
    max-height:9999px;
}
/* The site's focus ring (wp-custom-css) is drawn 5px outside a control (offset 2px + 3px outline).
   The step has no padding, so overflow:hidden cut the ring on buttons at its edge ("המשך", "שלם").
   An active step is shown from display:none and its entry animation (slideInUp in wp-custom-css)
   moves only opacity and transform, so it has nothing to clip. The site sets overflow:hidden on
   #visa-form .vf-step (1,1,0); this beats it for the active step only (1,2,0). */
#visa-form .vf-step.active{
    overflow:visible;
}

/* Grid rows */
.vf-row{
    display:flex;
    gap:14px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.vf-col{
    flex:1;
    min-width:220px;
}
.vf-col label{
    display:block;
    font-size:14px;
    color:#1f2937;
    font-weight:700;
    margin-bottom:6px;
}

/* Inputs */
/* Inputs */
#visa-form input[type="text"],
#visa-form input[type="email"],
#visa-form input[type="tel"],
#visa-form input[type="date"],
#visa-form select{
    width:100%;
    padding:10px 12px;
    box-sizing: border-box; /* חשוב כדי שהפדינג לא ישבור את הרוחב */
    border:1px solid #d6dbe7;
    border-radius:12px;
    background:#fff;
    font-size:14px;
    outline:none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

/* WhatsApp Field Layout */
.vf-phone-group {
    display: flex;
    gap: 10px;
    align-items: center;
}
.vf-phone-prefix {
    flex: 0 0 140px; /* רוחב בדסקטופ */
}
.vf-phone-number {
    flex: 1; /* המספר תופס את שאר המקום */
}

/* התאמה למובייל */
@media (max-width: 480px) {
    .vf-phone-group {
        gap: 8px; /* צמצום רווח */
    }
    .vf-phone-prefix {
        /* במובייל נקטין מעט את הקידומת כדי להשאיר מקום למספר */
        flex: 0 0 115px; 
    }
}

/* Center date text on Android (birth date + passport expiry) */
#visa-form input[type="date"].vf-birth-date,
#visa-form input[type="date"].vf-passport-expiry{
    direction: ltr;        /* מונע "הידבקות" לצד בגלל RTL */
    text-align: center;    /* ניסיון מרכז בסיסי */
}

/* WebKit/Chrome internal date fields centering */
#visa-form input[type="date"].vf-birth-date::-webkit-datetime-edit,
#visa-form input[type="date"].vf-passport-expiry::-webkit-datetime-edit{
    text-align: center;
    width: 100%;
}

#visa-form input[type="date"].vf-birth-date::-webkit-datetime-edit-fields-wrapper,
#visa-form input[type="date"].vf-passport-expiry::-webkit-datetime-edit-fields-wrapper{
    display: flex;
    justify-content: center;
    width: 100%;
}


/* File inputs */
#visa-form input[type="file"]{
    width:100%;
    padding:10px 12px;
    border:1px dashed #cfd6e6;
    border-radius:12px;
    background:#fbfcff;
}

/* Applicant cards */
.applicant-section{
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #e6e8ee;
    border-radius: 16px;
    background: #fafbff;
}
.applicant-section h3{
    margin: 0 0 12px 0;
    padding-bottom:10px;
    border-bottom:1px solid #e7e9f2;
    color:#111827;
    font-weight:900;
}

/* Buttons */
#visa-form button{
    border:none;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, opacity .15s ease;
}
#visa-form button:active{ transform: translateY(1px); }

#visa-form #go-to-step-2,
#visa-form #go-to-step-3,
#visa-form #vf-submit-btn{
    background:#0b5ed7;
    color:#fff;
    box-shadow: 0 8px 18px rgba(11,94,215,.18);
}
#visa-form #back-to-step-1,
#visa-form #back-to-step-2{
    background:#eef2ff;
    color:#1f2937;
}

/* Totals */
#vf_total{
    display:inline-block;
    padding:6px 10px;
    border-radius: 999px;
    background:#e8f4f8;
    border:1px solid #b0d4ff;
}

/* Small screens */
@media (max-width: 640px){
    #visa-form{ padding: 14px; }
    .vf-col{ min-width: 100%; }
}

/* reCAPTCHA v3 disclaimer (badge is hidden via CSS below; branding shown inline per Google ToS) */
.recaptcha-wrapper{ margin: 14px 0; }
.recaptcha-disclaimer{
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin: 6px 0 0;
}
.recaptcha-disclaimer a{ color: #4b5563; text-decoration: underline; }
.grecaptcha-badge{ visibility: hidden !important; }

/* Pre-upload status indicator - sits under each file input */
.vf-preupload-status{
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    font-family: 'Rubik', system-ui, sans-serif;
}
.vf-preupload-status--uploading{
    background: #e8f4f8;
    border: 1px solid #b0d4ff;
    color: #1e40af;
}
.vf-preupload-status--success{
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}
.vf-preupload-status--error{
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
html[data-theme="dark"] .vf-preupload-status--uploading{ background:#1e293b; border-color:#334155; color:#93c5fd; }
html[data-theme="dark"] .vf-preupload-status--success  { background:#14532d; border-color:#166534; color:#bbf7d0; }
html[data-theme="dark"] .vf-preupload-status--error    { background:#450a0a; border-color:#7f1d1d; color:#fecaca; }

/* Coupon section */
.vf-coupon-section{
    margin: 14px 0 10px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.vf-coupon-label{
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2d2d2d;
    margin-bottom: 8px;
}
.vf-coupon-optional{
    font-weight: 400;
    color: #6b7280;
    font-size: 12px;
}
.vf-coupon-input-group{
    display: flex;
    gap: 8px;
    align-items: center;     /* center both vertically - was 'stretch' */
}
/* Override the theme's generic #visa-form input styles for THIS input only,
   so coupon input and button line up exactly without inheriting padding. */
#visa-form #vf_coupon_code,
#vf_coupon_code{
    flex: 1;
    height: 44px;
    line-height: 44px;       /* explicit line-height = no inherited vertical drift */
    padding: 0 14px;
    margin: 0;
    border: 1px solid #d6dbe7;
    border-radius: 8px;
    background: #fff;
    /* 16px to prevent iOS auto-zoom on focus */
    font-size: 16px;
    text-transform: uppercase;
    box-sizing: border-box;
    direction: ltr;
    text-align: center;
    vertical-align: middle;
}
#vf_coupon_code:focus{
    outline: none;
    border-color: #2036A4;
    box-shadow: 0 0 0 3px rgba(140,149,255,0.22);
}
.vf-coupon-apply-btn{
    height: 44px;
    line-height: 1;          /* button line-height should not push text up */
    padding: 0 22px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: #2036A4;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vf-coupon-apply-btn:hover{ background: #1a2d8a; }
.vf-coupon-apply-btn:disabled{ opacity: .6; cursor: progress; }
.vf-coupon-status{
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}
.vf-coupon-status--success{ background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.vf-coupon-status--error  { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.vf-coupon-status--info   { background:#fef3c7; border:1px solid #fcd34d; color:#92400e; }

.vf-total-breakdown{
    margin: 14px 0 6px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}
.vf-total-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #475569;
    padding: 2px 0;
}
.vf-total-row--discount{ color: #16a34a; font-weight: 600; }
.vf-total-row #vf_total_original{ text-decoration: line-through; }
.vf-total-line{ font-size: 18px; margin-top: 8px; }
.vf-total-line strong{ color: #2036A4; }
.vf-total-original{ display: none; }

/* ============================================================
 * Inline SVG icons (replaces emojis throughout the form).
 * All icons use currentColor for stroke; size + color via class.
 * ============================================================ */
.vf-icon{
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.vf-icon--step{ color: #2036A4; margin-left: 4px; }
.vf-icon--section{ color: #0066cc; margin-left: 4px; vertical-align: -3px; }
.vf-icon--inline{ vertical-align: -3px; margin-left: 2px; color: #475569; }
.vf-icon--warn{ color: #856404; }
.vf-icon--tip{ color: #b45309; }
.vf-icon--success{ color: #16a34a; }
.vf-icon--danger{ color: #dc2626; }

/* Spinner - used in upload + coupon status while waiting */
.vf-spinner{
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: vf-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.6;
}
@keyframes vf-spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
    .vf-spinner{ animation-duration: 0s; opacity: 0.4; }
}

/* SVG icons inside status pills (preupload + coupon) */
.vf-status-icon{
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

/* ============================================================
 * STEP TITLE - H2 above the stepper, swapped per step by JS.
 * ============================================================ */
.vf-step-title{
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #2036A4;
    margin: 0 0 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
@media (max-width: 640px){
    .vf-step-title{ font-size: 20px; margin-bottom: 14px; }
}

/* ============================================================
 * STEPPER - progress indicator above the form steps.
 * 3 circles connected by lines. Active = filled brand color;
 * Done = filled with check; Upcoming = outline.
 * ============================================================ */
.vf-stepper{
    margin: 0 0 28px;
    padding: 0;
}
.vf-stepper-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}
.vf-stepper-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
    color: #64748B;          /* upcoming: 4.76:1 on white (#94A3B8 was 2.56:1) */
    transition: color .25s ease;
}

/* Connecting line - drawn as :before so it sits behind circles.
   The line connects to the NEXT item, so the last item has no line. */
.vf-stepper-item:not(:last-child)::before{
    content: "";
    position: absolute;
    top: 19px;               /* half of circle height (38/2) */
    /* In RTL the visual "next" item is to the LEFT, so the line
       starts at item edge and stretches left to the next item. */
    left: -50%;
    right: 50%;
    height: 3px;
    background: #e2e8f0;
    z-index: 0;
    transition: background .25s ease;
}

.vf-stepper-circle{
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.vf-stepper-num{ display: inline-block; }
.vf-stepper-check{ display: none; }

.vf-stepper-label{
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    max-width: 110px;
    word-wrap: break-word;
}

/* ACTIVE step - current */
.vf-stepper-item.is-active{
    color: #2036A4;
}
.vf-stepper-item.is-active .vf-stepper-circle{
    background: #2036A4;
    border-color: #2036A4;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(32,54,164,0.15);
    transform: scale(1.05);
}

/* DONE step - already completed */
.vf-stepper-item.is-done{
    color: #15803D;          /* done label: 5.02:1 on white (#16A34A was 3.30:1) */
}
.vf-stepper-item.is-done .vf-stepper-circle{
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.vf-stepper-item.is-done .vf-stepper-num{ display: none; }
.vf-stepper-item.is-done .vf-stepper-check{ display: inline-block; color: #fff; }
.vf-stepper-item.is-done:not(:last-child)::before{
    background: #16a34a;
}

/* Mobile - smaller circles + smaller labels */
@media (max-width: 480px){
    .vf-stepper{ margin-bottom: 22px; }
    .vf-stepper-circle{ width: 32px; height: 32px; font-size: 13px; }
    .vf-stepper-item:not(:last-child)::before{ top: 16px; }
    .vf-stepper-label{ font-size: 11px; max-width: 90px; }
}

/* Dark mode */
html[data-theme="dark"] .vf-stepper-circle{ background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .vf-stepper-item:not(:last-child)::before{ background: #334155; }
html[data-theme="dark"] .vf-stepper-item{ color: #64748b; }

/* -- Flight details (shown only when a Fast Track / Entry Form addon is picked) -- */
.vf-flight-section{
    background: #fffdf5;
    border: 1px solid #ffe08a;
    border-radius: 12px;
    padding: 16px;
    margin: 15px 0;
}
.vf-flight-title{
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vf-flight-intro{
    margin: 0 0 14px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}
.vf-flight-section .vf-row:last-child{ margin-bottom: 0; }

/* Flight number reads left-to-right even inside the RTL form */
#visa-form #vf_flight_number{
    direction: ltr;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
#visa-form #vf_flight_number::placeholder{
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.vf-field-hint{
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7280;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.vf-field-hint .vf-icon{ flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 480px){
    .vf-flight-section{ padding: 14px 12px; }
    .vf-flight-title{ font-size: 15px; }
}

/* Dark mode */
html[data-theme="dark"] .vf-flight-section{ background: #26200f; border-color: #66491a; }
html[data-theme="dark"] .vf-flight-title{ color: #fcd34d; }
html[data-theme="dark"] .vf-flight-intro,
html[data-theme="dark"] .vf-field-hint{ color: #94a3b8; }

/* ------------------------------------------------------------------
 * Processing-time block (2.23.0)
 *
 * Options that would not leave a business day before entry are locked
 * by the script (.is-unavailable + disabled). Locked reads as locked
 * without color: a reason line sits inside the label. No opacity on the
 * label and no strike-through on the price, so text stays >= 4.5:1.
 * No dark variant: the site has no dark mode.
 * ------------------------------------------------------------------ */
.vf-processing{
    --vf-proc-locked-text: #6C757D;   /* 4.69:1 on white; --evn-muted fails (4.29:1) */
    --vf-proc-reason-text: var(--evn-body, #495057);
    --vf-proc-info-bg: var(--evn-surface, #ECF1F7);
    --vf-proc-info-text: var(--evn-primary-strong, #0057B8);
    --vf-proc-accent: var(--evn-primary, #1B5DB1);
    --vf-proc-radio-border: #6C757D;  /* 4.69:1 on white, above the 3:1 for controls */
    --vf-proc-radio-locked: #CED4DA;  /* inactive control: exempt from 3:1 (WCAG 1.4.11) */
    margin: 0 0 16px;
}
.vf-processing-banner{
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--vf-proc-info-bg);
    color: var(--vf-proc-info-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}
.vf-processing-heading{ margin: 0 0 4px; }
.vf-processing-status[hidden]{ display: none !important; }
.vf-processing-status{
    margin: 0 0 10px;
    color: var(--vf-proc-reason-text);
    font-size: 14px;
    line-height: 1.5;
}
.vf-processing-options{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Grid, so the reason line lines up under the text whatever margin the site
   puts on the radio. The site's label rule is (1,2,2), hence the prefix. */
#visa-form .vf-step .vf-processing-option{
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 6px 0;
    font-size: 16px !important;         /* above the iOS zoom threshold, kit sets smaller */
    line-height: 1.4;
    cursor: pointer;
}
/* wp-custom-css draws the radio (appearance: none) and colors its border by
   :valid. A disabled radio is never :valid, so its border fell to #E9ECEF
   (1.19:1) and the chosen one was hard to see. Explicit colors, same size as
   the site's other radios (24px from wp-custom-css). */
#visa-form .vf-step .vf-processing-option input[type="radio"]{
    margin: 0;
    border-color: var(--vf-proc-radio-border);
}
#visa-form .vf-step .vf-processing-option input[type="radio"]:checked{
    border-color: var(--vf-proc-accent);
    background: var(--vf-proc-accent);
}
#visa-form .vf-step .vf-processing-option.is-unavailable input[type="radio"]{
    border-color: var(--vf-proc-radio-locked);
    background: transparent;
}
.vf-processing-note{
    margin: 8px 0 0;
    color: var(--vf-proc-reason-text);
    font-size: 14px;
    font-weight: 400;
}
.vf-processing-note[hidden]{ display: none !important; }
/* wp-custom-css sets `cursor: pointer` and a hover background on
   `#visa-form .vf-step label:has(input[type="radio"])` (1,2,2) and on the radio
   (1,2,1). A locked option must not look clickable, so these carry the same
   #visa-form .vf-step prefix to win. */
#visa-form .vf-step .vf-processing-option.is-unavailable{
    color: var(--vf-proc-locked-text);
    cursor: not-allowed;
}
#visa-form .vf-step .vf-processing-option.is-unavailable:hover{ background: transparent; }
#visa-form .vf-step .vf-processing-option.is-unavailable input[type="radio"]{ cursor: not-allowed; }

.vf-visually-hidden{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* WhatsApp block under the entry date (replaces inline styles) */
.vf-date-warning{
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #6b5100;                       /* 6.76:1 on #fff3cd */
    text-align: center;
}
.vf-date-warning[hidden]{ display: none !important; }
.vf-date-warning-text{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
}
/* WhatsApp brand green (Daniel, 05.10.2026). The logo follows the text in the
   markup, so in RTL it is on the left. */
.vf-wa-btn{
    --vf-wa-green: #25D366;
    --vf-wa-green-hover: #1EBE5A;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--vf-wa-green);
    /* Dark text and logo on the WhatsApp green (decision 6, 15.10.2026):
       white on #25D366 was 1.98:1. #111827 is 9.4:1, 8.6:1 on hover. */
    color: #111827 !important;
    font-weight: 700;
    text-decoration: none !important;
}
.vf-wa-btn:hover{ background: var(--vf-wa-green-hover); }
.vf-wa-btn[hidden]{ display: none !important; }
.vf-wa-icon{ width: 20px; height: 20px; flex: 0 0 auto; }
.vf-date-warning-btn:focus-visible,
.vf-step1-block-wa:focus-visible{
    outline: 3px solid var(--evn-focus, #1B5DB1);
    outline-offset: 2px;
}

/* The reason "continue" did not move on, next to the button */
.vf-step1-block-msg{
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fdecea;
    border-inline-start: 4px solid #b42318;
    color: #7a1a12;                       /* 9.26:1 on #fdecea */
    font-size: 15px;
    line-height: 1.6;
}
.vf-step1-block-msg[hidden]{ display: none !important; }
.vf-step1-block-msg:focus{ outline: 3px solid var(--evn-focus, #1B5DB1); outline-offset: 2px; }
.vf-step1-block-wa{ margin-top: 8px; }

@media (prefers-reduced-motion: reduce){
    .vf-processing *,
    .vf-date-warning *,
    .vf-step1-block-msg{ transition: none !important; animation: none !important; }
}

/* ============================================================
 * Phase 2: accessible labels and groups (WCAG 2.1 AA, UX-INPUT 2).
 * Nothing here should change what a sighted customer sees, except
 * the colours contrast requires.
 * ============================================================ */
.vf-required-note{
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 400;
    color: var(--evn-body, #495057);   /* 8.18:1 on white */
}
/* The required mark. #C82333: 5.61:1 on white, 5.23:1 on the contact
   block (#F0F8FF). No inline style any more, so the site rule
   label span[style*="color:red"] no longer reaches it. */
.vf-req{
    color: #C82333;
    font-weight: 700;
}
/* The site's Additional CSS styles every form label at (1,1,1):
   display:block, 14px, 600, grey. A label wrapped around text that was
   plain before must look exactly as it did, so it inherits. (1,2,1). */
#visa-form .vf-step label.vf-label-inline{
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    /* Hello Elementor sets label{line-height:1; vertical-align:middle}: the
       first line came out 1px shorter than the old plain text (measured). */
    line-height: inherit;
    vertical-align: baseline;
}
/* fieldset/legend in place of <p><strong>: same box as the old <p>
   (margin from .step-1 p:has(strong)), no browser border or padding.
   min-inline-size:0 stops the fieldset from refusing to shrink below its
   widest select, which scrolled the page sideways at 360px. */
#visa-form .vf-step .vf-fieldset{
    border: 0;
    padding: 0;
    margin: 15px 0 8px;
    min-width: 0;
    min-inline-size: 0;
}
/* The legend takes the size the old <p><strong> had: the paragraph's size,
   inherited (measured on staging 15.10.2026: 16px/24px on desktop, 15px/21px
   up to 768px, set by wp-custom-css on .step-1 p). */
#visa-form .vf-step .vf-fieldset > .vf-legend{
    float: none;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
    color: inherit;
    /* The old <strong><br> line stood 1px taller than a block of the same
       line-height (measured: first radio at 22px, the legend gave 21px). */
    padding-block-end: 1px;
}
/* wp-custom-css makes .step-1 p 15px/1.4 up to 768px. The fieldset replaced a
   <p>, so it follows the same rule, or every <br> between the radios is 3px
   taller than before. */
@media screen and (max-width: 768px){
    #visa-form .vf-step.step-1 .vf-fieldset{
        font-size: 15px;
        line-height: 1.4;
    }
}
/* "No add-on" was #999 inline: 2.85:1. #6C757D: 4.69:1. */
#visa-form .vf-step label.vf-addon-none{
    color: #6C757D;
}

/* ============================================================
 * Phase 2: stepper, step titles and radios (UX-INPUT 3).
 * ============================================================ */
/* "(done)" is read only on a finished step. */
.vf-stepper-item:not(.is-done) .vf-stepper-done{
    display: none;
}
/* The step title gets focus after "continue"/"back" so the reader starts
   there. It is not a control, so it gets no ring. (1,2,0) beats the
   site-wide ring. */
#visa-form .vf-step-title:focus-visible,
#arrival-card-modal #vf-arrival-card-title:focus-visible,
#vf-file-guidelines-popup #vf-file-guidelines-title:focus-visible{
    outline: none !important;
    box-shadow: none !important;
}
/* An unselected radio was #E9ECEF (1.19:1) once its group was answered.
   (1,4,1) beats wp-custom-css (1,2,1) and the locked processing option
   (it is :disabled), and loses on purpose to wp-custom-css input:invalid
   with !important: an unanswered required group stays red (4.53:1). */
#visa-form .vf-step input[type="radio"]:not(:checked):not(:disabled){
    border-color: #6C757D;   /* 4.69:1 on white */
}
/* Every radio in the form carries its own ring, so it never depends on the
   site's CSS. Also covers the processing options of Phase 1. (1,4,1) with
   !important beats wp-custom-css input:invalid:focus (1,3,1) !important,
   so an unanswered group shows blue, not red on red. */
#visa-form .vf-step input[type="radio"][name]:focus-visible{
    outline: 3px solid var(--evn-focus, #1B5DB1) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff !important;
}

/* ============================================================
 * Phase 2: dialogs (UX-INPUT 4). The arrival-card modal and the upload
 * guidelines popup live outside #visa-form, where Hello Elementor's
 * button styles apply (pink border, pink hover). The rules below sit
 * above those, and above wp-custom-css for the trigger inside the form.
 * ============================================================ */
/* Scroll lock while a dialog is open (class set by vf-dialog-core.js). */
html.vf-dlg-open,
body.vf-dlg-open{
    overflow: hidden;
}
.vf-dlg-panel{
    max-height: 90vh;                    /* fallback */
    max-height: calc(100dvh - 32px);     /* iOS: vh includes the address bar */
    overscroll-behavior: contain;
}
#arrival-card-modal .vf-arrival-panel{
    padding: 40px;
}
@media (max-width: 480px){
    #arrival-card-modal .vf-arrival-panel{ padding: 20px; }
}
/* Room for the X (8px + 44px from the panel's start edge) beside the title.
   Under 480px the X sat on its first words (UX review, 15.10.2026).
   !important beats the inline padding:0 on the title. */
#arrival-card-modal #vf-arrival-card-title{
    padding-inline-start: 40px !important;
}
/* Close (X): 44x44 target, #6C757D (4.69:1; #999 was 2.85:1). */
#arrival-card-modal button.vf-arrival-close{
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #6C757D;
    cursor: pointer;
}
#arrival-card-modal button.vf-arrival-close:hover,
#arrival-card-modal button.vf-arrival-close:focus{
    background: #F1F3F5;
    color: #343A40;
}
/* "Understood": the look the inline style gave it, 44px high. */
#arrival-card-modal button.vf-arrival-ok{
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 24px;
    padding: 12px 24px;
    background: #0066cc;                 /* white on it: 5.57:1 */
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
#arrival-card-modal button.vf-arrival-ok:hover,
#arrival-card-modal button.vf-arrival-ok:focus{
    background: #0052a3;
    color: #fff;
}
/* The trigger is a <button> now (it opens a dialog), styled as the link it
   was. (1,3,1) and (1,4,1) beat wp-custom-css #visa-form button[type="button"]
   (1,1,1) and its :hover (1,2,1). */
#visa-form .vf-step button.vf-arrival-card-trigger[type="button"]{
    /* Same box as the old inline link (no min-height): a target inside a run
       of text is exempt from the target-size rule, and the layout must not
       move (measured: a 24px min-height grew the warning by 5px). */
    display: inline-block;
    margin-top: 8px;
    line-height: inherit;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #0066cc;                      /* 5.57:1 on white, 5.0:1 on #fff3cd */
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}
#visa-form .vf-step button.vf-arrival-card-trigger[type="button"]:hover{
    background: none;
    box-shadow: none;
    transform: none;
    color: #0052a3;
}
#visa-form .vf-step button.vf-arrival-card-trigger::after{
    display: none;
}
/* Upload guidelines "understood": 44px target. */
#vf-file-guidelines-popup button.vf-dlg-btn{
    min-height: 44px;
}
@media (max-width: 480px){
    #vf-file-guidelines-popup button.vf-dlg-btn{ width: 100%; }
}