/**
 * Theme Overrides CSS
 *
 * This file uses CSS variables from the theme system to override
 * hardcoded colors in the existing stylesheets.
 *
 * Add this file AFTER style.css in layout files.
 */

/* ==========================================================================
   BUTTONS - Override all button colors with theme primary
   ========================================================================== */

.btn,
.btn-primary,
.primary-btn,
.secondary-btn,
.cta-button,
.checkout-btn,
.continue-to-booking-btn,
.btn-next,
.book-btn,
.submit-btn {
    background: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
}

.btn:hover,
.btn-primary:hover,
.primary-btn:hover,
.secondary-btn:hover,
.cta-button:hover,
.checkout-btn:hover,
.continue-to-booking-btn:hover,
.btn-next:hover,
.book-btn:hover,
.submit-btn:hover {
    background: var(--theme-color-secondary) !important;
    border-color: var(--theme-color-secondary) !important;
}

.btn-outline,
.btn-back {
    background: transparent !important;
    border: 2px solid var(--theme-color-primary) !important;
    color: var(--theme-color-primary) !important;
}

.btn-outline:hover,
.btn-back:hover {
    background: var(--theme-color-primary) !important;
    color: white !important;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.hero,
.serv-hero-section,
.purchase-hero-section,
.legal-hero-section,
.service-hero-section {
    background: linear-gradient(174deg, var(--theme-color-primary) 42%, var(--theme-color-secondary) 100%) !important;
}

.serv-hero-section h1,
.serv-hero-section h2,
.serv-hero-section .subtitle,
.serv-hero-section .serv-subtitle {
    font-family: var(--theme-font-heading) !important;
}

/* Service page specific overrides */
.serv-cta-button,
.serv-book-btn,
.serv-btn-primary {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
}

.serv-section-title,
.serv-title {
    color: var(--theme-color-primary) !important;
}

.serv-card,
.serv-feature-card,
.serv-info-card {
    background: var(--theme-color-surface) !important;
}

.serv-highlight,
.serv-accent {
    color: var(--theme-color-primary) !important;
}

.serv-badge,
.serv-tag {
    background: var(--theme-color-primary) !important;
}

/* Legal content block */
.legal-content-block {
    background: var(--theme-color-surface) !important;
}

.legal-content-block h1,
.legal-content-block h2,
.legal-content-block h3 {
    color: var(--theme-color-primary) !important;
    font-family: var(--theme-font-heading) !important;
}

.hero-offer-box {
    border-color: var(--theme-color-accent) !important;
}

.offer-title {
    background: var(--theme-color-accent) !important;
}

.price-new {
    color: var(--theme-color-success) !important;
}

.trust-badge {
    background: var(--theme-color-surface) !important;
    color: var(--theme-color-text) !important;
    border-color: var(--theme-color-primary) !important;
}

.hero h1,
.hero h2 {
    font-family: var(--theme-font-heading) !important;
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.section-title,
.section-heading {
    font-family: var(--theme-font-heading) !important;
    color: var(--theme-color-text) !important;
}

/* ==========================================================================
   STEPPER / PROGRESS INDICATORS
   ========================================================================== */

.stepper .step.active .step-circle,
.stepper .step.completed .step-circle {
    background: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
}

.stepper .progress-line {
    background: var(--theme-color-primary) !important;
}

.step-circle {
    border-color: var(--theme-color-text-muted) !important;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

input:focus,
select:focus,
textarea:focus {
    border-color: var(--theme-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-color-primary-rgb, 0, 0, 0), 0.1) !important;
}

.form-group label {
    color: var(--theme-color-text) !important;
}

/* ==========================================================================
   CARDS & PANELS
   ========================================================================== */

.card,
.panel,
.box,
.content-card,
.service-card,
.pricing-card,
.faq-item,
.add-on-item {
    background: var(--theme-color-surface) !important;
    border-radius: var(--theme-border-radius) !important;
}

.add-on-item.selected {
    border-color: var(--theme-color-primary) !important;
}

/* ==========================================================================
   PRICING
   ========================================================================== */

.treatment-price-addon,
.price-amount,
.pricing-price {
    color: var(--theme-color-primary) !important;
}

.price-original,
.original-price {
    color: var(--theme-color-text-muted) !important;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */

.faq-question {
    font-family: var(--theme-font-heading) !important;
    color: var(--theme-color-text) !important;
}

.faq-item.open .faq-question {
    color: var(--theme-color-primary) !important;
}

.faq-arrow svg path {
    stroke: var(--theme-color-primary) !important;
}

/* ==========================================================================
   CALENDAR / DATE PICKER
   ========================================================================== */

.custom-calendar .nav-button:hover {
    background: var(--theme-color-primary) !important;
    color: white !important;
}

.calendar-grid .day.selected,
.flatpickr-day.selected {
    background: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
}

.time-slot.selected {
    background: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
    color: var(--theme-color-primary);
}

a:hover {
    color: var(--theme-color-secondary);
}

/* ==========================================================================
   ALERTS & NOTIFICATIONS
   ========================================================================== */

.success-message,
.alert-success {
    background-color: var(--theme-color-success) !important;
}

.warning-message,
.alert-warning {
    background-color: var(--theme-color-warning) !important;
}

.error-message,
.alert-danger {
    background-color: var(--theme-color-danger) !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer,
footer {
    background: var(--theme-color-text) !important;
}

.footer a,
footer a {
    color: var(--theme-color-surface) !important;
}

.footer a:hover,
footer a:hover {
    color: var(--theme-color-primary) !important;
}

/* ==========================================================================
   BOOKING SECTION
   ========================================================================== */

.section-primary,
.booking-container {
    background: var(--theme-color-background) !important;
}

.booking-urgency,
.lead-urgency {
    background: linear-gradient(135deg, var(--theme-color-warning), #fbbf24) !important;
}

.appointment-confirm {
    background: var(--theme-color-surface) !important;
    border-left-color: var(--theme-color-success) !important;
}

/* ==========================================================================
   SECURITY BADGES
   ========================================================================== */

.security-badge {
    background: var(--theme-color-surface) !important;
    color: var(--theme-color-text) !important;
}

/* ==========================================================================
   CTA BLOCKS
   ========================================================================== */

section.bg-blue-600,
.cta-section,
.cta-block {
    background: var(--theme-color-primary) !important;
}

/* ==========================================================================
   RATING STARS
   ========================================================================== */

.rating-stars i,
.fa-star {
    color: var(--theme-color-warning) !important;
}

/* ==========================================================================
   COUNTDOWN TIMER
   ========================================================================== */

.countdown-timer .time-block {
    background: var(--theme-color-surface) !important;
    color: var(--theme-color-text) !important;
}

/* ==========================================================================
   RADIO & CHECKBOX CUSTOMIZATION
   ========================================================================== */

input[type="radio"]:checked + label,
.service-radio-option input:checked + label {
    border-color: var(--theme-color-primary) !important;
    background: rgba(var(--theme-color-primary-rgb, 0, 0, 0), 0.05) !important;
}

/* ==========================================================================
   GUARANTEE SECTION
   ========================================================================== */

.guarantee-section,
.guarantee-badge {
    border-color: var(--theme-color-success) !important;
}

.guarantee-icon {
    color: var(--theme-color-success) !important;
}

/* ==========================================================================
   ACCREDITATIONS
   ========================================================================== */

.accreditation-item,
.credential-item {
    background: var(--theme-color-surface) !important;
}

/* ==========================================================================
   MEDICAL TEAM
   ========================================================================== */

.team-member-card {
    background: var(--theme-color-surface) !important;
    border-radius: var(--theme-border-radius) !important;
}

.team-member-name {
    color: var(--theme-color-primary) !important;
}

/* ==========================================================================
   BENEFITS / FEATURES
   ========================================================================== */

.benefit-icon,
.feature-icon {
    color: var(--theme-color-primary) !important;
}

.benefit-item,
.feature-item {
    background: var(--theme-color-surface) !important;
}

/* ==========================================================================
   LOADING STATES
   ========================================================================== */

.loading-spinner,
.spinner {
    border-color: var(--theme-color-surface) !important;
    border-top-color: var(--theme-color-primary) !important;
}

/* ==========================================================================
   TAILWIND OVERRIDES (for components using Tailwind classes)
   ========================================================================== */

.bg-blue-600 {
    background-color: var(--theme-color-primary) !important;
}

.text-blue-600 {
    color: var(--theme-color-primary) !important;
}

.border-blue-600 {
    border-color: var(--theme-color-primary) !important;
}

.bg-teal-600,
.bg-green-600 {
    background-color: var(--theme-color-success) !important;
}

.bg-purple-600 {
    background-color: var(--theme-color-secondary) !important;
}

/* ==========================================================================
   COMPARISON TABLE (Revitalise London vs Other Clinics)
   ========================================================================== */

.comparison-table,
.serv-comparison-table {
    background: var(--theme-color-surface) !important;
    border-radius: var(--theme-border-radius) !important;
}

.comparison-table thead,
.serv-comparison-header,
.serv-comparison-header-row {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
}

.comparison-table th,
.serv-comparison-header h3 {
    color: white !important;
    font-family: var(--theme-font-heading) !important;
}

.comparison-table td:first-child,
.serv-comparison-cell:first-child {
    background: var(--theme-color-surface) !important;
    color: var(--theme-color-primary) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   FEEDBACK SECTION (You Spoke. We Acted)
   ========================================================================== */

.feedback-section,
.section-secondary.feedback-section {
    background: linear-gradient(135deg, var(--theme-color-surface) 0%, color-mix(in srgb, var(--theme-color-primary) 10%, white) 100%) !important;
}

.revitalise-infobox {
    background: var(--theme-color-surface) !important;
    border-left: 5px solid var(--theme-color-primary) !important;
    border-radius: var(--theme-border-radius) !important;
}

.revitalise-infobox-icon svg {
    color: var(--theme-color-success) !important;
    fill: var(--theme-color-success) !important;
}

.action-taken-highlight {
    background: var(--theme-color-primary) !important;
    color: white !important;
    border-radius: var(--theme-button-radius) !important;
}

.stat-main {
    color: var(--theme-color-primary) !important;
    font-family: var(--theme-font-heading) !important;
}

.stat-footnote {
    color: var(--theme-color-text-muted) !important;
}

/* ==========================================================================
   ACCREDITATIONS SECTION (Our Accreditations)
   ========================================================================== */

.accreditations-section,
.section-secondary.accreditations-section {
    background: var(--theme-color-surface) !important;
}

.accreditations-grid {
    background: transparent !important;
}

.accreditation-logo,
.serv-accreditation {
    background: var(--theme-color-background) !important;
    border-radius: var(--theme-border-radius) !important;
    box-shadow: var(--theme-shadow) !important;
}

.trust-indicators h3 {
    color: var(--theme-color-primary) !important;
    font-family: var(--theme-font-heading) !important;
}

.trust-badges .trust-badge {
    background: var(--theme-color-primary) !important;
    color: white !important;
    border-radius: var(--theme-button-radius) !important;
}

/* ==========================================================================
   UNDERSTANDING SECTION (Understanding Skin Cysts, etc.)
   ========================================================================== */

.why-choose-us-section,
#understanding-cysts {
    background: var(--theme-color-surface) !important;
}

.why-choose-us-section .section-title h2 {
    color: var(--theme-color-text) !important;
    font-family: var(--theme-font-heading) !important;
}

.why-choose-us-section .section-title p {
    color: var(--theme-color-text-muted) !important;
}

.why-choose-us-section h3 {
    color: var(--theme-color-primary) !important;
    font-family: var(--theme-font-heading) !important;
}

.why-choose-us-point {
    background: var(--theme-color-background) !important;
    border: 1px solid color-mix(in srgb, var(--theme-color-primary) 30%, transparent) !important;
    border-radius: var(--theme-border-radius) !important;
}

.why-choose-us-icon {
    color: var(--theme-color-primary) !important;
}

.why-choose-us-icon i {
    color: var(--theme-color-primary) !important;
}

.why-choose-us-info h4 {
    color: var(--theme-color-primary) !important;
    font-family: var(--theme-font-heading) !important;
}

/* ==========================================================================
   SECTION BACKGROUNDS
   ========================================================================== */

.section-primary {
    background: var(--theme-color-background) !important;
}

.section-secondary {
    background: var(--theme-color-surface) !important;
}

.section-title h2 {
    color: var(--theme-color-text) !important;
    font-family: var(--theme-font-heading) !important;
}

.section-title p {
    color: var(--theme-color-text-muted) !important;
}

/* ==========================================================================
   DOCTORS / MEDICAL TEAM SECTION
   ========================================================================== */

.doctors-section,
.section-secondary.doctors-section {
    background: var(--theme-color-surface) !important;
}

.doctor-card {
    background: var(--theme-color-background) !important;
    border-radius: var(--theme-border-radius) !important;
    box-shadow: var(--theme-shadow) !important;
}

.doctor-name {
    color: var(--theme-color-primary) !important;
    font-family: var(--theme-font-heading) !important;
}

.doctor-title {
    color: var(--theme-color-text-muted) !important;
}

.specialty-badge {
    background: color-mix(in srgb, var(--theme-color-primary) 15%, white) !important;
    color: var(--theme-color-primary) !important;
    border-radius: var(--theme-button-radius) !important;
}

/* ==========================================================================
   REVIEWS SECTION
   ========================================================================== */

.reviews-section,
.reviews-wrapper {
    background: var(--theme-color-surface) !important;
}

.review-card {
    background: var(--theme-color-background) !important;
    border-radius: var(--theme-border-radius) !important;
    box-shadow: var(--theme-shadow) !important;
}

.reviewer-name {
    color: var(--theme-color-text) !important;
    font-family: var(--theme-font-heading) !important;
}

.google-stars .star,
.rating-stars .star {
    color: var(--theme-color-warning) !important;
}

.celebrity-testimonial-card {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
    border-radius: var(--theme-border-radius) !important;
}

.celebrity-name {
    color: white !important;
    font-family: var(--theme-font-heading) !important;
}

/* ==========================================================================
   TREATMENT PROCESS / STEPS
   ========================================================================== */

.treatment-process,
.treatment-steps {
    background: var(--theme-color-surface) !important;
}

.step-card,
.process-step,
.serv-process-step {
    background: var(--theme-color-background) !important;
    border-radius: var(--theme-border-radius) !important;
    box-shadow: var(--theme-shadow) !important;
}

.step-number,
.serv-step-number {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
    color: white !important;
}

.step-card h3,
.process-step h3,
.serv-process-step h3 {
    color: var(--theme-color-text) !important;
    font-family: var(--theme-font-heading) !important;
}

/* ==========================================================================
   PRICING CARDS & TABLES
   ========================================================================== */

.pricing,
.price,
.price-card {
    background: var(--theme-color-surface) !important;
    border: 2px solid color-mix(in srgb, var(--theme-color-primary) 40%, white) !important;
    border-radius: var(--theme-border-radius) !important;
}

.pricing-header,
.serv-pricing-header-main {
    background: var(--theme-color-primary) !important;
    color: white !important;
}

.price-value,
.total-price,
.serv-price-value {
    color: var(--theme-color-primary) !important;
    font-family: var(--theme-font-heading) !important;
}

.pricing-badge,
.price-card .badge {
    background: color-mix(in srgb, var(--theme-color-primary) 15%, white) !important;
    color: var(--theme-color-primary) !important;
}

.pricing-subtitle,
.price-breakdown {
    color: var(--theme-color-text-muted) !important;
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */

.faq-section,
.serv-faq-section {
    background: linear-gradient(135deg, var(--theme-color-surface) 0%, color-mix(in srgb, var(--theme-color-primary) 10%, white) 100%) !important;
    border: 2px solid color-mix(in srgb, var(--theme-color-primary) 40%, white) !important;
    border-radius: var(--theme-border-radius) !important;
}

.faq-item,
.serv-faq-item {
    background: var(--theme-color-background) !important;
    border-radius: var(--theme-border-radius) !important;
}

.faq-question,
.serv-faq-question {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
    color: white !important;
    font-family: var(--theme-font-heading) !important;
}

.faq-answer,
.serv-faq-answer {
    background: var(--theme-color-surface) !important;
    color: var(--theme-color-text) !important;
}

/* ==========================================================================
   BENEFIT CARDS / FEATURE GRID
   ========================================================================== */

.benefits-grid .benefit-card,
.benefit-item,
.feature-card {
    background: var(--theme-color-background) !important;
    border-radius: var(--theme-border-radius) !important;
    box-shadow: var(--theme-shadow) !important;
}

.benefit-icon,
.feature-icon {
    color: var(--theme-color-primary) !important;
}

.benefit-title,
.feature-title {
    color: var(--theme-color-text) !important;
    font-family: var(--theme-font-heading) !important;
}

.benefit-description,
.feature-description {
    color: var(--theme-color-text-muted) !important;
}

/* ==========================================================================
   STATS SECTION
   ========================================================================== */

.stats-section,
.serv-stats-highlight {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
}

.stat-item,
.stat-number {
    color: white !important;
}

.stat-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   CAROUSEL CONTROLS
   ========================================================================== */

.carousel-btn {
    background: var(--theme-color-primary) !important;
    color: white !important;
    border-radius: var(--theme-button-radius) !important;
}

.carousel-btn:hover {
    background: var(--theme-color-secondary) !important;
}

.carousel-dot {
    background: var(--theme-color-text-muted) !important;
}

.carousel-dot.active {
    background: var(--theme-color-primary) !important;
}

/* ==========================================================================
   CLINICAL CREDENTIALS
   ========================================================================== */

.clinical-credentials,
.credentials-section {
    background: var(--theme-color-surface) !important;
}

.credential-card {
    background: var(--theme-color-background) !important;
    border-radius: var(--theme-border-radius) !important;
    box-shadow: var(--theme-shadow) !important;
}

.credential-icon {
    color: var(--theme-color-primary) !important;
}

/* ==========================================================================
   GUARANTEE SECTION
   ========================================================================== */

.guarantee-section {
    background: color-mix(in srgb, var(--theme-color-success) 10%, white) !important;
    border: 2px solid var(--theme-color-success) !important;
    border-radius: var(--theme-border-radius) !important;
}

.guarantee-box {
    background: color-mix(in srgb, var(--theme-color-success) 15%, white) !important;
    border: 2px solid var(--theme-color-success) !important;
    border-radius: var(--theme-border-radius) !important;
}

/* ==========================================================================
   LEGAL / CONTENT BLOCKS
   ========================================================================== */

.legal-content-block {
    background: linear-gradient(135deg, var(--theme-color-surface) 0%, color-mix(in srgb, var(--theme-color-primary) 10%, white) 100%) !important;
    border: 2px solid color-mix(in srgb, var(--theme-color-primary) 40%, white) !important;
    border-radius: var(--theme-border-radius) !important;
}

.legal-content-block h2 span {
    color: var(--theme-color-secondary) !important;
}

/* ==========================================================================
   SERVICE PAGE SPECIFIC
   ========================================================================== */

.serv-section {
    background: linear-gradient(135deg, var(--theme-color-surface) 0%, color-mix(in srgb, var(--theme-color-primary) 10%, white) 100%) !important;
    border: 2px solid color-mix(in srgb, var(--theme-color-primary) 40%, white) !important;
    border-radius: var(--theme-border-radius) !important;
}

.serv-column-content li {
    border: 1px solid var(--theme-color-primary) !important;
    border-bottom: 5px solid var(--theme-color-primary) !important;
    border-radius: var(--theme-border-radius) !important;
}

.serv-column-content li strong {
    color: var(--theme-color-primary) !important;
}

.serv-lesion-card-header {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
}

.serv-treatment-highlight {
    background: linear-gradient(135deg, var(--theme-color-surface) 0%, color-mix(in srgb, var(--theme-color-primary) 5%, white) 100%) !important;
    border-left: 5px solid var(--theme-color-primary) !important;
}

.serv-treatment-highlight h4 {
    color: var(--theme-color-primary) !important;
}

.serv-booking-section {
    background: linear-gradient(135deg, var(--theme-color-primary) 0%, var(--theme-color-secondary) 100%) !important;
}

.serv-footer {
    background: var(--theme-color-secondary) !important;
}

/* ==========================================================================
   FORM INPUTS FOCUS STATE
   ========================================================================== */

.form-control:focus,
.serv-form-group input:focus,
.serv-form-group select:focus,
.serv-form-group textarea:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--theme-color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color-primary) 15%, transparent) !important;
    outline: none !important;
}

/* ==========================================================================
   MISC ELEMENTS
   ========================================================================== */

.checkmark {
    background: var(--theme-color-success) !important;
}

.price-breakdown ul li {
    color: var(--theme-color-text-muted) !important;
}

/* Gold/Star colors */
.fa-star,
.star,
.rating-stars {
    color: var(--theme-color-warning) !important;
}

/* Error states */
.error,
.validation-error,
.field-error {
    color: var(--theme-color-danger) !important;
    border-color: var(--theme-color-danger) !important;
}

/* Success states */
.success,
.field-success {
    color: var(--theme-color-success) !important;
    border-color: var(--theme-color-success) !important;
}