/*
 * Dark/gold theme override for the public website, matching the mobile
 * app's design language. Loaded after lucent-public.css and the phase58
 * stylesheet so it wins the cascade without needing to rewrite them.
 */

body {
    background: var(--lucent-bg) !important;
    color: var(--lucent-text) !important;
}

/* ---------- Header / navigation ---------- */

.lucent-header,
.lucent-header.is-scrolled,
body:not(.home) .lucent-header {
    background: rgba(7, 9, 13, .96) !important;
    border-bottom: 1px solid var(--lucent-border);
}

.lucent-desktop-nav a,
.lucent-mobile-links a,
.lucent-sign-in {
    color: var(--lucent-text) !important;
}

.lucent-desktop-nav a:hover,
.lucent-mobile-links a:hover {
    color: var(--lucent-gold) !important;
}

.lucent-header-icon {
    color: var(--lucent-text) !important;
}

/* ---------- Buttons / CTAs ---------- */

.btn-primary,
.lucent-book-button,
.lucent-store-button {
    background: var(--lucent-gold) !important;
    border-color: var(--lucent-gold) !important;
    color: #000 !important;
}

.btn-primary:hover,
.lucent-book-button:hover,
.lucent-store-button:hover {
    background: var(--lucent-gold-dark) !important;
    border-color: var(--lucent-gold-dark) !important;
    color: #000 !important;
}

.btn-outline-light {
    border-color: var(--lucent-border) !important;
    color: var(--lucent-text) !important;
}

.btn-outline-light:hover {
    background: var(--lucent-surface) !important;
    border-color: var(--lucent-gold) !important;
    color: var(--lucent-gold) !important;
}

/* ---------- Sections ---------- */

.lucent-app-section,
.lucent-location-section,
.lucent-services-section,
.lucent-barbers-section,
.lucent-reviews-section,
.lucent-faq-section {
    background: var(--lucent-bg) !important;
    color: var(--lucent-text) !important;
}

.lucent-section-kicker {
    color: var(--lucent-gold) !important;
}

.lucent-section-heading,
.lucent-section-heading * {
    color: var(--lucent-text-strong) !important;
}

/* ---------- Cards ---------- */

.lucent-service-card,
.lucent-barber-card,
.lucent-product-card,
.lucent-review-card,
.lucent-map-card,
.lucent-app-panel {
    background: var(--lucent-surface) !important;
    border: 1px solid var(--lucent-border) !important;
    border-radius: var(--lucent-radius-card) !important;
    color: var(--lucent-text) !important;
    box-shadow: none !important;
}

.lucent-service-card *,
.lucent-barber-card *,
.lucent-product-card *,
.lucent-review-card * {
    color: inherit;
}

.lucent-card-index {
    color: var(--lucent-gold) !important;
}

/* ---------- Footer ---------- */

.lucent-footer {
    background: #040507 !important;
    color: var(--lucent-muted) !important;
    border-top: 1px solid var(--lucent-border);
}

.lucent-footer a {
    color: var(--lucent-muted) !important;
}

.lucent-footer a:hover {
    color: var(--lucent-gold) !important;
}

.lucent-footer h2 {
    color: var(--lucent-text-strong) !important;
}

.lucent-footer-bottom {
    border-top: 1px solid var(--lucent-border);
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
    background: var(--lucent-surface) !important;
    border-color: var(--lucent-border) !important;
    color: var(--lucent-text) !important;
    border-radius: var(--lucent-radius-control) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--lucent-gold) !important;
    box-shadow: 0 0 0 .2rem rgba(217, 164, 0, .2) !important;
}

.form-control::placeholder {
    color: var(--lucent-muted) !important;
}