/*
===============================================================================
BIG TEXAN D2C - NEON ROADSIDE THEME
===============================================================================
Dark mode override for the Neon Roadside design direction.
Include AFTER globals.css to override design tokens.

Selected by Alex Lee on 2026-04-01 (Neon Revival / Neon Roadside).
Dark maroon nights, glowing neon yellow, Route 66 at 10pm.
===============================================================================
*/

/* --- Override Design Tokens --- */
:root {
    --bg-core: #1a0005;
    --bg-surface: #2a0008;
    --bg-glass: rgba(26, 0, 5, 0.92);
    --text-primary: #faf3e0;
    --text-secondary: #c4b8a8;
    --text-muted: #8c8c8f;
}

/* --- Page Foundation --- */
body {
    background-color: #1a0005;
    color: var(--brand-cream);
}

*::selection {
    background: var(--texan-yellow);
    color: #1a0005;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: calc(var(--z-header) + 10);
    transform: translateY(-160%);
    background: var(--texan-yellow);
    color: var(--brand-maroon);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 800;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Neon Glow Utilities --- */
.neon-glow {
    color: var(--texan-yellow);
    text-shadow:
        0 0 7px var(--texan-yellow),
        0 0 20px var(--texan-yellow),
        0 0 42px rgba(255, 210, 0, 0.5),
        0 0 82px rgba(255, 210, 0, 0.3);
}

.neon-glow-subtle {
    color: var(--texan-yellow);
    text-shadow:
        0 0 5px var(--texan-yellow),
        0 0 15px rgba(255, 210, 0, 0.4);
}

/* --- Header Override --- */
.site-header {
    background-color: transparent;
}

.announcement-bar {
    background: var(--brand-maroon);
    color: var(--brand-cream);
}

.announcement-bar a {
    color: var(--texan-yellow);
}

.top-bar {
    background: #e7d2a7;
    border-bottom: none;
}

.brand-logo {
    filter: none;
}

.search-wrap {
    background: #fffaf0;
    border: var(--border-light);
    color: #2a0008;
}

.search-wrap input {
    background: transparent;
    border: none;
    color: #2a0008;
}

.search-wrap input::placeholder {
    color: var(--text-muted);
}

.search-wrap svg {
    color: var(--text-secondary);
}

.header-icon {
    color: var(--brand-maroon);
}

.cart-count {
    background: var(--brand-maroon);
    color: #fff;
}

.mobile-menu-btn {
    color: var(--brand-cream);
    background: var(--brand-maroon);
}

.nav-bar {
    background: var(--brand-maroon);
    border-top: 1px solid rgba(255, 210, 0, 0.1);
}

.nav-link {
    color: var(--brand-cream) !important;
}

.nav-link:hover {
    color: var(--texan-yellow) !important;
}

.dropdown {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.15);
}

.dropdown a {
    color: var(--brand-cream);
}

.dropdown a:hover {
    background: rgba(255, 210, 0, 0.1);
    color: var(--texan-yellow);
}

.dropdown-toggle {
    color: var(--brand-cream);
}

/* --- Page Content --- */
main {
    background-color: #1a0005;
    color: var(--brand-cream);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--brand-cream);
}

a {
    color: var(--texan-yellow);
}

a:hover {
    color: #ffe44d;
}

/* --- Content Sections --- */
.page-header,
.page-hero {
    background: linear-gradient(180deg, var(--brand-maroon) 0%, #1a0005 100%);
    color: var(--brand-cream);
}

.page-header h1,
.page-hero h1 {
    color: var(--brand-cream);
}

.page-header p,
.page-hero p {
    color: var(--text-secondary);
}

section {
    color: var(--brand-cream);
}

/* --- Cards and Surfaces --- */
.card,
.faq-item,
.policy-section,
.content-card,
.gift-card,
.feature-card,
.info-card,
.step-card {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.08);
    color: var(--brand-cream);
}

.card:hover,
.feature-card:hover {
    border-color: rgba(255, 210, 0, 0.2);
}

/* --- Forms --- */
input,
textarea,
select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 210, 0, 0.15);
    color: var(--brand-cream);
}

input::placeholder,
textarea::placeholder {
    color: rgba(250, 243, 224, 0.4);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--texan-yellow);
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 210, 0, 0.15);
}

/* --- Buttons --- */
.btn-primary,
.btn-neon,
button[type="submit"] {
    background: var(--texan-yellow);
    color: #1a0005;
    border: none;
    font-weight: 700;
}

.btn-primary:hover,
.btn-neon:hover,
button[type="submit"]:hover {
    background: #ffe44d;
    box-shadow: 0 0 15px rgba(255, 210, 0, 0.3);
}

.btn-secondary,
.btn-ghost {
    background: transparent;
    border: 2px solid var(--brand-cream);
    color: var(--brand-cream);
}

.btn-secondary:hover,
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--texan-yellow);
    color: var(--texan-yellow);
}

/* --- Tables --- */
table {
    color: var(--brand-cream);
}

th {
    background: rgba(255, 210, 0, 0.1);
    color: var(--texan-yellow);
    border-bottom: 1px solid rgba(255, 210, 0, 0.2);
}

td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Dividers --- */
hr {
    border-color: rgba(255, 210, 0, 0.1);
}

/* --- Blockquotes --- */
blockquote {
    border-left: 3px solid var(--texan-yellow);
    color: var(--text-secondary);
    background: rgba(255, 210, 0, 0.03);
    padding: 1rem 1.5rem;
}

/* --- Lists --- */
ul li::marker,
ol li::marker {
    color: var(--texan-yellow);
}

/* --- Footer Override --- */
.site-footer,
footer {
    background: var(--brand-maroon);
    color: var(--brand-cream);
    border-top: 1px solid rgba(255, 210, 0, 0.1);
}

footer h4 {
    color: var(--texan-yellow);
    font-family: var(--font-heading);
}

footer a {
    color: var(--brand-cream);
    opacity: 0.8;
}

footer a:hover {
    color: var(--texan-yellow);
    opacity: 1;
}

footer .social-icon-btn {
    color: var(--brand-cream);
}

footer .social-icon-btn:hover {
    color: #1a0005;
}

/* --- Cart Drawer Override --- */
.cart-drawer,
#cart-drawer {
    background: #1a0005;
    border-left: 1px solid rgba(255, 210, 0, 0.1);
    color: var(--brand-cream);
}

#cart-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.cart-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a0005;
}

::-webkit-scrollbar-thumb {
    background: var(--brand-maroon);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-maroon-soft);
}

/* --- Toast --- */
.toast {
    background: var(--brand-maroon);
    color: var(--brand-cream);
    border: 1px solid rgba(255, 210, 0, 0.2);
}

/* --- Legal/Policy Page Specific --- */
.legal-content,
.policy-content,
.page-content {
    color: var(--brand-cream);
    line-height: 1.8;
}

.legal-content h2,
.policy-content h2 {
    color: var(--texan-yellow);
    border-bottom: 1px solid rgba(255, 210, 0, 0.1);
    padding-bottom: 0.5rem;
}

.legal-content h3,
.policy-content h3 {
    color: var(--brand-cream);
}

.legal-content strong,
.policy-content strong {
    color: var(--brand-cream);
}

/* --- FAQ Specific --- */
.faq-question,
.accordion-header {
    background: #2a0008;
    color: var(--brand-cream);
    border: 1px solid rgba(255, 210, 0, 0.08);
}

.faq-question:hover,
.accordion-header:hover {
    border-color: rgba(255, 210, 0, 0.2);
}

.faq-answer,
.accordion-body {
    background: rgba(42, 0, 8, 0.5);
    color: var(--text-secondary);
}

/* --- Product Cards --- */
.product-card {
    background: linear-gradient(145deg, #200008, #150004);
    border: 1px solid rgba(255, 210, 0, 0.08);
}

.product-card:hover {
    border-color: rgba(255, 210, 0, 0.3);
    box-shadow:
        0 0 20px rgba(255, 210, 0, 0.08),
        0 15px 40px rgba(0, 0, 0, 0.4);
}

.product-title {
    color: var(--brand-cream);
}

.product-price {
    color: var(--texan-yellow);
}

/* --- Shipping Progress --- */
#shipping-message {
    color: var(--text-secondary);
}

.progress-bar {
    background: rgba(255, 255, 255, 0.05);
}

#progress-fill {
    background: var(--texan-yellow);
}

/* ===========================================================================
   PRODUCT / DETAIL / GIFT-CARD PAGE NEON OVERRIDES (Phase 2 paint, 2026-05-03)
   ===========================================================================
   Per-page CSS uses var(--brand-maroon) on titles/headers/prices that would
   render maroon-on-dark and become illegible. These overrides keep the page
   CSS untouched and re-paint to cream + neon yellow for the dark roadside
   storefront feel. Scope is the products / product-detail / egift-card /
   gift-card-balance page surface.
   =========================================================================== */

/* Breadcrumbs - dark roadside */
.breadcrumbs {
    color: var(--text-secondary);
}
.breadcrumbs a {
    color: var(--brand-cream);
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.breadcrumbs a:hover {
    color: var(--texan-yellow);
    opacity: 1;
}
.breadcrumbs .current {
    color: var(--texan-yellow);
    opacity: 1;
    text-shadow: none;
}
.breadcrumbs span {
    color: rgba(245, 239, 227, 0.7);
}

/* Products page header / filter bar */
.page-header {
    background: linear-gradient(180deg, var(--brand-maroon) 0%, #1a0005 100%);
    border-bottom: 1px solid rgba(255, 210, 0, 0.1);
}
.page-header .page-title {
    color: var(--brand-cream);
    line-height: 1.42;
    overflow: visible;
    overflow-wrap: break-word;
    text-shadow:
        0 0 10px var(--neon-yellow-glow-50),
        0 0 24px var(--neon-yellow-glow-30),
        0 0 50px var(--neon-yellow-glow-15);
}
.page-subtitle {
    color: var(--text-secondary);
}
.filter-bar {
    background: #2a0008;
    border-bottom: 1px solid rgba(255, 210, 0, 0.1);
}
.filter-group label,
.sort-group label {
    color: var(--text-secondary);
}
.filter-group select,
.sort-group select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 210, 0, 0.15);
    color: var(--brand-cream);
}
.filter-group select:focus,
.sort-group select:focus {
    border-color: var(--texan-yellow);
}
.product-count {
    color: var(--text-secondary);
}
.products-loading,
.products-empty {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.08);
}
.products-loading-text {
    color: var(--brand-cream);
}
.products-empty-text {
    color: var(--text-secondary);
}

/* Product cards (products page enhancements) */
.products-section .product-card {
    background: linear-gradient(145deg, #200008, #150004);
    border: 1px solid rgba(255, 210, 0, 0.08);
    box-shadow: none;
}
.products-section .product-card:hover {
    border-color: rgba(255, 210, 0, 0.3);
    box-shadow:
        0 0 20px rgba(255, 210, 0, 0.08),
        0 15px 40px rgba(0, 0, 0, 0.4);
}
.products-section .product-card-title {
    color: var(--brand-cream);
    line-height: 1.45;
    overflow: visible;
}
.products-section .product-card-description {
    color: var(--brand-cream);
    opacity: 0.6;
}
.products-section .product-card-price {
    color: var(--texan-yellow);
    text-shadow: 0 0 8px rgba(255, 210, 0, 0.3);
}
.products-section .product-card-footer {
    border-top: 0;
}
.product-serves {
    color: var(--text-muted);
}

/* Product detail hero */
.product-info .product-title,
.product-detail .product-title {
    color: var(--brand-cream);
}
.product-description,
.product-info .product-description {
    color: var(--text-secondary);
}
.product-price-block .product-price {
    color: var(--texan-yellow);
}
.gallery-main {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.08);
}
.thumb {
    border: 2px solid rgba(255, 210, 0, 0.1);
}
.thumb:hover,
.thumb.active {
    border-color: var(--texan-yellow);
}

/* Purchase options + radios */
.purchase-option,
.delivery-option {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 210, 0, 0.1);
    color: var(--brand-cream);
}
.purchase-option:hover,
.delivery-option:hover {
    border-color: var(--texan-yellow);
}
.option-content,
.option-text,
.option-label {
    color: var(--brand-cream);
}
.option-price {
    color: var(--texan-yellow);
}

/* Quantity selector */
.quantity-selector {
    border: 1px solid rgba(255, 210, 0, 0.15);
    background: rgba(255, 255, 255, 0.03);
}
.qty-btn {
    color: var(--brand-cream);
}
.qty-btn:hover {
    color: var(--texan-yellow);
}
.quantity-selector input {
    background: transparent;
    color: var(--brand-cream);
    border: none;
}

/* Gift option / message box */
.gift-option,
.gift-message-box {
    color: var(--text-secondary);
}
.gift-message-box textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 210, 0, 0.15);
    color: var(--brand-cream);
}

/* Shipping info + share row */
.shipping-info {
    background: rgba(255, 210, 0, 0.04);
    border: 1px solid rgba(255, 210, 0, 0.1);
    color: var(--brand-cream);
}
.shipping-item {
    color: var(--text-secondary);
}
.shipping-item svg {
    color: var(--texan-yellow);
}
.share-row {
    border-top: 1px solid rgba(255, 210, 0, 0.08);
    color: var(--text-secondary);
}
.share-btn {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}
.share-btn:hover {
    background: var(--texan-yellow);
    color: #1a0005;
}

/* Section titles (cross-sell, reviews, how-it-works) */
.section-title {
    color: var(--brand-cream);
}

/* Reviews */
.reviews-summary {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.08);
}
.review-card {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.08);
    color: var(--brand-cream);
}
.review-title {
    color: var(--brand-cream);
}
.review-meta,
.reviewer,
.verified,
.review-date {
    color: var(--text-secondary);
}
.score-number {
    color: var(--texan-yellow);
}
.review-count {
    color: var(--text-secondary);
}
.breakdown-bar {
    background: rgba(255, 255, 255, 0.05);
}
.breakdown-fill {
    background: var(--texan-yellow);
}

/* Cross-sell uses .product-card already covered above */
.cross-sell-grid .product-card {
    background: #2a0008;
}

/* E-Gift card page hero */
.egift-title {
    color: var(--brand-cream);
}
.egift-description {
    color: var(--text-secondary);
}
.egift-card-bg {
    background: linear-gradient(135deg, #1a0005 0%, var(--brand-maroon) 50%, #4a0008 100%);
    box-shadow: 0 0 40px rgba(255, 210, 0, 0.25), 0 20px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 210, 0, 0.3);
}
.egift-card-type {
    color: var(--brand-cream);
}
.egift-card-amount-display {
    color: var(--texan-yellow);
    text-shadow: 0 0 10px rgba(255, 210, 0, 0.5), 0 0 30px rgba(255, 210, 0, 0.25);
}
.trust-badge {
    color: var(--text-secondary);
}
.trust-badge svg {
    color: var(--texan-yellow);
}

/* E-Gift form */
.form-label {
    color: var(--brand-cream);
}
.amount-label {
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid rgba(255, 210, 0, 0.15);
    color: var(--brand-cream);
}
.amount-option:hover .amount-label {
    border-color: var(--texan-yellow);
}
.amount-option input:checked + .amount-label {
    border-color: var(--texan-yellow);
    background: var(--texan-yellow);
    color: #1a0005;
}
.currency-symbol {
    color: var(--brand-cream);
}
.message-box textarea {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 210, 0, 0.15);
    color: var(--brand-cream);
}
.message-box .char-count {
    color: var(--text-muted);
}

/* How it works */
.how-it-works {
    background: #2a0008;
}
.hiw-step-icon {
    background: rgba(255, 210, 0, 0.08);
    color: var(--texan-yellow);
    border: 1px solid rgba(255, 210, 0, 0.2);
}
.hiw-step-title {
    color: var(--brand-cream);
}
.hiw-step-description {
    color: var(--text-secondary);
}

/* E-gift description / FAQ side */
.description-title {
    color: var(--brand-cream);
}
.description-text {
    color: var(--text-secondary);
}

/* Gift Card Balance page */
.balance-header {
    text-align: center;
    padding: 3rem 0 1.5rem;
}
.balance-title {
    color: var(--brand-cream);
}
.balance-subtitle {
    color: var(--text-secondary);
}
.balance-checker-card {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.12);
    box-shadow: 0 0 30px rgba(255, 210, 0, 0.05);
}
.balance-checker-title {
    color: var(--brand-cream);
}
.balance-checker-intro {
    color: var(--text-secondary);
}
.balance-form .form-group label,
.balance-form label {
    color: var(--brand-cream);
}
.balance-form input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 210, 0, 0.15);
    color: var(--brand-cream);
}
.form-hint {
    color: var(--text-muted);
}
.balance-loading p {
    color: var(--text-secondary);
}
.loading-spinner {
    border-color: rgba(255, 210, 0, 0.2);
    border-top-color: var(--texan-yellow);
}
.balance-result.success {
    background: rgba(45, 106, 79, 0.12);
    border: 1px solid rgba(45, 106, 79, 0.4);
    color: var(--brand-cream);
}
.balance-result.success .result-icon {
    color: var(--color-success);
}
.balance-result.error {
    background: rgba(155, 44, 44, 0.12);
    border: 1px solid rgba(155, 44, 44, 0.4);
    color: var(--brand-cream);
}
.balance-result.error .result-icon {
    color: var(--color-error);
}
.balance-result.zero {
    background: rgba(180, 83, 9, 0.12);
    border: 1px solid rgba(180, 83, 9, 0.4);
    color: var(--brand-cream);
}
.balance-result.zero .result-icon {
    color: var(--color-warning);
}
.result-title {
    color: var(--brand-cream);
}
.result-balance {
    color: var(--texan-yellow);
    text-shadow: 0 0 10px rgba(255, 210, 0, 0.4);
}
.result-message {
    color: var(--text-secondary);
}

/* Instructions card (gift-card-balance + egift) */
.balance-instructions {
    background: #1a0005;
}
.instructions-card {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.08);
    color: var(--brand-cream);
}
.instructions-title {
    color: var(--brand-cream);
}
.instructions-title svg {
    color: var(--texan-yellow);
}
.instructions-list li,
.instructions-list span {
    color: var(--text-secondary);
}
.instructions-note {
    color: var(--text-muted);
}

/* Accordion (product detail) */
.accordion-item {
    border: 1px solid rgba(255, 210, 0, 0.08);
}
.accordion-header {
    background: #2a0008;
    color: var(--brand-cream);
}
.accordion-icon {
    color: var(--texan-yellow);
}
.accordion-content,
.accordion-body {
    background: rgba(42, 0, 8, 0.5);
    color: var(--text-secondary);
}
.accordion-body p,
.accordion-body strong,
.accordion-body em {
    color: var(--brand-cream);
}
.accordion-body ul li,
.accordion-body ol li {
    color: var(--text-secondary);
}

/* Filter "Coming Soon" pill - already yellow on dark, just punch the contrast */
.filter-coming-soon {
    background: rgba(255, 210, 0, 0.85);
    color: #1a0005;
}

/* Gift card balance page - FAQ + CTA + Help cards */
.balance-faq {
    background: #1a0005;
}
.faq-section-title {
    color: var(--brand-cream);
}
.faq-question {
    color: var(--brand-cream);
}
.faq-answer {
    color: var(--text-secondary);
}
.balance-cta {
    background: linear-gradient(135deg, var(--brand-maroon) 0%, #1a0005 100%);
    border-top: 1px solid rgba(255, 210, 0, 0.15);
    border-bottom: 1px solid rgba(255, 210, 0, 0.15);
}
.cta-title {
    color: var(--brand-cream);
}
.cta-text {
    color: var(--text-secondary);
}
.balance-help {
    background: #1a0005;
}
.help-card {
    background: #2a0008;
    border: 1px solid rgba(255, 210, 0, 0.08);
}
.help-title {
    color: var(--brand-cream);
}
.help-text {
    color: var(--text-secondary);
}
.help-contact-item {
    color: var(--text-secondary);
}
.help-contact-item svg {
    color: var(--texan-yellow);
}
.help-contact-item a {
    color: var(--texan-yellow);
}

/* Egift FAQ section background - keep dark roadside */
.egift-faq {
    background: #1a0005;
}
.section-subtitle {
    color: var(--text-secondary);
}
.related-products {
    background: #1a0005;
}