/* ==============================================
   SCROLLABLE CARD BACK IMPLEMENTATION
   Professional fixed-height cards with scrollable content
   Mouse wheel scroll support enabled
   ============================================== */

/* Card Back Base Container Structure */
.flip-card-back .feature-card,
.flip-card-back .feature-card-premium {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 520px !important;
    /* Fixed height to prevent layout shift */
    padding: 0 !important;
    /* Reset padding, applied to child elements instead */
    overflow: hidden !important;
    /* Prevent scroll on outer container */

    /* CRITICAL: Prevent scroll propagation to body */
    overscroll-behavior: contain !important;
    isolation: isolate !important;
    /* Create stacking context to isolate touch events */
}

/* Fixed Header Section */
.card-back-header {
    flex-shrink: 0 !important;
    /* Never shrink */
    padding: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    background: inherit;
}

.card-back-header .card-back-heading {
    margin-bottom: var(--spacing-xs);
}

.card-back-header .card-back-subheading {
    margin-bottom: 0;
}

/* Scrollable Content Area - MOUSE WHEEL ENABLED */
.card-back-scrollable {
    flex: 1 !important;
    /* Take all available space */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 var(--spacing-lg);
    position: relative !important;

    /* CRITICAL: Enable mouse wheel scrolling */
    pointer-events: auto !important;
    touch-action: pan-y !important;

    /* CRITICAL: Prevent scroll propagation to body */
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;

    /* Performance optimization for scroll */
    will-change: scroll-position;

    /* Smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;

    /* Gradient fade indicators at top and bottom */
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 16px,
            black calc(100% - 16px),
            transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 16px,
            black calc(100% - 16px),
            transparent 100%);
}

/* Webkit custom scrollbar (Chrome, Safari, Edge) */
.card-back-scrollable::-webkit-scrollbar {
    width: 6px;
}

.card-back-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.card-back-scrollable::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
    transition: background 200ms ease;
}

.card-back-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* Premium card scrollbar override */
.flip-card-back[data-card="prime"] .card-back-scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #EC4899 0%, #2563EB 100%);
}

.flip-card-back[data-card="prime"] .card-back-scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2563EB 0%, #EC4899 100%);
}

/* Sticky Footer Section */
.card-back-footer {
    flex-shrink: 0 !important;
    /* Never shrink */
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    background: linear-gradient(to top,
            var(--color-surface-elevated) 60%,
            transparent 100%);
    position: relative;
    z-index: 10;
    /* Ensure it stays on top */
}

/* Premium card footer with darker gradient */
.flip-card-back[data-card="prime"] .card-back-footer {
    background: linear-gradient(to top,
            #1a0f2e 60%,
            transparent 100%);
}

/* Adjust card-back-actions to not add extra margin */
.card-back-footer .card-back-actions {
    margin-top: 0;
    padding-top: 0;
}

/* Screenshot Grid - ensure proper spacing in scrollable area */
.card-back-scrollable .screenshot-grid {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

/* Mini Flow Box - ensure proper spacing in scrollable area */
.card-back-scrollable .mini-flow-box {
    margin: var(--spacing-md) 0;
}

/* Mobile Adjustments */
@media (max-width: 1023px) {

    .flip-card-back .feature-card,
    .flip-card-back .feature-card-premium {
        max-height: none !important;
        /* Allow natural height on mobile */
    }

    .card-back-scrollable {
        overflow-y: visible !important;
        /* No scroll on mobile */
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    .card-back-footer {
        background: inherit;
        /* No gradient on mobile */
    }
}

/* Scroll Hint Animation (optional - subtle bounce on flip) */
@keyframes scrollHint {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }
}

.flip-card-wrapper.flipped .card-back-scrollable {
    animation: scrollHint 1s ease 0.5s 2;
    /* Play twice after flip */
}