/* ===== RESPONSIVE PRICING MODAL FIXES ===== */
/* These styles fix the pricing modal for mobile and small screens */
/* Using !important to override existing styles */

/* Fix for all mobile sizes - remove hero card scale */
@media (max-width: 1023px) {

    /* Modal Container - Enable scrolling */
    #subscription-modal.modal.is-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Remove flex centering so content starts at top */
        overflow-y: auto !important;
        /* Allow scrolling the container */
        overflow-x: visible !important;
        padding: 20px 0 !important;
    }

    /* Modal Content - Full width/height flow */
    #subscription-modal .pricing-modal-content {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        border-radius: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Pricing Body - Add padding for close button */
    #subscription-modal .pricing-body {
        padding: 70px 16px 40px !important;
        /* Top padding for fixed close button */
        overflow-x: visible !important;
        overflow-y: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Grid - Single Column */
    #subscription-modal .pricing-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 24px !important;
        margin: 0 !important;
        padding: 10px !important;
        overflow: visible !important;
    }

    /* Cards - Full Width */
    #subscription-modal .pricing-card {
        padding: 28px 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Hero Card Reset */
    #subscription-modal .hero-card {
        transform: scale(1) !important;
    }

    #subscription-modal .hero-card:hover {
        transform: scale(1) translateY(-2px) !important;
    }

    /* Fixed Close Button */
    #subscription-modal .floating-close-btn {
        position: fixed !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 9999 !important;
        /* Max z-index to ensure it's on top */
        background-color: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        border-radius: 50% !important;
        width: 44px !important;
        height: 44px !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Tablet Adjustments (768px and below) */
@media (max-width: 768px) {
    #subscription-modal .pricing-body {
        padding: 70px 16px 40px !important;
    }

    #subscription-modal .pricing-grid {
        gap: 16px !important;
    }

    #subscription-modal .pricing-card {
        padding: 24px 18px !important;
    }

    #subscription-modal .pricing-card-header h3 {
        font-size: 1.15rem !important;
    }

    #subscription-modal .basic-card .price-main {
        font-size: 1.85rem !important;
    }

    #subscription-modal .hero-card .price-main.hero-price {
        font-size: 2.75rem !important;
    }

    #subscription-modal .premium-card .price-main.premium-price {
        font-size: 2rem !important;
    }

    #subscription-modal .price-subtext {
        font-size: 0.85rem !important;
    }

    #subscription-modal .pricing-features li {
        font-size: 0.9rem !important;
        margin-bottom: 12px !important;
    }

    #subscription-modal .pricing-btn {
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }

    #subscription-modal .hero-card .btn-primary.hero-btn,
    #subscription-modal .premium-card .btn-premium {
        padding: 16px 24px !important;
        font-size: 1rem !important;
    }
}

/* Small Mobile Adjustments (640px and below) */
@media (max-width: 640px) {
    #subscription-modal .pricing-body {
        padding: 60px 12px 30px !important;
    }

    #subscription-modal .pricing-grid {
        gap: 14px !important;
    }

    #subscription-modal .pricing-card {
        padding: 20px 16px !important;
        border-radius: 16px !important;
    }

    #subscription-modal .hero-badge,
    #subscription-modal .premium-badge {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
        margin-bottom: 16px !important;
    }

    #subscription-modal .pricing-card-header h3 {
        font-size: 1.1rem !important;
    }

    #subscription-modal .pricing-card-price {
        margin-bottom: 24px !important;
    }

    #subscription-modal .basic-card .price-main {
        font-size: 1.75rem !important;
    }

    #subscription-modal .hero-card .price-main.hero-price {
        font-size: 2.5rem !important;
    }

    #subscription-modal .premium-card .price-main.premium-price {
        font-size: 1.85rem !important;
    }

    #subscription-modal .price-subtext {
        font-size: 0.8rem !important;
    }

    #subscription-modal .price-original {
        font-size: 0.9rem !important;
    }

    #subscription-modal .pricing-description {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }

    #subscription-modal .pricing-features {
        margin-bottom: 24px !important;
    }

    #subscription-modal .pricing-features li {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
        gap: 10px !important;
    }

    #subscription-modal .pricing-features li i {
        font-size: 0.9rem !important;
    }

    #subscription-modal .pricing-btn {
        padding: 13px 18px !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
    }

    #subscription-modal .hero-card .btn-primary.hero-btn,
    #subscription-modal .premium-card .btn-premium {
        padding: 15px 20px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
    }

    #subscription-modal .pricing-card .disclaimer {
        font-size: 0.7rem !important;
        margin-top: 12px !important;
    }

    #subscription-modal .terms-checkbox-container {
        margin: 12px 0 !important;
    }

    #subscription-modal .terms-checkbox-container label {
        font-size: 0.85rem !important;
    }

    #subscription-modal .terms-notice {
        font-size: 0.7rem !important;
    }
}

/* Extra Small Mobile (480px and below - iPhone SE, etc.) */
@media (max-width: 480px) {
    #subscription-modal .pricing-body {
        padding: 60px 8px 24px !important;
    }

    #subscription-modal .pricing-grid {
        gap: 12px !important;
    }

    #subscription-modal .pricing-card {
        padding: 18px 14px !important;
    }

    #subscription-modal .hero-badge,
    #subscription-modal .premium-badge {
        padding: 5px 10px !important;
        font-size: 0.65rem !important;
        margin-bottom: 14px !important;
    }

    #subscription-modal .pricing-card-header h3 {
        font-size: 1.05rem !important;
    }

    #subscription-modal .pricing-card-price {
        margin-bottom: 20px !important;
    }

    #subscription-modal .basic-card .price-main {
        font-size: 1.6rem !important;
    }

    #subscription-modal .hero-card .price-main.hero-price {
        font-size: 2.25rem !important;
    }

    #subscription-modal .premium-card .price-main.premium-price {
        font-size: 1.7rem !important;
    }

    #subscription-modal .price-subtext {
        font-size: 0.75rem !important;
    }

    #subscription-modal .pricing-description {
        font-size: 0.8rem !important;
        margin-bottom: 16px !important;
    }

    #subscription-modal .pricing-features {
        margin-bottom: 20px !important;
    }

    #subscription-modal .pricing-features li {
        font-size: 0.8rem !important;
        margin-bottom: 9px !important;
    }

    #subscription-modal .pricing-btn {
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
    }

    #subscription-modal .hero-card .btn-primary.hero-btn,
    #subscription-modal .premium-card .btn-premium {
        padding: 14px 18px !important;
        font-size: 0.9rem !important;
    }

    #subscription-modal .terms-checkbox-container label {
        font-size: 0.8rem !important;
    }
}

/* Extra specificity for hero card scale fix */
body #subscription-modal.modal.is-open .hero-card {
    transform: scale(1) !important;
}

body #subscription-modal.modal.is-open .hero-card:hover {
    transform: scale(1) translateY(-2px) !important;
}

@media (max-width: 1023px) {
    body #subscription-modal.modal.is-open .hero-card {
        transform: scale(1) !important;
    }

    body #subscription-modal.modal.is-open .hero-card:hover {
        transform: scale(1) translateY(-2px) !important;
    }
}