/*
 * 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.
 */

:root {
    /*
     * lucent-public.css's --lucent-orange was actually a red (#f41f25).
     * Every accent (kicker text, hero span, badges, buttons) reads this
     * same variable, so redefining it here to the real SYXT logo's
     * orange (rgb(255,126,22)) fixes all of them in one place instead
     * of overriding each selector individually.
     */
    --lucent-orange: #FF7E16;
    --lucent-orange-dark: #DB6800;
}

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

/* ---------- Hero ---------- */

.lucent-hero h1 {
    font-size: clamp(2.75rem, 6vw, 5.5rem) !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 {
    background: transparent !important;
    color: var(--lucent-text) !important;
}

.lucent-header-icon:hover {
    background: var(--lucent-surface) !important;
    border-color: var(--lucent-gold) !important;
    color: var(--lucent-gold) !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;
}

/* ---------- Inner pages (gallery, membership, promotions, service/barber
   detail, download-app) - these use a separate older phase58 stylesheet
   with a hardcoded navy-blue background and its own orange (#ff6a13),
   neither of which route through the --lucent-orange variable above. ---------- */

.lucent-page-hero,
.lucent-detail-hero,
.lucent-app-hero {
    background:
        radial-gradient(circle at 88% 15%, rgba(255, 126, 22, .16), transparent 30rem),
        var(--lucent-bg) !important;
    color: var(--lucent-text) !important;
}

.lucent-page-hero h1,
.lucent-detail-hero h1,
.lucent-app-hero h1 {
    color: var(--lucent-text-strong) !important;
}

.lucent-page-hero p,
.lucent-detail-hero p,
.lucent-app-hero p {
    color: var(--lucent-muted) !important;
}

.lucent-eyebrow,
.lucent-detail-price,
.lucent-offer-value,
.lucent-rating {
    color: var(--lucent-orange) !important;
}

.lucent-premium-card,
.lucent-offer-card,
.lucent-empty-panel,
.lucent-simple-card {
    background: var(--lucent-surface) !important;
    border-color: var(--lucent-border) !important;
    color: var(--lucent-text) !important;
    box-shadow: none !important;
}

.lucent-premium-card:before,
.lucent-offer-card:before {
    background: var(--lucent-orange) !important;
}

.lucent-premium-card.is-featured {
    background: var(--lucent-surface-raised) !important;
}

.lucent-premium-card h2,
.lucent-offer-card h2,
.lucent-simple-card h3 {
    color: var(--lucent-text-strong) !important;
}

.lucent-plan-badge,
.lucent-offer-label {
    background: var(--lucent-orange) !important;
    color: #000 !important;
}

.lucent-primary-link {
    background: var(--lucent-orange) !important;
    color: #000 !important;
}

.lucent-primary-link:hover {
    background: var(--lucent-orange-dark) !important;
    color: #000 !important;
}

.lucent-offer-icon {
    background: rgba(255, 126, 22, .14) !important;
    color: var(--lucent-orange) !important;
}

.lucent-feature-list i {
    color: var(--lucent-orange) !important;
}

.lucent-section-heading a {
    color: var(--lucent-orange) !important;
}

.lucent-detail-meta span,
.lucent-chip-row span {
    border-color: var(--lucent-border) !important;
    background: var(--lucent-surface) !important;
    color: var(--lucent-text) !important;
}

.lucent-phone-card {
    background: linear-gradient(160deg, var(--lucent-surface), var(--lucent-surface-raised)) !important;
    color: var(--lucent-text) !important;
}

.lucent-phone-card i,
.lucent-image-placeholder {
    color: var(--lucent-orange) !important;
}

/* ---------- Services/Barbers listing + Contact pages (phase58-* family,
   a separate light-theme block with its own hardcoded orange #ff6510). ---------- */

.phase58-hero {
    background:
        radial-gradient(circle at 80% 20%, rgba(255, 126, 22, .18), transparent 32%),
        var(--lucent-bg) !important;
}

.phase58-hero span,
.phase58-eyebrow,
.phase58-heading > span,
.phase58-value-grid i,
.phase58-card > i,
.phase58-service-image,
.phase58-barber-image,
.phase58-service-card > span,
.phase58-barber-body > span,
.phase58-contact-details i {
    color: var(--lucent-orange) !important;
}

.phase58-section h2,
.phase58-card h3 {
    color: var(--lucent-text-strong) !important;
}

.phase58-section p,
.phase58-barber-stats small,
.phase58-branch span,
.phase58-branch small,
.phase58-empty {
    color: var(--lucent-muted) !important;
}

.phase58-soft {
    background: var(--lucent-bg) !important;
}

.phase58-value-grid > div,
.phase58-card,
.phase58-service-card,
.phase58-barber-card,
.phase58-contact-form,
.phase58-branch {
    border-color: var(--lucent-border) !important;
    background: var(--lucent-surface) !important;
    color: var(--lucent-text) !important;
    box-shadow: none !important;
}

.phase58-service-image,
.phase58-barber-image {
    background: var(--lucent-surface-raised) !important;
}

.phase58-filter a,
.phase58-tags span {
    border-color: var(--lucent-border) !important;
    background: var(--lucent-surface) !important;
    color: var(--lucent-text) !important;
}

.phase58-filter a.active,
.phase58-filter a:hover {
    border-color: var(--lucent-orange) !important;
    background: var(--lucent-orange) !important;
    color: #000 !important;
}

.phase58-service-meta,
.phase58-barber-stats {
    border-top-color: var(--lucent-border) !important;
}

.phase58-contact-details {
    background: var(--lucent-surface-raised) !important;
    color: var(--lucent-text) !important;
}

.phase58-contact-details > a,
.phase58-contact-details > div {
    color: var(--lucent-text) !important;
}

.phase58-contact-details small {
    color: var(--lucent-muted) !important;
}

.phase58-contact-form .form-control {
    background: var(--lucent-surface) !important;
    border-color: var(--lucent-border) !important;
    color: var(--lucent-text) !important;
}

/* ---------- Shop / product / cart pages (lucent-commerce.css - loaded
   via @stack('styles') AFTER this file, so everything here needs
   !important to still win). Unifies its separate red/blue/gold accents
   down to the one real logo orange, and its light backgrounds to dark. ---------- */

.commerce-store,
.commerce-product-detail,
.commerce-page {
    background: var(--lucent-bg) !important;
}

.commerce-hero h1 strong,
.commerce-filter-heading span,
.commerce-filter-heading a,
.commerce-product-body > span,
.commerce-detail-rating,
.commerce-detail-price strong,
.commerce-payment-trust i,
.commerce-related-card span,
.commerce-related-heading a,
.commerce-breadcrumb-section a,
.commerce-auth-prompt a + a,
.commerce-page-heading > span,
.commerce-cart-copy > span,
.commerce-cart-summary > span {
    color: var(--lucent-orange) !important;
}

.commerce-filter-card,
.commerce-field input,
.commerce-field select,
.commerce-toolbar select,
.commerce-toolbar,
.commerce-product-card,
.commerce-empty-state,
.commerce-breadcrumb-section,
.commerce-detail-thumbnails button,
.commerce-secondary-actions button,
.commerce-secondary-actions a,
.commerce-auth-prompt,
.commerce-payment-trust span,
.commerce-product-information,
.commerce-related-card,
.commerce-cart-item,
.commerce-quantity input,
.commerce-cart-quantity input,
.commerce-cart-quantity button,
.commerce-cart-line-total button,
.commerce-empty-cart {
    background: var(--lucent-surface) !important;
    border-color: var(--lucent-border) !important;
    color: var(--lucent-text) !important;
}

.commerce-product-image,
.commerce-detail-main-image,
.commerce-cart-image {
    background: var(--lucent-surface-raised) !important;
}

.commerce-filter-heading h2,
.commerce-field label,
.commerce-toolbar strong,
.commerce-product-body h3 a,
.commerce-product-price strong,
.commerce-detail-summary h1,
.commerce-detail-meta strong,
.commerce-auth-prompt h2,
.commerce-product-information h2,
.commerce-related-heading h2,
.commerce-page-heading h1,
.commerce-cart-copy h2,
.commerce-cart-copy strong,
.commerce-cart-line-total > strong {
    color: var(--lucent-text-strong) !important;
}

.commerce-toolbar span,
.commerce-detail-meta span,
.commerce-detail-description,
.commerce-product-information p,
.commerce-delivery-card span,
.commerce-auth-prompt p,
.commerce-page-heading p {
    color: var(--lucent-muted) !important;
}

.commerce-filter-button,
.commerce-card-actions button,
.commerce-login-to-buy,
.commerce-add-cart-large,
.commerce-auth-prompt a,
.commerce-primary-button {
    background: var(--lucent-orange) !important;
    color: #000 !important;
}

.commerce-primary-button:hover {
    background: var(--lucent-orange-dark) !important;
}

.commerce-wishlist-button.commerce-wishlist-button {
    background: var(--lucent-surface) !important;
    border-color: var(--lucent-border) !important;
    color: var(--lucent-text) !important;
}

.commerce-detail-thumbnails button.is-active {
    border-color: var(--lucent-orange) !important;
}

.commerce-delivery-card > i {
    background: var(--lucent-orange) !important;
    color: #000 !important;
}

.commerce-cart-summary {
    background: var(--lucent-surface-raised) !important;
    color: var(--lucent-text) !important;
}

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