/*
      RESPONSIVE OVERRIDES - Nu-i Trimite Mesajul
      (Cleaned, merged, and optimized for performance)
*/

/* ================================================================
   Desktop Overrides (min-width: 1025px)
================================================================ */
@media (min-width: 1025px) {
        .sticky-cta {
                display: none;
        }
        body {
                padding-bottom: 0;
        }
}

/* ================================================================
   Tablet & Small Desktop (max-width: 1024px)
================================================================ */
@media (max-width: 1024px) {
        .bundle-grid, .digital-flex {
                grid-template-columns: repeat(2, 1fr);
        }
        .digital-flex {
                max-width: 640px;
                margin: 0 auto;
        }
}

@media (max-width: 900px) {
        .depth-grid {
                grid-template-columns: 1fr;
                gap: var(--space-10);
        }
        .audio-ui-box {
                max-width: 480px;
        }
}

/* ================================================================
   Social Proof breakpoints
   1280px+   → 4 columns  (set in sections.css as default)
   1024px–1279px → 2 columns
   769px–1023px  → 1 column
   ≤768px    → 1 column + collapsible (handled in mobile block)
================================================================ */

/* Tablet landscape / small desktop: 2 columns */
@media (min-width: 1024px) and (max-width: 1279px) {
        .messages-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-5);
                max-width: 880px;
        }
}

/* Tablet portrait: 1 column */
@media (min-width: 769px) and (max-width: 1023px) {
        .messages-grid {
                grid-template-columns: 1fr;
                gap: var(--space-5);
                max-width: 600px;
        }
}

/* ================================================================
   Mobile Overrides (max-width: 768px)
================================================================ */
@media (max-width: 768px) {

        /* 1. Header & Hero */
        .header__flex {
                flex-direction: column;
                gap: 4px;
                justify-content: center;
                text-align: center;
        }
        .hero {
                padding: var(--space-10) 0 var(--space-12);
        }
        .hero__grid {
                display: flex;
                flex-direction: column;
                gap: 0;
                text-align: center;
        }
        .hero__content  { display: contents; }
        .hero__label    { order: 1; margin-bottom: var(--space-4); }
        .hero__title    { order: 2; margin-bottom: var(--space-5); }
        .hero__visual   { order: 3; margin: 0 auto var(--space-6) auto; width: 100%; max-width: 300px; }
        .hero__subtitle { order: 4; margin: 0 auto var(--space-6) auto; }
        .hero__cta-group { order: 5; margin: 0 auto; width: 100%; align-items: center; }
        .hero__pricing, .hero__trust-list { justify-content: center; }
        .hero__trust-list { margin-top: var(--space-2); }

        /* 2. Grids & General Layout */
        .contrast-grid, .method-grid, .bundle-grid, .comparison-grid, .digital-flex {
                grid-template-columns: 1fr;
                gap: var(--space-4);
        }
        .digital-item p  { max-width: 300px; }
        
        /* الصورة تأخذ العرض الكامل المتاح في الهاتف لتتطابق مع عرض النص */
        .mirror__visual  { 
                width: 100%; 
                max-width: 100%; 
        }

        /* 3. Social Proof — mobile: single column + collapsible reviews */
        .messages-grid {
                display: flex;
                flex-direction: column;
                gap: var(--space-4);
                max-width: 100%;
        }

        .messages-grid .msg-bubble {
                max-width: calc(100% - 40px);
        }

        .messages-grid .msg-bubble:nth-child(odd) {
                margin-right: 40px;
                margin-left: 0;
                align-self: flex-start !important;
                border-radius: 16px 16px 16px 6px;
        }

        .messages-grid .msg-bubble:nth-child(even) {
                margin-left: 40px;
                margin-right: 0;
                align-self: flex-end !important;
                border-radius: 16px 16px 6px 16px;
        }

        /* 
         * Reorder review elements visually for Mobile ONLY:
         * 1: Stars, 2: Name/Age, 3: Text, 4: Button 
         */
        .messages-grid .msg-bubble {
                display: flex;
                flex-direction: column;
        }
        .msg-bubble .msg-stars {
                order: 1;
                margin-bottom: 6px;
        }
        .msg-bubble cite {
                order: 2;
                margin-top: 0;
                margin-bottom: 16px;
                text-transform: none; /* Renders as: Andreea Moga, 29 ani */
                font-size: 0.85rem;
                opacity: 0.8;
        }
        .msg-bubble p {
                order: 3;
        }
        .msg-read-more {
                order: 4;
        }

         /*
         * Collapsed text wrapper (Max-Height + Mask Image for smooth fade)
         */
        .msg-bubble.is-collapsible p {
                max-height: 180px; /* Increased to ~35% (approx 7-8 lines of text) */
                overflow: hidden;
                transition: max-height 0.5s ease;
                margin-bottom: 0;
                display: block;
        }

        /* Fades the bottom part smoothly */
        .msg-bubble.is-collapsible:not(.is-expanded) p {
                -webkit-mask-image: linear-gradient(to bottom, black 0%, black 130px, transparent 100%);
                mask-image: linear-gradient(to bottom, black 0%, black 130px, transparent 100%);
        }

        /* Expanded state */
        .msg-bubble.is-collapsible.is-expanded p {
                max-height: 2500px;
                transition: max-height 0.5s ease;
        }

        /* Toggle button — visible only on mobile, injected by JS */
        .msg-read-more {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                margin-top: var(--space-3);
                padding: 6px 0;
                background: none;
                border: none;
                color: var(--purple-light);
                font-size: var(--fs-sm);
                font-weight: 600;
                font-family: var(--font-sans);
                letter-spacing: 0.04em;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                transition: opacity 0.2s ease;
                align-self: flex-start;
                /* Minimum touch target */
                min-height: 44px;
        }

        .msg-read-more:hover,
        .msg-read-more:focus-visible {
                opacity: 0.75;
        }

        .msg-read-more:focus-visible {
                outline: 2px solid var(--purple-light);
                outline-offset: 3px;
                border-radius: 4px;
        }

        /* 4. Footer */
        .footer-grid       { flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); }
        .footer-links      { text-align: center; }
        .footer-nav        { flex-direction: column; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-6); }
        .footer-disclaimer { margin-left: auto; margin-right: auto; }

        /* 5. Workbook & Audiobook Section */
        .depth-grid {
                display: flex !important;
                flex-direction: column;
        }
        .depth-content { display: contents; }

        .premium-tag {
                order: 1;
                margin-bottom: 12px !important;
                text-align: center;
        }
        .depth-title {
                order: 2;
                margin-bottom: 24px !important;
                text-align: center;
        }

        .audio-ui-box { order: 3; margin-bottom: 24px !important; width: 100%; }
        .depth-list   { order: 4; }

        /* 6. Bundle Cards */
        .bundle-grid {
                display: flex;
                flex-direction: column;
        }

        .bundle-card.premium-card {
                max-width: 80%;
                margin: 0 auto;
        }
        .product-image         { min-height: 150px; padding: var(--space-4) var(--space-3); }
        .product-image img     { max-width: 65%; }
        .product-info          { padding: var(--space-5) var(--space-4); }
        .bundle-card.premium-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
        .bundle-card.premium-card p  { font-size: 0.85rem; line-height: 1.5; }
        .bundle-card.premium-card.featured { transform: none !important; }

        /* 7. Bundle Cards Ordering & Badges */
        .bundle-grid > .bundle-card:nth-child(1)          { order: 2; }
        .bundle-grid > .bundle-card:nth-child(1) .badge   { font-size: 0; letter-spacing: 0; }
        .bundle-grid > .bundle-card:nth-child(1) .badge::after { content: "Componenta 2"; font-size: 0.7rem; letter-spacing: 0.12em; }

        .bundle-grid > .bundle-card:nth-child(2)          { order: 1; margin-bottom: var(--space-4); }
        .bundle-grid > .bundle-card:nth-child(2) .badge   { font-size: 0; letter-spacing: 0; }
        .bundle-grid > .bundle-card:nth-child(2) .badge::after { content: "Componenta 1"; font-size: 0.7rem; letter-spacing: 0.12em; }

        .bundle-grid > .bundle-card:nth-child(3)          { order: 3; }

        .preview-grid { grid-template-columns: 1fr; }

        /* ============================================================
           Premium Floating Modals & Native Zoom
        ============================================================ */

        /* Explicit fixed positioning to override any parent transforms */
        .custom-modal {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                /* iOS Safari notch support */
                height: -webkit-fill-available !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 20px !important;
                /* Force new stacking context */
                transform: translateZ(0) !important;
                -webkit-transform: translateZ(0) !important;
        }

        /* Modal content wrapper */
        .custom-modal__content {
                width: 100% !important;
                height: auto !important;
                /* Progressive fallback for max-height */
                max-height: 85vh !important;
                max-height: calc(100vh - 40px) !important;
                max-height: calc(-webkit-fill-available - 40px) !important;
                margin: 0 !important;
                border-radius: 24px !important;
                position: relative !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
        }

        /* Close button */
        .custom-modal__close {
                position: absolute !important;
                top: 12px !important;
                right: 12px !important;
                z-index: 1000 !important;
                background: rgba(255,255,255,0.08) !important;
                color: var(--text-secondary) !important;
                width: 44px !important;
                height: 44px !important;
                border-radius: 50% !important;
                font-size: 24px !important;
                line-height: 1 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                cursor: pointer !important;
                transition: background 0.3s, color 0.3s !important;
                -webkit-tap-highlight-color: transparent !important;
                touch-action: manipulation !important;
        }

        /* Modal body - scrollable content area */
        .custom-modal__body {
                height: auto !important;
                max-height: calc(85vh - 40px) !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                padding: 60px 16px 24px 16px !important;
                overscroll-behavior: contain !important;
        }

        /* Preview images - support native zoom and pan */
        .preview-img {
                width: 100% !important;
                height: auto !important;
                display: block !important;
                touch-action: pan-x pan-y pinch-zoom !important;
                -webkit-user-drag: none !important;
                user-select: none !important;
        }

        /* Audio modal specific adjustments */
        .custom-modal--audio .custom-modal__content {
                max-height: min(500px, 85vh) !important;
        }

        .custom-modal--audio .custom-modal__body {
                padding-top: 40px !important;
                overflow-y: hidden !important;
                max-height: none !important;
        }
        
        /* Trust Section Overrides */
        /* Trust Section Overrides (Ultra-compact 1x4 pe Mobil) */
        .trust-payments {
                grid-template-columns: repeat(4, 1fr);
                gap: 4px; /* Spațiu minim între carduri */
        }
        
        .payment-card {
                height: 32px; /* Mai subțire și elegant */
                padding: 0 3px;
                gap: 3px;
                border-radius: 6px;
        }

        .payment-text {
                font-size: min(2.4vw, 10px); /* Scalare dinamică pentru ecrane mici, maxim 10px */
                letter-spacing: -0.02em;
                white-space: nowrap; /* Previne ruperea textului pe un alt rând */
        }

        .payment-card svg {
                width: 12px; /* Reducere subtilă a iconițelor */
                height: auto;
                flex-shrink: 0;
        }

        /* Ajustări specifice lățimii pentru a păstra proporțiile */
        .payment-card[aria-label="Visa"] svg {
                width: 24px;
        }
        .payment-card[aria-label="Mastercard"] svg {
                width: 15px;
        }

        /* Trust Indicators (3 pe un singur rând, dimensiuni foarte mici) */
        .trust-indicators {
                flex-direction: row; /* إعادتها لتكون جنباً إلى جنب */
                justify-content: center;
                align-items: center;
                gap: 6px; /* مسافة صغيرة بينها كي لا تلتصق */
                padding: 0;
                margin-top: var(--space-4);
                width: 100%;
                flex-wrap: nowrap;
        }

        .indicator-item {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3px; /* مسافة بين الأيقونة والنص */
        }

        /* Ascundem complet ultimul element (Instant Email Delivery) doar pe mobil */
        .indicator-item:nth-child(4) {
                display: none;
        }

        .indicator-text {
                font-size: 0.55rem; /* تصغير الخط جداً ليناسب سطر واحد */
                white-space: nowrap;
                letter-spacing: -0.01em;
        }

        .indicator-icon {
                width: 10px; /* تصغير الأيقونة لتناسب الخط */
                height: 10px;
        }

        /* =========================================
           Pricing Card Mobile Refinements 
           ========================================= */
        
        /* إجبار العنوان على البقاء في سطر واحد عبر تصغيره ديناميكياً */
        .pricing-card__title {
                font-size: clamp(1rem, 4.5vw, 1.4rem) !important; 
                white-space: nowrap;
        }
        
        /* جعل شارات الثقة الصغيرة (Micro-trust) في سطر واحد متقارب */
        .pricing-micro-trust {
                flex-wrap: nowrap !important;
                gap: 6px !important;
        }
        .micro-trust-item {
                font-size: 0.62rem !important;
                white-space: nowrap;
        }

        /* تصغير نص الزر ومنع نزوله لسطرين */
        .pricing-card .btn--arrow {
                font-size: 0.92rem !important;
                white-space: nowrap;
                padding-left: 12px;
                padding-right: 12px;
        }
        
        /* =========================================
           تصغير نصوص الفوائد وإزالة الـ Gras في الهاتف
           ========================================= */
        .value-stack-title {
                font-size: 0.9rem !important;
                font-weight: 500 !important;
        }

        .value-stack-list {
                gap: 12px !important; /* تقليل المسافة العمودية لتناسب الخط الصغير */
        }

        .stack-item-title {
                font-size: 0.85rem !important;
                font-weight: 400 !important; /* إزالة الخط العريض (Gras) كلياً */
        }

        .stack-item-price {
                font-size: 0.85rem !important;
                font-weight: 500 !important; /* تخفيف سماكة السعر */
        }
        
        .stack-item-left {
                gap: 8px !important;
        }
        
        .check-icon {
                width: 16px !important;
                height: 16px !important;
        }

} /* end @media (max-width: 768px) */

/* ================================================================
   Small Mobile Overrides (max-width: 480px)
================================================================ */
@media (max-width: 480px) {
        /* .msg-bubble max-width removed to allow the calc(100% - 40px) from mobile layout to inherit safely */
        .contrast-card     { padding: var(--space-6) var(--space-5); }
        .pricing-card      { padding: var(--space-8) var(--space-5); }
        .bundle-card.premium-card { max-width: 90%; }
}