/**
 * Flighta - Visa application.
 *
 * Same design language as the Low Cost Reservation page (brand tokens, grouped sections, real
 * <label>s, error/hint/success states) because they are the same KIND of page: a public enquiry the
 * desk answers by email. Kept as its own sheet rather than shared classes so one can be restyled
 * without disturbing the other.
 *
 * Loaded only by b2c/visa_application.blade.php; every class is prefixed `vsa-`.
 */
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap");

.vsa-page {
    --vsa-maroon: #531724;
    --vsa-maroon-dark: #3F101B;
    --vsa-maroon-soft: rgba(83, 23, 36, .06);
    --vsa-maroon-line: rgba(83, 23, 36, .22);
    --vsa-ink: #1F2430;
    --vsa-ink-2: #566070;
    --vsa-muted: #8A93A2;
    --vsa-border: #E3E7ED;
    --vsa-bg: #F7F8FA;
    --vsa-danger: #C02B2B;
    --vsa-success: #1B7F4B;
    --vsa-radius: 14px;
    --vsa-font: "Titillium Web", "Cairo", "Segoe UI", sans-serif;

    padding: 56px 16px 80px;
    background: var(--vsa-bg);
    font-family: var(--vsa-font);
    color: var(--vsa-ink);
}

.vsa-page *,
.vsa-page *::before,
.vsa-page *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- heading */

.vsa-head {
    max-width: 760px;
    margin: 0 auto 32px;
    text-align: center;
}

.vsa-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vsa-maroon);
    opacity: .75;
}

.vsa-title {
    margin: 0 0 14px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vsa-maroon);
}

.vsa-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--vsa-ink-2);
}

/* ------------------------------------------------------------------- card */

.vsa-card {
    max-width: 1040px;
    margin: 0 auto;
    padding: 36px 40px 40px;
    border: 1px solid var(--vsa-border);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .06);
}

/* ---------------------------------------------------------------- section */

.vsa-section + .vsa-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--vsa-border);
}

.vsa-section__title {
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 700;
    color: var(--vsa-ink);
}

/* Two columns that collapse on their own - the card's width decides, not the viewport,
   so the form reflows correctly wherever it is placed. */
.vsa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px 22px;
}

.vsa-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ----------------------------------------------------------------- fields */

.vsa-label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vsa-ink-2);
}

.vsa-req { color: var(--vsa-danger); }

.vsa-field {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--vsa-border);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: var(--vsa-ink);
    transition: border-color .15s, box-shadow .15s;
}

.vsa-field::placeholder { color: var(--vsa-muted); }

.vsa-field:focus {
    outline: none;
    border-color: var(--vsa-maroon);
    box-shadow: 0 0 0 3px var(--vsa-maroon-soft);
}

.vsa-field.is-invalid { border-color: var(--vsa-danger); }

.vsa-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.vsa-hint {
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--vsa-muted);
}

.vsa-error {
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vsa-danger);
}

/* ------------------------------------------------------------------ phone */

/* One control made of two: the border lives on the wrapper so the dial code and the
   number read as a single field rather than two that happen to be adjacent. */
.vsa-phone {
    display: flex;
    align-items: stretch;
    min-height: 48px;
    border: 1px solid var(--vsa-border);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.vsa-phone:focus-within {
    border-color: var(--vsa-maroon);
    box-shadow: 0 0 0 3px var(--vsa-maroon-soft);
}

.vsa-phone.is-invalid { border-color: var(--vsa-danger); }

.vsa-phone__code {
    flex: 0 0 132px;
    max-width: 132px;
    padding: 0 8px 0 12px;
    border: 0;
    border-inline-end: 1px solid var(--vsa-border);
    background: #FAFBFC;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--vsa-ink-2);
}

.vsa-phone__code:focus { outline: none; }

.vsa-phone__number {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--vsa-ink);
}

.vsa-phone__number:focus { outline: none; }
.vsa-phone__number::placeholder { color: var(--vsa-muted); }

/* --------------------------------------------------------------- counters */

.vsa-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 22px;
}

.vsa-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--vsa-border);
    border-radius: 12px;
    background: #FCFCFD;
}

.vsa-counter__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vsa-counter__label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vsa-ink);
}

.vsa-counter__note {
    font-size: 12px;
    color: var(--vsa-muted);
}

.vsa-counter__box {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--vsa-border);
    border-radius: 999px;
    background: #fff;
    overflow: hidden;
}

.vsa-counter__btn {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    color: var(--vsa-maroon);
    cursor: pointer;
    transition: background .15s;
}

.vsa-counter__btn:hover { background: var(--vsa-maroon-soft); }

.vsa-counter__box input {
    width: 44px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: var(--vsa-ink);
    -moz-appearance: textfield;
}

.vsa-counter__box input::-webkit-outer-spin-button,
.vsa-counter__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vsa-counter__box input:focus { outline: none; }

/* ---------------------------------------------------------------- actions */

.vsa-actions {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--vsa-border);
    text-align: center;
}

.vsa-submit {
    min-width: 260px;
    min-height: 52px;
    padding: 14px 40px;
    border: 0;
    border-radius: 999px;
    background: var(--vsa-maroon);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(83, 23, 36, .24);
    transition: background .15s, box-shadow .15s, transform .05s;
}

.vsa-submit:hover { background: var(--vsa-maroon-dark); box-shadow: 0 10px 26px rgba(83, 23, 36, .3); }
.vsa-submit:active { transform: translateY(1px); }
.vsa-submit:disabled, .vsa-submit.is-sending { opacity: .65; cursor: progress; box-shadow: none; }

.vsa-actions__note {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--vsa-muted);
}

/* ----------------------------------------------------------------- alerts */

.vsa-alert {
    margin: 0 0 24px;
    padding: 14px 16px;
    border: 1px solid rgba(192, 43, 43, .28);
    border-radius: 12px;
    background: rgba(192, 43, 43, .05);
    font-size: 14px;
    color: var(--vsa-danger);
}

.vsa-alert ul { margin: 8px 0 0; padding-inline-start: 20px; }
.vsa-alert li { margin-top: 3px; }

/* ---------------------------------------------------------------- success */

.vsa-card--done { max-width: 620px; text-align: center; }

.vsa-done__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(27, 127, 75, .1);
    font-size: 26px;
    color: var(--vsa-success);
}

.vsa-done__title { margin: 0 0 10px; font-size: 24px; font-weight: 700; color: var(--vsa-ink); }
.vsa-done__body  { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--vsa-ink-2); }

.vsa-done__ref {
    display: inline-block;
    margin: 0 0 24px;
    padding: 10px 22px;
    border: 1px dashed var(--vsa-maroon-line);
    border-radius: 10px;
    background: var(--vsa-maroon-soft);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--vsa-maroon);
}

.vsa-done__again {
    display: inline-block;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vsa-maroon);
    text-decoration: underline;
}

/* ------------------------------------------------------------------ small */

@media (max-width: 767.98px) {
    .vsa-page  { padding: 36px 12px 56px; }
    .vsa-title { font-size: 30px; }
    .vsa-card  { padding: 24px 18px 28px; border-radius: 18px; }
    .vsa-submit { width: 100%; min-width: 0; }
    .vsa-phone__code { flex-basis: 108px; max-width: 108px; }
}


/* ---------------------------------------------------------------- uploads */

/* The native file input is unstyleable and reads as "Choose file / No file chosen", which says
   nothing about what is wanted. It is kept (so the form works without JS) but visually replaced
   by its own label, which the script below fills with the chosen filenames. */
.vsa-upload { position: relative; }

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

.vsa-upload__box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1.5px dashed var(--vsa-border);
    border-radius: 12px;
    background: #FCFCFD;
    transition: border-color .15s, background .15s;
}

.vsa-upload input[type="file"]:focus + .vsa-upload__box,
.vsa-upload:hover .vsa-upload__box {
    border-color: var(--vsa-maroon);
    background: var(--vsa-maroon-soft);
}

.vsa-upload__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--vsa-maroon-soft);
    color: var(--vsa-maroon);
}

.vsa-upload__icon svg { width: 20px; height: 20px; }

.vsa-upload__text { min-width: 0; }
.vsa-upload__title { display: block; font-size: 14.5px; font-weight: 600; color: var(--vsa-ink); }
.vsa-upload__note  { display: block; margin-top: 2px; font-size: 12.5px; color: var(--vsa-muted); }

/* Filled in by script once files are chosen. */
.vsa-upload__chosen {
    display: none;
    margin-top: 8px;
    padding-inline-start: 18px;
    font-size: 13px;
    color: var(--vsa-ink-2);
}
.vsa-upload__chosen.is-filled { display: block; }
.vsa-upload__chosen li { margin-top: 3px; }

/* ---- either/or passport ------------------------------------------------ */

/* The two ways of giving us the passport are alternatives, so they are separated by a word rather
   than stacked as if both were required. */
.vsa-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vsa-muted);
}

.vsa-or::before,
.vsa-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--vsa-border);
}

.vsa-required-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--vsa-ink-2);
}