/* ==========================================================================
   MVS Custom Styles — My Visa Solution
   visasolutionbali.com

   Global CSS overrides and enhancements for the Hello Elementor child theme.
   Elementor handles most styling via Global Settings; these cover everything
   outside Elementor's control: floating buttons, utility classes, hover
   effects, accessibility, print, and component-level polish.

   Table of Contents:
   1.  CSS Custom Properties
   2.  Base / Reset Enhancements
   3.  Custom Scrollbar
   4.  Accessibility (focus-visible, reduced-motion)
   5.  Button Transitions & Hover Effects
   6.  Card Hover Effects
   7.  WhatsApp Floating Button
   8.  Mobile Sticky CTA Bar
   9.  Back to Top Button
  10.  Cookie Consent Bar
  11.  Sticky Header
  12.  Blog Reading Progress Bar
  13.  Counter Animation Helpers
  14.  Trust Bar Icon Hover
  15.  Testimonial Card Styles
  16.  Blog Card Hover Effects
  17.  FAQ Accordion Chevron Animation
  18.  Visa Card Styles & Badges
  19.  Stat Pills
  20.  Form Field Focus Styles
  21.  Skeleton Loading Placeholders
  22.  Exit-Intent Popup Overlay
  23.  Visa Quiz Widget Styles
  24.  Responsive Typography
  25.  Elementor Overrides (Minimal)
  26.  Print Styles
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================================== */
:root {
    /* Brand colors */
    --mvs-teal:             #02AA9D;
    --mvs-teal-dark:        #028b81;
    --mvs-teal-light:       #E6F7F5;
    --mvs-orange:           #F8B140;
    --mvs-orange-dark:      #e5a034;
    --mvs-orange-light:     #FFF5E0;
    --mvs-dark:             #1A1A2E;
    --mvs-white:            #FFFFFF;
    --mvs-gray-light:       #F5F5F5;
    --mvs-gray-text:        #666666;
    --mvs-green-whatsapp:   #25D366;

    /* Typography */
    --mvs-font-heading:     'Poppins', sans-serif;
    --mvs-font-body:        'DM Sans', sans-serif;

    /* Spacing */
    --mvs-radius:           12px;
    --mvs-radius-sm:        8px;
    --mvs-radius-lg:        16px;

    /* Shadows */
    --mvs-shadow:           0 4px 20px rgba(0, 0, 0, 0.08);
    --mvs-shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.12);
    --mvs-shadow-teal:      0 4px 12px rgba(2, 170, 157, 0.3);

    /* Transition */
    --mvs-transition:       all 0.3s ease;
    --mvs-transition-fast:  all 0.2s ease;

    /* Header */
    --mvs-header-height:    80px;
}


/* ==========================================================================
   2. BASE / RESET ENHANCEMENTS
   ========================================================================== */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

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

body {
    /* font-family is set by Elementor Global Kit — do NOT override here.
       Only enhance rendering. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

/* Image lazy-load transition — scoped to custom lazy-load only.
   Do NOT hide all images globally; Elementor manages its own image loading. */
img.mvs-lazy:not(.loaded) {
    opacity: 0;
    transition: opacity 0.4s ease;
}

img.mvs-lazy.loaded {
    opacity: 1;
}


/* ==========================================================================
   3. CUSTOM SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--mvs-gray-light);
}

::-webkit-scrollbar-thumb {
    background: var(--mvs-teal);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mvs-teal-dark);
}

/* Firefox scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--mvs-teal) var(--mvs-gray-light);
}


/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

/* Focus-visible outlines for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--mvs-teal);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip-to-content link (screen readers) */
.mvs-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--mvs-dark);
    color: var(--mvs-white);
    font-family: var(--mvs-font-heading);
    font-weight: 600;
    border-radius: var(--mvs-radius-sm);
    text-decoration: none;
    transition: top 0.2s ease;
}

.mvs-skip-link:focus {
    top: 16px;
}

/* Reduced motion: disable ALL animations and transitions */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .mvs-whatsapp-pulse {
        display: none;
    }
}


/* ==========================================================================
   5. BUTTON TRANSITIONS & HOVER EFFECTS
   ========================================================================== */

/* Global button transition for Elementor buttons */
.elementor-button,
.elementor-button-link,
a.mvs-btn,
button.mvs-btn {
    transition: var(--mvs-transition);
}

.elementor-button:hover {
    transform: translateY(-2px);
}

/* Secondary button style (apply class .mvs-btn-secondary in Elementor) */
.mvs-btn-secondary {
    background: transparent !important;
    border: 2px solid var(--mvs-orange) !important;
    color: var(--mvs-orange) !important;
}

.mvs-btn-secondary:hover {
    background: var(--mvs-orange) !important;
    color: var(--mvs-dark) !important;
}

/* Ghost button */
.mvs-btn-ghost {
    background: transparent !important;
    border: 2px solid var(--mvs-dark) !important;
    color: var(--mvs-dark) !important;
}

.mvs-btn-ghost:hover {
    background: var(--mvs-dark) !important;
    color: var(--mvs-white) !important;
}

/* WhatsApp-colored CTA button */
.mvs-btn-whatsapp {
    background: var(--mvs-green-whatsapp) !important;
    color: var(--mvs-white) !important;
    border: none !important;
}

.mvs-btn-whatsapp:hover {
    background: #20bd5a !important;
    color: var(--mvs-white) !important;
}


/* ==========================================================================
   6. CARD HOVER EFFECTS
   ========================================================================== */

/* Generic card hover lift */
.mvs-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mvs-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--mvs-shadow-lg);
}


/* ==========================================================================
   7. WHATSAPP FLOATING BUTTON
   ========================================================================== */
.mvs-whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background: var(--mvs-green-whatsapp);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
}

.mvs-whatsapp-float.visible {
    opacity: 1;
    visibility: visible;
}

.mvs-whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
    color: #fff;
}

/* Pulse animation ring */
.mvs-whatsapp-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--mvs-green-whatsapp);
    animation: mvs-pulse 2s ease-out infinite;
    opacity: 0;
    pointer-events: none;
}

@keyframes mvs-pulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Hide desktop float on mobile (mobile sticky bar replaces it) */
@media (max-width: 767px) {
    .mvs-whatsapp-float {
        display: none;
    }
}


/* ==========================================================================
   8. MOBILE STICKY CTA BAR
   ========================================================================== */
.mvs-mobile-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mvs-white);
    border-top: 1px solid #e5e7eb;
    padding: 12px 16px;
    gap: 12px;
    z-index: 9998;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 767px) {
    .mvs-mobile-cta-bar {
        display: flex;
    }

    /* Prevent content being hidden behind sticky bar */
    body {
        padding-bottom: 72px;
    }
}

.mvs-mobile-cta-wa,
.mvs-mobile-cta-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--mvs-radius-sm);
    font-family: var(--mvs-font-heading);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: var(--mvs-transition);
}

.mvs-mobile-cta-wa {
    background: var(--mvs-green-whatsapp);
    color: #fff;
}

.mvs-mobile-cta-wa:hover {
    background: #20bd5a;
    color: #fff;
}

.mvs-mobile-cta-form {
    background: var(--mvs-teal);
    color: #fff;
}

.mvs-mobile-cta-form:hover {
    background: var(--mvs-teal-dark);
    color: #fff;
}


/* ==========================================================================
   9. BACK TO TOP BUTTON
   ========================================================================== */
button.mvs-back-to-top {
    position: fixed !important;
    bottom: 96px !important;
    right: 24px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    background: var(--mvs-dark) !important;
    color: var(--mvs-white) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--mvs-transition);
    z-index: 9997;
    box-shadow: var(--mvs-shadow) !important;
    line-height: 1 !important;
}

button.mvs-back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

button.mvs-back-to-top:hover {
    background: var(--mvs-teal) !important;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    button.mvs-back-to-top {
        bottom: 84px !important;
        right: 16px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }
}


/* ==========================================================================
   10. COOKIE CONSENT BAR
   ========================================================================== */
.mvs-cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mvs-dark);
    color: var(--mvs-white);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 10001;
    font-family: var(--mvs-font-body);
    font-size: 14px;
    line-height: 1.5;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.mvs-cookie-bar.visible {
    transform: translateY(0);
}

.mvs-cookie-bar__text {
    flex: 1;
}

.mvs-cookie-bar__text a {
    color: var(--mvs-teal);
    text-decoration: underline;
}

.mvs-cookie-bar__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.mvs-cookie-bar__btn {
    padding: 8px 20px;
    border-radius: var(--mvs-radius-sm);
    font-family: var(--mvs-font-heading);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: var(--mvs-transition-fast);
}

.mvs-cookie-bar__btn--accept {
    background: var(--mvs-teal);
    color: var(--mvs-white);
}

.mvs-cookie-bar__btn--accept:hover {
    background: var(--mvs-teal-dark);
}

.mvs-cookie-bar__btn--decline {
    background: transparent;
    color: var(--mvs-gray-text);
    border: 1px solid var(--mvs-gray-text);
}

.mvs-cookie-bar__btn--decline:hover {
    color: var(--mvs-white);
    border-color: var(--mvs-white);
}

@media (max-width: 767px) {
    .mvs-cookie-bar {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .mvs-cookie-bar__actions {
        width: 100%;
    }

    .mvs-cookie-bar__btn {
        flex: 1;
    }
}


/* ==========================================================================
   11. STICKY HEADER
   ========================================================================== */

/* Make the header sticky on all devices — works with both
   Elementor Theme Builder headers AND the default Hello Elementor header.
   Elementor's Motion Effects sticky is preferred (set in template JSON),
   but this CSS provides a fallback for any header structure. */
.elementor-location-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9990 !important;
    width: 100% !important;
    transition: box-shadow 0.3s ease, padding 0.3s ease, background 0.3s ease;
}

/* When WP admin bar is visible, offset the sticky header */
.admin-bar .elementor-location-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .elementor-location-header {
        top: 46px !important;
    }
}

/* Applied by JS when user scrolls past 100px */
.header-scrolled {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.header-scrolled .elementor-widget-site-logo img {
    max-height: 40px !important;
    transition: max-height 0.3s ease;
}

/* Elementor sticky z-index fix (when using Motion Effects sticky) */
.elementor-sticky--active {
    z-index: 9990 !important;
}

/* Prevent content from hiding behind fixed/sticky header */
body:not(.elementor-editor-active) .elementor-location-header + * {
    scroll-margin-top: var(--mvs-header-height, 80px);
}


/* ==========================================================================
   12. BLOG READING PROGRESS BAR
   ========================================================================== */
.mvs-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--mvs-teal), var(--mvs-teal-dark));
    z-index: 10000;
    transition: width 0.1s linear;
    pointer-events: none;
}


/* ==========================================================================
   13. COUNTER ANIMATION HELPERS
   ========================================================================== */
.mvs-counter {
    display: inline-block;
    font-family: var(--mvs-font-heading);
    font-weight: 700;
    color: var(--mvs-teal);
    font-variant-numeric: tabular-nums;
}

/* Large counter variant (hero stats) */
.mvs-counter--lg {
    font-size: 48px;
    line-height: 1.1;
}

@media (max-width: 767px) {
    .mvs-counter--lg {
        font-size: 36px;
    }
}

/* Medium counter variant (trust bar) */
.mvs-counter--md {
    font-size: 32px;
    line-height: 1.2;
}

/* Prefix/suffix styling */
.mvs-counter-prefix,
.mvs-counter-suffix {
    font-family: var(--mvs-font-heading);
    font-weight: 700;
    color: var(--mvs-teal);
}


/* ==========================================================================
   14. TRUST BAR ICON HOVER
   ========================================================================== */
.mvs-trust-icon {
    transition: transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mvs-trust-icon:hover {
    animation: mvs-bounce 0.5s ease;
}

@keyframes mvs-bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-6px); }
    50% { transform: translateY(-2px); }
    75% { transform: translateY(-4px); }
}

/* Trust bar container */
.mvs-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.mvs-trust-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}


/* ==========================================================================
   15. TESTIMONIAL CARD STYLES
   ========================================================================== */
.mvs-testimonial-card {
    background: var(--mvs-white);
    border-radius: var(--mvs-radius);
    padding: 32px;
    box-shadow: var(--mvs-shadow);
    position: relative;
    transition: var(--mvs-transition);
    border: 1px solid transparent;
}

.mvs-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mvs-shadow-lg);
    border-color: var(--mvs-teal-light);
}

/* Quote icon */
.mvs-testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 64px;
    font-family: Georgia, serif;
    color: var(--mvs-teal-light);
    line-height: 1;
    pointer-events: none;
}

.mvs-testimonial-card__text {
    font-family: var(--mvs-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--mvs-gray-text);
    margin-bottom: 20px;
    font-style: italic;
}

.mvs-testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mvs-testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--mvs-teal-light);
}

.mvs-testimonial-card__name {
    font-family: var(--mvs-font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--mvs-dark);
}

.mvs-testimonial-card__meta {
    font-size: 13px;
    color: var(--mvs-gray-text);
}

/* Star rating */
.mvs-testimonial-card__stars {
    color: var(--mvs-orange);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}


/* ==========================================================================
   16. BLOG CARD HOVER EFFECTS
   ========================================================================== */
.mvs-blog-card {
    background: var(--mvs-white);
    border-radius: var(--mvs-radius);
    overflow: hidden;
    box-shadow: var(--mvs-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mvs-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mvs-shadow-lg);
}

.mvs-blog-card__image {
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.mvs-blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mvs-blog-card:hover .mvs-blog-card__image img {
    transform: scale(1.05);
}

.mvs-blog-card__content {
    padding: 24px;
}

.mvs-blog-card__category {
    display: inline-block;
    font-family: var(--mvs-font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mvs-teal);
    background: var(--mvs-teal-light);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.mvs-blog-card__title {
    font-family: var(--mvs-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--mvs-dark);
    line-height: 1.3;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.mvs-blog-card:hover .mvs-blog-card__title {
    color: var(--mvs-teal);
}

.mvs-blog-card__excerpt {
    font-size: 14px;
    color: var(--mvs-gray-text);
    line-height: 1.6;
    margin-bottom: 16px;
}

.mvs-blog-card__meta {
    font-size: 13px;
    color: var(--mvs-gray-text);
    display: flex;
    align-items: center;
    gap: 12px;
}

.mvs-blog-card__read-more {
    font-family: var(--mvs-font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--mvs-teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}

.mvs-blog-card__read-more:hover {
    gap: 8px;
    color: var(--mvs-teal-dark);
}


/* ==========================================================================
   17. FAQ ACCORDION CHEVRON ANIMATION
   ========================================================================== */

/* Custom chevron for Elementor Toggle / Accordion widget */
.mvs-faq .elementor-toggle-item {
    border: 1px solid #e5e7eb;
    border-radius: var(--mvs-radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.mvs-faq .elementor-toggle-item:hover {
    border-color: var(--mvs-teal-light);
}

.mvs-faq .elementor-tab-title {
    padding: 20px 24px !important;
    font-family: var(--mvs-font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--mvs-dark);
    background: var(--mvs-white);
    cursor: pointer;
    position: relative;
}

/* Custom chevron icon */
.mvs-faq .elementor-toggle-icon {
    transition: transform 0.3s ease;
}

.mvs-faq .elementor-tab-title.elementor-active .elementor-toggle-icon {
    transform: rotate(180deg);
}

/* Active state */
.mvs-faq .elementor-tab-title.elementor-active {
    color: var(--mvs-teal);
    background: var(--mvs-teal-light);
}

.mvs-faq .elementor-tab-content {
    padding: 0 24px 20px 24px !important;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mvs-gray-text);
}

/* Standalone FAQ accordion (non-Elementor) */
.mvs-accordion__item {
    border: 1px solid #e5e7eb;
    border-radius: var(--mvs-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.mvs-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--mvs-white);
    cursor: pointer;
    font-family: var(--mvs-font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--mvs-dark);
    border: none;
    width: 100%;
    text-align: left;
    transition: var(--mvs-transition-fast);
}

.mvs-accordion__header:hover {
    background: var(--mvs-gray-light);
}

.mvs-accordion__chevron {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    color: var(--mvs-gray-text);
}

.mvs-accordion__item.active .mvs-accordion__header {
    color: var(--mvs-teal);
    background: var(--mvs-teal-light);
}

.mvs-accordion__item.active .mvs-accordion__chevron {
    transform: rotate(180deg);
    color: var(--mvs-teal);
}

.mvs-accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mvs-accordion__item.active .mvs-accordion__body {
    max-height: 500px;
}

.mvs-accordion__content {
    padding: 0 24px 20px 24px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--mvs-gray-text);
}


/* ==========================================================================
   18. VISA CARD STYLES & BADGES
   ========================================================================== */
.mvs-visa-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-left: 4px solid transparent;
    background: var(--mvs-white);
    border-radius: var(--mvs-radius);
    padding: 24px;
}

.mvs-visa-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mvs-shadow-lg);
    border-left-color: var(--mvs-teal);
}

/* Badge styles */
.mvs-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
    line-height: 1;
    font-family: var(--mvs-font-heading);
}

.mvs-badge--popular {
    background: var(--mvs-orange-light);
    color: var(--mvs-orange);
}

.mvs-badge--new {
    background: var(--mvs-teal-light);
    color: var(--mvs-teal);
}

.mvs-badge--recommended {
    background: var(--mvs-teal);
    color: var(--mvs-white);
}

/* Stat pills on visa hero sections */
.mvs-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mvs-teal-light);
    padding: 8px 16px;
    border-radius: var(--mvs-radius-sm);
    font-weight: 700;
    font-size: 14px;
    color: var(--mvs-dark);
    font-family: var(--mvs-font-heading);
}

.mvs-stat-pill svg {
    color: var(--mvs-teal);
    width: 16px;
    height: 16px;
}


/* ==========================================================================
   19. FORM FIELD FOCUS STYLES
   ========================================================================== */

/* Elementor form fields */
.elementor-field-group input:not([type="submit"]):not([type="button"]),
.elementor-field-group textarea,
.elementor-field-group select {
    border: 1px solid #e0e0e0;
    border-radius: var(--mvs-radius-sm);
    padding: 12px 16px;
    font-family: var(--mvs-font-body);
    font-size: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.elementor-field-group input:not([type="submit"]):not([type="button"]):focus,
.elementor-field-group textarea:focus,
.elementor-field-group select:focus {
    border-color: var(--mvs-teal);
    box-shadow: 0 0 0 3px rgba(2, 170, 157, 0.15);
    outline: none;
}

/* General form fields (non-Elementor) */
.mvs-form input:not([type="submit"]):not([type="button"]),
.mvs-form textarea,
.mvs-form select {
    border: 1px solid #e0e0e0;
    border-radius: var(--mvs-radius-sm);
    padding: 12px 16px;
    font-family: var(--mvs-font-body);
    font-size: 15px;
    width: 100%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mvs-form input:not([type="submit"]):not([type="button"]):focus,
.mvs-form textarea:focus,
.mvs-form select:focus {
    border-color: var(--mvs-teal);
    box-shadow: 0 0 0 3px rgba(2, 170, 157, 0.15);
    outline: none;
}


/* ==========================================================================
   20. SKELETON LOADING PLACEHOLDERS
   ========================================================================== */
.mvs-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: mvs-skeleton-shimmer 1.5s infinite;
    border-radius: var(--mvs-radius-sm);
}

@keyframes mvs-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.mvs-skeleton--text {
    height: 16px;
    margin-bottom: 12px;
    width: 100%;
}

.mvs-skeleton--text:last-child {
    width: 60%;
}

.mvs-skeleton--heading {
    height: 28px;
    width: 70%;
    margin-bottom: 16px;
}

.mvs-skeleton--image {
    aspect-ratio: 3 / 2;
    width: 100%;
}

.mvs-skeleton--circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.mvs-skeleton--card {
    padding: 24px;
    border-radius: var(--mvs-radius);
}

.mvs-skeleton--button {
    height: 48px;
    width: 160px;
    border-radius: var(--mvs-radius);
}


/* ==========================================================================
   21. EXIT-INTENT POPUP OVERLAY
   ========================================================================== */
.mvs-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mvs-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mvs-popup {
    background: var(--mvs-white);
    border-radius: var(--mvs-radius-lg);
    max-width: 520px;
    width: 90%;
    padding: 40px;
    position: relative;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
}

.mvs-popup-overlay.active .mvs-popup {
    transform: scale(1) translateY(0);
}

.mvs-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: var(--mvs-gray-light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mvs-gray-text);
    transition: var(--mvs-transition-fast);
}

.mvs-popup__close:hover {
    background: var(--mvs-dark);
    color: var(--mvs-white);
}


/* ==========================================================================
   22. VISA QUIZ WIDGET STYLES
   ========================================================================== */
.visa-quiz-container {
    background: var(--mvs-white);
    border-radius: var(--mvs-radius-lg);
    overflow: hidden;
}

/* Progress indicator */
.mvs-quiz__progress {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.mvs-quiz__progress-step {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    transition: background 0.3s ease;
}

.mvs-quiz__progress-step.active,
.mvs-quiz__progress-step.completed {
    background: var(--mvs-teal);
}

/* Step container */
.mvs-quiz__step {
    display: none;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.mvs-quiz__step.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* Leaving animation */
.mvs-quiz__step.leaving {
    opacity: 0;
    transform: translateX(-20px);
}

/* Step heading */
.mvs-quiz__step-label {
    font-family: var(--mvs-font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mvs-teal);
    margin-bottom: 8px;
}

.mvs-quiz__question {
    font-family: var(--mvs-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--mvs-dark);
    margin-bottom: 24px;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .mvs-quiz__question {
        font-size: 18px;
    }
}

/* Option buttons */
.mvs-quiz__options {
    display: grid;
    gap: 12px;
}

.mvs-quiz__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--mvs-gray-light);
    border: 2px solid transparent;
    border-radius: var(--mvs-radius);
    cursor: pointer;
    font-family: var(--mvs-font-body);
    font-size: 15px;
    color: var(--mvs-dark);
    transition: var(--mvs-transition-fast);
    text-align: left;
    width: 100%;
}

.mvs-quiz__option:hover {
    background: var(--mvs-teal-light);
    border-color: var(--mvs-teal);
}

.mvs-quiz__option.selected {
    background: var(--mvs-teal-light);
    border-color: var(--mvs-teal);
    color: var(--mvs-teal-dark);
    font-weight: 500;
}

.mvs-quiz__option-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mvs-white);
    border-radius: var(--mvs-radius-sm);
    font-size: 20px;
    flex-shrink: 0;
}

.mvs-quiz__option.selected .mvs-quiz__option-icon {
    background: var(--mvs-teal);
    color: var(--mvs-white);
}

/* Nationality select dropdown */
.mvs-quiz__select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: var(--mvs-radius);
    font-family: var(--mvs-font-body);
    font-size: 15px;
    color: var(--mvs-dark);
    background: var(--mvs-white);
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.mvs-quiz__select:focus {
    border-color: var(--mvs-teal);
    box-shadow: 0 0 0 3px rgba(2, 170, 157, 0.15);
    outline: none;
}

/* Navigation buttons */
.mvs-quiz__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    gap: 12px;
}

.mvs-quiz__btn {
    padding: 12px 28px;
    border-radius: var(--mvs-radius);
    font-family: var(--mvs-font-heading);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: none;
    transition: var(--mvs-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mvs-quiz__btn--back {
    background: transparent;
    color: var(--mvs-gray-text);
    padding-left: 0;
}

.mvs-quiz__btn--back:hover {
    color: var(--mvs-dark);
}

.mvs-quiz__btn--next {
    background: var(--mvs-teal);
    color: var(--mvs-white);
    margin-left: auto;
}

.mvs-quiz__btn--next:hover {
    background: var(--mvs-teal-dark);
    transform: translateY(-1px);
}

.mvs-quiz__btn--next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Result card */
.mvs-quiz__result {
    text-align: center;
    padding: 8px 0;
}

.mvs-quiz__result-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--mvs-teal-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.mvs-quiz__result-label {
    font-family: var(--mvs-font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mvs-teal);
    margin-bottom: 8px;
}

.mvs-quiz__result-visa {
    font-family: var(--mvs-font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--mvs-dark);
    margin-bottom: 8px;
    line-height: 1.2;
}

@media (max-width: 767px) {
    .mvs-quiz__result-visa {
        font-size: 22px;
    }
}

.mvs-quiz__result-details {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.mvs-quiz__result-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--mvs-gray-text);
}

.mvs-quiz__result-detail strong {
    color: var(--mvs-dark);
}

.mvs-quiz__result-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--mvs-gray-text);
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.mvs-quiz__result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.mvs-quiz__result-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--mvs-radius);
    font-family: var(--mvs-font-heading);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: var(--mvs-transition);
}

.mvs-quiz__result-cta--primary {
    background: var(--mvs-teal);
    color: var(--mvs-white);
    box-shadow: var(--mvs-shadow-teal);
}

.mvs-quiz__result-cta--primary:hover {
    background: var(--mvs-teal-dark);
    color: var(--mvs-white);
    transform: translateY(-2px);
}

.mvs-quiz__result-cta--secondary {
    background: transparent;
    color: var(--mvs-teal);
    border: 2px solid var(--mvs-teal);
}

.mvs-quiz__result-cta--secondary:hover {
    background: var(--mvs-teal-light);
    color: var(--mvs-teal-dark);
}

.mvs-quiz__restart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    background: none;
    border: none;
    color: var(--mvs-gray-text);
    font-family: var(--mvs-font-body);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mvs-quiz__restart:hover {
    color: var(--mvs-teal);
}


/* ==========================================================================
   23. RESPONSIVE TYPOGRAPHY
   ========================================================================== */

/* These augment Elementor's global typography for non-Elementor elements */
@media (max-width: 1024px) {
    :root {
        --mvs-header-height: 70px;
    }
}

@media (max-width: 767px) {
    :root {
        --mvs-header-height: 60px;
    }
}


/* ==========================================================================
   23b. CTA SECTION MOBILE FIX
   ========================================================================== */

/* Ensure CTA body text is fully readable on teal background */
@media (max-width: 767px) {
    /* Make CTA paragraph text pure white for better contrast on teal */
    .elementor-element [style*="background-color"] .elementor-widget-text-editor,
    .elementor-element [style*="background-color"] .elementor-widget-text-editor p {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    /* Reduce CTA button padding on mobile for better proportions */
    #cta-whatsapp .elementor-button,
    #cta-form .elementor-button {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* Ensure CTA buttons stack properly with consistent width */
    #cta-whatsapp,
    #cta-form {
        width: 100%;
    }

    #cta-whatsapp .elementor-button,
    #cta-form .elementor-button {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   24. ELEMENTOR OVERRIDES (Minimal)
   ========================================================================== */

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Section overlap utility */
.mvs-overlap-top {
    margin-top: -60px;
    position: relative;
    z-index: 2;
}

/* Gradient text utility */
.mvs-gradient-text {
    background: linear-gradient(135deg, var(--mvs-teal), var(--mvs-teal-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Teal underline accent */
.mvs-underline-accent {
    position: relative;
    display: inline-block;
}

.mvs-underline-accent::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--mvs-orange);
    border-radius: 2px;
}

/* Active navigation link */
.current-menu-item > a,
.current-menu-ancestor > a {
    color: var(--mvs-teal) !important;
}


/* ==========================================================================
   25. SCROLL REVEAL ANIMATIONS (Safe — Progressive Enhancement)
   Content is ALWAYS visible by default. Animations only apply when JS
   confirms it's running by adding .js to <html>. If JS fails, content
   is fully visible — no animation, no breakage.

   Usage in Elementor: add "_css_classes": "mvs-reveal" to element settings.
   Variants: mvs-reveal-left, mvs-reveal-right, mvs-reveal-scale, mvs-reveal-fade
   Stagger: add mvs-delay-1 through mvs-delay-5 (100ms–500ms)
   ========================================================================== */

/* Base: elements are FULLY VISIBLE by default */
.mvs-reveal,
.mvs-reveal-left,
.mvs-reveal-right,
.mvs-reveal-scale,
.mvs-reveal-fade {
    opacity: 1;
    transform: none;
}

/* When JS is running, set up the pre-animation state */
.js .mvs-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .mvs-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .mvs-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .mvs-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .mvs-reveal-fade {
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Revealed state — JS adds this class on scroll */
.js .mvs-reveal.revealed,
.js .mvs-reveal-left.revealed,
.js .mvs-reveal-right.revealed,
.js .mvs-reveal-scale.revealed,
.js .mvs-reveal-fade.revealed {
    opacity: 1;
    transform: none;
}

/* Stagger delays (apply alongside mvs-reveal) */
.js .mvs-delay-1 { transition-delay: 100ms; }
.js .mvs-delay-2 { transition-delay: 200ms; }
.js .mvs-delay-3 { transition-delay: 300ms; }
.js .mvs-delay-4 { transition-delay: 400ms; }
.js .mvs-delay-5 { transition-delay: 500ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .js .mvs-reveal,
    .js .mvs-reveal-left,
    .js .mvs-reveal-right,
    .js .mvs-reveal-scale,
    .js .mvs-reveal-fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   26. PRINT STYLES
   ========================================================================== */
@media print {
    .mvs-whatsapp-float,
    .mvs-mobile-cta-bar,
    .mvs-back-to-top,
    .mvs-cookie-bar,
    .mvs-popup-overlay,
    .mvs-reading-progress,
    .elementor-location-header,
    .elementor-location-footer,
    .mvs-quiz-container,
    nav,
    footer {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
        color: #000 !important;
        background: #fff !important;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 12px;
        color: #666;
    }

    .mvs-visa-card,
    .mvs-testimonial-card,
    .mvs-blog-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
    }
}


/* ==========================================================================
   24. VISA CARD LOOP ITEM FIXES
   ========================================================================== */

/* Equal height cards in the loop grid */
.e-loop-item {
    height: 100%;
}

.e-loop-item > .elementor {
    height: 100%;
}

.e-loop-item > .elementor > .elementor-element {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Push the bottom icons+button row to the bottom of the card */
.e-loop-item .elementor-element-40a85785 {
    margin-top: auto !important;
}

/* Shrink the oversized Extendable / Work Allowed icons from 50px to 20px */
.e-loop-item .mvs-visa-extendable-icon .elementor-icon,
.e-loop-item .mvs-visa-work-icon .elementor-icon {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.e-loop-item .mvs-visa-extendable-icon .elementor-icon svg,
.e-loop-item .mvs-visa-work-icon .elementor-icon svg {
    width: 20px !important;
    height: 20px !important;
}

.e-loop-item .mvs-visa-extendable-icon,
.e-loop-item .mvs-visa-work-icon {
    width: auto !important;
    flex-shrink: 0 !important;
}

/* Style Learn More button as a text link (matching homepage) */
.e-loop-item a[id="visa-card-cta"],
.e-loop-item a[id="visa-card-cta"].elementor-button {
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: #02AA9D !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
    display: inline !important;
}

.e-loop-item a[id="visa-card-cta"]:hover {
    color: #028b81 !important;
    background: transparent !important;
}

/* Add arrow after Learn More text */
.e-loop-item a[id="visa-card-cta"] .elementor-button-text::after {
    content: ' \2192';
}

/* Hide the button icon if any */
.e-loop-item a[id="visa-card-cta"] .elementor-button-icon {
    display: none !important;
}

/* Fix the bottom row container layout */
.e-loop-item .elementor-element-69ac7240 {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    align-items: center !important;
}

/* Make icon label headings smaller */
.e-loop-item .elementor-element-69ac7240 .elementor-widget-heading .elementor-heading-title {
    font-size: 11px !important;
    color: #888 !important;
}