/* CoffeeMatch Quiz - Full Viewport Styles */
:root {
    --cmq-primary: #002855;
    --cmq-secondary: #c8102e;
    --cmq-white: #ffffff;
    --cmq-gold: #d4a84b;
    --cmq-bg-gradient: transparent;
    --cmq-card-bg: linear-gradient(180deg, #c8102e 0%, #a00d24 100%);
    --cmq-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    --cmq-radius: 20px;
    --cmq-iphone-width: 375px;
    --cmq-iphone-height: 812px;
    --cmq-scrollbar-width: 6px;
    --cmq-scrollbar-track: rgba(255, 255, 255, 0.1);
    --cmq-scrollbar-thumb: rgba(255, 255, 255, 0.4);
    --cmq-scrollbar-thumb-hover: rgba(255, 255, 255, 0.6);
}

* {
    box-sizing: border-box;
}

/* ========================================
   CUSTOM SCROLLBAR STYLES
   ======================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
.cmq-phone-screen::-webkit-scrollbar,
.cmq-result-screen::-webkit-scrollbar,
.cmq-form-screen::-webkit-scrollbar,
.cmq-success-screen::-webkit-scrollbar,
.cmq-elementor-content::-webkit-scrollbar {
    width: var(--cmq-scrollbar-width);
}

.cmq-phone-screen::-webkit-scrollbar-track,
.cmq-result-screen::-webkit-scrollbar-track,
.cmq-form-screen::-webkit-scrollbar-track,
.cmq-success-screen::-webkit-scrollbar-track,
.cmq-elementor-content::-webkit-scrollbar-track {
    background: var(--cmq-scrollbar-track);
    border-radius: 3px;
}

.cmq-phone-screen::-webkit-scrollbar-thumb,
.cmq-result-screen::-webkit-scrollbar-thumb,
.cmq-form-screen::-webkit-scrollbar-thumb,
.cmq-success-screen::-webkit-scrollbar-thumb,
.cmq-elementor-content::-webkit-scrollbar-thumb {
    background: var(--cmq-scrollbar-thumb);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.cmq-phone-screen::-webkit-scrollbar-thumb:hover,
.cmq-result-screen::-webkit-scrollbar-thumb:hover,
.cmq-form-screen::-webkit-scrollbar-thumb:hover,
.cmq-success-screen::-webkit-scrollbar-thumb:hover,
.cmq-elementor-content::-webkit-scrollbar-thumb:hover {
    background: var(--cmq-scrollbar-thumb-hover);
}

/* Firefox */
.cmq-phone-screen,
.cmq-result-screen,
.cmq-form-screen,
.cmq-success-screen,
.cmq-elementor-content {
    scrollbar-width: thin;
    scrollbar-color: var(--cmq-scrollbar-thumb) var(--cmq-scrollbar-track);
}

/* Virtual scroll container for position absolute elements */
.cmq-virtual-scroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.cmq-virtual-scroll::-webkit-scrollbar {
    width: var(--cmq-scrollbar-width);
}

.cmq-virtual-scroll::-webkit-scrollbar-track {
    background: var(--cmq-scrollbar-track);
    border-radius: 3px;
}

.cmq-virtual-scroll::-webkit-scrollbar-thumb {
    background: var(--cmq-scrollbar-thumb);
    border-radius: 3px;
}

.cmq-virtual-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--cmq-scrollbar-thumb-hover);
}

/* Content wrapper inside virtual scroll - allows absolute positioning */
.cmq-virtual-scroll-content {
    position: relative;
    min-height: 100%;
    width: 100%;
}

/* Dark theme scrollbar variant */
.cmq-scrollbar-dark::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.cmq-scrollbar-dark::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}

.cmq-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

.cmq-scrollbar-dark {
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}

/* ========================================
   DESKTOP WRAPPER WITH IPHONE MOCKUP
   ======================================== */
.cmq-scroll-container,
.cmq-desktop-wrapper,
.cmq-mobile-scroll-container {
    display: none;
}

/* Desktop styles - show iPhone mockup */
@media (min-width: 769px) {
    /* ========================================
       Sticky Scroll Container
       ======================================== */
    .cmq-scroll-container {
        display: block;
        height: 300vh; /* Controls how long quiz stays sticky */
        position: relative;
    }

    /* ========================================
       iPhone Mockup (based on CodePen by Luke Meyrick)
       ======================================== */
    .cmq-desktop-wrapper {
        /* Phone variables */
        --phone-size: max(5px, 1vmin);
        --phone-height: 80em;
        --phone-pad: 1.25em;
        --phone-border-radius: 6.666em;
        --phone-border-width: 0.4em;
        --phone-button-width: 0.333em;
        --phone-notch-height: 3.33em;
        --phone-notch-width: 33.3%;
        --phone-notch-radius: calc(var(--phone-border-radius) - calc(var(--phone-pad) * 2));
        --phone-color-h: 215;
        display: flex;
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        background: var(--cmq-bg-gradient);
        align-items: center;
        justify-content: center;
        padding: 40px;
        font-size: var(--phone-size);
    }

    /* Exit quiz button */
    .cmq-exit-quiz-btn {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 14px 32px;
        border-radius: 30px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 9;
        backdrop-filter: blur(10px);
        pointer-events: auto !important;
    }

    .cmq-exit-quiz-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateX(-50%) scale(1.05);
    }

    /* Scroll locked state */
    body.cmq-scroll-locked {
        overflow: hidden !important;
        /* Padding-right is set dynamically via JS to compensate for scrollbar */
    }

    /* Use scrollbar-gutter for modern browsers to prevent layout shift */
    html {
        scrollbar-gutter: stable;
    }

    body.cmq-scroll-locked .cmq-exit-quiz-btn {
        animation: cmq-pulse 2s ease-in-out infinite;
    }

    @keyframes cmq-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
        50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    }

    .cmq-phone-con {
        display: flex;
        justify-content: center;
    }

    .cmq-phone {
        position: relative;
        z-index: 1;
        aspect-ratio: 37/76;
        background: black;
        height: var(--phone-height);
        border-radius: var(--phone-border-radius);
        box-shadow:
            0 0 0.1em 0.25em hsl(var(--phone-color-h), 20%, 25%),
            0 0 0 var(--phone-border-width) hsl(var(--phone-color-h), 30%, 85%);
        box-sizing: border-box;
    }

    /* Horizontal lines on frame */
    .cmq-phone:before {
        content: '';
        position: absolute;
        top: var(--phone-border-radius);
        right: calc(var(--phone-border-width) * -1);
        bottom: var(--phone-border-radius);
        left: calc(var(--phone-border-width) * -1);
        border: none;
    }

    /* Side Buttons */
    .cmq-buttons {
        position: absolute;
        inset: calc(var(--phone-border-width) * -1);
        pointer-events: none;
    }

    .cmq-buttons-left,
    .cmq-buttons-right {
        position: absolute;
        width: var(--phone-button-width);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5em;
    }

    .cmq-buttons-left {
        right: 100%;
        top: calc(var(--phone-border-radius) * 2);
    }

    .cmq-buttons-left .cmq-button:nth-child(1) {
        height: 3em;
        margin-bottom: 0.5em;
    }

    .cmq-buttons-right {
        left: 100%;
        transform: scale3d(-1, 1, 1);
        top: calc(var(--phone-border-radius) * 3);
    }

    .cmq-buttons-right .cmq-button {
        height: 9.5em;
    }

    .cmq-button {
        background: hsl(var(--phone-color-h), 20%, 95%);
        height: 6em;
        box-shadow:
            inset -0.15em 0 0.1em black,
            inset 0 0 0.1em hsl(var(--phone-color-h), 30%, 90%),
            inset 0 0.2em 0.1em hsl(var(--phone-color-h), 30%, 90%),
            inset 0 -0.2em 0.1em hsl(var(--phone-color-h), 30%, 90%),
            inset -0.1em 0.333em 0.1em rgba(0,0,0,0.5),
            inset -0.1em -0.333em 0.1em rgba(0,0,0,0.5);
        border-top-left-radius: 0.2em;
        border-bottom-left-radius: 0.2em;
    }

    /* Screen Container */
    .cmq-screen-container {
        position: absolute;
        inset: 0;
        border-radius: var(--phone-border-radius);
        border: var(--phone-pad) solid black;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }

    /* Dynamic Island / Notch */
    .cmq-notch {
        position: absolute;
        z-index: 10;
        top: -16px;
        left: 50%;
        transform: translateX(-50%);
        width: 185px;
        height: var(--phone-notch-height);
        background: black;
        border-radius: 0 0 calc(var(--phone-notch-height) / 2) calc(var(--phone-notch-height) / 2);
    }

    /* Camera lens */
    .cmq-camera {
        position: absolute;
        z-index: 11;
        top: calc(var(--phone-pad) + 1em + (var(--phone-notch-height) / 2));
        right: calc(50% - (var(--phone-notch-width) / 2) + 1em);
        transform: translateY(-50%);
        width: calc(var(--phone-notch-height) * 0.4);
        height: calc(var(--phone-notch-height) * 0.4);
        border-radius: 50%;
        background: #080928;
        box-shadow: inset 0 0 0.25em #4c4da3;
    }

    .cmq-camera:before {
        content: '';
        position: absolute;
        top: 20%;
        left: 20%;
        width: 30%;
        height: 30%;
        background: radial-gradient(#6667ac, transparent);
        border-radius: 50%;
    }

    /* Home Indicator */
    .cmq-home-indicator {
        position: absolute;
        z-index: 10;
        bottom: calc(var(--phone-pad) * 0.75);
        left: 50%;
        transform: translateX(-50%);
        width: 36.6%;
        height: calc(var(--phone-pad) * 0.5);
        background: white;
        border-radius: calc(var(--phone-pad) * 0.25);
        filter: drop-shadow(0 0.1em 0.25em rgba(0,0,0,0.1));
    }

    /* Quiz Screen inside iPhone */
    .cmq-phone-screen {
        position: absolute;
        inset: 0;
        background: var(--cmq-bg-gradient);
        border-radius: calc(var(--phone-border-radius) - var(--phone-pad));
        overflow: hidden;
        /* Container Queries - makes this the "viewport" for child elements */
        container-type: size;
        container-name: phone-screen;
        /* CSS Custom Properties for Elementor templates to use */
        /* These will be updated by JS with actual pixel values */
        --screen-width: 100%;
        --screen-height: 100%;
        /* Calculated aspect ratio based on iPhone mockup */
        --screen-aspect: calc(37 / 76);
    }

    /* Hide mobile container on desktop */
    .cmq-container.cmq-mobile-view {
        display: none !important;
    }

    /* Quiz inside iPhone screen */
    .cmq-phone-screen .cmq-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        padding: 0;
        z-index: 1;
    }

    .cmq-phone-screen .cmq-quiz-screen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
    }

    /* Card stack fills entire iPhone screen */
    .cmq-phone-screen .cmq-card-stack {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
        z-index: 1;
    }

    /* Card fills entire iPhone screen */
    .cmq-phone-screen .cmq-card {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        padding: 15px;
        padding-top: 70px;
        padding-bottom: 90px;
    }

    .cmq-phone-screen .cmq-card-question {
        font-size: 1rem;
    }

    /* Progress inside iPhone - positioned below Dynamic Island */
    .cmq-phone-screen .cmq-progress {
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1rem;
        z-index: 100;
    }

    /* Action buttons inside iPhone screen */
    .cmq-phone-screen .cmq-action-btn {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .cmq-phone-screen .cmq-actions {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        gap: 50px;
        z-index: 30;
    }

    .cmq-phone-screen .cmq-action-btn {
        width: 70px;
        height: 70px;
    }

    .cmq-phone-screen .cmq-welcome-title {
        font-size: 1.6rem;
    }

    .cmq-phone-screen .cmq-welcome-subtitle {
        font-size: 0.9rem;
    }

    .cmq-phone-screen .cmq-result-title {
        font-size: 1.5rem;
    }

    .cmq-phone-screen .cmq-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }

    /* All result screens inside phone - positioned and scrollable */
    .cmq-phone-screen .cmq-result {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        pointer-events: none;
    }

    .cmq-phone-screen .cmq-result.active {
        pointer-events: auto;
    }

    /* Hide result screen when not active */
    .cmq-phone-screen .cmq-result:not(.active) {
        display: none !important;
    }

    /* Form screen inside phone - positioned and scrollable */
    .cmq-phone-screen .cmq-form-screen {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        max-width: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 40px 20px !important;
        background: var(--cmq-primary) !important;
    }

    .cmq-phone-screen .cmq-form-screen:not(.active) {
        display: none !important;
    }

    .cmq-phone-screen .cmq-form-content {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
    }

    .cmq-phone-screen .cmq-form-title {
        display: block !important;
        font-size: 1.3rem;
        margin-bottom: 10px;
        color: var(--cmq-white) !important;
    }

    .cmq-phone-screen .cmq-form-subtitle {
        display: block !important;
        font-size: 0.85rem;
        margin-bottom: 20px;
        color: var(--cmq-white) !important;
        opacity: 0.9;
    }

    /* Elementor result screen - additional styling */
    .cmq-phone-screen .cmq-result.cmq-result-elementor {
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    .cmq-phone-screen .cmq-result-elementor-content {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
    }

    .cmq-phone-screen .cmq-result-elementor-content .elementor {
        height: auto !important;
        min-height: auto !important;
    }

    /* ========================================
       ELEMENTOR TEMPLATE CONTAINER SUPPORT
       Makes Elementor templates treat iPhone screen as viewport
       ======================================== */

    /* Card with Elementor content - MUST fill entire phone screen */
    .cmq-phone-screen .cmq-card:has(.cmq-elementor-content) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    /* Elementor content wrapper - fills entire card/phone screen */
    .cmq-phone-screen .cmq-elementor-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Override Elementor sections to use container height */
    .cmq-phone-screen .cmq-elementor-content .elementor,
    .cmq-phone-screen .cmq-elementor-content .elementor-inner,
    .cmq-phone-screen .cmq-elementor-content .elementor-section-wrap {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Elementor containers (new flexbox containers) - FORCE full height */
    .cmq-phone-screen .cmq-elementor-content .e-con,
    .cmq-phone-screen .cmq-elementor-content > .e-con,
    .cmq-phone-screen .cmq-elementor-content .elementor > .e-con {
        --container-max-width: 100% !important;
        width: 100% !important;
        min-height: 100% !important;
        height: 100% !important;
        flex: 1 !important;
    }

    /* CRITICAL: Elementor boxed container inner wrapper - MUST fill parent */
    .cmq-phone-screen .cmq-elementor-content .e-con-inner {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Old Elementor sections */
    .cmq-phone-screen .cmq-elementor-content .elementor-section {
        width: 100% !important;
        min-height: 100% !important;
    }

    .cmq-phone-screen .cmq-elementor-content .elementor-section-full_width {
        width: 100% !important;
    }

    /* Container query-based font scaling for Elementor content */
    .cmq-phone-screen .cmq-elementor-content {
        /* Base font size relative to container width */
        font-size: clamp(30px, 4cqw, 50px);
    }

    /* Utility classes for Elementor templates to use container units */
    .cmq-phone-screen .cmq-h-full {
        height: 100cqh !important;
        min-height: 100cqh !important;
    }

    .cmq-phone-screen .cmq-w-full {
        width: 100cqw !important;
    }
}

/* ========================================
   MOBILE FULLSCREEN (default)
   ======================================== */
.cmq-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--cmq-bg-gradient);
    font-family: 'Verlag', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Mobile: scroll snap behavior like desktop */
@media (max-width: 768px) {
    .cmq-desktop-wrapper,
    .cmq-scroll-container {
        display: none !important;
    }

    /* Mobile scroll container - enables sticky behavior */
    .cmq-mobile-scroll-container {
        display: block;
        height: 150vh; /* Controls how long quiz stays sticky */
        position: relative;
        background: var(--cmq-primary, #002855);
    }

    /* Hide WordPress footer/header on mobile when quiz container exists */
    .cmq-mobile-scroll-container ~ footer,
    .cmq-mobile-scroll-container ~ .site-footer,
    .cmq-mobile-scroll-container ~ #colophon,
    footer:has(~ .cmq-mobile-scroll-container),
    body:has(.cmq-mobile-scroll-container) footer,
    body:has(.cmq-mobile-scroll-container) .site-footer,
    body:has(.cmq-mobile-scroll-container) .site-info,
    body:has(.cmq-mobile-scroll-container) #colophon {
        display: none !important;
    }

    /* Mobile wrapper - sticky positioning */
    .cmq-mobile-wrapper {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: var(--cmq-primary, #002855);
        overflow: hidden;
    }

    .cmq-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        z-index: 10;
        background: var(--cmq-primary, #002855);
    }

    /* Mobile exit button */
    .cmq-mobile-exit-btn {
        display: block !important;
        position: absolute !important;
        bottom: calc(30px + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 14px 32px !important;
        border-radius: 30px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        z-index: 9999 !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: opacity 0.3s ease !important;
    }

    /* Hide exit button on result, form, and success screens */
    .cmq-mobile-wrapper:has(.cmq-result.active) .cmq-mobile-exit-btn,
    .cmq-mobile-wrapper:has(.cmq-form-screen.active) .cmq-mobile-exit-btn,
    .cmq-mobile-wrapper:has(.cmq-success.active) .cmq-mobile-exit-btn {
        display: none !important;
    }

    /* Quiz screen fills entire container on mobile */
    .cmq-quiz-screen {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
    }

    /* Card stack fills entire screen on mobile */
    .cmq-card-stack {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
    }

    /* Card fills entire screen on mobile */
    .cmq-card {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 20px !important;
        padding-top: calc(40px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    }

    /* Progress indicator on mobile */
    .cmq-progress {
        position: absolute !important;
        top: 7vh !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        color: var(--cmq-white) !important;
        font-size: 4vh !important;
        z-index: 20 !important;
    }

    /* Action buttons on mobile - overlay on card, above exit button */
    .cmq-actions {
        position: fixed !important;
        bottom: calc(120px + env(safe-area-inset-bottom)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 100 !important;
    }

    /* Hide action buttons on non-quiz screens */
    .cmq-container:has(.cmq-result.active) .cmq-actions,
    .cmq-container:has(.cmq-form-screen.active) .cmq-actions,
    .cmq-container:has(.cmq-success.active) .cmq-actions,
    .cmq-container:has(.cmq-welcome.active) .cmq-actions {
        display: none !important;
    }

    /* Hide any WordPress elements that might interfere */
    body.cmq-quiz-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    body.cmq-quiz-active header,
    body.cmq-quiz-active footer,
    body.cmq-quiz-active nav,
    body.cmq-quiz-active .site-header,
    body.cmq-quiz-active .site-footer,
    body.cmq-quiz-active #masthead,
    body.cmq-quiz-active #colophon,
    body.cmq-quiz-active .elementor-location-header,
    body.cmq-quiz-active .elementor-location-footer,
    body.cmq-quiz-active #footer,
    body.cmq-quiz-active .footer,
    body.cmq-quiz-active .site-info,
    body.cmq-quiz-active .powered-by,
    body.cmq-quiz-active [class*="footer"],
    body.cmq-quiz-active #site-footer,
    body.cmq-quiz-active .ast-footer,
    body.cmq-quiz-active .wp-footer,
    body.cmq-quiz-active .entry-footer,
    body.cmq-quiz-active .main-navigation,
    body.cmq-quiz-active aside,
    body.cmq-quiz-active .sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Result screen fills entire viewport on mobile */
    .cmq-result {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 20px !important;
        padding-top: calc(20px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
        z-index: 50 !important;
    }

    /* Elementor result screen on mobile */
    .cmq-result.cmq-result-elementor {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .cmq-result.cmq-result-elementor .cmq-elementor-content,
    .cmq-result.cmq-result-elementor .cmq-result-elementor-content {
        width: 100% !important;
        height: 100% !important;
        flex: 1 1 auto !important;
    }

    .cmq-result.cmq-result-elementor .cmq-elementor-content .elementor,
    .cmq-result.cmq-result-elementor .cmq-elementor-content .e-con {
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Force Elementor two-column layouts to single column on mobile */
    /* Target only flex containers with row direction */
    .cmq-result .e-con[data-setting="content_width"],
    .cmq-result .elementor-section .elementor-container,
    .cmq-result-elementor-content > .elementor > .e-con {
        flex-direction: column !important;
    }

    /* Force column children to full width */
    .cmq-result .e-con--flex > .e-con,
    .cmq-result .elementor-row > .elementor-column,
    .cmq-result-elementor-content .e-con > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Same for form screen */
    .cmq-form-screen .e-con[data-setting="content_width"],
    .cmq-form-screen .elementor-section .elementor-container,
    .cmq-form-elementor-wrap > .elementor > .e-con {
        flex-direction: column !important;
    }

    .cmq-form-screen .e-con--flex > .e-con,
    .cmq-form-screen .elementor-row > .elementor-column,
    .cmq-form-elementor-wrap .e-con > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Form screen fills entire viewport on mobile */
    .cmq-form-screen {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 20px !important;
        padding-top: calc(40px + env(safe-area-inset-top)) !important;
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
        z-index: 50 !important;
    }

    /* Success screen fills entire viewport on mobile */
    .cmq-success {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        overflow-y: auto !important;
        z-index: 50 !important;
    }

    /* Welcome screen fills entire viewport on mobile */
    .cmq-welcome {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        z-index: 50 !important;
    }

    /* Elementor result buttons on mobile - position above exit button */
    .cmq-elementor-result-buttons {
        position: absolute !important;
        bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 20px !important;
    }

    /* Hide original result buttons on mobile (moved to wrapper) */
    .cmq-result .cmq-result-buttons:not(.cmq-elementor-result-buttons) {
        display: none !important;
    }

    /* Mobile result buttons - fixed position near bottom of viewport */
    .cmq-result-buttons-mobile,
    .cmq-mobile-wrapper > .cmq-elementor-result-buttons {
        position: fixed !important;
        bottom: calc(30px + env(safe-area-inset-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10000 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 20px !important;
    }

    /* ========================================
       MOBILE INLINE MODE (no scroll lock)
       Stacked cards effect - visible depth with cards behind
       Like: https://dribbble.com/shots/24582517-Stacked-Cards-and-prototype
       ======================================== */

    /* Scroll container - not sticky, natural flow */
    body.cmq-mobile-inline-mode .cmq-mobile-scroll-container.cmq-inline-mode {
        height: auto !important;
        min-height: initial !important;
        position: relative;
        width: calc(100vw - 20px);
        margin-left: 3px;
    }

    /* Wrapper - default for quiz cards */
    body.cmq-mobile-inline-mode .cmq-mobile-wrapper.cmq-inline-mode {
        position: relative !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--cmq-primary, #002855) !important;
        padding: 20px 0 !important;
        padding-bottom: 0 !important;
        z-index: 1 !important;
    }

    /* When result is active - wrapper has auto height for flow layout */
    body.cmq-mobile-inline-mode .cmq-mobile-wrapper.cmq-inline-mode:has(.cmq-result.active) {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Allow scrolling for inline mode */
    body.cmq-mobile-inline-mode .cmq-mobile-wrapper.cmq-inline-mode,
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .cmq-mobile-scroll-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Container - default absolute for quiz cards */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-container {
        position: absolute !important;
        top: 0 !important;
        left: 0;
        right: 0;
        bottom: 0 !important;
        height: 100%;
        background: transparent !important;
    }

    /* When result is active - container has auto height for flow layout */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-container:has(.cmq-result.active) {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Quiz screen */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-quiz-screen {
        padding: 0 !important;
    }

    /* Card stack - centered with margins, perspective for 3D effect */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack {
        position: absolute !important;
        top: 0px !important;
        bottom: 0px !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        height: auto !important;
        perspective: 1000px;
    }

    /* Fullwidth mode card stack - edge to edge */
    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Form screen in mobile inline mode */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-form-screen.active {
        padding: 30px 5vw 50px 5vw !important;
        height: 100dvh !important;
    }

    /* Third card hint - deepest in stack (pseudo-element) - more blur, darker */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack::before {
        content: '';
        position: absolute;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 24px;
        z-index: 1;
        transform: translateY(30px) scale(0.84);
        filter: blur(8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    /* Second card hint - middle (pseudo-element) - medium blur and darkness */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack::after {
        content: '';
        position: absolute;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.35);
        border-radius: 24px;
        z-index: 2;
        transform: translateY(22px) scale(0.88);
        filter: blur(6px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    /* Base card styles for stacked effect */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 24px !important;
        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.25),
            0 5px 15px rgba(0, 0, 0, 0.15),
            0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.35s ease,
                    opacity 0.35s ease !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Current card (front) - full size, prominent shadow */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card:not(.cmq-card-next):not(.swiping-done):not(.dragging) {
        z-index: 10 !important;
        transform: translateY(0) scale(1);
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            0 10px 20px rgba(0, 0, 0, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    }

    /* Card being dragged - allow JS transform */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card.dragging {
        z-index: 10 !important;
        transition: none !important;
    }

    /* Next card (stacked behind) - initial state with blur and darkness */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card.cmq-card-next {
        z-index: 5 !important;
        transform: translateY(15px) scale(0.92);
        opacity: 1 !important;
        pointer-events: none !important;
        filter: blur(4px) brightness(0.6);
        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.2),
            0 4px 12px rgba(0, 0, 0, 0.1) !important;
        /* No transition during drag - JS controls the animation */
    }

    /* Next card becoming current - smooth transition after swipe completes */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card.cmq-card-next.becoming-current {
        transform: translateY(0) scale(1) !important;
        filter: blur(0px) brightness(1) !important;
        z-index: 8 !important;
        transition: transform 0.25s ease-out, filter 0.25s ease-out !important;
    }

    /* When only one card (next card becoming current) - hide pseudo elements */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack.cmq-last-card::before,
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack.cmq-last-card::after {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Swiping animation - card moves out */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card.swiping-done {
        z-index: 20 !important;
        pointer-events: none !important;
    }

    /* Progress indicator - overlapping cards at top */
    body.cmq-mobile-inline-mode .cmq-progress {
        position: absolute !important;
        top: 45px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 200 !important;
        font-size: 4vh !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    }

    /* Action buttons - overlapping cards at bottom */
    body.cmq-mobile-inline-mode .cmq-actions {
        position: absolute !important;
        bottom: 50px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 200 !important;
        gap: 60px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Action button sizing in inline mode */
    body.cmq-mobile-inline-mode .cmq-action-btn {
        width: 70px !important;
        height: 70px !important;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Swipe indicators */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-swipe-indicator {
        border-radius: 16px !important;
    }

    /* Hide non-active screens in inline mode */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-result:not(.active),
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-form-screen:not(.active),
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-success:not(.active) {
        display: none !important;
    }

    /* Active result/success screens - flow layout, height defined by content */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-result.active,
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-success.active {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        z-index: 1 !important;
        box-shadow: none !important;
    }

    /* Background image element - full width, defines the container height */
    body.cmq-mobile-inline-mode .cmq-result .cmq-result-bg-image {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Content overlay on top of background image */
    body.cmq-mobile-inline-mode .cmq-result .cmq-elementor-content,
    body.cmq-mobile-inline-mode .cmq-result .cmq-result-elementor-content,
    body.cmq-mobile-inline-mode .cmq-result .elementor {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Form screen in inline mode - no height restriction, natural scroll */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-form-screen.active {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
        padding: 20px 5vw !important;
    }

    /* Result buttons in inline mode - inside result screen, not fixed */
    body.cmq-mobile-inline-mode .cmq-result .cmq-result-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        position: absolute !important;
        bottom: 30px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 20px !important;
    }

    body.cmq-mobile-inline-mode .cmq-result-buttons-mobile {
        display: none !important;
    }

    body.cmq-mobile-inline-mode .cmq-result-buttons .cmq-btn {
        width: 100% !important;
        max-width: 280px !important;
        font-size: 0.85rem !important;
        padding: 12px 25px !important;
        margin: 0 !important;
        margin-top: 20px !important;
    }

    /* CRITICAL: Lower z-index in inline mode to stay under site menu (z-index: 200) */
    body.cmq-mobile-inline-mode .cmq-elementor-result-buttons,
    body.cmq-mobile-inline-mode .cmq-result-buttons,
    body.cmq-mobile-inline-mode .cmq-actions,
    body.cmq-mobile-inline-mode .cmq-progress {
        z-index: 10 !important;
    }

    body.cmq-mobile-inline-mode .cmq-mobile-wrapper,
    body.cmq-mobile-inline-mode .cmq-mobile-scroll-container,
    body.cmq-mobile-inline-mode .cmq-container,
    body.cmq-mobile-inline-mode .cmq-result,
    body.cmq-mobile-inline-mode .cmq-card-stack {
        z-index: 1 !important;
    }

    /* Welcome screen in inline mode */
    body.cmq-mobile-inline-mode .cmq-inline-mode .cmq-welcome.active {
        top: 20px !important;
        bottom: 20px !important;
        left: 5vw !important;
        right: 5vw !important;
        width: 90vw !important;
        height: 100dvh !important;
        border-radius: 24px !important;
        background: var(--cmq-card-bg) !important;
        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            0 10px 20px rgba(0, 0, 0, 0.2) !important;
    }

    /* Don't hide footer in inline mode */
    body.cmq-mobile-inline-mode footer,
    body.cmq-mobile-inline-mode .site-footer,
    body.cmq-mobile-inline-mode #colophon {
        display: block !important;
    }

    /* Hide exit button in inline mode - user can just scroll */
    body.cmq-mobile-inline-mode .cmq-mobile-exit-btn {
        display: none !important;
    }
}

/* ========================================
   DESKTOP INLINE MODE (no scroll lock)
   iPhone frame displayed inline, page scrolls normally
   ======================================== */
@media (min-width: 769px) {
    /* Scroll container - not sticky, natural flow */
    body.cmq-desktop-inline-mode .cmq-scroll-container.cmq-inline-mode {
        height: initial !important;
        min-height: auto !important;
        position: relative !important;
    }

    /* Desktop wrapper - not sticky, natural flow with centered phone */
    body.cmq-desktop-inline-mode .cmq-desktop-wrapper.cmq-inline-mode {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: initial !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 40px 20px !important;
    }

    /* Phone frame - not absolutely positioned */
    body.cmq-desktop-inline-mode .cmq-inline-mode .cmq-phone {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto !important;
    }

    /* Hide exit button in desktop inline mode */
    body.cmq-desktop-inline-mode .cmq-exit-quiz-btn,
    body.cmq-desktop-inline-mode #cmq-exit-btn {
        display: none !important;
    }

    /* Don't hide page elements in desktop inline mode */
    body.cmq-desktop-inline-mode header,
    body.cmq-desktop-inline-mode footer,
    body.cmq-desktop-inline-mode .site-header,
    body.cmq-desktop-inline-mode .site-footer,
    body.cmq-desktop-inline-mode #masthead,
    body.cmq-desktop-inline-mode #colophon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Mobile exit button - hidden by default on desktop */
.cmq-mobile-exit-btn {
    display: none;
}

.cmq-loading {
    color: var(--cmq-white);
    font-size: 1.2rem;
}

/* Screen Container */
.cmq-screen {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    pointer-events: none;
}

.cmq-screen.active {
    display: flex;
    pointer-events: auto;
}

/* Welcome Screen */
.cmq-welcome {
    max-width: 400px;
}

.cmq-welcome-title {
    color: var(--cmq-white);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cmq-welcome-subtitle {
    color: var(--cmq-white);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cmq-instructions {
    color: var(--cmq-white);
    font-size: 0.9rem;
    margin-bottom: 40px;
    opacity: 0.8;
}

.cmq-instructions p {
    margin: 5px 0;
}

.cmq-start-question {
    color: var(--cmq-gold);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Card Stack */
.cmq-quiz-screen {
    position: relative;
    width: 100%;
    height: 100%;
}

.cmq-progress {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--cmq-white);
    font-size: 1rem;
    z-index: 10;
}

.cmq-card-stack {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 450px;
    margin: 0 auto;
}

.cmq-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cmq-card-bg);
    border-radius: var(--cmq-radius);
    box-shadow: var(--cmq-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
    transition: transform 0.1s ease-out;
}

.cmq-card.dragging {
    cursor: grabbing;
    transition: none !important;
}

.cmq-card.returning {
    transition: transform 0.3s ease-out !important;
}

/* Next card in stack - behind current card, starts small */
.cmq-card-next {
    z-index: 0 !important;
    transform: scale(0.85);
    opacity: 0.7;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    pointer-events: none;
}

/* Next card becoming current - smooth scale to 1.0 (ease-out for entering) */
.cmq-card-next.becoming-current {
    transform: scale(1) !important;
    opacity: 1 !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out !important;
}

.cmq-card:not(.cmq-card-next) {
    z-index: 1;
}

/* Card has transition by default - JS sets transform directly for smooth animation */
.cmq-card {
    transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}

/* During drag, disable transition for immediate response */
.cmq-card.dragging {
    transition: none !important;
}

/* After swipe completes, card is marked as done */
.cmq-card.swiping-done {
    pointer-events: none;
}

.cmq-card-question {
    color: var(--cmq-white);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* Text positioning options */
.cmq-card.cmq-text-top {
    justify-content: flex-start;
    padding-top: 80px;
}

.cmq-card.cmq-text-center {
    justify-content: center;
}

.cmq-card.cmq-text-bottom {
    justify-content: flex-end;
    padding-bottom: 120px;
}

/* Swipe Indicators */
.cmq-swipe-indicator {
    position: absolute;
    top: 20px;
    padding: 10px 30px;
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.cmq-swipe-indicator.left {
    left: 20px;
    background: rgba(200, 16, 46, 0.9);
    color: var(--cmq-white);
    border: 3px solid var(--cmq-white);
    transform: rotate(-15deg);
}

.cmq-swipe-indicator.right {
    right: 20px;
    background: rgba(76, 175, 80, 0.9);
    color: var(--cmq-white);
    border: 3px solid var(--cmq-white);
    transform: rotate(15deg);
}

.cmq-swipe-indicator.visible {
    opacity: 1;
}

/* Action Buttons */
.cmq-actions {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 60px;
    z-index: 10;
}

.cmq-action-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    transition: transform 0.2s ease;
    overflow: hidden;
}

.cmq-action-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cmq-action-btn:hover {
    transform: scale(1.1);
}

.cmq-action-btn:active {
    transform: scale(0.95);
}

.cmq-action-btn.no {
    background: transparent;
}

.cmq-action-btn.yes {
    background: transparent;
}

/* Result Screen */
.cmq-result {
    max-width: 100%;
    width: 100%;
    padding: 0;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
}

/* Result screen with full image mode */
.cmq-result.cmq-result-image-mode {
    justify-content: flex-end;
    padding-bottom: 40px;
}

.cmq-result.cmq-result-image-mode .cmq-match-badge,
.cmq-result.cmq-result-image-mode .cmq-result-subtitle,
.cmq-result.cmq-result-image-mode .cmq-result-title,
.cmq-result.cmq-result-image-mode .cmq-result-description,
.cmq-result.cmq-result-image-mode .cmq-product-image-container {
    display: none;
}

/* Standard result mode */
.cmq-result:not(.cmq-result-image-mode):not(.cmq-result-elementor) {
    max-width: 400px;
}

/* Elementor result mode */
.cmq-result.cmq-result-elementor {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    align-items: stretch;
}

.cmq-result-elementor-content {
    flex: 0 0 auto;
    width: 100%;
    min-height: 100%;
    position: relative;
}

.cmq-result-elementor-content .elementor {
    height: auto;
    min-height: 100%;
}

/* Override screen centering for Elementor results */
.cmq-screen.cmq-result.cmq-result-elementor {
    justify-content: flex-start;
    align-items: stretch;
}

.cmq-elementor-result-buttons {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 100;
    padding: 0 20px;
    pointer-events: auto !important;
}

.cmq-elementor-result-buttons * {
    pointer-events: auto !important;
}

.cmq-elementor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--cmq-white);
    font-size: 1.2rem;
}

.cmq-match-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.cmq-heart {
    color: var(--cmq-secondary);
    font-size: 1.5rem;
}

.cmq-match-text {
    color: var(--cmq-white);
    font-size: 1.5rem;
    font-weight: 700;
}

.cmq-result-subtitle {
    color: var(--cmq-gold);
    font-size: 1rem;
    margin-bottom: 10px;
}

.cmq-result-title {
    color: var(--cmq-white);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.cmq-result-description {
    color: var(--cmq-white);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cmq-product-image-container {
    margin-bottom: 20px;
}

.cmq-product-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
}

/* Buttons */
.cmq-btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin: 10px;
}

.cmq-btn:hover {
    transform: scale(1.05);
}

.cmq-btn-primary {
    background: var(--cmq-secondary);
    color: var(--cmq-white);
    border-radius: 50px;
}

/* Form submit button - transparent with border style */
.cmq-form .cmq-btn-primary {
    background: transparent;
    border: 2px solid var(--cmq-white);
    color: var(--cmq-white);
    width: 100%;
    margin: 15px 0 0 0;
}

.cmq-btn-secondary {
    background: transparent;
    color: var(--cmq-white);
    border: 2px solid var(--cmq-white);
    border-radius: 50px;
}

.cmq-btn-drinkbook {
    background: var(--cmq-gold, #d4af37);
    color: var(--cmq-primary);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.cmq-btn-drinkbook:hover {
    background: #c9a227;
    color: var(--cmq-primary);
    text-decoration: none;
}

/* Form Screen */
.cmq-form-screen {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cmq-form-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* Elementor form type */
.cmq-form-screen.cmq-form-elementor-type {
    max-width: none;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.cmq-form-screen.cmq-form-elementor-type .cmq-form-content {
    flex: 1;
    width: 100%;
    min-height: 100%;
}

.cmq-form-screen.cmq-form-elementor-type .cmq-btn-secondary {
    position: relative;
    margin-top: auto;
    margin-bottom: 20px;
}

.cmq-form-elementor-wrap {
    width: 100%;
    min-height: 100%;
}

/* Success screen Elementor type */
.cmq-success.cmq-success-elementor-type {
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.cmq-success-elementor-wrap {
    width: 100%;
    min-height: 100%;
}

.cmq-form-title {
    color: var(--cmq-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.cmq-form-subtitle {
    color: var(--cmq-white);
    font-size: 1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cmq-form {
    width: 100%;
}

.cmq-input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    margin-bottom: 15px;
    background: var(--cmq-white);
    color: var(--cmq-primary);
}

.cmq-input::placeholder {
    color: #999;
}

.cmq-input:focus {
    outline: 3px solid var(--cmq-gold);
}

.cmq-form-error {
    color: #ff6b6b;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: none;
}

.cmq-form-error.visible {
    display: block;
}

/* Success Screen */
.cmq-success {
    max-width: 400px;
}

.cmq-success-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.cmq-success-message {
    color: var(--cmq-white);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.cmq-success-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 280px;
}

.cmq-success-buttons .cmq-btn {
    width: 100%;
    margin: 0;
}

/* Desktop Styles */
@media (min-width: 768px) {
    .cmq-welcome-title {
        font-size: 2.5rem;
    }

    .cmq-welcome-subtitle {
        font-size: 1.2rem;
    }

    .cmq-card-stack {
        max-width: 400px;
        height: 500px;
    }

    .cmq-card-question {
        font-size: 1.5rem;
    }

    .cmq-result-title {
        font-size: 2.5rem;
    }

    .cmq-actions {
        gap: 100px;
    }

    .cmq-action-btn {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .cmq-card-stack {
        height: 280px;
    }

    .cmq-card {
        padding: 15px;
    }

    .cmq-card-question {
        font-size: 1rem;
    }

    .cmq-actions {
        bottom: 10px;
    }

    .cmq-action-btn {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}

/* Animation for card entrance */
@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cmq-card.entering {
    animation: cardEntrance 0.3s ease-out;
}

/* Elementor Template Content */
.cmq-card.cmq-card-loading {
    opacity: 0.7;
}

.cmq-elementor-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto; /* Enable scrolling on the content */
}

/* CRITICAL: Force Elementor wrapper to fill parent */
.cmq-elementor-content > .elementor {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.cmq-elementor-content .e-con {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}

.cmq-elementor-content .e-con-inner {
    flex: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.cmq-elementor-content * {
    pointer-events: none;
}

/* Result screens with Elementor content - enable scrolling and pointer events */
.cmq-result .cmq-elementor-content,
.cmq-result-elementor .cmq-elementor-content,
.cmq-result-elementor-content {
    pointer-events: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.cmq-result .cmq-elementor-content *,
.cmq-result-elementor .cmq-elementor-content *,
.cmq-result-elementor-content * {
    pointer-events: auto !important;
}

/* Reset Elementor container styles within quiz card */
.cmq-elementor-content .elementor-section,
.cmq-elementor-content .elementor-container,
.cmq-elementor-content .elementor-column,
.cmq-elementor-content .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

.cmq-elementor-content .elementor-section {
    width: 100% !important;
}

/* Make sure Elementor images and backgrounds fit properly */
.cmq-elementor-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Card with Elementor content - remove default padding */
.cmq-card:has(.cmq-elementor-content) {
    padding: 0;
    background: transparent;
}

/* Screen transitions */
.cmq-screen {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cmq-screen.active {
    opacity: 1;
}

/* ========================================
   DEVELOPER MODE MENU
   ======================================== */
.cmq-dev-menu {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    z-index: 9999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    color: #fff;
    max-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.cmq-dev-menu-header {
    background: #c8102e;
    padding: 8px 12px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    text-align: center;
    user-select: none;
}

.cmq-dev-menu-header:hover {
    background: #a00d24;
}

.cmq-dev-menu-collapsed .cmq-dev-menu-content {
    display: none;
}

.cmq-dev-menu-collapsed .cmq-dev-menu-header {
    border-radius: 8px;
}

.cmq-dev-menu-content {
    padding: 10px;
    max-height: 70vh;
    overflow-y: auto;
}

.cmq-dev-menu-label {
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    margin: 10px 0 5px 0;
    letter-spacing: 0.5px;
}

.cmq-dev-menu-label:first-child {
    margin-top: 0;
}

.cmq-dev-btn {
    display: block;
    width: 100%;
    padding: 6px 10px;
    margin: 3px 0;
    background: #333;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.cmq-dev-btn:hover {
    background: #555;
}

.cmq-dev-btn-special {
    background: #444;
    font-style: italic;
}

.cmq-dev-btn-special:hover {
    background: #666;
}

.cmq-dev-menu-info {
    margin-top: 10px;
    padding: 8px;
    background: #222;
    border-radius: 4px;
    font-size: 10px;
    color: #aaa;
    text-align: center;
    line-height: 1.4;
}

/* Mobile adjustments for dev menu */
@media (max-width: 768px) {
    .cmq-dev-menu {
        top: auto;
        bottom: 10px;
        right: 10px;
        max-width: 160px;
        font-size: 11px;
    }

    .cmq-dev-menu-content {
        max-height: 50vh;
    }

    .cmq-dev-btn {
        padding: 5px 8px;
        font-size: 10px;
    }
}

/* ========================================
   COFFEE PRELOADER - SIMPLE SKELETON
   ======================================== */

.cmq-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cmq-primary);
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

/* Coffee as background - fills from bottom */
.cmq-preloader-coffee {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #5D3A1A;
    animation: coffeeFill 3s ease-in-out infinite;
    z-index: 0;
}

/* Wave layers container */
.cmq-preloader-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Back wave - darkest, slowest */
.cmq-preloader-wave-1 {
    position: absolute;
    top: -80px;
    left: 0;
    width: 200%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%234A2A10' d='M0,60 C200,100 400,20 600,60 C800,100 1000,20 1200,60 L1200,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 600px 100px;
    animation: waveMove 4s linear infinite;
}

/* Middle wave */
.cmq-preloader-wave-2 {
    position: absolute;
    top: -50px;
    left: 0;
    width: 200%;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%235D3A1A' d='M0,70 C150,110 350,30 600,70 C850,110 1050,30 1200,70 L1200,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 500px 80px;
    animation: waveMove 3s linear infinite;
}

/* Front wave - lightest, fastest */
.cmq-preloader-wave-3 {
    position: absolute;
    top: -30px;
    left: 0;
    width: 200%;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%238B5A2B' d='M0,80 C100,110 300,50 500,80 C700,110 900,50 1200,80 L1200,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 400px 60px;
    animation: waveMove 2s linear infinite;
}

/* Foam/crema on top */
.cmq-preloader-wave-3::after {
    content: '';
    position: absolute;
    bottom: 55px;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, rgba(210, 180, 140, 0.5) 0%, transparent 100%);
}

.cmq-preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Skeleton container - sits on top of coffee background */
.cmq-preloader-skeleton {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Pagination skeleton - 150px from top */
.cmq-preloader-pagination {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.cmq-preloader-pagination-text {
    width: 50px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.cmq-preloader-pagination-bar {
    width: 120px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Card skeleton - centered placeholder */
.cmq-preloader-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(80vw, 320px);
    aspect-ratio: 1 / 1.4;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* Action buttons skeleton - 80px from bottom */
.cmq-preloader-actions {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 80px;
}

.cmq-preloader-btn {
    width: clamp(80px, 10vw, 120px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 3px solid rgba(255, 255, 255, 0.15);
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

.cmq-preloader-btn:last-child {
    animation-delay: 0.2s;
}

/* Loading text */
.cmq-preloader-text {
    text-align: center;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.cmq-preloader-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

/* Mobile inline mode width fix */
@media screen and (max-width: 768px) {
    .cmq-mobile-scroll-container .cmq-inline-mode {
        width: 100% !important;
    }
}

@keyframes coffeeFill {
    0% {
        height: 0%;
    }
    45% {
        height: 85%;
    }
    55% {
        height: 85%;
    }
    100% {
        height: 0%;
    }
}

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* ========================================
   GLOW ANIMATION FOR RESULT BUTTONS
   ======================================== */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 0 transparent;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 70px hsl(12deg 77.63% 74.47%);
        transform: scale(1.1);
    }
}

/* Glow animation ONLY for primary CTA buttons leading to form */
/* Applied via JavaScript class .cmq-glow-enabled on result screens that should have glow */
.cmq-result.cmq-glow-enabled .cmq-btn-primary,
.cmq-glow-enabled .cmq-btn-primary {
    animation: glow 1200ms ease-in-out infinite alternate;
}

/* Elementor result buttons - glow when result has glow-enabled class */
.cmq-result.cmq-glow-enabled ~ .cmq-elementor-result-buttons .cmq-btn-primary,
.cmq-container:has(.cmq-result.cmq-glow-enabled) .cmq-elementor-result-buttons .cmq-btn-primary,
.cmq-mobile-wrapper:has(.cmq-result.cmq-glow-enabled) .cmq-elementor-result-buttons .cmq-btn-primary,
.cmq-phone-screen:has(.cmq-result.cmq-glow-enabled) .cmq-elementor-result-buttons .cmq-btn-primary {
    animation: glow 1200ms ease-in-out infinite alternate;
}

/* Desktop: pulsating button needs more top margin */
@media (min-width: 769px) {
    .cmq-glow-enabled .cmq-btn-primary,
    .cmq-result.cmq-glow-enabled .cmq-btn-primary,
    .cmq-result.cmq-glow-enabled ~ .cmq-elementor-result-buttons .cmq-btn-primary,
    .cmq-container:has(.cmq-result.cmq-glow-enabled) .cmq-elementor-result-buttons .cmq-btn-primary,
    .cmq-phone-screen:has(.cmq-result.cmq-glow-enabled) .cmq-elementor-result-buttons .cmq-btn-primary {
        margin-top: 12px;
    }
}

/* ========================================
   MOBILE FULLWIDTH MODE
   No rounded corners, no shadow, edge-to-edge
   ======================================== */
@media (max-width: 768px) {
    /* Mobile fullwidth mode - quiz fills entire screen edge to edge */
    body.cmq-mobile-fullwidth-mode .cmq-mobile-wrapper {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-container {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-card {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-card-stack {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-result {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-form-screen {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-success {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-welcome {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Mobile scroll container in fullwidth mode */
    body.cmq-mobile-fullwidth-mode .cmq-mobile-scroll-container {
        width: 100vw !important;
        margin-left: 0 !important;
    }

    /* Inline mode adjustments for fullwidth */
    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-mobile-scroll-container.cmq-inline-mode {
        width: 100vw !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    /* Ensure result content stays under site menu (z-index 200) */
    body.cmq-mobile-fullwidth-mode .cmq-result,
    body.cmq-mobile-fullwidth-mode .cmq-result-elementor-content,
    body.cmq-mobile-fullwidth-mode .cmq-elementor-content {
        z-index: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-mobile-wrapper {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1 !important;
    }

    body.cmq-mobile-fullwidth-mode .cmq-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card {
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack::before,
    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-card-stack::after {
        border-radius: 0 !important;
    }

    /* Fullwidth result/success/welcome - flow layout with height from content */
    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-result.active,
    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-success.active {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    /* Welcome screen can keep fixed height */
    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-welcome.active {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Background image for fullwidth mode - full width */
    body.cmq-mobile-fullwidth-mode .cmq-result .cmq-result-bg-image {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    /* Footer adjustments for fullwidth mode - only on quiz-2 page */
    body.elementor-page-870.cmq-mobile-fullwidth-mode .elementor-element-707cc2d4 {
        margin-top: 0 !important;
        padding: 0 !important;
        padding-top: 50px !important;
        background: #FFF !important;
    }

    /* Fullwidth wrapper when result is active - auto height */
    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-mobile-wrapper.cmq-inline-mode:has(.cmq-result.active) {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    body.cmq-mobile-fullwidth-mode.cmq-mobile-inline-mode .cmq-inline-mode .cmq-container:has(.cmq-result.active) {
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}