/* =========================================================================
   Visa Assistance Center — application flow
   Layered on top of style.css: same tokens, same components, no new palette.
   Loaded only by the application pages (apply-now, confirmation,
   check-document), never by the marketing landing.
   ========================================================================= */

/* ------------------------------------------------------------------ utility */
.is-hidden { display: none !important; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------- application header
   Brand and document name only. No navigation, no secondary bars — the whole
   point is that nothing up here competes with the form. */
.app-masthead { background: #fff; border-bottom: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); }
.app-masthead__inner { display: flex; align-items: center; min-height: 70px; }
/* The brand renders as a <span> on the form itself (no exit route mid-flow). */
.app-masthead span.brand { cursor: default; }

/* There is no application footer — see includes/application-footer.php. */

/* --------------------------------------------------------- compact page hero
   Used by the confirmation and status pages, which need a title of their own.
   The form deliberately has no hero: its title lives in the step panel. */
.page-hero--compact { padding: 38px 0 34px; }
.page-hero--compact h1 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.page-hero--compact p { font-size: 1rem; margin-top: 8px; }

/* ------------------------------------------------------------ step progress */
.app-section { padding: 40px 0 0; }
.app-steps {
    display: flex; gap: 8px; list-style: none; margin: 0 0 32px; padding: 0;
    counter-reset: appstep;
}
.app-steps li {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; color: var(--ink-mute); font-size: .88rem; font-weight: 600;
    transition: all var(--transition); min-width: 0;
}
.app-steps__num {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg-alt); border: 1px solid var(--line);
    color: var(--ink-mute); font-size: .82rem; font-weight: 800;
}
.app-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-steps li.is-active { border-color: var(--navy-800); color: var(--navy-800); box-shadow: var(--shadow-sm); }
.app-steps li.is-active .app-steps__num { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.app-steps li.is-done { border-color: #bfe3cd; background: var(--green-050); color: var(--green-600); }
.app-steps li.is-done .app-steps__num { background: var(--green-600); border-color: var(--green-600); color: #fff; font-size: 0; }
.app-steps li.is-done .app-steps__num::after { content: "\2713"; font-size: .82rem; }

/* ---- confirmation-application: post-payment info screen + top-up wizard ---- */
.container--narrow { max-width: 860px; }
.ca-hero { text-align: center; }
.ca-hero .result__icon { margin: 0 auto 14px; }
.ca-hero h2 { margin: 0 0 6px; }
.ca-steps { margin-bottom: 24px; }
.ca-subhead { margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--line-soft);
    font-family: var(--ff-serif); font-size: 1.1rem; color: var(--navy-800); }
.ca-step > .ca-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* flag dropdown (confirmation-application country selects) */
.cflag { position: relative; }
.cflag__btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.cflag__ph { color: var(--ink-mute); }
.cflag__img { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10,37,64,.1); flex-shrink: 0; }
.cflag__panel { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(10,37,64,.16); padding: 8px; max-height: 320px; overflow: auto; }
.cflag__search { margin-bottom: 8px; }
.cflag__list { display: flex; flex-direction: column; gap: 2px; }
.cflag__opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.cflag__opt:hover { background: var(--line-soft); }
.input.has-error, .select.has-error, .cflag.has-error .cflag__btn { border-color: #d64545; box-shadow: 0 0 0 1px #d64545; }

/* confirmation-application: getevisa-style success card + required banner */
.section--top { padding-top: 40px; }
.ca-card { max-width: 860px; margin: 0 auto; background: #fff; border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(10,37,64,.10); overflow: hidden; }
.ca-success { background: var(--green-600); color: #fff; text-align: center; padding: 34px 24px; }
.ca-success__icon { display: inline-flex; width: 64px; height: 64px; border-radius: 50%;
    background: rgba(255,255,255,.18); align-items: center; justify-content: center; margin-bottom: 12px; }
.ca-success__icon svg { width: 32px; height: 32px; }
.ca-success h2 { color: #fff; margin: 0 0 4px; }
.ca-success p { color: rgba(255,255,255,.92); margin: 0; }
.ca-card__body { padding: 28px 24px; }
.ca-banner { max-width: 860px; margin: 0 auto 20px; }
.ca-card-title { text-align: center; color: var(--navy-800); font-family: var(--ff-serif); margin: 0 0 22px; }
.ca-subhead--first { margin-top: 0; padding-top: 0; border-top: 0; }

/* ------------------------------------------------------------------ layout */
.app-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); gap: 32px; align-items: start; }
.app-main { min-width: 0; }
.app-sidebar { position: sticky; top: 24px; }

/* Step 4 (processing speed) is full-width with NO "Your application" summary,
   exactly like getevisa's apply-now — but ONLY for connected (active) destinations.
   Non-connected destinations keep the standard sidebar + summary. */
body[data-connected="1"][data-app-step="4"] .app-layout { grid-template-columns: minmax(0, 1fr); }
body[data-connected="1"][data-app-step="4"] #application-form .app-sidebar { display: none; }

.app-step { display: none; }
.app-step.is-active { display: block; animation: appfade .22s ease; }
@keyframes appfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.app-panel { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.app-panel + .app-panel { margin-top: 24px; }
.app-panel h2 { font-size: 1.4rem; margin-bottom: 6px; }
.app-panel .step-sub { color: var(--ink-soft); margin-bottom: 26px; }
.app-panel h3 { font-size: 1.05rem; }

.app-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.app-nav .btn--ghost svg:first-child { transform: rotate(180deg); }

/* ---------------------------------------------------------------- disclaimer
   The only thing below the form. One muted line — no border, no background, no
   links: nothing that could be mistaken for a footer. The bottom padding stands
   in for the footer that deliberately is not there. */
.app-disclaimer {
    display: flex; align-items: flex-start; justify-content: center; gap: 9px;
    max-width: 720px; margin: 26px auto 0; padding-bottom: 56px;
    text-align: center; color: var(--ink-mute); font-size: .84rem;
}
.app-disclaimer svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold-600); }

/* ------------------------------------------------- country flag dropdowns
   Built by application.js over each [data-country-select]. A native <select>
   cannot render images in its options, so the list is drawn here instead —
   the same reason getevisa reaches for Select2.

   The closed control copies .input/.select from style.css exactly, so a country
   field is indistinguishable from every other field in the form. */
.cselect { position: relative; }

/* The real <select> stays for form semantics, inert and invisible. */
.cselect > select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none; appearance: none;
}

.cselect__button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; font-family: var(--ff-sans); font-size: 1rem; color: var(--ink);
    padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
    background: #fff; cursor: pointer; text-align: left;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cselect__button:focus-visible { outline: none; border-color: var(--blue-400); box-shadow: var(--ring); }
.cselect.is-open .cselect__button { border-color: var(--blue-400); box-shadow: var(--ring); }
/* showError() flags the hidden select; carry that onto the visible control. */
.cselect > select.has-error ~ .cselect__button { border-color: var(--red-600); }

.cselect__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__label.is-placeholder { color: #9aa8b6; }

.cselect__caret {
    flex: none; width: 18px; height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 18px;
    transition: transform var(--transition);
}
.cselect.is-open .cselect__caret { transform: rotate(180deg); }

/* The flag itself — 4:3, same box whether it is an image or the fallback glyph. */
.cselect__flag {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.45em; height: 1.09em; line-height: 1; font-size: .95em;
}
.cselect__flag img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(10, 37, 64, .14);
}

.cselect__panel {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: 10px;
}
.cselect__panel[hidden] { display: none; }

.cselect__search {
    width: 100%; font-family: var(--ff-sans); font-size: .95rem; color: var(--ink);
    padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: #fff;
}
.cselect__search:focus { outline: none; border-color: var(--blue-400); box-shadow: var(--ring); }

.cselect__list {
    list-style: none; margin: 8px 0 0; padding: 0;
    max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
}
.cselect__option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 6px; cursor: pointer;
    font-size: .95rem; color: var(--ink);
}
.cselect__option[hidden] { display: none; }
.cselect__option:hover { background: var(--bg-alt); }
.cselect__option.is-active { background: var(--blue-050); color: var(--navy-800); font-weight: 600; }

.cselect__empty { margin: 12px 4px 6px; font-size: .9rem; color: var(--ink-mute); text-align: center; }
.cselect__empty[hidden] { display: none; }

/* --------------------------------------------- multi country (select2-style) */
.mselect { position: relative; }
.mselect__control { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 46px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; cursor: text; }
.mselect.is-open .mselect__control { border-color: var(--blue-400); box-shadow: var(--ring); }
.mselect__chip { display: inline-flex; align-items: center; gap: 6px; background: var(--blue-050, #eef4fb); color: var(--navy-800); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 8px; font-size: .85rem; line-height: 1.3; }
.mselect__chip .cselect__flag { width: 18px; height: 13px; }
.mselect__chip-x { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink-mute); padding: 0 2px; }
.mselect__chip-x:hover { color: var(--red-600); }
.mselect__search { flex: 1 1 140px; min-width: 120px; border: 0; outline: 0; font: inherit; padding: 4px 2px; background: transparent; }
.mselect__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; }
.mselect__panel[hidden] { display: none; }
.mselect__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.mselect__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .95rem; color: var(--ink); }
.mselect__option:hover { background: var(--bg-alt); }
.mselect__option .cselect__flag { width: 20px; height: 15px; }
.mselect__empty { padding: 10px 6px; color: var(--ink-mute); font-size: .9rem; text-align: center; }
.mselect__empty[hidden] { display: none; }

/* --------------------------------------------------------- date triplets */
.date-group { display: grid; grid-template-columns: .8fr 1.2fr 1fr; gap: 10px; }
.date-group.has-error .select { border-color: var(--red-600); }

/* ------------------------------------------------------- traveller blocks */
/* No overflow:hidden here — it would clip the country dropdown (.cselect__panel)
   when it opens past the card edge. The head keeps the rounded top corners on
   its own so the card still looks clipped. */
.traveler { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; background: #fff; }
.traveler__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; background: var(--bg-alt); border-bottom: 1px solid var(--line-soft);
    border-radius: var(--radius) var(--radius) 0 0;
}
.traveler__head h3 { font-size: .98rem; font-weight: 700; color: var(--navy-800); margin: 0; }
.traveler__body { padding: 22px 18px 4px; }
.traveler__remove {
    background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
    color: var(--ink-mute); padding: 5px; line-height: 0; transition: all var(--transition); flex: none;
}
.traveler__remove:hover { color: var(--red-600); background: var(--red-050); border-color: #f3c9c5; }
.traveler__remove svg { width: 17px; height: 17px; }

.app-add-traveler { margin-bottom: 8px; }
.app-add-traveler:disabled { opacity: .5; cursor: not-allowed; }

.passport-details { margin-top: 4px; }

.app-contact-block { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.app-contact-block h3 { margin-bottom: 18px; }

/* --------------------------------------------------------- checkout step
   Lean, like getevisa's: the base cost in a banner, then the two optional
   upgrades. No summary of the answers. */
.cost-banner {
    display: flex; align-items: flex-start; gap: 11px;
    margin: 4px 0 26px; padding: 14px 16px;
    background: var(--blue-050); border: 1px solid var(--blue-100);
    border-radius: var(--radius); font-size: .95rem; color: var(--ink-soft);
}
.cost-banner svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--blue-400); }
.cost-banner p { margin: 0; }
.cost-banner strong { color: var(--navy-800); }

/* Upgrade cards: checkboxes, so "neither" means Standard. */
.opt-card--upgrade label { align-items: center; }
.opt-card--upgrade .opt-card__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.opt-card--upgrade .opt-card__amount { white-space: nowrap; }
.opt-card--upgrade .opt-card__price small { font-family: var(--ff-sans); font-size: .72rem; font-weight: 500; color: var(--ink-mute); }
.opt-cards__note { margin-top: 12px; font-size: .82rem; color: var(--ink-mute); text-align: center; }

/* Passive acceptance line, in place of a tick box: continuing is the acceptance. */
.terms-notice {
    margin: 24px 0 0; font-size: .84rem; line-height: 1.55;
    color: var(--ink-mute); text-align: center;
}
.terms-notice a { font-weight: 600; }

/* ------------------------------------------------------------- sidebar */
.app-sidebar .summary { position: static; }
.summary__doc { margin-top: 4px; font-size: .84rem; color: #c8d6e6; }
.summary__per { font-weight: 400; color: var(--ink-mute); font-size: .82rem; }

.summary__security { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.summary__security-title { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; color: var(--navy-800); margin-bottom: 12px; }
.summary__security-title svg { width: 18px; height: 18px; color: var(--green-600); flex: none; }
.summary__security ul { display: grid; gap: 8px; }
.summary__security li { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; color: var(--ink-soft); }
.summary__security li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--green-600); }

/* -------------------------------------------------------------- checkout */
.pay-form { margin-top: 4px; }
.pay-note { justify-content: center; margin-top: 16px; }
#pay-button.is-busy { opacity: .75; cursor: progress; }

/* Styles for the (currently commented out) getevisa payment iframe, kept so
   enabling the gateway needs no CSS work. */
.payment-container { margin-top: 6px; }
.payment-subtitle { font-size: 1.05rem; color: var(--navy-800); margin-bottom: 14px; }
.security-badge { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--green-050); border: 1px solid #bfe3cd; border-radius: var(--radius); margin-bottom: 20px; }
.security-badge svg { width: 20px; height: 20px; flex: none; color: var(--green-600); margin-top: 2px; }
.security-badge p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
/* Height copied from getevisa (.payment-body / .payment-iframe are 380px there),
   so the processor's own form fits without a tail of empty space below it.
   White, not var(--bg-alt), so the frame blends into the card fields inside it.

   400px, not 380px: the iframe carries .mt-2 (20px) so it is not flush with the
   top edge, and the container has to absorb that or overflow:hidden would clip
   20px off the bottom of the processor's form. 380 + 20 = 400, which is also the
   min-height getevisa gives its .payment-body-container. */
.payment-body {
    position: relative; height: 400px; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
/* Full width of its container — getevisa uses 99%, which leaves a visible sliver. */
.payment-iframe { display: block; width: 100%; height: 380px; border: 0; }
.loading-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(7, 28, 48, .82); color: #fff; z-index: 2; }
.loading-overlay p { margin: 0; font-size: .92rem; }
.spinner { width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .28); border-top-color: var(--gold-400); border-radius: 50%; animation: appspin .8s linear infinite; }
@keyframes appspin { to { transform: rotate(360deg); } }
.secure-badge-footer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .82rem; color: var(--ink-mute); }
.secure-badge-footer svg { width: 15px; height: 15px; color: var(--green-600); }

/* --------------------------------------- mobile action bar & price breakdown
   Desktop never shows either: the step panels carry the buttons and the sidebar
   carries the price. The media query below switches them on. */
.mobile-action-bar { display: none; }
.price-note { display: none; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
    .app-layout { grid-template-columns: 1fr; }

    /* "Your application" is removed on mobile, as on getevisa's apply-now. The
       fixed action bar carries the primary action and .price-note carries the
       price. Scoped to the form so the summary on the confirmation and data
       top-up pages, which have no action bar, keeps showing. */
    #application-form .app-sidebar { display: none; }

    /* Non-connected destinations: at checkout the summary drops below the review
       panel so the totals stay on screen. Connected destinations hide it entirely
       (handled by the connected rule above) for a full-width speed selector. */
    body:not([data-connected="1"])[data-app-step="4"] #application-form .app-sidebar { display: block; position: static; order: 2; }

    .app-sidebar .summary__security { display: none; }

    /* The bar is the primary action, so the inline "next" buttons would duplicate
       it. "Back" stays. Step 1 has only a next button, so its whole row goes. */
    .app-nav [data-action="next"] { display: none; }
    .app-nav--next-only { display: none; }

    /* Clear the fixed bar — but not on step 4, where the bar is hidden and the
       extra space would just be a gap. */
    body:not([data-app-step="4"]) .app-disclaimer { padding-bottom: 104px; }
    /* apply-now has no disclaimer spacer now — give the form its own clearance so
       the last field isn't hidden behind the fixed action bar. */
    body[data-app-step]:not([data-app-step="4"]) .app-section { padding-bottom: 104px; }

    .mobile-action-bar {
        display: flex; align-items: center; gap: 14px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 12px 18px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(10, 37, 64, .12);
    }
    /* Step 4 keeps its actions inline (continue to payment, then pay). */
    body[data-app-step="4"] .mobile-action-bar { display: none; }

    .mobile-action-bar .btn { flex: 1; justify-content: center; }

    /* Hidden on every non-desktop layout — the desktop sidebar is the only place
       the price/travellers summary shows (owner's decision). Kept in the DOM. */
    .price-note {
        display: none; align-items: center; justify-content: space-between; gap: 14px;
        max-width: 480px; margin: 22px auto 0; padding: 13px 16px;
        background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        font-size: .88rem; color: var(--ink-soft);
    }
    .price-note strong {
        font-family: var(--ff-serif); font-size: 1.12rem; color: var(--navy-800);
        white-space: nowrap;
    }
    /* Step 4 brings the full summary back, so this would duplicate it. */
    body[data-app-step="4"] .price-note { display: none; }
}
@media (max-width: 860px) {
    .app-steps { gap: 6px; }
    .app-steps li { padding: 11px; justify-content: center; }
    .app-steps__label { display: none; }
    .app-steps li.is-active { flex: 2.4; }
    .app-steps li.is-active .app-steps__label { display: block; }
}
@media (max-width: 620px) {
    .app-section { padding-top: 30px; }
    .app-panel { padding: 22px 18px; }
    .date-group { grid-template-columns: 1fr; }
    .app-nav { flex-direction: column-reverse; align-items: stretch; }
    .app-nav .btn { width: 100%; }
    .app-masthead__secure span { display: none; }
    .app-masthead__inner { min-height: 55px; }
    .traveler__body { padding: 18px 14px 2px; }
    /* Hide the compact price summary on phones (kept in the DOM, just not shown). */
    .price-note { display: none; }
}

/* ===========================================================================
   Estilo 3 — pago al lado del resumen (shared/applies/style3)
   ===========================================================================
   Solo maqueta el ultimo paso: a la izquierda el viaje y la velocidad, a la
   derecha la pasarela. No redefine ni un color ni una tipografia — reutiliza
   .app-panel, .opt-card y el resto, para que el formulario siga siendo el
   mismo de siempre y solo cambie donde se coloca cada bloque.

   En el paso 4 la barra lateral ya se oculta y .app-layout pasa a una columna
   (regla de mas arriba), asi que esta rejilla dispone del ancho completo.
   ========================================================================= */
.pay2 {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 24px 24px;
    /* stretch, no start: las dos tarjetas comparten fila y asi salen de la misma
       altura aunque una lleve menos contenido. */
    align-items: stretch;
}
/* Colocacion explicita. Las dos tarjetas van en la MISMA fila -- de ahi que
   queden igualadas -- y el importe debajo de la izquierda, en una segunda fila
   que en la columna derecha se queda vacia. En el DOM el importe va el ultimo,
   para que en movil caiga debajo del pago; aqui se recoloca. */
.pay2__side  { grid-column: 1; grid-row: 1; min-width: 0; }
.pay2__main  { grid-column: 2; grid-row: 1; min-width: 0; }
.pay2__price { grid-column: 1; grid-row: 2; min-width: 0; }

/* La tarjeta de dentro tiene que crecer con su columna: sin esto el elemento de
   la rejilla se estira y la tarjeta blanca se queda corta dentro. */
.pay2__side, .pay2__main { display: flex; flex-direction: column; }
.pay2__side > .app-panel, .pay2__main > .app-panel { flex: 1 1 auto; }

/* Tarjeta con el viaje, arriba de la columna izquierda. Fondo suave y no un
   simple bloque de texto: es el resumen de lo que se esta pagando y tiene que
   leerse de un vistazo, sin competir con el selector de velocidad. */
.pay2__trip { background: var(--bg-soft, #f5f7fa); border: 1px solid var(--line-soft, #e6e9ee); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; }
.pay2__trip-doc { margin: 0 0 8px; font-weight: 700; font-size: 1.02rem; line-height: 1.25; }
.pay2__facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.pay2__facts li { font-size: .85rem; color: var(--ink-soft, #566); line-height: 1.4; }

/* El importe va fuera de las tarjetas, sobre el fondo de la pagina: dos lineas
   y nada mas. Todo en <small>: aqui manda elegir la velocidad, y el precio
   acompaña sin pelearse con las tarjetas de arriba. */
.pay2__price { padding: 0 4px; }
.pay2__price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .75rem; line-height: 1.4; }
.pay2__price-row > small { font-size: 1em; }
.pay2__price-amount { white-space: nowrap; font-size: 1em; }
.pay2__price-per { color: var(--ink-mute, #8a94a2); }
.pay2__price-note { margin: 2px 0 0; font-size: .7rem; line-height: 1.45; color: var(--ink-mute, #8a94a2); }
.pay2__price-note small { font-size: 1em; }
.pay2__price-note { margin: 2px 0 0; font-size: .78rem; color: var(--ink-mute, #8a94a2); }

/* Un solo "Atras", debajo de las dos columnas y a la izquierda. El panel de
   pago trae el suyo, pensado para volver al resumen: aqui el resumen esta al
   lado, asi que ese boton no lleva a ningun sitio y se esconde. */
.pay2__nav { margin-top: 20px; margin-bottom: 48px; display: flex; justify-content: flex-start; }
/* El icono 'arrow' apunta a la derecha; en "Atras" va girado, como en .app-nav. */
.pay2__nav .btn--ghost svg:first-child { transform: rotate(180deg); }
.pay2 #checkout-panel .app-nav { display: none; }


/* Mientras se vuelve a pedir el enlace de la pasarela tras cambiar la
   velocidad: se atenua y se bloquea, para que nadie teclee una tarjeta en un
   iframe que esta a punto de recargarse con otro importe. */
.pay2__main.is-refreshing { opacity: .55; pointer-events: none; }

@media (max-width: 1080px) {
    /* Una sola columna y el orden del DOM: resumen, pago y el importe debajo
       del todo. Se anulan las filas y columnas fijas de arriba, que si no
       arrastrarian la maqueta de dos columnas. */
    .pay2 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .pay2__side, .pay2__main, .pay2__price { grid-column: 1; grid-row: auto; }
}

/* Las dos opciones del sentido del tramite, en dos columnas. En movil se
   apilan: cabrian, pero "Entrada a Colombia" y "Salida de Colombia" se
   diferencian en una palabra y conviene que no queden pegadas de lado. */
.opt-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) {
    .opt-cards--two { grid-template-columns: minmax(0, 1fr); }
}

/* Las mismas dos opciones en el confirmation-application, que no usa
   .opt-cards sino la maqueta llana de ese formulario. */
.ca-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ca-choice__opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-soft, #e6e9ee); border-radius: 10px; cursor: pointer; }
.ca-choice__opt input { flex: none; }
@media (max-width: 620px) {
    .ca-choice { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Barra lateral de style3: tranquilizar, no vender.

   Sin precio ni total: el importe ya se vio en la landing y vuelve a verse en
   la pantalla de pago. Repetirlo en cada paso solo recuerda el gasto mientras
   el cliente esta escribiendo su pasaporte.
   --------------------------------------------------------------------------- */
.aside-card { background: #fff; border: 1px solid var(--line-soft, #e6e9ee); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.aside-card__head {
    width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
    background: var(--navy, #0a2540); color: #fff; padding: 18px 20px;
    border: 0; font: inherit; cursor: default;
}
.aside-card__headtext { flex: 1 1 auto; min-width: 0; }
.aside-card__doc { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.aside-card__trip { display: block; margin-top: 4px; font-size: .85rem; opacity: .85; }
.aside-card__trip:empty { display: none; }
/* La flecha solo tiene sentido donde la tarjeta se pliega. */
.aside-card__head > svg { display: none; flex: none; width: 18px; height: 18px; transition: transform .2s ease; }

.aside-card__perks { list-style: none; margin: 0; padding: 6px 20px 18px; }
.aside-card__perks li { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.aside-card__perks li + li { border-top: 1px solid var(--line-soft, #e6e9ee); }
.aside-card__perks svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--navy, #0a2540); }
.aside-card__perks strong { display: block; font-size: .9rem; line-height: 1.3; }
.aside-card__perks span { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.45; color: var(--ink-soft, #566); }

/* ---------------------------------------------------------------------------
   Estilo 3: la tarjeta lateral, fuera del formulario.

   Tiene que salir por delante del indicador de pasos en movil, y el indicador
   esta fuera del <form>: desde dentro no hay orden de CSS que la suba. Asi que
   el aside vive en el contenedor, el primero de todos, y en escritorio se le
   devuelve su sitio con esta rejilla.
   --------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    .app-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
        column-gap: 32px;
        align-items: start;
    }
    .app-grid > .app-steps         { grid-column: 1 / -1; grid-row: 1; }
    .app-grid > #application-form  { grid-column: 1; grid-row: 2; }
    .app-grid > .app-sidebar--card { grid-column: 2; grid-row: 2; }

    /* El formulario ya no lleva la lateral dentro: una sola columna, o dejaria
       la mitad derecha vacia. */
    .app-grid > #application-form.app-layout { grid-template-columns: minmax(0, 1fr); }

    /* En el paso de pago sobra la lateral, igual que en movil: el resumen del
       viaje ya esta en la columna izquierda del pago. Fuera ella, el pago se
       queda con todo el ancho en vez de dejar un hueco a la derecha. */
    body[data-app-step="4"] .app-grid { grid-template-columns: minmax(0, 1fr); }
    body[data-app-step="4"] .app-grid > .app-sidebar--card { display: none; }
}

/* ---------------------------------------------------------------------------
   Y en movil: pegada al nav, de lado a lado, y plegada.

   Sube arriba del todo y se queda como una franja con el documento y el viaje.
   Las ventajas se despliegan al tocarla. Asi el cliente ve SIEMPRE que
   documento esta pidiendo y para que fecha -- que es lo que tranquiliza -- sin
   gastar media pantalla en tres parrafos que ya ha leido.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    /* Pegada al nav: fuera el aire que la seccion deja arriba. */
    .app-section--card { padding-top: 0; }

    /* Gana a la regla que esconde la lateral en movil. */
    .app-grid > .app-sidebar--card { display: block; position: static; }

    /* De lado a lado: se sale del padding del contenedor (22px) y pierde las
       esquinas y los bordes laterales, que ahi no pintan nada. */
    .app-grid > .app-sidebar--card { margin: 0 -22px 18px; }
    .app-sidebar--card .aside-card { border-radius: 0; border-left: 0; border-right: 0; }

    .app-sidebar--card .aside-card__head { cursor: pointer; }
    .app-sidebar--card .aside-card__head > svg { display: block; }
    .app-sidebar--card .aside-card__head[aria-expanded="true"] > svg { transform: rotate(180deg); }

    /* Plegada de serie. La abre el boton, que escribe aria-expanded. */
    .app-sidebar--card .aside-card__perks { display: none; }
    .app-sidebar--card .aside-card__head[aria-expanded="true"] + .aside-card__perks { display: block; }

    /* En movil se queda tambien en el paso de pago: es la franja plegada
       pegada al nav, y ahi no estorba -- dice que documento se paga y para que
       fecha justo antes de meter la tarjeta. En escritorio si se quita (ver el
       bloque de min-width), porque alli es una columna entera. */
}