/* ============================================
   Base theme - shared across every tenant now (this repo used to be
   ginas-real-hair.com's own dedicated codebase - see FIXES_APPLIED.md's
   "product variants + generic storefront" round). The actual per-tenant
   colors/heading font are injected as a CSS custom-property override in
   templates/base.html, sourced from app/theme_content/<tenant>.json -
   this file's :root block below is just the fallback/default values
   (still Gina's own palette, since that's what was here first and it's
   a sane-looking default), used only if that override somehow fails to
   load. Every rule below should keep referencing var(--primary)/
   var(--accent)/etc., never a hardcoded color, so any tenant's palette
   flows through correctly.
   ============================================ */
:root {
    --primary: #B8860B;       /* dark goldenrod */
    --accent: #D4AF37;        /* metallic gold */
    --secondary: #000000;
    --danger: #C62828;
    --warning: #E0A800;
    --bg: #0D0D0D;
    --surface: #1A1A1A;
    --text: #F5F0E1;
    --text-on-primary: #000000;
    /* Added for the light/dark-theme split (see FIXES_APPLIED.md Round
       187) - a theme's actual link-text color and muted/secondary-text
       color can differ from --accent, since --accent (gold) reads fine
       on a dark background but fails contrast outright on a light one.
       Fallback values here match this file's existing Gina's-palette
       fallback convention above - real per-tenant values come from
       templates/base.html's override, sourced from theme_content/<tenant>.json. */
    --link-color: #D4AF37;
    --muted-text: #a89f8c;
    /* Added Round 188 - see the rgba(212, 175, 55, ...) rules further down
       in this file; they used to hardcode Gina's gold as a literal RGB
       triplet since CSS can't split a hex custom property into rgba()
       components on its own. */
    --accent-rgb: 212, 175, 55;
    --link-color-rgb: 212, 175, 55;

    /* Bootstrap's own "theme color" variables - .text-primary,
       .btn-outline-primary, .border-primary, focus rings, etc. all
       derive from these, and were never touched before now, so they
       were still rendering Bootstrap's stock blue regardless of every
       other change above. Only overriding --bs-primary/--bs-link-* here
       deliberately - --bs-success/--bs-danger/--bs-warning/--bs-info are
       left alone since shared/alerts.html's flash messages use those
       classes semantically (a "success" flash should still read as
       success, not gold) - see FIXES_APPLIED.md Round 51. */
    --bs-primary: #B8860B;
    --bs-primary-rgb: 184, 134, 11;
    --bs-link-color: #D4AF37;
    --bs-link-color-rgb: var(--link-color-rgb);
    --bs-link-hover-color: #B8860B;
    --bs-link-hover-color-rgb: 184, 134, 11;
}

/* Ensure full-page layout */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Page container to push footer to bottom */
#page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#content-wrap {
    flex: 1;
}

/* Typography */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

/* Headings */
h1, h2, h3 {
    font-family: 'Lora', serif;
    font-weight: bold;
    color: var(--text);
}

/* Links */
a {
    text-decoration: none;
    color: var(--link-color);
}

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

/* Buttons */
.btn {
    border-radius: 5px;
}

/* Primary Button - gradient gold, matching use_gradient_buttons in the
   POS theme config */
.btn-primary {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border: none;
    color: var(--text-on-primary);
}

.btn-primary:hover {
    background: linear-gradient(90deg, var(--accent), var(--primary));
    color: var(--text-on-primary);
}

/* Navbar */
.navbar {
    padding: 10px 15px;
    background-color: var(--secondary);
}

.navbar-brand img {
    max-width: 80px;
    height: auto;
}

/* Navbar spacing */
.navbar-nav .nav-link {
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--text);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--link-color);
}

.navbar-nav {
    display: flex;
    flex-wrap: nowrap;
}

/* Fixing menu overflow issue */
@media (max-width: 992px) {
    .navbar-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* Footer */
footer {
    background: var(--secondary);
    color: var(--text);
    padding: 20px 0;
    text-align: center;
}

footer a {
    color: var(--text);
}

footer a:hover {
    color: var(--link-color);
}

.footer-astranite-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-astranite-link img {
    border-radius: 3px;
}

/* Blog Page */
.blog-posts .post-preview {
    padding: 15px;
    border-bottom: 1px solid #3a3a3a;
}

/* Contact Page */
.contact-section {
    text-align: center;
}

.contact-form {
    background: var(--surface);
    padding: 40px 0;
    color: var(--text);
}

/* Form inputs */
.form-floating input,
.form-floating textarea {
    border-radius: 5px;
}

/* Gallery */
.gallery-grid .card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
    background-color: var(--surface);
}

.gallery-grid img {
    max-height: 250px;
    object-fit: cover;
}

.gallery-carousel img,
.gallery-carousel video {
    max-width: 75%;
    display: block;
    margin: auto;
}

/* Registration Page */
.register-section {
    text-align: center;
}

.flashes {
    list-style: none;
    padding: 10px;
}

.flashes li {
    color: var(--danger);
    font-weight: bold;
}

/* Page Headers */
.masthead {
    background-size: cover;
    background-position: center;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.page-heading h1 {
    font-size: 32px;
    font-weight: bold;
}

/* Blog Post Form */
.post-form {
    padding: 50px 0;
}

.post-form .container {
    max-width: 800px;
}

.carousel-inner video{
    width: 80%;
    max-height: 600px;
    object-fit:contain;
}

.carousel-inner img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
}

.scroll-container {
  max-height: 600px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* static/admin.css or inside <style> tag */
body.admin-context {
  padding-top: 60px;  /* Adjust based on your navbar height */
}

.back-glow {
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--text);
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease-in-out;
}

.back-glow:hover {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: var(--text-on-primary);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
  text-decoration: none;
}

.thank-you-page {
    text-align: center;
    padding: 4rem 2rem;
}
.thank-you-actions a {
    margin: 1rem;
}

.card-fields-hidden {
  display: none;
}

#stripeNotice {
  font-size: 0.95rem;
  padding: 1rem;
  background-color: var(--surface);
  border-left: 4px solid var(--accent);
  color: var(--text);
  margin-top: 1rem;
}

.list-group-item span {
  font-weight: 500;
}

.fw-bold.fs-5 {
  margin-top: 1.5rem;
}

button.btn-success {
  padding: 0.75rem;
  font-size: 1.1rem;
}

 .intl-phone-container {
    display: flex;
    gap: 8px;
  }

  #countryCodeSelector {
    max-width: 170px;
  }

  input[type="tel"] {
    letter-spacing: 1px;
  }

  @media (max-width: 768px) {
    .intl-phone-container {
      flex-direction: column;
    }

    #countryCodeSelector {
      max-width: 100%;
    }
  }


  .map-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 576px) {
    .map-responsive {
        padding-bottom: 75%;
    }
}

/* ============================================
   Bootstrap 5 dark-theme overrides
   ============================================
   Bootstrap's default components (cards, tables, form controls, modals,
   dropdowns) assume a light theme - just flipping the page background
   above isn't enough on its own, they'd still render as white boxes
   floating on a dark page. Same class of bug the POS app hit on its own
   Inventory/Reports screens when it first went dark (see
   tanzanite_store_management/FIXES_APPLIED.md Round 6/7) - fixing it
   here up front instead of leaving it to surface page by page. */

.card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid #2e2e2e;
}

.card-header, .card-footer {
    background-color: var(--surface);
    border-color: #2e2e2e;
}

.table {
    color: var(--text);
    border-color: #2e2e2e;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text);
    border-bottom-color: #2e2e2e;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(var(--accent-rgb), 0.06);
    color: var(--text);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--accent-rgb), 0.12);
    color: var(--text);
}

.form-control, .form-select {
    background-color: var(--surface);
    border-color: #3a3a3a;
    color: var(--text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25);
}

.form-control::placeholder {
    color: #8a8a8a;
}

.form-label, .form-check-label {
    color: var(--text);
}

.list-group-item {
    background-color: var(--surface);
    color: var(--text);
    border-color: #2e2e2e;
}

.modal-content {
    background-color: var(--surface);
    color: var(--text);
}

.modal-header, .modal-footer {
    border-color: #2e2e2e;
}

.dropdown-menu {
    background-color: var(--surface);
    border-color: #2e2e2e;
}

.dropdown-item {
    color: var(--text);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--text);
}

/* Scoped to .navbar-dark specifically (not every .navbar) since Round
   187 - Annettez Clozet's navbar is now .navbar-light (light background,
   dark text/icons - see shared/navbar.html), and Bootstrap's own
   navbar-light toggler icon SVG is already the correct dark color for
   that case without inverting. Applying this filter unconditionally
   would have inverted it to a near-white icon on a light navbar -
   invisible, the same class of bug this filter was originally written
   to fix for the dark case. */
.navbar-dark .navbar-toggler-icon {
    filter: invert(1);
}

.badge.bg-light {
    color: #111;
    background-color: #f8f9fa !important;
}

.text-muted,
.form-text {
    /* .form-text is a separate Bootstrap class from .text-muted (they just look
       alike) - Bootstrap 5.2's .form-text hardcodes color: #6c757d directly in
       its compiled CSS rather than through a CSS variable, so it wasn't touched
       by anything above. #6c757d on our dark surface only clears ~3.7:1 contrast
       (fails WCAG AA for body-sized text), which is what made the phone-format
       hint on Contact/Checkout unreadable.

       Was a hardcoded #a89f8c literal (tuned only for the dark theme) until
       Round 187, when Annettez Clozet's theme switched to a light
       background - a warm-tan color picked to read against a near-black
       surface fails just as badly the other way against a light one. Now
       driven by --muted-text so each theme can supply its own value (see
       theme_content/<tenant>.json's muted_text_color, wired through
       templates/base.html) instead of one hardcoded color serving every
       tenant regardless of background. */
    color: var(--muted-text) !important;
}

/* ============================================
   .bg-light sections - the actual bug behind "text not visible, looks a
   bit yellow" on Contact/Home. Several sections across the site
   (index.html's gallery teaser, contact.html's entire form section,
   gallery.html, blog post comments) use Bootstrap's .bg-light utility
   for a subtle alternating-section rhythm - exactly like the site's
   original white/#f8f9fa alternation before Round 47. That utility was
   never touched, so it was still rendering its default near-white
   background, while the *text* inside those sections already inherits
   the theme's light cream (var(--text), #F5F0E1 - warm enough to read
   as "a bit yellow", which is exactly what was reported) from Round 47.
   Light cream text on a near-white background is very low contrast -
   effectively invisible in normal lighting. Mapped to --surface instead
   of --bg (not pure black) specifically to preserve that alternating
   rhythm as depth rather than flattening the whole site to one solid
   black expanse - see the design note in FIXES_APPLIED.md Round 51 on
   why full flat black everywhere was worth avoiding regardless of this
   bug. */
.bg-light {
    background-color: var(--surface) !important;
}

/* .bg-white is a distinct Bootstrap utility from .bg-light and was missed in the
   pass above - shop.html's whole product section uses it, which meant the "Our
   Products" heading (and any other text using the theme's cream var(--text)
   color) was rendering near-white-on-white, i.e. genuinely invisible, not just
   low-contrast. Same treatment as .bg-light for consistency. */
.bg-white {
    background-color: var(--surface) !important;
}

/* A little restrained gold, as requested - used sparingly (dividers and
   a subtle underline on section headings) rather than applied broadly,
   since overusing an accent color the way "warm luxury" brands only
   apply it in small doses is what keeps it feeling premium rather than
   gaudy. */
hr {
    border-top: 1px solid rgba(var(--accent-rgb), 0.35);
    opacity: 1;
}

h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 0.5rem auto 0;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
}