/* ==========================================================================
   CAPPS PLATFORM - TARIFS PAGE MOBILE RESPONSIVE ENGINE (<= 768px)
   File: assets/css/capps_website/mobile_tarifs.css
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* ----------------------------------------------------------------------
       1. VIEWPORT & RESET
       ---------------------------------------------------------------------- */
    .tarifs-page,
    .tarifs-page main {
        background-color: #f8fafc !important;
        color: #1e293b !important;
        padding-top: 60px !important;
        overflow-x: hidden !important;
    }

        .tarifs-page .container {
            padding-left: 1rem !important;
            padding-right: 1rem !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        /* Section Headers */
        .tarifs-page .section-heading,
        .tarifs-page .section-header {
            text-align: center !important;
            margin-bottom: 1.75rem !important;
        }

        .tarifs-page .eyebrow {
            font-size: 0.78rem !important;
            font-weight: 700 !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase !important;
            color: #0284c7 !important;
            margin-bottom: 0.35rem !important;
            display: block !important;
        }

        .tarifs-page h2 {
            font-size: 1.45rem !important;
            line-height: 1.3 !important;
            font-weight: 800 !important;
            color: #0f172a !important;
        }

    /* ----------------------------------------------------------------------
       2. TOP PRICING CARDS SECTION (.capps-pricing-section)
       ---------------------------------------------------------------------- */
    .capps-pricing-section {
        padding: 1.75rem 0 !important;
    }

    .capps-pricing-grid,
    .pricing-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    /* Pricing Card Base */
    .capps-pricing-card {
        width: 100% !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 1.25rem !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

        /* Featured / Popular Card Highlight */
        .capps-pricing-card.capps-pricing-popular {
            border: 2px solid #0284c7 !important;
            box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12) !important;
            margin-top: 0.5rem !important;
        }

    .capps-popular-badge {
        position: absolute !important;
        top: -12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: linear-gradient(135deg, #0284c7 0%, #312e81 100%) !important;
        color: #ffffff !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.05em !important;
        padding: 0.3rem 0.85rem !important;
        border-radius: 50px !important;
        white-space: nowrap !important;
        box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3) !important;
    }

    .capps-pricing-header {
        text-align: center !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 1rem !important;
    }

        .capps-pricing-header h3 {
            font-size: 1.25rem !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            margin-bottom: 0.25rem !important;
        }

    .capps-price {
        font-size: 2rem !important;
        font-weight: 800 !important;
        color: #0284c7 !important;
        line-height: 1 !important;
        margin: 0.5rem 0 !important;
    }

        .capps-price span {
            font-size: 0.85rem !important;
            font-weight: 600 !important;
            color: #64748b !important;
        }

    .capps-plan-desc {
        font-size: 0.85rem !important;
        color: #64748b !important;
        margin: 0 !important;
    }

    /* Feature Lists inside cards */
    .capps-feature-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 1.25rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.55rem !important;
    }

        .capps-feature-list li {
            font-size: 0.88rem !important;
            color: #334155 !important;
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
        }

            .capps-feature-list li::before {
                content: "✓" !important;
                font-weight: 800 !important;
                color: #0284c7 !important;
                background: #e0f2fe !important;
                width: 18px !important;
                height: 18px !important;
                border-radius: 50% !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                font-size: 0.7rem !important;
                flex-shrink: 0 !important;
            }

    .capps-pricing-footer .btn {
        width: 100% !important;
        padding: 0.8rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        text-align: center !important;
        display: block !important;
    }

    .capps-pricing-footer .btn-primary {
        background: linear-gradient(135deg, #0284c7 0%, #4338ca 100%) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
    }

    .capps-pricing-footer .btn-secondary {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
    }

    /* ----------------------------------------------------------------------
       3. TARIFS HERO FEATURE BANNER (.tarifs-feature)
       ---------------------------------------------------------------------- */
    .tarifs-feature {
        padding: 2rem 0 !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .feature-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }

    .feature-text .badge {
        background: #e0f2fe !important;
        color: #0284c7 !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        padding: 0.35rem 0.75rem !important;
        border-radius: 50px !important;
        margin-bottom: 0.5rem !important;
        display: inline-block !important;
    }

    .feature-text h2 {
        font-size: 1.35rem !important;
        margin-bottom: 0.5rem !important;
    }

    .feature-text p {
        font-size: 0.9rem !important;
        color: #475569 !important;
        line-height: 1.55 !important;
        margin-bottom: 1rem !important;
    }

    .feature-points {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .feature-points__item {
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

        .feature-points__item i {
            color: #0284c7 !important;
            font-size: 1.1rem !important;
        }

    /* Visual Price Stack Mockup */
    .feature-visual--tarifs {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .feature-visual__price-stack {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    .feature-visual__mini-card {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 12px !important;
        padding: 0.75rem 0.5rem !important;
        text-align: center !important;
        flex: 1 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    }

    .feature-visual__mini-card--main {
        background: #ffffff !important;
        border: 2px solid #0284c7 !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15) !important;
        transform: scale(1.05) !important;
        z-index: 2 !important;
    }

    .feature-visual__tag {
        font-size: 0.55rem !important;
        font-weight: 800 !important;
        background: #0284c7 !important;
        color: #ffffff !important;
        padding: 0.15rem 0.35rem !important;
        border-radius: 4px !important;
        display: block !important;
        margin-bottom: 0.2rem !important;
    }

    .feature-visual__mini-label {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        color: #334155 !important;
        display: block !important;
    }

    .feature-visual__mini-price {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #0284c7 !important;
    }

    /* ----------------------------------------------------------------------
       4. COMPARISON TABLE vs. MOBILE STACK CARDS (.pricing-section)
       ---------------------------------------------------------------------- */
    .pricing-section {
        padding: 2rem 0 !important;
    }

    /* Hide heavy desktop horizontal table on mobile screens */
    .pricing-table-wrapper {
        display: none !important;
    }

    /* Display mobile stacked plan cards */
    .pricing-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .pricing-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 1.25rem !important;
        position: relative !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    }

    .pricing-card--featured {
        border: 2px solid #0284c7 !important;
        box-shadow: 0 6px 18px rgba(2, 132, 199, 0.12) !important;
    }

    .pricing-card__badge {
        position: absolute !important;
        top: -11px !important;
        right: 15px !important;
        background: #0284c7 !important;
        color: #ffffff !important;
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        padding: 0.25rem 0.65rem !important;
        border-radius: 50px !important;
    }

    .pricing-card__head {
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

        .pricing-card__head h3 {
            font-size: 1.15rem !important;
            font-weight: 800 !important;
            color: #0f172a !important;
            margin-bottom: 0.2rem !important;
        }

    .pricing-card__meta {
        font-size: 0.85rem !important;
        color: #64748b !important;
        margin: 0 !important;
    }

        .pricing-card__meta strong {
            color: #0284c7 !important;
            font-size: 1.1rem !important;
        }

    .pricing-card__list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 1.25rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

        .pricing-card__list li {
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            font-size: 0.85rem !important;
            padding-bottom: 0.4rem !important;
            border-bottom: 1px dashed #f1f5f9 !important;
        }

            .pricing-card__list li:last-child {
                border-bottom: none !important;
            }

            .pricing-card__list li span:first-child {
                color: #64748b !important;
            }

            .pricing-card__list li span:last-child {
                font-weight: 700 !important;
                color: #0f172a !important;
                text-align: right !important;
            }

    .btn-cta {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.8rem 1rem !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        text-decoration: none !important;
    }

    .btn-cta--primary {
        background: linear-gradient(135deg, #0284c7 0%, #4338ca 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
    }

    .btn-cta--ghost,
    .btn-cta--secondary {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
    }

    /* ----------------------------------------------------------------------
       5. TARIFS CTA FOOTER BANNER (.pricing-cta)
       ---------------------------------------------------------------------- */
    .pricing-cta {
        padding: 2.25rem 1rem !important;
        margin: 1.5rem 0 !important;
    }

    .pricing-cta__inner {
        background: linear-gradient(135deg, #0284c7 0%, #312e81 100%) !important;
        border-radius: 18px !important;
        padding: 1.75rem 1.25rem !important;
        text-align: center !important;
        color: #ffffff !important;
        box-shadow: 0 8px 24px rgba(2, 132, 199, 0.25) !important;
    }

    .pricing-cta__copy h2 {
        font-size: 1.3rem !important;
        color: #ffffff !important;
        margin-bottom: 0.6rem !important;
    }

    .pricing-cta__copy p {
        font-size: 0.88rem !important;
        color: #e0f2fe !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.5 !important;
    }

    .pricing-cta__actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

        .pricing-cta__actions .btn-cta--primary {
            background: #ffffff !important;
            color: #0284c7 !important;
            font-weight: 800 !important;
        }

        .pricing-cta__actions .btn-cta--secondary {
            background: rgba(255, 255, 255, 0.15) !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
}