/*
 * Artist AMP Portal - Comparison Page Dark Theme
 * Minimal color overrides only
 */

/* Override CSS variables for dark theme */
:root {
  --background-light: #2B2D31 !important;
  --container-white: #313338 !important;
  --text-dark: #FFFFFF !important;
  --text-light: #B5BAC1 !important;
  --border-color: #FF6B35 !important;
  --highlight-color: #3A3D44 !important;
}

/* Page background */
body {
    background-color: #2B2D31 !important;
}

/* Page header text */
.page-header h1 {
    color: #FFFFFF !important;
}

.page-header p {
    color: #B5BAC1 !important;
}

/* Feature column background */
.feature-column {
    background-color: #2B2D31 !important;
}

/* Feature names */
.feature-name {
    background-color: #2B2D31 !important;
    color: #FFFFFF !important;
}

/* Best Value badge - ensure it's on top */
.badge {
    z-index: 100 !important;
    position: absolute !important;
    top: -12px !important;
    right: 10px !important;
}

/* Artist AMP column - ensure overflow visible for badge */
.artist-amp-column.highlighted {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure comparison container doesn't clip the badge */
.comparison-container {
    overflow: visible !important;
}

.comparison-table {
    overflow: visible !important;
}

/* Section headers - keep blue but adjust for dark theme */
.section-header {
    background-color: #4A5A8C !important;
}

/* CTA section headings */
.cta-section h2 {
    color: #FFFFFF !important;
}

.cta-section p {
    color: #B5BAC1 !important;
}

/* Fix orange button text visibility */
.primary-button {
    color: #FFFFFF !important;
}

/* Disclaimer text */
.disclaimer {
    color: #B5BAC1 !important;
}

/* Orange borders for columns */
.competitor-column,
.artist-amp-column,
.feature-column {
    border-left: 2px solid #FF6B35 !important;
    border-right: 2px solid #FF6B35 !important;
}

/* Orange border around entire comparison container */
.comparison-container {
    border: 2px solid #FF6B35 !important;
}

/* Hero text in page-header (dark section) - make larger */
.page-header h1 {
    font-size: 42px !important;
    font-weight: 700 !important;
    margin: 30px 0 20px 0 !important;
}

.page-header p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    max-width: 800px !important;
    margin: 0 auto 30px auto !important;
}