/* Membership Tab Specific Styles */

/* Tailwind CSS Color Definitions - Override critical CSS conflicts */
.bg-primary {
    background-color: #EA7351 !important;
}

.bg-secondary {
    background-color: #E03274 !important;
}

.text-primary {
    color: #EA7351 !important;
}

.border-primary {
    border-color: #EA7351 !important;
}

.from-primary {
    --tw-gradient-from: #EA7351 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(234, 115, 81, 0)) !important;
}

.to-secondary {
    --tw-gradient-to: #E03274 !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

/* Primary Action Button - Membership */
.btn-primary-membership,
.bg-primary-gradient {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 600 !important;
}

.btn-primary-membership:hover,
.bg-primary-gradient:hover {
    background: linear-gradient(135deg, #E03274 0%, #c02a5f 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(234, 115, 81, 0.3) !important;
}

.btn-primary-membership:active,
.bg-primary-gradient:active {
    transform: translateY(0) !important;
}

/* Secondary Action Button - Membership */
.btn-secondary-membership {
    background-color: #E03274 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 600 !important;
}

.btn-secondary-membership:hover {
    background-color: #c02a5f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(224, 50, 116, 0.3) !important;
}

.btn-secondary-membership:active {
    transform: translateY(0) !important;
}

/* Gradient Background for Membership Section */
.gradient-background-membership {
    background-image: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 8s ease infinite !important;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Progress Bar Styles */
.progress-bar {
    background-color: #f3f4f6 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    position: relative !important;
}

.progress-bar-fill {
    height: 100% !important;
    border-radius: 9999px !important;
    transition: width 0.6s ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
}

.progress-bar-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    animation: shimmer 2s infinite !important;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-bar-fill-primary {
    background: linear-gradient(90deg, #EA7351 0%, #E03274 100%) !important;
}

.progress-bar-fill-secondary {
    background: linear-gradient(90deg, #E03274 0%, #c02a5f 100%) !important;
}

/* Progress bar overrides for Tailwind compatibility */
.w-full.bg-gray-200 {
    background-color: #f3f4f6 !important;
}

.w-full.bg-gray-200 .bg-primary {
    background-color: #EA7351 !important;
}

.w-full.bg-gray-200 .bg-secondary {
    background-color: #E03274 !important;
}

/* Membership card styling overrides */
.membership-card,
.bg-white.rounded-2xl.shadow-xl {
    background: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease-in-out !important;
    border: 1px solid rgba(234, 115, 81, 0.1) !important;
}

.membership-card:hover,
.bg-white.rounded-2xl.shadow-xl:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(234, 115, 81, 0.15) !important;
}

/* Plan card styling */
.plan-card,
.border-2.border-gray-200 {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
}

.plan-card:hover,
.border-2.border-gray-200:hover {
    border-color: #EA7351 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(234, 115, 81, 0.1) !important;
}

/* Loading spinner overrides */
.loading-spinner,
.animate-spin {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #EA7351 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

/* Membership Card Styles */
.membership-card {
    background: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease-in-out !important;
    border: 1px solid rgba(234, 115, 81, 0.1) !important;
}

.membership-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(234, 115, 81, 0.15) !important;
}

.membership-card-header {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    color: white !important;
    padding: 1.5rem !important;
    border-radius: 1rem 1rem 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.membership-card-header::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%) !important;
    animation: pulse 4s ease-in-out infinite !important;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* Plan Selection Styles */
.plan-card {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    transition: all 0.3s ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
}

.plan-card:hover {
    border-color: #EA7351 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(234, 115, 81, 0.1) !important;
}

.plan-card.active {
    border-color: #EA7351 !important;
    background: linear-gradient(135deg, rgba(234, 115, 81, 0.05) 0%, rgba(224, 50, 116, 0.05) 100%) !important;
}

.plan-card.active::before {
    content: '✓' !important;
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: #EA7351 !important;
    color: white !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    animation: checkmark 0.3s ease-in-out !important;
}

/* ACTIVE MEMBERSHIP NAME STYLING - Following demo size */
/* Only apply to the current/active membership plan, not upgrade options */

/* Active membership name in current plan card - following demo (text-4xl) */
#tab-membership .membership-card.active .membership-name,
#tab-membership .bg-white.rounded-2xl.shadow-xl:has(.membership-name) .membership-name,
#tab-membership .membership-name.text-primary {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    color: #EA7351 !important; /* Orange color */
}

/* Ultra-specific selector for active membership name */
#tab-membership > div.grid.grid-cols-1.lg\\:grid-cols-3.gap-8 > div.lg\\:col-span-1.space-y-8 > div.bg-white.rounded-2xl.shadow-xl.p-6.text-center:has(.membership-name) > p.membership-name {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    color: #EA7351 !important; /* Orange color */
}

/* Active membership name with gradient option */
#tab-membership .membership-name.text-primary.text-gradient {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
}

/* Upgrade plan names - following demo size (text-lg) */
#tab-membership .plan-card .plan-name,
#tab-membership .border-2.rounded-xl .plan-name,
#tab-membership .plan-card h4 {
    font-size: 1.125rem !important; /* text-lg = 1.125rem */
    font-weight: 600 !important; /* font-semibold */
    line-height: 1.5 !important;
    color: #374151 !important;
    margin-bottom: 0.75rem !important;
}

/* Upgrade buttons - make them orange */
#tab-membership .plan-card .btn-upgrade,
#tab-membership .plan-card button,
#tab-membership .border-2.rounded-xl button {
    background-color: #EA7351 !important; /* Orange color */
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 600 !important;
    border: none !important;
}

#tab-membership .plan-card .btn-upgrade:hover,
#tab-membership .plan-card button:hover,
#tab-membership .border-2.rounded-xl button:hover {
    background-color: #E03274 !important; /* Secondary color */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(234, 115, 81, 0.3) !important;
}

#tab-membership .plan-card .btn-upgrade:active,
#tab-membership .plan-card button:active,
#tab-membership .border-2.rounded-xl button:active {
    transform: translateY(0) !important;
}

/* Responsive adjustments for active membership name */
@media (max-width: 1024px) {
    #tab-membership .membership-card.active .membership-name,
    #tab-membership .membership-name.text-primary {
        font-size: 2rem !important; /* Slightly smaller on tablet */
        font-weight: 700 !important;
    }
}

@media (max-width: 768px) {
    #tab-membership .membership-card.active .membership-name,
    #tab-membership .membership-name.text-primary {
        font-size: 1.875rem !important; /* text-3xl on mobile */
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    #tab-membership .membership-card.active .membership-name,
    #tab-membership .membership-name.text-primary {
        font-size: 1.5rem !important; /* text-2xl on small mobile */
        font-weight: 600 !important;
    }
}

/* Plan Price Styling */
.plan-price {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin-bottom: 1rem !important;
}

@keyframes checkmark {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Toggle Switch Styles */
.toggle-switch {
    position: relative !important;
    width: 3rem !important;
    height: 1.5rem !important;
    background-color: #d1d5db !important;
    border-radius: 9999px !important;
    transition: background-color 0.3s ease-in-out !important;
    cursor: pointer !important;
}

.toggle-switch.active {
    background-color: #EA7351 !important;
}

.toggle-switch::after {
    content: '' !important;
    position: absolute !important;
    top: 0.125rem !important;
    left: 0.125rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: transform 0.3s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.toggle-switch.active::after {
    transform: translateX(1.5rem) !important;
}

/* Loading Animation */
.loading-spinner {
    display: inline-block !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 2px solid #f3f3f3 !important;
    border-top: 2px solid #EA7351 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .membership-card {
        margin-bottom: 1rem !important;
    }
    
    .plan-card {
        margin-bottom: 1rem !important;
    }
    
    .btn-primary-membership,
    .btn-secondary-membership {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for keyboard navigation */
.btn-primary-membership:focus,
.btn-secondary-membership:focus,
.plan-card:focus,
.toggle-switch:focus {
    outline: 2px solid #EA7351 !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-primary-membership {
        border: 2px solid #000000 !important;
    }
    
    .btn-secondary-membership {
        border: 2px solid #000000 !important;
    }
    
    .plan-card {
        border: 2px solid #000000 !important;
    }
}

/* Print styles */
@media print {
    .btn-primary-membership,
    .btn-secondary-membership {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    .gradient-background-membership {
        background: #EA7351 !important;
    }
}

/* Custom scrollbar for membership sections */
.membership-scroll::-webkit-scrollbar {
    width: 8px !important;
}

.membership-scroll::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

.membership-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    border-radius: 10px !important;
}

.membership-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #E03274 0%, #c02a5f 100%) !important;
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.shadow-gradient {
    box-shadow: 0 10px 25px rgba(234, 115, 81, 0.15) !important;
}

.border-gradient {
    border: 2px solid transparent !important;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #EA7351 0%, #E03274 100%) border-box !important;
}

/* CRITICAL: Override any conflicting critical CSS rules */
/* Force membership styles to take precedence over critical CSS */
.mc-area-settings.mc-active .membership-card,
.mc-area-settings.mc-active .plan-card,
.mc-area-settings.mc-active .btn-primary-membership,
.mc-area-settings.mc-active .bg-primary,
.mc-area-settings.mc-active .bg-secondary,
.mc-area-settings.mc-active .text-primary {
    /* Ensure these styles are not overridden by critical.css */
    all: initial !important;
}

/* Alpine.js component overrides */
[x-cloak] .membership-card,
[x-cloak] .plan-card {
    display: none !important;
}

/* Ensure membership section has proper z-index */
.membership-section {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for mobile responsive behavior */
@media (max-width: 768px) {
    .membership-card,
    .plan-card {
        margin-bottom: 1rem !important;
    }
    
    .btn-primary-membership,
    .btn-secondary-membership {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Ensure proper font family for membership content */
.membership-content,
.membership-card,
.plan-card {
    font-family: 'Montserrat', sans-serif !important;
}

/* ULTRA-SPECIFIC OVERRIDES FOR MEMBERSHIP NAMES - Maximum Priority */
/* These rules will override any conflicting styles */

/* Force membership name styling with highest specificity */
#tab-membership > div.grid.grid-cols-1.lg\\:grid-cols-3.gap-8 > div.lg\\:col-span-1.space-y-8 > div.bg-white.rounded-2xl.shadow-xl.p-6.text-center > p.membership-name {
    font-size: 5rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.03em !important;
    color: #1f2937 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Override any Tailwind text classes in membership context */
#tab-membership .text-4xl,
#tab-membership .text-3xl,
#tab-membership .text-2xl,
#tab-membership .text-xl,
#tab-membership .text-lg {
    font-size: inherit !important;
}

/* Force specific active membership name styling - following demo */
#tab-membership .membership-name.text-4xl,
#tab-membership .membership-name.text-primary {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    color: #EA7351 !important; /* Orange color */
}

/* Override critical CSS if it tries to interfere */
.mc-area-settings.mc-active #tab-membership .membership-name {
    all: initial !important;
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    color: #EA7351 !important; /* Orange color */
}

/* Override any admin-specific styles */
body.mc-account #tab-membership .membership-name {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    color: #EA7351 !important; /* Orange color */
}

/* Ensure Alpine.js doesn't interfere */
[x-data] #tab-membership .membership-name {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    color: #EA7351 !important; /* Orange color */
}

/* Final fallback - use !important with multiple selectors for active membership only */
div#tab-membership div.grid div.lg\\:col-span-1 div.bg-white div.text-center p.membership-name {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    color: #EA7351 !important; /* Orange color */
}

/* Emergency override - use body selector for maximum priority (active membership only) */
body #tab-membership .membership-name {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    color: #EA7351 !important; /* Orange color */
}

/* Ensure upgrade plan names stay normal size (text-lg) */
body #tab-membership .plan-name,
body #tab-membership .plan-card .plan-name,
body #tab-membership .plan-card h4 {
    font-size: 1.125rem !important; /* text-lg = 1.125rem */
    font-weight: 600 !important; /* font-semibold */
    line-height: 1.5 !important;
    color: #374151 !important;
    margin-bottom: 0.75rem !important;
}

/* Ensure upgrade buttons are orange */
body #tab-membership .plan-card button,
body #tab-membership .border-2.rounded-xl button {
    background-color: #EA7351 !important; /* Orange color */
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 600 !important;
    border: none !important;
}

body #tab-membership .plan-card button:hover,
body #tab-membership .border-2.rounded-xl button:hover {
    background-color: #E03274 !important; /* Secondary color */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(234, 115, 81, 0.3) !important;
}

/* Fix for any remaining button styling conflicts */
button.bg-primary,
button.bg-secondary,
a.bg-primary,
a.bg-secondary {
    border: none !important;
    outline: none !important;
}

/* Ensure progress bars work correctly */
.progress-bar-fill {
    transition: width 0.6s ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Add subtle animations for better UX */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.membership-card,
.plan-card {
    animation: fadeInUp 0.5s ease-out !important;
}

/* NUCLEAR OVERRIDES - Maximum Specificity to Override Critical CSS */
/* These rules have the highest possible specificity and will override any conflicting styles */

/* NUCLEAR OVERRIDE: Force active membership name styling with maximum specificity */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-6.text-center p.membership-name,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-6.text-center p.text-4xl,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-6.text-center p.text-primary {
    font-size: 2.25rem !important; /* text-4xl = 2.25rem */
    font-weight: 700 !important; /* font-bold */
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    color: #EA7351 !important; /* Orange color */
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Force upgrade plan names with maximum specificity */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 h4,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 div.plan-name,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 h4.text-lg,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 h4.text-xl,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 h4.text-2xl {
    font-size: 1.125rem !important; /* text-lg = 1.125rem */
    font-weight: 600 !important; /* font-semibold */
    line-height: 1.5 !important;
    color: #374151 !important;
    margin-bottom: 0.75rem !important;
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Force upgrade buttons with maximum specificity */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 button,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 div button,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 button.bg-primary,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 div button.bg-primary {
    background-color: #EA7351 !important; /* Orange color */
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s ease-in-out !important;
    font-weight: 600 !important;
    border: none !important;
    all: initial !important;
}

html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 button:hover,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 div button:hover,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 button.bg-primary:hover,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 div button.bg-primary:hover {
    background-color: #E03274 !important; /* Secondary color */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(234, 115, 81, 0.3) !important;
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Override any critical CSS that might interfere */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-6.text-center,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 {
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Force membership section to override any critical CSS */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid {
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Force membership grid to override any critical CSS */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2 {
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Force membership card to override any critical CSS */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-6,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 {
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Force membership content to override any critical CSS */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-6.text-center,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 {
    all: initial !important;
}

/* NUCLEAR OVERRIDE: Force membership text to override any critical CSS */
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-1.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-6.text-center p,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 h4,
html body div.mc-main.mc-admin.mc-cloud div.flex.h-screen.overflow-hidden div main div div.mc-area-settings.mc-active div.mc-tab div.grid div.lg\\:col-span-2.space-y-8 div.bg-white.rounded-2xl.shadow-xl.p-8 div.grid div.border.border-gray-200.rounded-xl.p-6 div.plan-name {
    all: initial !important;
}

/* New Membership Plans Box Styles */
#plans.plans-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

#plans.plans-box > div {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

#plans.plans-box > div:hover {
    border-color: #EA7351;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(234, 115, 81, 0.1);
}

#plans.plans-box > div[data-active-membership="true"] {
    border-color: #EA7351;
    background: linear-gradient(135deg, rgba(234, 115, 81, 0.05) 0%, rgba(224, 50, 116, 0.05) 100%);
}

#plans.plans-box > div[data-active-membership="true"]::before {
    content: '✓';
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #EA7351;
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    animation: checkmark 0.3s ease-in-out;
}

#plans.plans-box > div[data-expired="true"] {
    opacity: 0.8;
    border-color: #ef4444;
}

#plans.plans-box > div h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

#plans.plans-box > div h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1rem;
}

#plans.plans-box > div p {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
}

#plans.plans-box > div .active-membership-info {
    background: #10b981;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#plans.plans-box > div .active-membership-info[data-expired="true"] {
    background: #ef4444;
}

/* Plans Box Menu Styles */
.plans-box-menu.mc-menu-wide {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.plans-box-menu.mc-menu-wide > div {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.plans-box-menu.mc-menu-wide ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.plans-box-menu.mc-menu-wide li {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

.plans-box-menu.mc-menu-wide li:hover {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.plans-box-menu.mc-menu-wide li[data-type="Monthly"] {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

.plans-box-menu.mc-menu-wide li[data-type="Annually"] {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.plans-box-menu.mc-menu-wide li[data-type="More"] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

/* Responsive adjustments for new plans structure */
@media (max-width: 768px) {
    #plans.plans-box {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #plans.plans-box > div {
        padding: 1rem;
    }
    
    #plans.plans-box > div h3 {
        font-size: 1.25rem;
    }
    
    #plans.plans-box > div h4 {
        font-size: 1.125rem;
    }
    
    .plans-box-menu.mc-menu-wide ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .plans-box-menu.mc-menu-wide li {
        text-align: center;
    }
}

/* Ensure compatibility with existing button styles */
#plans.plans-box > div button {
    background-color: #EA7351;
    color: #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease-in-out;
    font-weight: 600;
    border: none;
    cursor: pointer;
    margin-top: 1rem;
    width: 100%;
    font-size: 0.875rem;
}

#plans.plans-box > div button:hover {
    background-color: #E03274;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 115, 81, 0.3);
}

#plans.plans-box > div button:active {
    transform: translateY(0);
}

/* Add loading state for buttons */
#plans.plans-box > div button.loading {
    position: relative;
    color: transparent;
}

#plans.plans-box > div button.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid #ffffff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Ensure proper font family for new plans structure */
#plans.plans-box,
#plans.plans-box > div,
#plans.plans-box > div h3,
#plans.plans-box > div h4,
#plans.plans-box > div p,
.plans-box-menu.mc-menu-wide {
    font-family: 'Montserrat', sans-serif;
}

/* Accessibility improvements */
#plans.plans-box > div button:focus {
    outline: 2px solid #EA7351;
    outline-offset: 2px;
}

#plans.plans-box > div button:focus:not(:focus-visible) {
    outline: none;
}

#plans.plans-box > div button:focus-visible {
    outline: 2px solid #EA7351;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #plans.plans-box > div {
        border: 2px solid #000000;
    }
    
    #plans.plans-box > div button {
        border: 2px solid #000000;
    }
}

/* Print styles */
@media print {
    #plans.plans-box > div button {
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

/* Tab Button Styling */
.tab-button.active {
    border-color: #EA7351 !important;
    color: #EA7351 !important;
    background-color: #EA73511a !important;
}

/* Ensure tab buttons have proper transition */
.tab-button {
    transition: all 0.2s ease-in-out !important;
}

/* Tab content animations */
[x-show] {
    transition: opacity 0.3s ease-in-out;
}

/* Membership tab specific overrides */
#tab-membership {
    min-height: 400px;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .tab-button {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }

    #tab-membership .mb-8 {
        margin-bottom: 1rem !important;
    }

    /* Mobile responsive tab navigation - make it scrollable when items don't fit */
    #tab-membership > div.mb-8.flex.justify-center.border-b.border-gray-200 {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        padding-bottom: 1px !important; /* Scrollbar offset */
    }

    /* Ensure buttons don't shrink too much on mobile */
    #tab-membership .tab-button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-width: auto !important;
    }

    /* Alternative approach: stack buttons vertically on very small screens */
    @media (max-width: 480px) {
        #tab-membership > div.mb-8.flex.justify-center.border-b.border-gray-200 {
            flex-direction: column !important;
            align-items: stretch !important;
            gap: 0.25rem !important;
        }

        #tab-membership .tab-button {
            text-align: center !important;
            justify-content: center !important;
            margin: 0 !important;
            border-radius: 0.5rem !important;
        }
    }
}

/* Extra small mobile devices - stack tabs vertically */
@media (max-width: 480px) {
    #tab-membership > div.mb-8.flex.justify-center.border-b.border-gray-200 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.25rem !important;
    }

    #tab-membership .tab-button {
        text-align: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0.75rem 1rem !important;
        border-radius: 0.5rem !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
    }

    #tab-membership .tab-button.active {
        background: #ea7351 !important;
        color: white !important;
        border-color: #ea7351 !important;
    }
}

/* Mobile-friendly tab navigation overflow handling */
@media (max-width: 768px) {
    #tab-membership div.mb-8.flex.justify-center.border-b.border-gray-200 {
        /* Handle long tab names and prevent cutting */
        position: relative !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
 * DARK MODE SUPPORT FOR MEMBERSHIP MODULE
 * ========================================================== */

/* Dark Mode Base Styles */
html.dark #tab-membership {
    background-color: #111827 !important; /* gray-900 */
    color: #D1D5DB !important; /* gray-300 */
}

/* Membership Cards Dark Mode */
html.dark #tab-membership .membership-card,
html.dark #tab-membership .bg-white.rounded-2xl.shadow-xl {
    background-color: #1F2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    color: #E5E7EB !important; /* gray-200 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

html.dark #tab-membership .membership-card:hover,
html.dark #tab-membership .bg-white.rounded-2xl.shadow-xl:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px rgba(234, 115, 81, 0.15) !important;
    border-color: #EA7351 !important;
}

/* Plan Cards Dark Mode */
html.dark #tab-membership .plan-card,
html.dark #tab-membership .border-2.border-gray-200 {
    background-color: #1F2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    color: #E5E7EB !important; /* gray-200 */
}

html.dark #tab-membership .plan-card:hover,
html.dark #tab-membership .border-2.border-gray-200:hover {
    border-color: #EA7351 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(234, 115, 81, 0.1) !important;
}

html.dark #tab-membership .plan-card.active {
    border-color: #EA7351 !important;
    background: linear-gradient(135deg, rgba(234, 115, 81, 0.1) 0%, rgba(224, 50, 116, 0.1) 100%) !important;
}

/* Membership Header Dark Mode */
html.dark #tab-membership .membership-card-header {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    color: white !important;
}

html.dark #tab-membership .membership-card-header::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%) !important;
}

/* Text Colors Dark Mode */
html.dark #tab-membership .membership-name,
html.dark #tab-membership .plan-name,
html.dark #tab-membership h3,
html.dark #tab-membership h4,
html.dark #tab-membership p {
    color: #E5E7EB !important; /* gray-200 */
}

html.dark #tab-membership .membership-name {
    color: #EA7351 !important;
}

/* Price and Details Dark Mode */
html.dark #tab-membership .plan-price {
    color: #9CA3AF !important; /* gray-400 */
}

/* Button Dark Mode Overrides */
html.dark #tab-membership .btn-primary-membership,
html.dark #tab-membership .bg-primary-gradient,
html.dark #tab-membership .btn-upgrade,
html.dark #tab-membership .plan-card button,
html.dark #tab-membership .border-2.rounded-xl button {
    background-color: #EA7351 !important;
    color: #ffffff !important;
    border-color: #EA7351 !important;
}

html.dark #tab-membership .btn-primary-membership:hover,
html.dark #tab-membership .bg-primary-gradient:hover,
html.dark #tab-membership .btn-upgrade:hover,
html.dark #tab-membership .plan-card button:hover,
html.dark #tab-membership .border-2.rounded-xl button:hover {
    background-color: #E03274 !important;
    border-color: #E03274 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(234, 115, 81, 0.3) !important;
}

html.dark #tab-membership .btn-secondary-membership {
    background-color: #E03274 !important;
    color: #ffffff !important;
    border-color: #E03274 !important;
}

html.dark #tab-membership .btn-secondary-membership:hover {
    background-color: #c02a5f !important;
    border-color: #c02a5f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(224, 50, 116, 0.3) !important;
}

/* Progress Bar Dark Mode */
html.dark #tab-membership .progress-bar {
    background-color: #374151 !important; /* gray-700 */
}

html.dark #tab-membership .progress-bar-fill-primary {
    background: linear-gradient(90deg, #EA7351 0%, #E03274 100%) !important;
}

html.dark #tab-membership .progress-bar-fill-secondary {
    background: linear-gradient(90deg, #E03274 0%, #c02a5f 100%) !important;
}

/* Toggle Switch Dark Mode */
html.dark #tab-membership .toggle-switch {
    background-color: #374151 !important; /* gray-700 */
}

html.dark #tab-membership .toggle-switch.active {
    background-color: #EA7351 !important;
}

html.dark #tab-membership .toggle-switch::after {
    background-color: #F9FAFB !important; /* gray-50 */
}

/* Tab Navigation Dark Mode */
html.dark #tab-membership .mc-menu-wide li,
html.dark #tab-membership .tab-button {
    color: #D1D5DB !important; /* gray-300 */
    background-color: #374151 !important; /* gray-700 */
    border-color: #4B5563 !important; /* gray-600 */
}

html.dark #tab-membership .mc-menu-wide li:hover,
html.dark #tab-membership .tab-button:hover:not(.active) {
    color: #EA7351 !important;
    background-color: rgba(234, 115, 81, 0.1) !important;
    border-color: #EA7351 !important;
}

html.dark #tab-membership .mc-menu-wide li.mc-active,
html.dark #tab-membership .tab-button.active {
    color: #EA7351 !important;
    background-color: rgba(234, 115, 81, 0.15) !important;
    border-color: #EA7351 !important;
}

/* Plans Box Dark Mode */
html.dark #plans.plans-box {
    background-color: #111827 !important;
}

html.dark #plans.plans-box > div {
    background-color: #1F2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    color: #E5E7EB !important; /* gray-200 */
}

html.dark #plans.plans-box > div:hover {
    border-color: #EA7351 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(234, 115, 81, 0.15) !important;
}

html.dark #plans.plans-box > div[data-active-membership="true"] {
    border-color: #EA7351 !important;
    background: linear-gradient(135deg, rgba(234, 115, 81, 0.1) 0%, rgba(224, 50, 116, 0.1) 100%) !important;
}

html.dark #plans.plans-box > div[data-expired="true"] {
    opacity: 0.8;
    border-color: #ef4444 !important;
}

html.dark #plans.plans-box > div h3,
html.dark #plans.plans-box > div h4 {
    color: #F9FAFB !important; /* gray-50 */
}

html.dark #plans.plans-box > div p {
    color: #D1D5DB !important; /* gray-300 */
}

/* Active Membership Info Badge Dark Mode */
html.dark #tab-membership .active-membership-info {
    background: #10b981 !important;
    color: white !important;
}

html.dark #tab-membership .active-membership-info[data-expired="true"] {
    background: #ef4444 !important;
}

/* Loading Spinner Dark Mode */
html.dark #tab-membership .loading-spinner,
html.dark #tab-membership .animate-spin {
    border: 2px solid #374151 !important; /* gray-700 */
    border-top: 2px solid #EA7351 !important;
}

/* Plans Menu Dark Mode */
html.dark .plans-box-menu.mc-menu-wide {
    background-color: #1F2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
}

html.dark .plans-box-menu.mc-menu-wide > div {
    color: #F9FAFB !important; /* gray-50 */
}

html.dark .plans-box-menu.mc-menu-wide li {
    color: #D1D5DB !important; /* gray-300 */
    background-color: #374151 !important; /* gray-700 */
    border-color: #4B5563 !important; /* gray-600 */
}

html.dark .plans-box-menu.mc-menu-wide li:hover {
    background-color: #4B5563 !important; /* gray-600 */
    color: #F9FAFB !important; /* gray-50 */
    border-color: #EA7351 !important;
}

html.dark .plans-box-menu.mc-menu-wide li[data-type="Monthly"] {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}

html.dark .plans-box-menu.mc-menu-wide li[data-type="Annually"] {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
    border-color: #22c55e !important;
}

html.dark .plans-box-menu.mc-menu-wide li[data-type="More"] {
    background-color: rgba(251, 191, 36, 0.2) !important;
    color: #fde047 !important;
    border-color: #eab308 !important;
}

/* Form Elements in Membership Dark Mode */
html.dark #tab-membership input,
html.dark #tab-membership select,
html.dark #tab-membership textarea {
    background-color: #374151 !important; /* gray-700 */
    color: #F9FAFB !important; /* gray-50 */
    border-color: #4B5563 !important; /* gray-600 */
}

html.dark #tab-membership input::placeholder,
html.dark #tab-membership select::placeholder,
html.dark #tab-membership textarea::placeholder {
    color: #9CA3AF !important; /* gray-400 */
}

/* Utility Classes Dark Mode */
html.dark #tab-membership .text-gradient {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.dark #tab-membership .shadow-gradient {
    box-shadow: 0 10px 25px rgba(234, 115, 81, 0.2) !important;
}

html.dark #tab-membership .border-gradient {
    border: 2px solid transparent !important;
    background: linear-gradient(#1F2937, #1F2937) padding-box,
                linear-gradient(135deg, #EA7351 0%, #E03274 100%) border-box !important;
}

/* Scrollbar Dark Mode */
html.dark #tab-membership .membership-scroll::-webkit-scrollbar-track {
    background: #374151 !important; /* gray-700 */
}

html.dark #tab-membership .membership-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #EA7351 0%, #E03274 100%) !important;
}

html.dark #tab-membership .membership-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #E03274 0%, #c02a5f 100%) !important;
}

/* Responsive Dark Mode */
@media (max-width: 768px) {
    html.dark #tab-membership {
        background-color: #111827 !important;
    }
    
    html.dark #tab-membership .membership-card,
    html.dark #tab-membership .plan-card {
        background-color: #1F2937 !important;
        border-color: #374151 !important;
    }
}