/* =====================================================
   LUXPRED - USER RESPONSIVE STYLES
   =====================================================
   Ce fichier contient tous les styles responsive pour
   les pages utilisateur (header, footer, mobile menu).
   Utilise des classes avec prefixe 'lux-' pour eviter
   les conflits avec style.css
   ===================================================== */

/* =====================================================
   HEADER - BASE STYLES
   ===================================================== */
.lux-header {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.lux-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.lux-header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    width: 100%;
}

/* =====================================================
   LOGO
   ===================================================== */
.lux-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.lux-logo-img {
    height: 95px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* =====================================================
   DESKTOP NAVIGATION
   ===================================================== */
.lux-nav-desktop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lux-nav-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lux-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
}

.lux-nav-link:hover {
    background: #f3f4f6;
    color: #111827;
}

.lux-nav-link-primary {
    background: #667eea;
    color: #fff;
    font-weight: 600;
}

.lux-nav-link-primary:hover {
    background: #5a67d8;
    color: #fff;
}

.lux-nav-link-logout {
    color: #dc2626;
}

.lux-nav-link-logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.lux-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.lux-user-badge i {
    color: #667eea;
}

.lux-nav-support {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    margin-left: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
}

.lux-nav-support:hover {
    background: #059669;
    transform: scale(1.05);
}

.lux-logout-form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* =====================================================
   HAMBURGER BUTTON
   ===================================================== */
.lux-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 10001;
    flex-shrink: 0;
}

.lux-hamburger-line {
    display: block;
    width: 24px;
    height: 3px;
    background: #374151;
    border-radius: 3px;
    transition: all 0.3s ease;
    position: absolute;
    left: 10px;
}

.lux-hamburger-line:nth-child(1) { top: 12px; }
.lux-hamburger-line:nth-child(2) { top: 20px; }
.lux-hamburger-line:nth-child(3) { top: 28px; }

/* Hamburger animation when active */
.lux-hamburger.is-active .lux-hamburger-line:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
}

.lux-hamburger.is-active .lux-hamburger-line:nth-child(2) {
    opacity: 0;
}

.lux-hamburger.is-active .lux-hamburger-line:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
}

/* =====================================================
   MOBILE OVERLAY
   ===================================================== */
.lux-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.lux-overlay.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* =====================================================
   MOBILE NAVIGATION SIDEBAR
   ===================================================== */
.lux-mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 10000;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
}

.lux-mobile-nav.is-open {
    right: 0 !important;
}

.lux-mobile-inner {
    padding: 80px 1rem 2rem;
}

.lux-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    margin-bottom: 0.5rem;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 10px;
    background: #f9fafb;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: all 0.2s;
}

.lux-mobile-link:hover {
    background: #f3f4f6;
}

.lux-mobile-link i {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.lux-mobile-link-primary {
    background: #667eea;
    color: #fff;
}

.lux-mobile-link-primary:hover {
    background: #5a67d8;
}

.lux-mobile-link-logout {
    background: #fef2f2;
    color: #dc2626;
}

.lux-mobile-link-logout:hover {
    background: #fee2e2;
}

.lux-mobile-link-support {
    background: #ecfdf5;
    color: #059669;
}

.lux-mobile-link-support:hover {
    background: #d1fae5;
}

.lux-mobile-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    background: #eff6ff;
    border-radius: 10px;
    font-weight: 600;
    color: #1e40af;
}

.lux-mobile-badge i {
    color: #667eea;
}

.lux-mobile-form {
    margin: 0;
    padding: 0;
}

/* =====================================================
   RESPONSIVE - TABLET (max-width: 992px)
   ===================================================== */
@media screen and (max-width: 992px) {
    .lux-nav-link span {
        display: none;
    }

    .lux-nav-link {
        padding: 0.5rem;
        min-width: 40px;
        justify-content: center;
    }

    .lux-user-badge span {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* =====================================================
   RESPONSIVE - MOBILE (max-width: 768px)
   ===================================================== */
@media screen and (max-width: 768px) {
    .lux-header-content {
        height: 60px !important;
    }

    .lux-logo-img {
        height: 85px !important;
    }

    /* Hide desktop nav, show hamburger */
    .lux-nav-desktop {
        display: none !important;
    }

    .lux-hamburger {
        display: block !important;
    }

    /* Enable overlay and mobile nav - must use !important */
    .lux-overlay {
        display: block !important;
    }

    .lux-mobile-nav {
        display: block !important;
    }
}

/* =====================================================
   RESPONSIVE - SMALL MOBILE (max-width: 480px)
   ===================================================== */
@media screen and (max-width: 480px) {
    .lux-header-container {
        padding: 0 0.75rem;
    }

    .lux-header-content {
        height: 56px;
    }

    .lux-logo-img {
        height: 40px;
    }

    .lux-mobile-nav {
        width: 260px !important;
        right: -260px !important;
    }

    .lux-mobile-nav.is-open {
        right: 0 !important;
    }

    .lux-mobile-inner {
        padding: 70px 0.875rem 2rem;
    }

    .lux-mobile-link {
        padding: 0.875rem;
        font-size: 0.9375rem;
    }
}

/* =====================================================
   FOOTER RESPONSIVE
   ===================================================== */
@media screen and (max-width: 768px) {
    .footer .container {
        padding: 1.5rem 1rem;
    }

    .footer .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 1rem;
    }

    .footer .footer-links a {
        font-size: 0.875rem;
    }

    .footer p {
        font-size: 0.875rem;
        margin: 0;
    }
}

@media screen and (max-width: 480px) {
    .footer .footer-links {
        gap: 0.5rem 0.75rem;
    }

    .footer .footer-links a {
        font-size: 0.8125rem;
    }
}

/* =====================================================
   COOKIE BANNER RESPONSIVE
   ===================================================== */
@media screen and (max-width: 768px) {
    #cookieConsentBanner > div {
        padding: 1.5rem 1rem;
    }

    #cookieConsentBanner > div > div {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Hide cookie icon on mobile */
    #cookieConsentBanner > div > div > div:first-child {
        display: none;
    }

    #cookieConsentBanner h3 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    #cookieConsentBanner p {
        font-size: 0.9375rem;
    }

    /* Action buttons container */
    #cookieConsentBanner > div > div > div:last-child {
        min-width: unset;
        width: 100%;
    }

    /* Accept all button - full width */
    #cookieConsentBanner button[onclick="acceptAllCookiesFromBanner()"] {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }

    /* Customize/Reject buttons row */
    #cookieConsentBanner > div > div > div:last-child > div {
        width: 100%;
    }

    /* Cookie Settings Modal */
    #cookieSettingsModal {
        padding: 1rem;
    }

    #cookieSettingsModal > div {
        margin: 1rem auto;
        border-radius: 16px;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    #cookieSettingsModal > div > div:first-child {
        padding: 1.5rem;
        border-radius: 16px 16px 0 0;
    }

    #cookieSettingsModal h2 {
        font-size: 1.375rem;
        padding-right: 2rem;
    }

    #cookieSettingsModal > div > div:last-child {
        padding: 1.25rem;
    }
}

@media screen and (max-width: 480px) {
    #cookieConsentBanner h3 {
        font-size: 1.125rem;
    }

    #cookieConsentBanner p {
        font-size: 0.875rem;
    }

    #cookieSettingsModal h2 {
        font-size: 1.25rem;
    }
}

/* =====================================================
   FORMS RESPONSIVE
   ===================================================== */
@media screen and (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    main {
        padding: 1rem 0;
        min-height: auto;
    }

    /* Auth forms (login, signup, etc.) */
    .auth-form {
        padding: 0 0.5rem;
    }

    .auth-form h1 {
        font-size: 1.5rem;
    }

    .auth-form form {
        padding: 1.25rem;
    }

    /* Form inputs - prevent iOS zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px;
    }

    /* Buttons full width on mobile */
    .btn,
    button[type="submit"] {
        width: 100%;
    }

    /* Headings */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    /* Alerts */
    .alert {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .auth-form form {
        padding: 1rem;
        border-radius: 6px;
    }

    .auth-form h1 {
        font-size: 1.375rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    a {
        word-break: break-word;
    }
}

/* =====================================================
   TOAST NOTIFICATIONS RESPONSIVE
   ===================================================== */
@media screen and (max-width: 768px) {
    div[style*="position: fixed"][style*="top: 2rem"][style*="right: 2rem"] {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        padding: 1rem;
        font-size: 0.9375rem;
    }
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =====================================================
   ACCOUNT PAGE - RESPONSIVE STYLES
   ===================================================== */

/* Hero Section */
@media screen and (max-width: 768px) {
    /* Hero Section */
    section[style*="linear-gradient(135deg, #667eea"] {
        padding: 2rem 1rem !important;
    }

    section[style*="linear-gradient(135deg, #667eea"] h1 {
        font-size: 1.75rem !important;
    }

    section[style*="linear-gradient(135deg, #667eea"] > div > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.5rem !important;
    }

    /* Luxpred App Button */
    .agent-ia-btn,
    .agent-ia-btn-disabled {
        width: 100% !important;
        text-align: center !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }

    /* Container padding */
    .container[style*="max-width: 1200px"] {
        padding: 1.25rem 1rem !important;
    }

    /* Alert messages */
    div[style*="padding: 1.5rem"][style*="border-radius: 16px"][style*="margin-bottom: 2rem"] {
        padding: 1rem !important;
    }

    div[style*="padding: 1.5rem"] > div[style*="display: flex"] > div[style*="width: 48px"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.25rem !important;
    }

    /* Cards - Header sections */
    .current-subscription-section > div:first-child,
    .available-plans-section > div:first-child,
    .subscription-event-history-section > div:first-child,
    .security-section > div:first-child {
        padding: 1.5rem 1rem !important;
    }

    .current-subscription-section h2,
    .available-plans-section h2,
    .subscription-event-history-section h3,
    .security-section h2 {
        font-size: 1.375rem !important;
    }

    /* Card icon */
    div[style*="width: 56px"][style*="height: 56px"] {
        width: 48px !important;
        height: 48px !important;
    }

    div[style*="width: 56px"] span[style*="font-size: 1.75rem"] {
        font-size: 1.5rem !important;
    }

    /* Card body padding */
    .current-subscription-section > div:last-child,
    .available-plans-section > div[style*="padding: 2.5rem"],
    .security-section > div[style*="padding: 2.5rem"] {
        padding: 1.5rem 1rem !important;
    }

    /* Current subscription - layout */
    .current-subscription-section div[style*="display: flex"][style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .current-subscription-section div[style*="flex: 1; min-width: 200px"] {
        min-width: 100% !important;
    }

    .current-subscription-section a[style*="padding: 1rem 2rem"] {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }

    /* Plans Grid */
    .plans-grid {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .plans-grid .plan-card {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 1.5rem !important;
    }

    .plans-grid .plan-card h3 {
        font-size: 1.5rem !important;
    }

    /* Recommended badge */
    .plans-grid .plan-card div[style*="position: absolute"][style*="top: -16px"] {
        font-size: 0.75rem !important;
        padding: 0.375rem 1rem !important;
    }

    /* Pricing in plan cards */
    .plans-grid .plan-card span[style*="font-size: 2rem"] {
        font-size: 1.75rem !important;
    }

    /* Security Section */
    .security-section div[style*="background: #f9fafb"][style*="padding: 2rem"] {
        padding: 1.25rem !important;
    }

    .security-section div[style*="display: flex"][style*="justify-content: space-between"][style*="margin-bottom: 1.5rem"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .security-section .btn-change-password {
        width: 100% !important;
    }

    /* Password form */
    .security-section form div[style*="background: white"][style*="padding: 2rem"] {
        padding: 1.25rem !important;
    }

    .security-section form div[style*="display: flex"][style*="justify-content: flex-end"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .security-section form button {
        width: 100% !important;
    }

    /* Subscription History Table */
    .subscription-event-history-section table {
        font-size: 0.8125rem !important;
    }

    .subscription-event-history-section th,
    .subscription-event-history-section td {
        padding: 0.75rem 0.5rem !important;
    }

    /* Hide description column on mobile */
    .subscription-event-history-section th:nth-child(3),
    .subscription-event-history-section td:nth-child(3) {
        display: none !important;
    }

    /* Subscription Popup */
    #subscriptionPopup > div {
        padding: 2rem 1.5rem !important;
        width: 95% !important;
        max-width: 400px !important;
    }

    #subscriptionPopup h2 {
        font-size: 1.5rem !important;
    }

    #subscriptionPopup p {
        font-size: 0.9375rem !important;
    }

    #subscriptionPopup div[style*="width: 80px"] {
        width: 64px !important;
        height: 64px !important;
    }

    #subscriptionPopup div[style*="width: 80px"] span {
        font-size: 2rem !important;
    }
}

/* Small Mobile */
@media screen and (max-width: 480px) {
    /* Hero Section */
    section[style*="linear-gradient(135deg, #667eea"] {
        padding: 1.5rem 0.75rem !important;
    }

    section[style*="linear-gradient(135deg, #667eea"] h1 {
        font-size: 1.5rem !important;
    }

    section[style*="linear-gradient(135deg, #667eea"] span[style*="font-size: 1.125rem"] {
        font-size: 0.9375rem !important;
    }

    /* Verified badge */
    section[style*="linear-gradient(135deg, #667eea"] span[style*="border-radius: 50px"] {
        font-size: 0.75rem !important;
        padding: 0.2rem 0.5rem !important;
    }

    /* Container */
    .container[style*="max-width: 1200px"] {
        padding: 1rem 0.75rem !important;
    }

    /* Cards header */
    .current-subscription-section > div:first-child,
    .available-plans-section > div:first-child,
    .subscription-event-history-section > div:first-child,
    .security-section > div:first-child {
        padding: 1.25rem 0.875rem !important;
    }

    .current-subscription-section h2,
    .available-plans-section h2,
    .subscription-event-history-section h3,
    .security-section h2 {
        font-size: 1.25rem !important;
    }

    /* Card body */
    .current-subscription-section > div:last-child,
    .available-plans-section > div[style*="padding: 2.5rem"],
    .security-section > div[style*="padding: 2.5rem"] {
        padding: 1.25rem 0.875rem !important;
    }

    /* Plan cards */
    .plans-grid .plan-card {
        padding: 1.25rem !important;
    }

    .plans-grid .plan-card h3 {
        font-size: 1.375rem !important;
    }

    /* Subscription history - hide more columns */
    .subscription-event-history-section th:nth-child(4),
    .subscription-event-history-section td:nth-child(4) {
        display: none !important;
    }

    .subscription-event-history-section th,
    .subscription-event-history-section td {
        padding: 0.625rem 0.375rem !important;
        font-size: 0.75rem !important;
    }

    /* Status badges */
    .subscription-event-history-section span[style*="border-radius: 20px"] {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Popup */
    #subscriptionPopup > div {
        padding: 1.5rem 1.25rem !important;
        margin: 0.5rem !important;
    }

    #subscriptionPopup h2 {
        font-size: 1.25rem !important;
    }

    #subscriptionPopup a,
    #subscriptionPopup button {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }
}

/* =====================================================
   CHECKOUT PAGE - RESPONSIVE STYLES
   ===================================================== */

@media screen and (max-width: 768px) {
    /* Hero Section */
    main > section[style*="linear-gradient(135deg, #667eea"][style*="padding: 2rem"] {
        padding: 1.5rem 1rem !important;
    }

    main > section[style*="linear-gradient(135deg, #667eea"] h1 {
        font-size: 1.5rem !important;
    }

    main > section[style*="linear-gradient(135deg, #667eea"] p {
        font-size: 0.9375rem !important;
    }

    /* Container */
    .container[style*="max-width: 800px"] {
        padding: 1.5rem 1rem !important;
        margin-top: -0.5rem !important;
    }

    /* Plan Summary Card */
    div[style*="background: white"][style*="border-radius: 24px"][style*="padding: 3rem"] {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    /* Plan icon */
    div[style*="width: 80px"][style*="height: 80px"][style*="border-radius: 20px"] {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
    }

    div[style*="width: 80px"] span[style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
    }

    /* Plan title */
    h2[style*="font-size: 1.75rem"] {
        font-size: 1.375rem !important;
    }

    /* Features list */
    h3[style*="font-size: 1.125rem"] {
        font-size: 1rem !important;
    }

    /* Checkout Form */
    form[style*="padding: 3rem"] {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    form h3[style*="font-size: 1.5rem"] {
        font-size: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Billing Cycle Grid - Stack vertically */
    div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Billing cycle options */
    .billing-cycle-option {
        padding: 1.5rem 1rem !important;
        border-radius: 12px !important;
    }

    .billing-cycle-option div[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    .billing-cycle-option div[style*="font-size: 1.75rem"] {
        font-size: 1.5rem !important;
    }

    .billing-cycle-option div[style*="font-size: 1.125rem"] {
        font-size: 1rem !important;
    }

    /* Savings badge */
    .billing-cycle-option div[style*="position: absolute"][style*="top: -12px"] {
        font-size: 0.6875rem !important;
        padding: 0.2rem 0.5rem !important;
        top: -10px !important;
        right: 0.75rem !important;
    }

    /* Submit button */
    button[style*="font-size: 1.125rem"][style*="padding: 1.25rem"] {
        padding: 1rem !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }

    /* Security notice */
    div[style*="margin-top: 1.5rem"][style*="text-align: center"][style*="font-size: 0.875rem"] {
        font-size: 0.8125rem !important;
    }
}

@media screen and (max-width: 480px) {
    /* Hero Section */
    main > section[style*="linear-gradient(135deg, #667eea"][style*="padding: 2rem"] {
        padding: 1.25rem 0.75rem !important;
    }

    main > section[style*="linear-gradient(135deg, #667eea"] h1 {
        font-size: 1.25rem !important;
    }

    main > section[style*="linear-gradient(135deg, #667eea"] p {
        font-size: 0.875rem !important;
    }

    /* Container */
    .container[style*="max-width: 800px"] {
        padding: 1rem 0.75rem !important;
    }

    /* Plan Summary Card */
    div[style*="background: white"][style*="border-radius: 24px"][style*="padding: 3rem"] {
        padding: 1.25rem !important;
    }

    /* Plan icon */
    div[style*="width: 80px"][style*="height: 80px"][style*="border-radius: 20px"] {
        width: 56px !important;
        height: 56px !important;
    }

    div[style*="width: 80px"] span[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
    }

    /* Plan title */
    h2[style*="font-size: 1.75rem"] {
        font-size: 1.25rem !important;
    }

    /* Form */
    form[style*="padding: 3rem"] {
        padding: 1.25rem !important;
    }

    form h3[style*="font-size: 1.5rem"] {
        font-size: 1.125rem !important;
    }

    /* Billing cycle options */
    .billing-cycle-option {
        padding: 1.25rem 0.875rem !important;
    }

    .billing-cycle-option div[style*="font-size: 1.5rem"],
    .billing-cycle-option div[style*="font-size: 1.75rem"] {
        font-size: 1.375rem !important;
    }

    /* Submit button */
    button[style*="font-size: 1.125rem"][style*="padding: 1.25rem"] {
        padding: 0.875rem !important;
        font-size: 0.9375rem !important;
    }
}

/* =====================================================
   LEGAL PAGES - RESPONSIVE STYLES
   (mentions, terms, privacy, cookies)
   ===================================================== */

@media screen and (max-width: 768px) {
    /* Hero Sections - All legal pages */
    /* Terms & Mentions (purple gradient) */
    section[style*="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"][style*="padding: 3rem"] {
        padding: 2rem 1rem !important;
    }

    /* Privacy (green gradient) */
    section[style*="linear-gradient(135deg, #10b981 0%, #059669 100%)"][style*="padding: 3rem"] {
        padding: 2rem 1rem !important;
    }

    /* Cookies (orange gradient) */
    section[style*="linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"][style*="padding: 3rem"] {
        padding: 2rem 1rem !important;
    }

    /* Hero h1 */
    section[style*="linear-gradient"] h1[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
        margin: 0 0 0.5rem 0 !important;
    }

    /* Hero p */
    section[style*="linear-gradient"] p[style*="font-size: 1rem"] {
        font-size: 0.9rem !important;
    }

    /* Container */
    div.container[style*="max-width: 900px"][style*="padding: 3rem"] {
        padding: 1.5rem 1rem !important;
    }

    /* Content Card */
    div[style*="background: white"][style*="border-radius: 20px"][style*="padding: 3rem"][style*="line-height: 1.8"] {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    /* H2 Headings */
    div[style*="line-height: 1.8"] h2[style*="font-size: 1.75rem"] {
        font-size: 1.375rem !important;
        margin: 1.5rem 0 0.75rem 0 !important;
    }

    /* H3 Subheadings */
    div[style*="line-height: 1.8"] h3[style*="font-size: 1.25rem"] {
        font-size: 1.125rem !important;
        margin: 1.25rem 0 0.5rem 0 !important;
    }

    /* Paragraphs */
    div[style*="line-height: 1.8"] p {
        font-size: 0.9375rem !important;
    }

    /* Lists */
    div[style*="line-height: 1.8"] ul[style*="padding-left: 2rem"] {
        padding-left: 1.25rem !important;
    }

    div[style*="line-height: 1.8"] ul li {
        font-size: 0.9375rem !important;
    }

    /* Info boxes with border-left */
    div[style*="border-left: 4px solid"] {
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }

    div[style*="border-left: 4px solid"] h3[style*="font-size: 1.125rem"] {
        font-size: 1rem !important;
    }

    div[style*="border-left: 4px solid"] p {
        font-size: 0.875rem !important;
    }

    /* Tables - Make responsive */
    div[style*="line-height: 1.8"] table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 0.875rem !important;
    }

    div[style*="line-height: 1.8"] table th,
    div[style*="line-height: 1.8"] table td {
        padding: 0.75rem 0.5rem !important;
        white-space: nowrap !important;
    }

    /* Footer section in legal content */
    div[style*="margin-top: 3rem"][style*="border-top: 2px solid"] {
        margin-top: 2rem !important;
        padding-top: 1.5rem !important;
    }

    /* =====================================================
       COOKIE PAGE - Modal Responsive
       ===================================================== */
    /* Cookie Preferences Modal */
    div[style*="background: rgba(0, 0, 0, 0.5)"][style*="z-index: 10000"] > div[style*="max-width: 600px"] {
        width: 95% !important;
        max-width: none !important;
        max-height: 90vh !important;
        margin: 1rem !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }

    /* Modal header */
    div[style*="z-index: 10000"] h3[style*="font-size: 1.5rem"] {
        font-size: 1.25rem !important;
    }

    /* Cookie category items */
    div[style*="border: 1px solid #e5e7eb"][style*="border-radius: 12px"][style*="padding: 1.25rem"] {
        padding: 1rem !important;
    }

    div[style*="border: 1px solid #e5e7eb"] h4[style*="font-size: 1rem"] {
        font-size: 0.9375rem !important;
    }

    div[style*="border: 1px solid #e5e7eb"] p[style*="font-size: 0.875rem"] {
        font-size: 0.8125rem !important;
    }

    /* Modal buttons */
    div[style*="z-index: 10000"] button[style*="padding: 0.75rem 1.5rem"] {
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Preference button in content */
    button[style*="background: linear-gradient"][style*="padding: 1rem 2rem"] {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }
}

@media screen and (max-width: 480px) {
    /* Hero Sections - Extra small */
    section[style*="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"][style*="padding: 3rem"],
    section[style*="linear-gradient(135deg, #10b981 0%, #059669 100%)"][style*="padding: 3rem"],
    section[style*="linear-gradient(135deg, #f59e0b 0%, #d97706 100%)"][style*="padding: 3rem"] {
        padding: 1.5rem 0.75rem !important;
    }

    /* Hero h1 */
    section[style*="linear-gradient"] h1[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }

    /* Container */
    div.container[style*="max-width: 900px"][style*="padding: 3rem"] {
        padding: 1rem 0.75rem !important;
    }

    /* Content Card */
    div[style*="background: white"][style*="border-radius: 20px"][style*="padding: 3rem"][style*="line-height: 1.8"] {
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    /* H2 Headings */
    div[style*="line-height: 1.8"] h2[style*="font-size: 1.75rem"] {
        font-size: 1.25rem !important;
        margin: 1.25rem 0 0.5rem 0 !important;
    }

    /* H3 Subheadings */
    div[style*="line-height: 1.8"] h3[style*="font-size: 1.25rem"] {
        font-size: 1rem !important;
        margin: 1rem 0 0.5rem 0 !important;
    }

    /* Paragraphs */
    div[style*="line-height: 1.8"] p {
        font-size: 0.875rem !important;
        line-height: 1.7 !important;
    }

    /* Lists */
    div[style*="line-height: 1.8"] ul[style*="padding-left: 2rem"] {
        padding-left: 1rem !important;
    }

    div[style*="line-height: 1.8"] ul li {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Info boxes */
    div[style*="border-left: 4px solid"] {
        padding: 0.875rem !important;
        margin: 0.75rem 0 !important;
    }

    div[style*="border-left: 4px solid"] h3[style*="font-size: 1.125rem"] {
        font-size: 0.9375rem !important;
    }

    div[style*="border-left: 4px solid"] p {
        font-size: 0.8125rem !important;
    }

    /* Tables */
    div[style*="line-height: 1.8"] table th,
    div[style*="line-height: 1.8"] table td {
        padding: 0.5rem 0.375rem !important;
        font-size: 0.8125rem !important;
    }

    /* Cookie Modal */
    div[style*="z-index: 10000"] > div[style*="max-width: 600px"] {
        padding: 1rem !important;
        margin: 0.5rem !important;
    }

    div[style*="z-index: 10000"] h3[style*="font-size: 1.5rem"] {
        font-size: 1.125rem !important;
    }

    /* Cookie category items */
    div[style*="border: 1px solid #e5e7eb"][style*="border-radius: 12px"][style*="padding: 1.25rem"] {
        padding: 0.75rem !important;
    }

    /* Modal buttons - Stack vertically */
    div[style*="z-index: 10000"] div[style*="display: flex"][style*="gap: 1rem"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    div[style*="z-index: 10000"] button[style*="padding: 0.75rem 1.5rem"] {
        width: 100% !important;
        padding: 0.75rem !important;
    }

    /* Preference button */
    button[style*="background: linear-gradient"][style*="padding: 1rem 2rem"] {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.875rem !important;
        width: 100% !important;
    }
}