/**
 * ============================================================
 * Visa Setup Scale Widget — Stylesheet
 * Version : 1.3.0
 * Updated : Mobile + Tablet Accordion Fix
 *
 * TABLE OF CONTENTS
 * -----------------
 *  1.  CSS Custom Properties (Variables)
 *  2.  Base Reset
 *  3.  Title
 *  4.  Subtitle
 *  5.  Steps Container
 *  6.  Step Item
 *  7.  Indicator Column
 *  8.  Bar Stack (Animated Colour Bar)
 *  9.  Individual Bar Segments
 * 10.  Content Area
 * 11.  Step Heading
 * 12.  Step Description
 * 13.  Legacy Class Support
 * 14.  Tablet  ≤ 1023px
 * 15.  Mobile  ≤ 767px
 * 16.  Small Mobile ≤ 480px
 * 17.  Elementor Editor
 * 18.  Entrance Animation (opt-in)
 * 19.  Focus / Accessibility
 * 20.  High Contrast Mode
 * 21.  Reduced Motion
 * 22.  Print
 * 23.  RTL
 * 24.  Dark Mode (opt-in)
 * ============================================================
 */


/* ============================================================
   SECTION 1 : CSS CUSTOM PROPERTIES
   All visual tokens in one place.
   Override per-widget via Elementor Custom CSS if needed.
============================================================ */

.visa-wrap {
    /* --- Colours --- */
    --visa-color-heading-active   : #000000;   /* Active heading text       */
    --visa-color-heading-inactive : #666666;   /* Collapsed heading text    */
    --visa-color-num              : #000000;   /* Step number               */
    --visa-color-description      : #374151;   /* Description body text     */
    --visa-color-bar-top          : #000000;   /* Top bar segment           */
    --visa-color-bar-bottom       : #c9dcff;   /* Bottom bar segment        */

    /* --- Sizes --- */
    --visa-bar-active-height      : 112px;     /* Bar stack height when open*/
    --visa-indicator-width        : 36px;      /* Left column width         */
    --visa-bar-width              : 6px;       /* Colour bar thickness      */
    --visa-step-gap               : 28px;      /* Gap: indicator ↔ content  */
    --visa-heading-size           : 28px;      /* Heading font size         */
    --visa-desc-size              : 16px;      /* Description font size     */

    /* --- Transitions --- */
    --visa-speed                  : 0.4s;
    --visa-ease                   : cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   SECTION 2 : BASE RESET
   Scoped entirely inside .visa-wrap — never leaks to page.
============================================================ */

.visa-wrap {
    width: 900px;
    max-width: 100%;
    padding: 40px;
    box-sizing: border-box;
    font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Universal box-sizing reset — scoped only */
.visa-wrap *,
.visa-wrap *::before,
.visa-wrap *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================================
   SECTION 3 : TITLE
============================================================ */

.visa-title {
    margin: 0;
}


/* ============================================================
   SECTION 4 : SUBTITLE
============================================================ */

.visa-subtitle {
    margin-top: 12px;
}


/* ============================================================
   SECTION 5 : STEPS CONTAINER
============================================================ */

.visa-steps-container {
    margin-top: 56px;
}


/* ============================================================
   SECTION 6 : STEP ITEM
   Flex row — indicator on left, content on right.

   STATE CLASSES (set by JS):
   .is-active    → step is open
   .is-collapsed → step is closed (only heading visible)

   IMPORTANT: No display:none is used.
   Accordion uses max-height + opacity + visibility
   so CSS transitions work smoothly.
============================================================ */

.visa-step {
    display: flex;
    gap: var(--visa-step-gap);
    cursor: pointer;
    align-items: flex-start;
    margin-bottom: 16px;
    transition: margin-bottom 0.3s ease;

    /* Ensure step is always a block-level row on ALL screen sizes */
    width: 100%;
}

/* Active step — extra spacing below */
.visa-step.is-active {
    margin-bottom: 24px;
}

/* Collapsed step — normal spacing */
.visa-step.is-collapsed {
    margin-bottom: 16px;
}


/* ============================================================
   SECTION 7 : INDICATOR COLUMN
   Fixed-width column holding step number + colour bar.
============================================================ */

.visa-indicator {
    width: var(--visa-indicator-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;     /* Never shrinks — always same width */
}

/* Step number */
.visa-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--visa-color-num);
    line-height: 1.2;
    transition: color 0.3s ease;
}


/* ============================================================
   SECTION 8 : BAR STACK
   Vertical colour bar that animates below the step number.

   DEFAULT   : height 0, opacity 0, overflow hidden → invisible
   ACTIVE    : height 112px, opacity 1              → visible
   COLLAPSED : height 0, opacity 0                  → invisible

   JS sets height via style.setProperty with !important.
   CSS rules here act as declarative state definitions.
   Both work together — neither conflicts with the other.

   NOTE: We set visibility:hidden on collapsed so the bar
   is fully removed from tab order and screen readers.
============================================================ */

.visa-bar-stack {
    width: var(--visa-bar-width);
    display: flex;
    flex-direction: column;
    margin-top: 10px;

    /* Default hidden state */
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;

    /* GPU-accelerated transitions */
    will-change: height, opacity;
    transition:
        height  var(--visa-speed) var(--visa-ease),
        opacity var(--visa-speed) ease-out;
}

/* Active — bar visible */
.visa-step.is-active .visa-bar-stack {
    opacity: 1;
    height: var(--visa-bar-active-height) !important;
    visibility: visible;
}

/* Collapsed — bar hidden */
.visa-step.is-collapsed .visa-bar-stack {
    height: 0 !important;
    opacity: 0;
    visibility: hidden;
}


/* ============================================================
   SECTION 9 : INDIVIDUAL BAR SEGMENTS
   Two segments stack vertically inside .visa-bar-stack.
============================================================ */

.visa-bar {
    width: 100%;
    border-radius: 999px;   /* Pill / fully rounded ends */
}

/* Top segment — primary / dark */
.visa-bar-1 {
    height: 50%;
    background-color: var(--visa-color-bar-top);
}

/* Bottom segment — accent / light */
.visa-bar-3 {
    height: 40px;
    background-color: var(--visa-color-bar-bottom);
}


/* ============================================================
   SECTION 10 : CONTENT AREA
   Right column — heading + description.
============================================================ */

.visa-content {
    flex: 1;        /* Takes all width after indicator */
    min-width: 0;   /* Prevents flex overflow on small screens */
}


/* ============================================================
   SECTION 11 : STEP HEADING
   ALWAYS visible — in both active and collapsed state.
   Only the colour changes between states.

   DEFAULT (collapsed) : muted grey
   ACTIVE              : full black
============================================================ */

.visa-step-heading {
    font-size: var(--visa-heading-size);
    font-weight: 600;
    color: var(--visa-color-heading-inactive);  /* Muted by default */
    margin: 0;
    line-height: 1.2;

    /* Smooth colour fade on toggle */
    will-change: color;
    transition: color var(--visa-speed) var(--visa-ease);

    /* Ensure heading wraps properly on small screens */
    word-break: break-word;
}

/* Active → full colour */
.visa-step.is-active .visa-step-heading {
    color: var(--visa-color-heading-active);
}

/* Collapsed → muted (explicit for specificity safety) */
.visa-step.is-collapsed .visa-step-heading {
    color: var(--visa-color-heading-inactive);
}


/* ============================================================
   SECTION 12 : STEP DESCRIPTION
   Hidden by default, revealed when step is active.

   ANIMATION STRATEGY:
   • max-height animates from 0 → scrollHeight (set by JS)
   • opacity  animates from 0 → 1
   • visibility hidden on collapsed removes from accessibility tree
   • pointer-events none on collapsed prevents accidental clicks

   WHY NOT display:none?
   CSS transitions cannot animate from/to display:none.
   max-height + opacity gives a smooth slide-in effect.

   WHY visibility:hidden + pointer-events:none?
   They ensure the hidden description is truly inaccessible
   without breaking the animation.
============================================================ */

.visa-step-description {
    font-size: var(--visa-desc-size);
    color: var(--visa-color-description);
    max-width: 620px;
    line-height: 1.6;

    /* Default hidden state */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    visibility: hidden;
    pointer-events: none;

    /* GPU hint */
    will-change: max-height, opacity;

    /* Smooth transitions */
    transition:
        max-height var(--visa-speed) var(--visa-ease),
        opacity    var(--visa-speed) ease,
        margin-top var(--visa-speed) ease;
}

/* Active → visible (JS sets max-height inline) */
.visa-step.is-active .visa-step-description {
    opacity: 1;
    margin-top: 8px;
    visibility: visible;
    pointer-events: auto;
    /* max-height is set by JS dynamically — no fixed value needed */
}

/* Collapsed → force fully hidden on ALL screen sizes */
/* !important ensures mobile breakpoints cannot override these */
.visa-step.is-collapsed .visa-step-description {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ============================================================
   SECTION 13 : LEGACY CLASS SUPPORT
   Old markup may still use .visa-active / .inactive.
   These rules mirror the new .is-active / .is-collapsed
   so the widget works with both class naming conventions.
============================================================ */

/* Legacy active — same as .is-active */
.visa-step.visa-active .visa-step-heading {
    color: var(--visa-color-heading-active);
}
.visa-step.visa-active .visa-bar-stack {
    opacity: 1;
    height: var(--visa-bar-active-height) !important;
    visibility: visible;
}
.visa-step.visa-active .visa-step-description {
    opacity: 1;
    margin-top: 8px;
    visibility: visible;
    pointer-events: auto;
}

/* Legacy inactive — same as .is-collapsed */
.visa-step.inactive .visa-step-description {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.visa-step.inactive .visa-bar-stack {
    height: 0 !important;
    opacity: 0;
    visibility: hidden;
}


/* ============================================================
   SECTION 14 : TABLET RESPONSIVE  (max-width: 1023px)
   Layout adjustments only.
   Accordion behaviour is IDENTICAL to desktop.
   No accordion logic overrides here.
============================================================ */

@media (max-width: 1023px) {

    .visa-wrap {
        width: 100%;
        padding: 32px;
    }

    .visa-steps-container {
        margin-top: 48px;
    }

    .visa-step {
        gap: 24px;
        margin-bottom: 14px;
    }

    .visa-step.is-active {
        margin-bottom: 20px;
    }

    .visa-step.is-collapsed {
        margin-bottom: 14px;
    }

    .visa-step-heading {
        font-size: 24px;
    }

    .visa-step-description {
        font-size: 15px;
        max-width: 100%;
    }

    /*
     * CRITICAL: Re-assert collapsed description rules at tablet.
     * Without these, some browsers let inherited styles bleed through
     * when the viewport changes, breaking the accordion on tablet.
     */
    .visa-step.is-collapsed .visa-step-description {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .visa-step.is-collapsed .visa-bar-stack {
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}


/* ============================================================
   SECTION 15 : MOBILE RESPONSIVE  (max-width: 767px)
   Layout adjustments only.
   Accordion behaviour is IDENTICAL to desktop.
   No accordion logic overrides here.
============================================================ */

@media (max-width: 767px) {

    .visa-wrap {
        width: 100%;
        padding: 24px 20px;
    }

    .visa-steps-container {
        margin-top: 40px;
    }

    .visa-step {
        gap: 20px;
        margin-bottom: 12px;
    }

    .visa-step.is-active {
        margin-bottom: 18px;
    }

    .visa-step.is-collapsed {
        margin-bottom: 12px;
    }

    .visa-indicator {
        width: 28px;
    }

    .visa-bar-stack {
        width: 5px;
    }

    .visa-num {
        font-size: 13px;
    }

    .visa-step-heading {
        font-size: 22px;
    }

    .visa-step-description {
        font-size: 14px;
        max-width: 100%;
    }

    /*
     * CRITICAL: Re-assert collapsed rules at mobile.
     * Mobile browsers (especially iOS Safari + Android Chrome)
     * sometimes recalculate styles differently at breakpoints.
     * These !important rules act as an iron guarantee that
     * collapsed steps stay hidden regardless of any cascade conflict.
     */
    .visa-step.is-collapsed .visa-step-description {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .visa-step.is-collapsed .visa-bar-stack {
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /*
     * Re-assert active rules at mobile.
     * Ensures the open step description is always fully visible.
     */
    .visa-step.is-active .visa-step-description {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin-top: 8px !important;
    }

    .visa-step.is-active .visa-bar-stack {
        opacity: 1 !important;
        visibility: visible !important;
        height: var(--visa-bar-active-height) !important;
    }
}


/* ============================================================
   SECTION 16 : SMALL MOBILE  (max-width: 480px)
   Minimal padding and smallest font sizes.
   Accordion behaviour still IDENTICAL to desktop.
============================================================ */

@media (max-width: 480px) {

    .visa-wrap {
        padding: 20px 16px;
    }

    .visa-step {
        gap: 16px;
        margin-bottom: 10px;
    }

    .visa-step.is-active {
        margin-bottom: 16px;
    }

    .visa-step.is-collapsed {
        margin-bottom: 10px;
    }

    .visa-indicator {
        width: 24px;
    }

    .visa-bar-stack {
        width: 4px;
    }

    .visa-num {
        font-size: 12px;
    }

    .visa-step-heading {
        font-size: 20px;
    }

    .visa-step-description {
        font-size: 13px;
    }

    /*
     * CRITICAL: Re-assert collapsed + active rules at small mobile.
     * Same reasoning as Section 15 — mobile Safari specificity fix.
     */
    .visa-step.is-collapsed .visa-step-description {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .visa-step.is-collapsed .visa-bar-stack {
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .visa-step.is-active .visa-step-description {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        margin-top: 8px !important;
    }

    .visa-step.is-active .visa-bar-stack {
        opacity: 1 !important;
        visibility: visible !important;
        height: var(--visa-bar-active-height) !important;
    }
}


/* ============================================================
   SECTION 17 : ELEMENTOR EDITOR
   Only applies inside Elementor's live preview iframe.
============================================================ */

/* Minimum height so empty widget is visible in editor */
.elementor-editor-active .visa-wrap {
    min-height: 100px;
}

/* Relative position for editor overlays */
.elementor-editor-active .visa-step {
    position: relative;
}

/* Subtle dashed outline on hover — editor only, not frontend */
.elementor-editor-active .visa-step:hover {
    outline: 1px dashed rgba(0, 0, 0, 0.1);
}


/* ============================================================
   SECTION 18 : ENTRANCE ANIMATION (opt-in)
   Enable by adding class visa-enable-animation to .visa-wrap
   via Elementor → Advanced → CSS Classes.

   Steps start invisible, slide up when entering viewport.
   JS (Section 10) triggers .visa-animate via IntersectionObserver.
============================================================ */

/* Hidden initial state when animation is enabled */
.visa-enable-animation .visa-step:not(.visa-animate) {
    opacity: 0;
    transform: translateY(20px);
}

/* Triggered by JS when step enters viewport */
.visa-step.visa-animate {
    animation: visaFadeInUp 0.5s ease forwards;
}

@keyframes visaFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   SECTION 19 : FOCUS / ACCESSIBILITY
   Visible focus rings for keyboard navigation.
   :focus-visible shows ring only for keyboard, not mouse.
============================================================ */

/* Remove outline from wrap container itself */
.visa-wrap:focus-within {
    outline: none;
}

/* Keyboard focus ring on each step */
.visa-step:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Fallback for browsers without :focus-visible support */
.visa-step:focus:not(:focus-visible) {
    outline: none;
}


/* ============================================================
   SECTION 20 : HIGH CONTRAST MODE
   Overrides for Windows High Contrast / forced-colors.
   Ensures all elements remain readable.
============================================================ */

@media (prefers-contrast: high) {

    .visa-bar-1 {
        background-color: #000000 !important;
    }

    .visa-bar-3 {
        background-color: #0066cc !important;
    }

    .visa-step-heading {
        color: #000000 !important;
    }

    .visa-step.is-collapsed .visa-step-heading {
        color: #555555 !important;
    }

    .visa-step-description {
        color: #333333 !important;
    }
}


/* ============================================================
   SECTION 21 : REDUCED MOTION
   Respects OS-level "reduce animations" preference.
   Content still shows / hides — just instantly, no animation.
   Accordion functionality is NOT affected.
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .visa-wrap,
    .visa-wrap *,
    .visa-step {
        transition: none !important;
        animation: none !important;
    }
}


/* ============================================================
   SECTION 22 : PRINT STYLES
   Clean layout for printing.
   Forces colour bars to print (browsers suppress BG by default).
============================================================ */

@media print {

    .visa-wrap {
        padding: 20px 0;
        max-width: 100%;
        width: 100%;
    }

    /* Force colour bar backgrounds to print */
    .visa-bar-stack,
    .visa-bar-1,
    .visa-bar-3 {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}


/* ============================================================
   SECTION 23 : RTL SUPPORT
   Mirrors layout for right-to-left languages (Arabic, Hebrew).
   Requires [dir="rtl"] on a parent element or <html>.
============================================================ */

[dir="rtl"] .visa-step {
    flex-direction: row-reverse;    /* Indicator moves to right */
}

[dir="rtl"] .visa-content {
    text-align: right;
}


/* ============================================================
   SECTION 24 : DARK MODE (opt-in)
   Only activates when .visa-wrap ALSO has .visa-dark-mode.
   Intentionally opt-in — auto dark-mode could clash with
   Elementor's design colours.

   Enable: Add visa-dark-mode to Elementor CSS Classes field.
============================================================ */

@media (prefers-color-scheme: dark) {

    .visa-wrap.visa-dark-mode {
        background-color: #1a1a1a;
    }

    .visa-wrap.visa-dark-mode .visa-title {
        color: #ffffff;
    }

    .visa-wrap.visa-dark-mode .visa-subtitle {
        color: #9ca3af;
    }

    .visa-wrap.visa-dark-mode .visa-num {
        color: #ffffff;
    }

    /* Active heading — bright white */
    .visa-wrap.visa-dark-mode .visa-step.is-active .visa-step-heading {
        color: #ffffff;
    }

    /* Collapsed heading — muted grey */
    .visa-wrap.visa-dark-mode .visa-step.is-collapsed .visa-step-heading {
        color: #6b7280;
    }

    .visa-wrap.visa-dark-mode .visa-step-description {
        color: #d1d5db;
    }
}