/*
 * Artist AMP Portal - Pricing Page Dark Theme Fix
 */

/* Overall page background - dark */
body {
    background-color: #2B2D31 !important;
}

/* Pricing page container */
.pricing-page {
    background-color: #2B2D31 !important;
}

/* Pricing header section */
.pricing-header {
    background-color: transparent !important;
}

/* Pricing cards - dark background */
.plan {
    background-color: #313338 !important;
    border: 1px solid #3F4147 !important;
}

/* Plan headers */
.plan-header h2,
.plan-header h3 {
    color: #FFFFFF !important;
}

/* Plan descriptions */
.plan-header p {
    color: #B5BAC1 !important;
}

/* Price styling */
.plan-price,
.price-amount {
    color: #FFFFFF !important;
}

.price-cycle {
    color: #B5BAC1 !important;
}

/* Feature list */
.plan-features li {
    color: #B5BAC1 !important;
}

/* Popular banner - keep orange */
.popular-banner {
    background-color: #FF6B35 !important;
    color: #FFFFFF !important;
}

/* Toggle text labels */
.billing-toggle span {
    color: #B5BAC1 !important;
}

/* Explanation section at bottom */
section {
    background-color: #313338 !important;
    color: #B5BAC1 !important;
    border: 1px solid #3F4147 !important;
}

section h3,
section h4 {
    color: #FFFFFF !important;
}

section a {
    color: #FF6B35 !important;
}

/* Hero text in brand header (orange section) */
.brand-header h1 {
    color: #FFFFFF !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin: 30px 0 20px 0 !important;
    text-align: center !important;
}

.brand-header p {
    color: #FFFFFF !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
    margin: 0 auto 30px auto !important;
    text-align: center !important;
}

/* Make brand header taller to accommodate text */
.brand-header {
    padding: 40px 20px !important;
    text-align: center !important;
}

.header-logo {
    max-width: 400px !important;
    height: auto !important;
    margin-bottom: 20px !important;
}

/* Adjust logo size and position */
.header-logo {
    max-width: 500px !important;
    width: 60% !important;
    height: auto !important;
    margin-bottom: 10px !important;
    margin-top: 20px !important;
}

/* Adjust brand header padding to not grow */
.brand-header {
    padding: 30px 20px 40px 20px !important;
    min-height: auto !important;
}

/* The 15% Explained section - dark theme */
.disclaimer-section {
    background-color: #313338 !important;
    border: 1px solid #3F4147 !important;
    padding: 40px !important;
    margin: 40px auto !important;
    max-width: 900px !important;
    border-radius: 8px !important;
}

.disclaimer-section h3 {
    color: #FFFFFF !important;
    font-size: 28px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.disclaimer-section p {
    color: #B5BAC1 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

.disclaimer-section strong {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.comparison-link {
    color: #FF6B35 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: block !important;
    text-align: center !important;
    margin-top: 30px !important;
}

.comparison-link:hover {
    text-decoration: underline !important;
}

/* Hero text in pricing-header (dark section) - keep large size */
.pricing-header h1 {
    color: #FFFFFF !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin: 30px 0 20px 0 !important;
    text-align: center !important;
}

.pricing-header p {
    color: #B5BAC1 !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
    margin: 0 auto 30px auto !important;
    text-align: center !important;
}

/* Reset brand header to just logo */
.brand-header {
    padding: 30px 20px !important;
}

.brand-header h1,
.brand-header p {
    display: none !important;
}