/* ===================================================================
 * styles-cards-subscription.css
 * Purpose: Cards, subscription cards, plan text contrast in light/dark mode
 * Extracted from styles.css during the Apr 2026 split (task #23).
 * =================================================================== */
/* Card and Container Styles */
.auth-container {
    max-width: 400px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--darker-bg);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
}

/* Subscription Card Styles */
.subscription-card {
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    background: var(--darker-bg);
}

.subscription-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.subscription-card-basic {
    border-color: var(--color-accent-600);
}

.subscription-card-basic:hover {
    border-color: #FF8C00;
    box-shadow: 0 20px 40px rgba(245, 179, 1, 0.3);
}

.subscription-card-premium {
    border-color: var(--color-accent-600);
    position: relative;
}

.subscription-card-premium:hover {
    border-color: #FF8C00;
    box-shadow: 0 20px 40px rgba(245, 179, 1, 0.4);
}

.subscription-card-enterprise {
    border-color: var(--color-accent-600);
}

.subscription-card-enterprise:hover {
    border-color: #FF8C00;
    box-shadow: 0 20px 40px rgba(245, 179, 1, 0.3);
}

.current-plan {
    border-color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), 0.05);
}

/* Current Plan button styling - make text bold white */
.current-plan .btn-secondary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Dark mode headers - orange theme matching application */
.subscription-header-basic {
    background: linear-gradient(135deg, var(--color-accent-600) 0%, #FF8C00 100%);
    color: #000000 !important;
    border-radius: 14px 14px 0 0;
    padding: 1.5rem 1rem;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.4);
    font-weight: 700;
}

.subscription-header-premium {
    background: linear-gradient(135deg, var(--color-accent-600) 0%, #FF8C00 100%);
    color: #000000 !important;
    border-radius: 14px 14px 0 0;
    padding: 1.5rem 1rem;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.5);
    font-weight: 700;
}

.subscription-header-enterprise {
    background: linear-gradient(135deg, var(--color-accent-600) 0%, #FF8C00 100%);
    color: #000000 !important;
    border-radius: 14px 14px 0 0;
    padding: 1.5rem 1rem;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.4);
    font-weight: 700;
}

/* Light mode card adjustments - orange theme */
[data-theme="light"] .subscription-card {
    background: #ffffff;
    border: 2px solid #e0e0e0;
}

[data-theme="light"] .subscription-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .subscription-header-basic {
    background: linear-gradient(135deg, var(--color-accent-600) 0%, #FF8C00 100%);
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.3);
    font-weight: 700;
}

[data-theme="light"] .subscription-header-premium {
    background: linear-gradient(135deg, var(--color-accent-600) 0%, #FF8C00 100%);
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.3);
    font-weight: 700;
}

[data-theme="light"] .subscription-header-enterprise {
    background: linear-gradient(135deg, var(--color-accent-600) 0%, #FF8C00 100%);
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(245, 179, 1, 0.3);
    font-weight: 700;
}

/* Ensure better contrast in auth containers */
[data-theme="light"] .auth-container {
    background: #ffffff;
    color: #333333;
    border: 1px solid #dddddd;
}

[data-theme="dark"] .auth-container {
    background: #1a1a1a;
    color: #ffffff;
}

/* Subscription plan text visibility fixes - UPDATED FOR WHITE TEXT */
[data-theme="dark"] .subscription-card .card-body {
    color: #ffffff !important;
}

[data-theme="dark"] .subscription-card .card-body li {
    color: #ffffff !important;
}

[data-theme="dark"] .subscription-card .card-body span {
    color: #ffffff !important;
}

[data-theme="dark"] .subscription-card .card-body strong {
    color: #ffffff !important;
}

[data-theme="dark"] .subscription-card .card-body p {
    color: #ffffff !important;
}

[data-theme="dark"] .subscription-card .card-body div {
    color: #ffffff !important;
}

[data-theme="dark"] .subscription-header-basic h6,
[data-theme="dark"] .subscription-header-basic h4,
[data-theme="dark"] .subscription-header-basic small {
    color: #000000 !important;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .subscription-header-premium h6,
[data-theme="dark"] .subscription-header-premium h4,
[data-theme="dark"] .subscription-header-premium small {
    color: #000000 !important;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .subscription-header-enterprise h6,
[data-theme="dark"] .subscription-header-enterprise h4,
[data-theme="dark"] .subscription-header-enterprise small {
    color: #000000 !important;
    font-weight: 800;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

/* Light mode text visibility - ensure black text for all elements */
[data-theme="light"] .subscription-card .card-body {
    color: #000000 !important;
}

[data-theme="light"] .subscription-card .card-body li {
    color: #000000 !important;
}

[data-theme="light"] .subscription-card .card-body span {
    color: #000000 !important;
}

[data-theme="light"] .subscription-card .card-body strong {
    color: #000000 !important;
}

[data-theme="light"] .subscription-card .card-body p {
    color: #000000 !important;
}

[data-theme="light"] .subscription-card .card-body div {
    color: #000000 !important;
}

/* Override any inherited text colors for subscription features - COMPREHENSIVE */
[data-theme="light"] .subscription-card .card-body *,
[data-theme="light"] .subscription-card .card-body *:before,
[data-theme="light"] .subscription-card .card-body *:after {
    color: #000000 !important;
}

/* Ensure all text elements in subscription cards are black in light mode */
[data-theme="light"] .subscription-card ul,
[data-theme="light"] .subscription-card ul li,
[data-theme="light"] .subscription-card .card-body ul li,
[data-theme="light"] .subscription-card .list-unstyled,
[data-theme="light"] .subscription-card .list-unstyled li,
[data-theme="light"] .subscription-card .list-unstyled li span,
[data-theme="light"] .subscription-card .list-unstyled li strong {
    color: #000000 !important;
}

/* Target specific Bootstrap classes that might override colors */
[data-theme="light"] .subscription-card .text-muted,
[data-theme="light"] .subscription-card .text-secondary,
[data-theme="light"] .subscription-card .text-light,
[data-theme="light"] .subscription-card .text-white {
    color: #000000 !important;
}

/* Force all icons and text in subscription cards to be black */
[data-theme="light"] .subscription-card i,
[data-theme="light"] .subscription-card .fas,
[data-theme="light"] .subscription-card .bi {
    color: #000000 !important;
}

/* Specific classes for subscription feature text */
.feature-text {
    color: inherit;
}

.unavailable-text {
    color: #6c757d;
}

.unavailable-icon {
    color: #6c757d;
}

.ads-warning {
    color: #dc3545;
}

/* Light mode overrides for feature text */
[data-theme="light"] .feature-text {
    color: #000000 !important;
}

[data-theme="light"] .unavailable-text {
    color: #6c757d !important;
}

[data-theme="light"] .unavailable-icon {
    color: #6c757d !important;
}

[data-theme="light"] .ads-warning {
    color: #dc3545 !important;
}

/* Dark mode styling for feature text */
[data-theme="dark"] .feature-text {
    color: #ffffff !important;
}

[data-theme="dark"] .unavailable-text {
    color: #6c757d !important;
}

[data-theme="dark"] .unavailable-icon {
    color: #6c757d !important;
}

[data-theme="dark"] .ads-warning {
    color: #ffffff !important;
}