/* Visa Services pages (list + details) — frontend-only sprint.
   Scoped under .visa-services-page / .visa-details-page only; every class
   here has no equivalent already in public/assets/scss/style.css (verified
   before writing this file — reused classes like .course-booking-sidebar,
   .choose-item, .howWork-*, .zAccordion-two, .subject-details-sidebar,
   .cta-content, .zForm-control, .sf-select-checkbox, .sf-btn-icon-primary
   are NOT duplicated here, they're used directly in the Blade views).
   Same page-scoped-extension convention already established by
   institute-courses/list.blade.php's own inline <style> block for
   .course-item-two extras. */

/* Listing page's white background — the details page already has its
   own identical rule below (.visa-details-page). */
.visa-services-page {
    background: var(--white);
}

/* Tighten the gap between the hero banner and "Choose Your Visa Service".
   Same reduced-tier values already established for
   .visa-content-section.section-gap on the details page. */
.visa-types-section.section-gap {
    padding-top: 40px;
}

@media (max-width: 991.98px) {
    .visa-types-section.section-gap {
        padding-top: 30px;
    }
}

/* "Choose Your Visa Service" intro text — wide enough to keep the
   description on one line at desktop (the shared .max-w-561 utility
   wraps it to two); untouched below tablet width, where it wraps
   naturally like everywhere else since 700px won't fit the viewport
   anyway. */
@media (min-width: 768px) {
    .visa-types-section .section-content-wrap.max-w-561 {
        max-width: 700px;
    }
}

@media (max-width: 575.98px) {
    .visa-types-section.section-gap {
        padding-top: 24px;
    }
}

/* Visa type selection card — premium image-led redesign (image is the
   card's main visual, ~45-50% of its height), still built entirely from
   existing design tokens (--brand-primary/--secondary/--stroke/--para-text
   etc., see dynamic-color.blade.php) — no new colors introduced. The old
   icon-badge treatment (.visa-card-icon) is now only the fallback shown
   inside the image area for a visa type with no CMS image uploaded yet
   (not a placeholder image file — a CSS gradient + icon, matching the
   same fallback already used on the details page's own hero image). */
.visa-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--white);
    border: 1px solid var(--stroke-2, var(--stroke));
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(18, 29, 53, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    text-decoration: none;
}

.visa-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(18, 29, 53, 0.12);
    border-color: var(--brand-primary);
}

.visa-card-image {
    position: relative;
    height: 220px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--secondary);
}

.visa-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.visa-card:hover .visa-card-image img {
    transform: scale(1.08);
}

.visa-card-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #5b8fd6 100%);
}

.visa-card-image-fallback i {
    font-size: 42px;
    color: var(--white);
}

/* Subtle blue-identity wash on hover — opacity is animated on the overlay
   element itself (not baked into an rgba() color) so it works regardless
   of the admin-configurable --brand-primary hex value. */
.visa-card-image-overlay {
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.visa-card:hover .visa-card-image-overlay {
    opacity: 0.14;
}

.visa-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 24px 24px 22px;
}

.visa-card-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--title-text, var(--gray-90));
    margin-bottom: 10px;
}

.visa-card-desc {
    font-size: 14px;
    line-height: 22px;
    color: var(--para-text);
    margin-bottom: 16px;
}

.visa-card-highlight {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--brand-primary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 18px;
    margin-bottom: 18px;
}

.visa-card-cta {
    margin-top: auto;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-primary);
    transition: gap 0.3s ease, color 0.3s ease;
}

.visa-card:hover .visa-card-cta {
    gap: 12px;
}

@media (max-width: 991.98px) {
    .visa-card-image {
        height: 190px;
    }
}

@media (max-width: 575.98px) {
    .visa-card-image {
        height: 170px;
    }

    .visa-card-body {
        padding: 20px 18px 18px;
    }
}

/* Destination selector — quick-shortcut chips beneath the main dropdown.
   flex-shrink:0 + white-space:nowrap so a chip that doesn't fit the
   current row wraps to the next line intact, instead of the default flex
   behavior of shrinking it (which clips its text at narrow widths). */
.visa-destination-chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--stroke-2, var(--stroke));
    background: var(--white);
    color: var(--gray-90, var(--title-text));
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.visa-destination-chip:hover,
.visa-destination-chip.is-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--white);
}

/* Country flags are now real uploaded images (Country::flag) instead of
   emoji glyphs, so they need explicit sizing to sit inline like the emoji
   used to. */
.visa-destination-flag {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
}

/* Application form sidebar — sticky on desktop/tablet only, never forced
   on mobile, using a real class so the mobile media query can cleanly
   override it.

   A JS-driven "scroll normally, lock only once fully visible, release at
   the end" version was attempted (and a few pure-CSS position:sticky
   variants before that) — all either didn't engage at all, or introduced
   a worse bug (the card briefly jumping to invalid horizontal positions
   during the static/fixed transition, confirmed via automated real-
   browser testing). Reverted to the simple, verified-stable version:
   sticky at top:20px, with its own max-height + internal scroll so the
   submit button is always reachable on viewports too short to show the
   whole card — an explicitly accepted trade-off over further fragile
   custom positioning logic. */
.visa-application-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .visa-application-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* ============================================================
   Visa Details page — v2 layout pass
   No colored hero banner anymore: pure white page background, a plain
   left-aligned breadcrumb, a service image, then title + description.
   ============================================================ */

.visa-details-page {
    background: var(--white);
}

.visa-page-top {
    padding: 20px 0 0;
}

/* Title + description — now the first element inside the left column
   (.visa-main-content supplies the top offset that lines it up with the
   sidebar heading), image comes after it. */
.visa-page-heading {
    margin-bottom: 28px;
}

/* Service image — sits inside the left column (narrower than full page
   width) below the title/description. No real per-service photography
   exists yet, so this is a styled gradient panel with a large icon
   standing in for a photo. */
.visa-service-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 350px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-primary) 0%, #5b8fd6 100%);
}

@media (max-width: 575.98px) {
    .visa-service-image {
        height: 160px;
        border-radius: 14px;
    }
}

.visa-service-image-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--white-20, rgba(255, 255, 255, 0.2));
    border: 1px solid var(--white-20, rgba(255, 255, 255, 0.3));
}

.visa-service-image-icon i {
    font-size: 38px;
    color: var(--white);
}

@media (max-width: 575.98px) {
    .visa-service-image-icon {
        width: 72px;
        height: 72px;
    }

    .visa-service-image-icon i {
        font-size: 28px;
    }
}

.visa-page-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.visa-page-title {
    font-size: 34px;
    font-weight: 600;
    color: var(--title-text, var(--gray-90));
    margin-bottom: 10px;
}

/* Replaces the removed "Where are you traveling?" destination picker — a
   visa type now belongs to exactly one country, stated plainly instead of
   asked for. */
.visa-page-country {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--para-text, var(--gray-60));
    margin-bottom: 14px;
}

/* Application sidebar's "Destination Country" — plain, non-editable
   statement (the visa type's own fixed country) rather than a select
   input, since there's nothing left to choose. */
.visa-form-country-readonly {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--secondary, #F5F7FA);
    color: var(--title-text, var(--gray-90));
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .visa-page-title {
        font-size: 26px;
    }
}

.visa-page-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--para-text);
    max-width: 700px;
    margin-bottom: 0;
}

/* Content section below the title block. */
.visa-content-section.section-gap {
    padding-top: 40px;
    padding-bottom: 90px;
}

@media (max-width: 991.98px) {
    .visa-content-section.section-gap {
        padding-top: 30px;
        padding-bottom: 60px;
    }
}

@media (max-width: 575.98px) {
    .visa-content-section.section-gap {
        padding-top: 24px;
        padding-bottom: 40px;
    }
}

/* Baseline-align the main content column with the application sidebar
   card: the sidebar card has its own p-sm-25 (25px) internal padding, so
   its first heading sits 25px below the row's top edge — this matches
   that offset only where the two columns actually sit side by side. */
@media (min-width: 992px) {
    .visa-main-content {
        padding-top: 25px;
    }
}

/* "Where are you traveling?" multiselect dropdown — the plugin's own
   .multiselect-container relies on Bootstrap's --bs-dropdown-bg variable
   chain (style.css never sets an explicit background-color for it), which
   resolves to transparent in this theme's build. Scoped fix, doesn't
   touch the shared component's CSS for any other page that uses it. */
.visa-details-page .multiselect-container {
    background-color: var(--white);
    z-index: 50;
}

/* The dropdown is an absolutely-positioned child appended inside this
   wrapper. Later sibling sections further down the page (each with their
   own data-aos transform, which creates a new stacking context) were
   painting on top of it regardless of the dropdown's own z-index, since
   z-index only wins within the same stacking context. Promoting this
   wrapper itself to a positioned, higher-z-index stacking context lifts
   the whole thing — dropdown included — above every section after it. */
.visa-destination-section {
    position: relative;
    z-index: 30;
}

/* Visa Service Introduction — a calm, single-column "about this service"
   section directly under the hero. No cards, just typography + a thin
   row of reassurance points. */
.visa-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.visa-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--para-text);
    max-width: 820px;
}

.visa-intro-points {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
}

.visa-intro-point {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-90, var(--title-text));
}

.visa-intro-point i {
    color: var(--brand-primary);
}

/* What We Help You With — light, flat boxes in a single row (4-across on
   desktop), not the previous vertical divided list. */
.visa-help-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 991.98px) {
    .visa-help-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .visa-help-grid {
        grid-template-columns: 1fr;
    }
}

.visa-help-box {
    background: var(--secondary);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
}

.visa-help-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--white);
}

.visa-help-box-icon i {
    font-size: 18px;
    color: var(--brand-primary);
}

.visa-help-box-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--title-text, var(--gray-90));
    margin-bottom: 6px;
}

.visa-help-box-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--para-text);
    margin-bottom: 0;
}

/* Required Documents — premium checklist card, replacing the pink-tinted
   .subject-details-sidebar box with a neutral, 2-column grid. */
.visa-doc-card {
    border: 1px solid var(--stroke-2, var(--stroke));
    border-radius: 16px;
    padding: 28px;
    background: var(--white);
}

.visa-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    margin-bottom: 20px;
}

@media (max-width: 575.98px) {
    .visa-doc-grid {
        grid-template-columns: 1fr;
    }
}

.visa-doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-90, var(--title-text));
}

.visa-doc-item i {
    color: var(--brand-primary);
    font-size: 18px;
}

.visa-doc-note {
    font-size: 13px;
    color: var(--para-text);
    margin: 16px 0 0;
}

/* How The Process Works — compact horizontal stepper (was a vertical
   timeline, which took up too much page height for 6 steps). Numbered
   circles on a single connecting line at desktop; wraps to a plain grid
   on smaller screens (the connecting line only makes sense as one row). */
.visa-process-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.visa-process-step {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0 8px;
}

.visa-process-step::after {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(50% + 28px);
    right: calc(-50% + 28px);
    height: 2px;
    background: var(--stroke-2, var(--stroke));
}

.visa-process-step:last-child::after {
    display: none;
}

.visa-process-step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.visa-process-step-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--title-text, var(--gray-90));
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .visa-process-row {
        flex-wrap: wrap;
        gap: 24px 0;
    }

    .visa-process-step {
        flex: 0 0 33.333%;
    }

    .visa-process-step::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .visa-process-step {
        flex: 0 0 50%;
    }
}

/* Why Almorad — elevated cards (white, bordered, soft shadow, hover
   lift), more professional than the previous bare icon+text grid. */
.visa-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 767.98px) {
    .visa-trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .visa-trust-grid {
        grid-template-columns: 1fr;
    }
}

.visa-trust-card {
    text-align: center;
    background: var(--white);
    border: 1px solid var(--stroke-2, var(--stroke));
    border-top: 3px solid var(--brand-primary);
    border-radius: 14px;
    padding: 28px 18px;
    box-shadow: 0 4px 16px rgba(18, 29, 53, 0.04);
    transition: all 0.3s ease;
}

.visa-trust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(18, 29, 53, 0.08);
}

.visa-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--secondary);
}

.visa-trust-icon i {
    font-size: 20px;
    color: var(--brand-primary);
}

.visa-trust-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--title-text, var(--gray-90));
    margin-bottom: 6px;
}

.visa-trust-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--para-text);
    margin-bottom: 0;
}

/* FAQ — light card wrapper around the existing, unmodified accordion. */
.visa-faq-wrap {
    border: 1px solid var(--stroke-2, var(--stroke));
    border-radius: 16px;
    padding: 8px 24px;
    background: var(--white);
}

/* Section label used across the redesigned page (Visa Service
   Introduction / What We Help You With / etc.) */
.visa-section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--title-text, var(--gray-90));
    margin-bottom: 24px !important;
}

/* === Discovery/Search filter (list.blade.php restructure) ===
   Same visual language as .visa-card (white panel, --stroke-2 border,
   soft shadow, brand-primary accents) but its own classes — nothing here
   reused from Homepage/Universities/Institute search bars, so those stay
   completely untouched. */
.visa-discovery-filter {
    background: var(--white);
    border: 1px solid var(--stroke-2, var(--stroke));
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(23, 58, 100, 0.08);
    padding: 24px;
}

.visa-discovery-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}

.visa-discovery-filter-fields .item {
    flex: 1 1 0;
    min-width: 0;
}

.visa-discovery-filter-fields .searchButton {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .visa-discovery-filter-fields {
        flex-wrap: wrap;
    }

    .visa-discovery-filter-fields .item,
    .visa-discovery-filter-fields .searchButton {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* === Visa Country cards (replaces the old flat Visa Type grid on this
   page — that card style/markup, .visa-card, moved as-is to the new
   per-country Visa Types page instead). === */
.visa-country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    background-color: var(--white);
    border: 1px solid var(--stroke-2, var(--stroke));
    border-radius: 20px;
    padding: 28px 16px;
    box-shadow: 0 4px 20px rgba(18, 29, 53, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.visa-country-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(18, 29, 53, 0.1);
}

.visa-country-card-flag {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary, #F5F7FA);
    border: 1px solid var(--stroke-2, var(--stroke));
    margin-bottom: 14px;
    flex-shrink: 0;
}

.visa-country-card-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visa-country-card-flag i {
    font-size: 24px;
    color: var(--brand-primary);
}

.visa-country-card-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--title-text, var(--gray-90));
    margin-bottom: 4px;
}


.visa-country-card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin-top: auto;
}

.visa-country-card-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--para-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.visa-country-card-link:hover {
    color: var(--brand-primary);
}

.visa-country-card-link-primary {
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}