/* ============================================================================
   fgm-theme.css  —  Full Grip Motorsport "12 Hour" site theme (FGM3-2, Phase 0)
   ----------------------------------------------------------------------------
   Loaded AFTER style.css in header.html / header_admin.html so these rules win
   on equal specificity via source order.

   Two layers:
     1. TOKEN OVERRIDES  — big-bang re-token of the Spruko/ynex theme variables
        to the 12hour gold-on-near-black palette. Touches every page.
     2. COMPONENT LAYER  — the 12hour bespoke components, extracted verbatim from
        about_12hour.html's three <style> blocks, kept scoped under `.fgm12h`
        so pages opt in by adding the wrapper. about_12hour.html is the
        reference implementation.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKEN OVERRIDES
   ---------------------------------------------------------------------------
   Theme tokens are space-separated RGB triplets consumed via rgb(var(--x)).

   --primary is intentionally left at the theme default (255 193 7 = #ffc107),
   which is already the FGM gold and is identical to the 12hour base accent
   (--fgm-yellow: rgb(255,193,7)). The #e6ad00 referenced in planning is only
   the 12hour button *hover* shade, not the base accent, so no primary shift is
   needed to match the 12hour look. Uncomment below to use the deeper gold.
*/
/* :root { --primary: 230 173 0; --primary-rgb: 230, 173, 0; } */

/* The site renders every page via <body class="dark">, and the .dark block in
   style.css re-declares --body-bg / --dark-bg to a blue-ish dark (26 28 30 /
   37 39 41). Re-point those to the neutral 12hour blacks. */
.dark {
  --body-bg: 17 17 17;   /* #111111  — 12hour --fgm-dark / page chrome        */
  --dark-bg: 26 26 26;   /* #1a1a1a  — 12hour section-alt / raised surfaces   */
}


/* The theme runs in horizontal nav-layout at runtime (the JS default overrides
   the vertical markup). The fixed header stack is two rows:
     .app-header (top bar) 60px + .app-sidebar (horizontal menu) 48px = 108px.
   style.css uses 7rem (112px) here, which left a 4px gap below the menu.
   Pin the content offset to the exact menu bottom (108px) so content sits flush.
   Scoped with :has(.fgm12h) so ONLY the 12hour section pages (homepage, races,
   about/12hour) get the tightened offset; all other pages keep the theme default.
   >>> To test other values, just change the 108px below and hard-refresh. <<< */
[data-nav-layout="horizontal"] .content:has(.fgm12h) {
  margin-top: 108px !important;
}

/* Breathing room between the header/menu and contained page content (cards,
   containers). The homepage's full-bleed hero cancels it so it stays flush
   against the header. */
.fgm12h {
  padding-top: 1.5rem;
}
.fgm12h #home-12hour-hero,
.fgm12h #home-hero {
  margin-top: -1.5rem;
}

/* ---------------------------------------------------------------------------
   2. COMPONENT LAYER — extracted from about_12hour.html
   ------------------------------------------------------------------------- */

.fgm12h {
  --fgm-yellow: rgb(255, 193, 7);
  --fgm-black: #000000;
  --fgm-dark: #111111;
  --fgm-dark-card: #333333;
  --fgm-muted: #999999;
  font-family: 'Inter', sans-serif;
}
.fgm12h section {
  background: var(--fgm-black) !important;
}
.fgm12h .section-alt {
  background: var(--fgm-dark) !important;
}
/* Inline <code> (IP:port, license keys, etc.) — the theme forces red; use gold. */
.fgm12h code {
  color: var(--fgm-yellow) !important;
}
/* Centered tier-card feature list (opt-in; styleguide tier-card stays left). */
.fgm12h .tier-card.tier-centered ul {
  text-align: center;
}
.fgm12h .tier-card.tier-centered ul li {
  justify-content: center;
}
.fgm12h .section-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fgm-yellow) !important; /* beat .fgm-card p { color: muted !important } when used inside a card */
  margin-bottom: 0.5rem;
}
.fgm12h .section-heading-left {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--fgm-yellow);
  padding-left: 20px;
  border-left: 8px solid var(--fgm-yellow);
  line-height: 1.1;
}
.fgm12h h3.section-title {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
/* Soft title — the non-uppercase, semibold white section title used by the
   homepage promo sections (alternative to the bold uppercase .section-title). */
.fgm12h .section-title-soft {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
}
.fgm12h .section-subtitle {
  color: var(--fgm-muted);
  font-size: 0.9375rem;
}
.fgm12h .fgm-card {
  background: var(--fgm-dark-card);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 20px;
  height: 100%;
  /* The old hover "lift" shadow, promoted to the default so cards read as
     distinct boxes against the #111 page without a hard border. */
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fgm12h .fgm-card:hover {
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55);
}
.fgm12h .fgm-card-yellow {
  background: var(--fgm-yellow);
  border: none;
  border-radius: 4px;
  padding: 40px;
  color: #000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fgm12h .fgm-card-yellow:hover {
  box-shadow: 0 20px 40px rgba(255, 193, 7, 0.2);
}
.fgm12h .fgm-card-yellow h5,
.fgm12h .fgm-card-yellow h6,
.fgm12h .fgm-card-yellow p,
.fgm12h .fgm-card-yellow span {
  color: #000 !important;
}
.fgm12h .fgm-card-yellow .text-muted-dark {
  color: rgba(0, 0, 0, 0.6) !important;
}
.fgm12h .fgm-card .card-icon {
  font-size: 2.5rem;
  color: var(--fgm-yellow);
  margin-bottom: 0.75rem;
}
.fgm12h .fgm-card h5 {
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.fgm12h .fgm-card p:not(.section-heading):not(.yellow-text):not(.section-title),
.fgm12h .text-muted {
  color: var(--fgm-muted) !important;
}
.fgm12h .yellow-text {
  color: var(--fgm-yellow) !important;
}
:root { --fgm-yellow: rgb(255, 193, 7); }
.btn-yellow {
  background: var(--fgm-yellow);
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 18px 35px;
  border: 2px solid transparent;
  border-radius: 0;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
}
.btn-yellow:hover {
  background: #e6ad00;
  transform: translateY(-2px);
  color: #000;
}
.btn-outline {
  background: transparent;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 18px 35px;
  border: 2px solid var(--fgm-yellow);
  border-radius: 0;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
}
.btn-outline:hover {
  background: var(--fgm-yellow);
  color: #000;
  transform: translateY(-2px);
}
.btn-dark {
  background: #000;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 18px 35px;
  border: 2px solid var(--fgm-yellow);
  border-radius: 0;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
}
.btn-dark:hover {
  background: #222;
  transform: translateY(-2px);
}
.btn-danger {
  background: #dc3545;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 18px 35px;
  border: 2px solid transparent;
  border-radius: 0;
  transition: background 0.2s, transform 0.2s;
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
}
.btn-danger:hover {
  background: #bb2d3b;
  transform: translateY(-2px);
  color: #fff;
}
/* Small size modifier for the 12hour buttons — for inline / table / dropdown actions */
.btn-yellow.btn-sm,
.btn-dark.btn-sm,
.btn-outline.btn-sm,
.btn-danger.btn-sm {
  padding: 8px 18px;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
}
.fgm12h .stat-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--fgm-yellow);
  text-transform: uppercase;
}
.fgm12h .stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fgm-muted);
}
/* Compact dashboard stat card (icon chip + caption + value) — for tight
   rows of metrics (e.g. 6-up). Single padding, content vertically centred so
   uneven cards (wrapped captions) don't leave empty space, smaller value than
   the hero .stat-number. */
.fgm12h .fgm-stat-card {
  background: var(--fgm-dark-card);
  border: 1px solid #333;
  border-top: 3px solid var(--fgm-yellow);
  border-radius: 4px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  padding: 18px 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fgm12h .fgm-stat-caption {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fgm-muted);
  margin: 10px 0 4px;
  line-height: 1.3;
}
.fgm12h .fgm-stat-value {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--fgm-yellow);
  line-height: 1.05;
}
/* Accordion (12hour) — separated dark items with a gold left-accent, uppercase
   header, gold chevron that rotates, and a gold active state. Built on Preline
   .hs-accordion so it expand/collapses with the existing JS. */
.fgm12h .fgm-accordion .hs-accordion {
  background: var(--fgm-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--fgm-yellow);
  border-radius: 3px;
  margin-bottom: 10px;
}
.fgm12h .fgm-accordion .hs-accordion:last-child {
  margin-bottom: 0;
}
/* Preline collapses an initially-open item by animating height to 0 (it does not
   add the `hidden` class), so the content must clip its overflow or it stays
   visible at height:0. */
.fgm12h .fgm-accordion .hs-accordion-content {
  overflow: hidden;
}
.fgm12h .fgm-accordion .hs-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 15px 20px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: left;
  transition: color 0.2s ease, background 0.2s ease;
}
.fgm12h .fgm-accordion .hs-accordion-toggle:hover {
  color: var(--fgm-yellow);
  background: rgba(255, 193, 7, 0.04);
}
.fgm12h .fgm-accordion .hs-accordion-toggle .fgm-accordion-icon {
  color: var(--fgm-yellow);
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.fgm12h .fgm-accordion .hs-accordion.active > .hs-accordion-toggle {
  color: var(--fgm-yellow);
}
.fgm12h .fgm-accordion .hs-accordion.active > .hs-accordion-toggle .fgm-accordion-icon {
  transform: rotate(180deg);
}
.fgm12h .fgm-accordion .fgm-accordion-body {
  padding: 2px 20px 18px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--fgm-muted);
}
/* Adoption layer: lets the legacy Spruko accordion markup
   (.accordion-item / .accordion-button / .accordion-body, with dual-SVG
   chevrons and .custom-accordion-primary) inherit the .fgm-accordion look by
   only adding the .fgm-accordion class to its wrapper. */
.fgm12h .fgm-accordion .accordion-item {
  background: var(--fgm-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--fgm-yellow);
  border-radius: 3px;
  margin-top: 0 !important;
  margin-bottom: 10px;
  overflow: hidden;
}
.fgm12h .fgm-accordion .accordion-item:last-child {
  margin-bottom: 0;
}
/* kill the inner gold left-border custom-accordion-primary adds to button/body */
.fgm12h .fgm-accordion .accordion-item .accordion-button,
.fgm12h .fgm-accordion .accordion-item .accordion-body {
  border-inline-start-width: 0 !important;
}
.fgm12h .fgm-accordion .accordion-button {
  padding: 15px 20px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff !important;
  background: transparent !important;
}
.fgm12h .fgm-accordion .accordion-button:hover {
  color: var(--fgm-yellow) !important;
  background: rgba(255, 193, 7, 0.04) !important;
}
.fgm12h .fgm-accordion .hs-accordion.active > .accordion-button {
  color: var(--fgm-yellow) !important;
}
/* recolor the dual-SVG chevrons (and any pseudo arrow) to gold */
.fgm12h .fgm-accordion .accordion-button svg {
  color: var(--fgm-yellow) !important;
}
.fgm12h .fgm-accordion .accordion-button:after {
  content: none !important;
}
.fgm12h .fgm-accordion .accordion-body {
  padding: 12px 20px 18px !important;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--fgm-muted);
  background: transparent !important;
}
/* rounds list uses icon-left layout + a Delete button in the header */
.fgm12h .fgm-accordion.accordionicon-left .accordion-button {
  justify-content: flex-start;
}
/* Flush / transparent variant — for large accordions whose panels contain
   their own custom .box cards (e.g. round results). The item drops its card
   background and full border so the inner boxes carry the structure; only the
   gold left-accent and header remain. Add alongside .fgm-accordion:
   class="... fgm-accordion fgm-accordion-flush". Works on both the clean
   markup and the legacy Spruko markup. */
.fgm12h .fgm-accordion-flush .hs-accordion,
.fgm12h .fgm-accordion-flush .accordion-item {
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid var(--fgm-yellow) !important;
  border-radius: 0 !important;
  overflow: visible;
  margin-bottom: 1.5rem;
}
.fgm12h .fgm-accordion-flush .hs-accordion:last-child,
.fgm12h .fgm-accordion-flush .accordion-item:last-child {
  margin-bottom: 0;
}
.fgm12h .fgm-accordion-flush .hs-accordion-toggle,
.fgm12h .fgm-accordion-flush .accordion-button {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fgm12h .fgm-accordion-flush .fgm-accordion-body,
.fgm12h .fgm-accordion-flush .accordion-body {
  padding: 16px 0 4px 20px !important;
}
/* Input labels — unify the two legacy classes (.form-label 0.8rem/600/70%-white
   and .ti-form-label 0.875rem/500/white) into one look: white, semibold, 0.8rem.
   Unscoped + !important to override both base rules everywhere (the UI is dark
   site-wide), so labels read consistently across admin / steward / front-end. */
.form-label,
.ti-form-label {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  display: block;
}
:is(.dark .form-label),
:is(.dark .ti-form-label) {
  color: #fff !important;
}

/* Form field help text — a short muted line placed BETWEEN the label and the
   control (never after it). Replaces the deprecated <font> hack used on some
   admin forms. Pair: <label>…</label><p class="form-hint">…</p><input/select>.
   Unscoped on purpose: a few front-end forms (coach / my / store) are not
   wrapped in .fgm12h yet, and the hint must still read as muted there. */
.form-hint {
  font-size: 0.75rem;
  line-height: 1.4;
  color: #999;
  margin-top: 2px;
  margin-bottom: 6px;
}
/* Responsive 16:9 video embed — drop an <iframe> inside .fgm-video. */
.fgm-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: #000;
}
.fgm-video iframe,
.fgm-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Sidebar key-value / detail-stat list — dense label+value pairs and icon
   fact-rows for detail/summary sidebars (race statistics, profile, team). */
.fgm12h .fgm-sidebar-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fgm-yellow);
  text-align: center;
  margin: 0;
}
.fgm12h .fgm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.fgm12h .fgm-detail-label {
  font-size: 0.8rem;
  color: var(--fgm-muted);
  margin-bottom: 0.25rem;
}
.fgm12h .fgm-detail-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.fgm12h .fgm-factrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fgm12h .fgm-factrow + .fgm-factrow {
  margin-top: 0.75rem;
}
.fgm12h .fgm-factrow-label {
  font-size: 0.875rem;
}
.fgm12h .fgm-factrow-label i {
  margin-right: 0.35rem;
}
.fgm12h .fgm-factrow-value {
  font-weight: 600;
}
.fgm12h .step-number {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fgm-yellow);
  color: #000;
  font-weight: 900;
  font-size: 1.25rem;
  border-radius: 50%;
  margin: 0 auto 1rem;
}
.fgm12h .border-top-yellow {
  border-top: 3px solid var(--fgm-yellow);
  border-radius: 0;
}
.fgm12h .border-top-white {
  border-top: 3px solid #fff;
  border-radius: 0;
}
.fgm12h .check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ccc;
  font-size: 0.875rem;
}
.fgm12h .check-item i {
  color: var(--fgm-yellow);
  font-size: 1.1rem;
}
.fgm12h .sponsor-box {
  background: var(--fgm-dark-card);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 1.25rem;
  text-align: center;
  transition: transform 0.3s ease;
}
.fgm12h .sponsor-box:hover {
  transform: translateY(-4px);
}
.fgm12h .sponsor-placeholder {
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1.25rem;
  text-align: center;
}
.fgm12h .list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fgm12h .list-item:last-child {
  border-bottom: none;
}
.fgm12h .badge-yellow {
  background: var(--fgm-yellow);
  color: #000;
  font-weight: 900;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.25rem 0.75rem;
  border-radius: 0;
}
.fgm12h .tier-card {
  background: var(--fgm-dark-card);
  border: 1px solid #333;
  border-radius: 4px;
  padding: 40px 30px;
  text-align: center;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fgm12h .tier-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.fgm12h .tier-card.featured {
  border-color: var(--fgm-yellow);
  border-width: 3px;
}
.fgm12h .tier-icon {
  font-size: 2.5rem;
  color: var(--fgm-yellow);
  margin-bottom: 1rem;
}
.fgm12h .tier-card h5 {
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}
.fgm12h .tier-card .tier-label {
  color: var(--fgm-yellow);
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.5rem;
}
.fgm12h .tier-card ul {
  text-align: left;
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}
.fgm12h .tier-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--fgm-muted);
}
.fgm12h .tier-card ul li i {
  color: var(--fgm-yellow);
  margin-top: 2px;
}
/* Subscription pricing grids (community Membership tab + My Dashboard) nest the
   tier-cards inside a #333 .box panel, so the #333 cards merge into one block.
   Scoped to #pricing-monthly-pane (only these two grids use it — not the
   telemetry/styleguide tier-cards), give the cards a darker border so the three
   read as separate cards within the panel (FGM3-169). */
.fgm12h #pricing-monthly-pane .tier-card {
  border: 1px solid #1a1a1a;
}
/* The .box wrapping the pricing pane is just a container for the tier-cards;
   drop its light-grey side/bottom border (keep the gold top accent) so only the
   cards themselves carry an outline. Scoped via :has(#pricing-monthly-pane) to
   the two subscription wrappers only (FGM3-169). */
.fgm12h .box:has(#pricing-monthly-pane) {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
/* The pricing pane carries a faint all-sides border (dark:!border-defaultborder/10);
   drop it so only the tier-cards are outlined (FGM3-169). */
.fgm12h #pricing-monthly-pane {
  border-width: 0;
}
/* Hero specific */
.fgm12h .hero-section {
  background: #000 url('/assets/images/12hour/hero-bg.jpg') center center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
.fgm12h .hero-section section {
  background: rgba(0, 0, 0, 0.6) !important;
}
.fgm12h .hero-section:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, #000, transparent);
  z-index: 1;
}
/* Auction items */
.fgm12h .auction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}
.fgm12h .auction-card {
  background: var(--fgm-dark-card);
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fgm12h .auction-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.fgm12h .auction-card:hover .auction-card-img img {
  transform: scale(1.1);
}
.fgm12h .auction-card-img {
  height: 280px;
  overflow: hidden;
  border-bottom: 3px solid var(--fgm-yellow);
}
.fgm12h .auction-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.fgm12h .auction-card-body {
  padding: 16px;
}
.fgm12h .auction-card-category {
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fgm-yellow);
  margin-bottom: 4px;
}
.fgm12h .auction-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  text-decoration: none;
  display: block;
}
.fgm12h .auction-card-title:hover {
  color: var(--fgm-yellow);
}
.fgm12h .auction-card-bid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fgm12h .auction-card-bid-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fgm-muted);
}
.fgm12h .auction-card-bid-amount {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--fgm-yellow);
}
.fgm12h .auction-card-meta {
  font-size: 0.7rem;
  color: var(--fgm-muted);
  margin-top: 6px;
}
.fgm12h .filter-btn {
  background: transparent;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 20px;
  border: 2px solid #555;
  border-radius: 0;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.fgm12h .filter-btn:hover,
.fgm12h .filter-btn.active {
  background: var(--fgm-yellow);
  color: #000;
  border-color: var(--fgm-yellow);
}
/* Progress bar animation */
@keyframes fgm-progress {
  from {
    width: 0;
  }
}
.fgm12h .progress-bar-animated {
  animation: fgm-progress 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Divider */
.fgm12h .yellow-divider {
  width: 50px;
  height: 3px;
  background: var(--fgm-yellow);
  margin-bottom: 1.5rem;
}
/* Sponsors checkerboard grid */
.fgm12h-sponsors-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 768px) {
  .fgm12h-sponsors-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
.fgm12h-sponsor-cell {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}
/* Checkerboard: 5 columns, alternating yellow/white, flip each row */
.fgm12h-sponsor-cell:nth-child(10n+1),
.fgm12h-sponsor-cell:nth-child(10n+3),
.fgm12h-sponsor-cell:nth-child(10n+5),
.fgm12h-sponsor-cell:nth-child(10n+7),
.fgm12h-sponsor-cell:nth-child(10n+9) {
  background: rgb(255, 193, 7);
}
.fgm12h-sponsor-cell:nth-child(10n+2),
.fgm12h-sponsor-cell:nth-child(10n+4),
.fgm12h-sponsor-cell:nth-child(10n+6),
.fgm12h-sponsor-cell:nth-child(10n+8),
.fgm12h-sponsor-cell:nth-child(10n+10) {
  background: #fff;
}
.fgm12h-sponsor-cell img {
  max-height: 80px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 768px) {
  .fgm12h-sponsor-cell {
    padding: 12px;
  }
  .fgm12h-sponsor-cell img {
    max-height: 60px;
  }
  /* Checkerboard for 2-column mobile layout:
       row1: Y W, row2: W Y, row3: Y W, row4: W Y ... */
  .fgm12h-sponsor-cell:nth-child(10n+1),
  .fgm12h-sponsor-cell:nth-child(10n+3),
  .fgm12h-sponsor-cell:nth-child(10n+5),
  .fgm12h-sponsor-cell:nth-child(10n+7),
  .fgm12h-sponsor-cell:nth-child(10n+9) {
    background: initial;
  }
  .fgm12h-sponsor-cell:nth-child(10n+2),
  .fgm12h-sponsor-cell:nth-child(10n+4),
  .fgm12h-sponsor-cell:nth-child(10n+6),
  .fgm12h-sponsor-cell:nth-child(10n+8),
  .fgm12h-sponsor-cell:nth-child(10n+10) {
    background: initial;
  }
  .fgm12h-sponsor-cell:nth-child(4n+1),
  .fgm12h-sponsor-cell:nth-child(4n+4) {
    background: rgb(255, 193, 7);
  }
  .fgm12h-sponsor-cell:nth-child(4n+2),
  .fgm12h-sponsor-cell:nth-child(4n+3) {
    background: #fff;
  }
}

/* Auction item modal responsive layout */
.fgm12h-auction-layout {
  display: flex;
  margin: -30px;
}
.fgm12h-auction-layout-image {
  flex: 0 0 45%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}
.fgm12h-auction-layout-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.fgm12h-auction-layout-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
  overflow-y: auto;
  max-height: 80vh;
}
@media (max-width: 768px) {
  #auctionItemModal > div {
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 100vh;
    border-radius: 0 !important;
  }
  #auctionItemModalContent {
    padding: 20px !important;
  }
  .fgm12h-auction-layout {
    flex-direction: column;
    margin: -20px !important;
  }
  .fgm12h-auction-layout-image {
    flex: 0 0 auto;
    min-height: 180px;
    height: 180px;
    width: 100%;
  }
  .fgm12h-auction-layout-image img {
    position: relative !important;
    border-radius: 0 !important;
  }
  .fgm12h-auction-layout-content {
    padding: 1.25rem;
    max-height: none;
  }
}

/* Goal-tracker fueling amount (was an inline <style> block) */
.fueling-amount {
  font-size: 2.5rem;
}
@media (max-width: 640px) {
  .fueling-amount {
    font-size: 1.75rem;
  }
}

/* Sabotage section (was an inline <style> block) */
.sabotage-ptype-card {
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.sabotage-ptype-card:hover {
  border-color: #555;
  transform: translateY(-1px);
}
.sabotage-ptype-card.selected {
  border-color: var(--fgm-yellow);
  background: #221f10;
}
.sabotage-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 16px;
}
.sabotage-ptype-card .sab-info {
  flex: 1 1 auto;
  min-width: 0;
}
.sabotage-ptype-card .sab-name {
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.8rem;
}
.sabotage-ptype-card .sab-desc {
  color: var(--fgm-muted);
  font-size: 0.68rem;
  margin-top: 1px;
}
.sabotage-ptype-card .sab-dur {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sabotage-ptype-card .sab-price {
  color: var(--fgm-yellow);
  font-weight: 900;
  font-size: 0.95rem;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 80px;
  text-align: right;
}
.sabotage-feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 0.85rem;
  color: #ddd;
}
.sabotage-feed-row:last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------------
   Utility classes for the most-repeated inline patterns in about_12hour.html.
   The `--fgm-*` vars resolve because these elements live inside `.fgm12h`.
   ------------------------------------------------------------------------- */
.fgm12h .fgm12h-section {
  padding: 4rem 0;
  width: 100%;
}

/* Avatar/icon chip — replaces the inline "background:#232323; border:2px solid #ffc107"
   pattern repeated ~17x across the homepage. Drop the sibling bg-primary/10 and
   !text-primary in markup so there is no !important fight on background/color. */
.fgm12h .fgm-avatar-chip {
  background-color: #232323;
  border: 2px solid var(--fgm-yellow);
  color: var(--fgm-yellow) !important;
}

/* Activity feed / timeline — gold .fgm-avatar-chip markers on a faint gold rail.
   The 12hour replacement for the legacy Spruko .profile-timeline. Styleguide:
   PATTERN 30. Markup: <ul class="fgm-timeline"><li>
     <span class="fgm-timeline-marker avatar avatar-md avatar-rounded fgm-avatar-chip"><i>…</i></span>
     <div class="fgm-timeline-body">…</div></li></ul> */
.fgm12h .fgm-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fgm12h .fgm-timeline > li {
  position: relative;
  display: flex;
  gap: 0.85rem;
  padding-bottom: 1.25rem;
}
.fgm12h .fgm-timeline > li:last-child {
  padding-bottom: 0;
}
/* the connecting rail runs down the centre of the marker column */
.fgm12h .fgm-timeline > li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: -0.15rem;
  left: 1.25rem;
  width: 2px;
  background: rgba(255, 193, 7, 0.18);
}
.fgm12h .fgm-timeline .fgm-timeline-marker {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.fgm12h .fgm-timeline .fgm-timeline-body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.15rem;
}

/* Notice / alert — dark surface with a gold (or severity-coloured) left accent
   bar; the 12hour replacement for the legacy Tailwind soft-alert
   (bg-{c}/10 border border-{c} … rounded-lg p-4). Re-skins the existing inner
   markup (flex > svg + content), so converting an alert is just swapping the
   wrapper class for `fgm-notice fgm-notice-{info|success|warning|danger}`.
   Styleguide: PATTERN 31. */
.fgm12h .fgm-notice {
  background: #1a1a1a;
  border: 1px solid #333;
  border-left: 3px solid var(--fgm-yellow);
  border-radius: 0;
  padding: 14px 16px;
  color: var(--fgm-muted);
  font-size: 0.85rem;
}
.fgm12h .fgm-notice svg {
  color: var(--fgm-yellow);
  flex-shrink: 0;
}
.fgm12h .fgm-notice h3,
.fgm12h .fgm-notice strong,
.fgm12h .fgm-notice b {
  color: #fff;
}
.fgm12h .fgm-notice a {
  color: var(--fgm-yellow);
  text-decoration: underline;
}
.fgm12h .fgm-notice-success { border-left-color: rgb(var(--success)); }
.fgm12h .fgm-notice-success svg { color: rgb(var(--success)); }
.fgm12h .fgm-notice-warning { border-left-color: rgb(var(--warning)); }
.fgm12h .fgm-notice-warning svg { color: rgb(var(--warning)); }
.fgm12h .fgm-notice-danger { border-left-color: rgb(var(--danger)); }
.fgm12h .fgm-notice-danger svg { color: rgb(var(--danger)); }

/* Empty state — centred icon + message for "no results" blocks. */
.fgm12h .fgm-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--fgm-muted);
  font-size: 0.875rem;
}
.fgm12h .fgm-empty-icon {
  display: block;
  font-size: 2.25rem;
  color: var(--fgm-yellow);
  margin-bottom: 0.6rem;
}
.fgm12h .fgm-empty-title {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

/* Image overlay bars — replaces the inline rgba(30,30,30,0.75) absolute bars on
   the server / event / hotlap cards (repeated ~11x). */
.fgm12h .fgm-overlay-bar {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(30, 30, 30, 0.75);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fgm12h .fgm-overlay-bar--top {
  top: 0;
  z-index: 10;
}
.fgm12h .fgm-overlay-bar--bottom {
  bottom: 0;
}

/* ---------------------------------------------------------------------------
   Homepage 12hour hero — extracted verbatim from homepage.html's inline <style>.
   Unscoped (keeps its own .home-12h-hero prefixes). Placed AFTER the component
   .btn-yellow / .btn-outline rules above so the hero's compact button padding
   (12px 24px / .75rem) wins by source order over the component 18px 35px.
   ------------------------------------------------------------------------- */
.home-12h-hero {
  position: relative;
  overflow: hidden;
  background: #000 url('/assets/images/12hour/hero-bg.jpg') center center / cover no-repeat;
  font-family: 'Inter', sans-serif;
}
.home-12h-hero-overlay {
  background: rgba(0, 0, 0, 0.65);
  padding: 2.5rem 0;
  position: relative;
}
.home-12h-hero-overlay:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #000, transparent);
  z-index: 1;
  pointer-events: none;
}
/* Homepage brand hero sits ~30px taller than the default band */
#home-hero .home-12h-hero-overlay {
  padding-top: calc(2.5rem + 15px);
  padding-bottom: calc(2.5rem + 15px);
}
.home-12h-hero-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.home-12h-hero-title {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.25rem 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: left;
}
.home-12h-hero-date {
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  color: rgb(255, 193, 7);
  margin: 0 0 0.75rem 0;
  letter-spacing: 0.05em;
  text-align: left;
}
.home-12h-hero-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  margin: 0 0 1.25rem 0;
  max-width: 560px;
  text-align: left;
}
.home-12h-hero .btn-yellow,
.home-12h-hero .btn-outline {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 0;
  transition: background 0.2s, transform 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 0.75rem;
}
.home-12h-hero .btn-yellow {
  background: rgb(255, 193, 7);
  color: #000;
  border: none;
}
.home-12h-hero .btn-yellow:hover {
  background: #e6ad00;
  color: #000;
  transform: translateY(-2px);
}
.home-12h-hero .btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgb(255, 193, 7);
}
.home-12h-hero .btn-outline:hover {
  background: rgb(255, 193, 7);
  color: #000;
  transform: translateY(-2px);
}

/* Small shared component helpers (replace inline styles in the styleguide /
   recovered 12hour markup so usage stays class-driven). */
.fgm12h .text-bronze { color: #cd7f32; }
/* Match .fgm-card h5 (1.1rem) so the title is the same size on both cards of a
   Two-Card Split — on .fgm-card-yellow there's no h5 size rule, so this applies;
   on .fgm-card the h5 rule already yields 1.1rem. */
.fgm12h .fgm-cta-title { font-size: 1.1rem; font-weight: 900; text-transform: uppercase; margin-bottom: 1rem; }
.fgm12h .fgm-card-label { font-size: 0.85rem; letter-spacing: 0.1em; }
.fgm12h .fgm-avatar-chip.is-square { border-radius: 3px; }
.fgm12h .fgm-card-yellow .btn-dark,
.fgm12h .fgm-card-yellow .btn-dark i { color: #fff !important; }

/* Homepage section labels use .landing-section-heading; give them the same gold
   uppercase treatment as the 12hour .section-heading (one rule for all ~16). */
.fgm12h .landing-section-heading {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fgm-yellow);
  font-weight: 700;
}

/* ============================================================================
   12HOUR ELEMENT TRANSFORMATION — base-component overrides (SITEWIDE)
   ----------------------------------------------------------------------------
   Apply the 12hour design language to the shared theme components so the whole
   site reads as redesigned (sharp edges, flat gold buttons, heavy uppercase
   titles, gold card accents), not just re-coloured. Global; tune here.
   ========================================================================== */

/* 1. Sharp corners — the signature 12hour trait (theme defaults are rounded). */
.box,
.ti-btn,
.badge,
.form-control,
.ti-form-input,
.form-select,
.ti-input {
  border-radius: 3px !important;
}

/* Selects match the text-input height + font size (theme renders them shorter
   with a smaller font by default). */
.form-select {
  font-size: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1.6;
}
/* Native <select class="form-control"> (used widely instead of .form-select)
   only got the text-input styling, not the dropdown arrow / appearance reset,
   so it rendered with the OS-default control. Give it the same themed look. */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23949eb7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}
/* .form-control-sm uses 0.25rem vertical padding vs .ti-btn's 0.5rem; bump it
   so the small selects/inputs aren't cramped. Flex-form controls auto-stretch
   to the adjacent button, so padding alone keeps them matched. */
.fgm12h .form-control-sm,
.fgm12h .form-select-sm {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
/* Grid-form controls (each has a <label> directly above) don't auto-stretch to
   the adjacent button, so give them the button height directly. Scoped to
   label+control so the flex-form selects (already matched via stretch, e.g. the
   SA cards) are left untouched. */
.fgm12h label + .form-control-sm,
.fgm12h label + .form-select-sm {
  min-height: 2.6875rem;
}

/* 3. Heavy uppercase card/box titles with a gold accent bar. */
.box-title {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-left: 3px solid rgb(var(--primary));
  padding-left: 0.6rem;
}

/* 4. Gold top accent on cards — the 12hour racing-livery feel. */
.box {
  border-top: 2px solid rgb(var(--primary));
}
/* Give bare .box cards the same grey fill as .fgm-card. The base style.css .box
   background is Tailwind bg-white whose dark override drops to the #111 page bg,
   so bare .box cards lose their panel look (FGM3-177). Scope under .fgm12h so this
   beats the base .box (0,1,0) on specificity and keeps --fgm-dark-card in scope. */
.fgm12h .box {
  background-color: var(--fgm-dark-card);
  /* Same lifted-card shadow as .fgm-card so .box panels read as distinct boxes. */
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}
/* Product landing pages (Vision, Broadcasting) run calmer: flat cards, gold
   reserved for eyebrows, buttons, and the single solid-gold accent card. Drop
   the gold-top accent so .box cards read like the flat .fgm-card. */
.landing-main .box {
  border-top: 0;
  background: var(--fgm-dark-card);
}

/* 5. Tables: gold uppercase header row. */
.table thead th,
table.ti-custom-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(var(--primary));
}

/* ============================================================================
   DATA TABLE (.fgm-table) — 12hour styling for plain <table> data grids,
   distinct from the themed Tabulator (use Tabulator for sortable/paginated
   data; use .fgm-table for static lists inside a .fgm-card). Add .fgm-table to
   the <table>; add .fgm-table-striped for zebra rows; wrap in .table-responsive
   for horizontal scroll on narrow screens. Styleguide: PATTERN 28.
   ========================================================================== */
.fgm12h .fgm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.fgm12h .fgm-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fgm-yellow);
  text-align: left;
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 2px solid rgba(255, 193, 7, 0.35);
}
.fgm12h .fgm-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}
.fgm12h .fgm-table tbody tr:last-child td {
  border-bottom: 0;
}
.fgm12h .fgm-table tbody tr {
  transition: background 0.15s ease;
}
.fgm12h .fgm-table tbody tr:hover {
  background: rgba(255, 193, 7, 0.06);
}
.fgm12h .fgm-table-striped tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.025);
}
.fgm12h .fgm-table-striped tbody tr:nth-child(odd):hover {
  background: rgba(255, 193, 7, 0.06);
}

/* ============================================================================
   MODAL (.fgm-modal) — 12hour skin for a Preline hs-overlay dialog. Keep the
   hs-overlay / data-hs-overlay markup + open/close JS unchanged; .fgm-modal
   only styles the dialog surface. Place the markup inside the page's .fgm12h
   wrapper so the footer btn-yellow / btn-outline pick up the theme.
   Styleguide: PATTERN 29.
   ========================================================================== */
.fgm12h .fgm-modal {
  background: #1a1a1a;
  border: 1px solid #333;
  border-top: 3px solid var(--fgm-yellow);
  border-radius: 4px;
  width: 100%;
  max-width: 32rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  /* The .ti-modal overlay is pointer-events:none; the legacy .ti-modal-content
     restored pointer-events:auto. Re-assert it here so the dialog surface stays
     clickable after the ti-modal-content -> fgm-modal rename (FGM3-174). */
  pointer-events: auto;
}
/* Width variants for wider form/data dialogs (map from the legacy
   ti-modal-box max-w-* so converted modals keep their original width). */
.fgm12h .fgm-modal-md { max-width: 42rem; }
.fgm12h .fgm-modal-lg { max-width: 56rem; }
.fgm12h .fgm-modal-xl { max-width: 72rem; }
.fgm12h .fgm-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fgm12h .fgm-modal-title {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  color: #fff;
}
.fgm12h .fgm-modal-close {
  color: var(--fgm-muted);
  font-size: 1.25rem;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.fgm12h .fgm-modal-close:hover {
  color: var(--fgm-yellow);
}
.fgm12h .fgm-modal-body {
  padding: 20px;
  color: var(--fgm-muted);
  font-size: 0.9rem;
}
.fgm12h .fgm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 14px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   THIRD-PARTY WIDGET THEMING (SITEWIDE)
   Tabulator / Flatpickr / Choices / Swiper theme themselves; pull
   them into the 12hour dark + gold palette wherever they render.
   ========================================================================== */

/* --- Tabulator --- */
.tabulator {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 3px !important;
}
.tabulator .tabulator-header {
  background: #000 !important;
  border-bottom: 2px solid rgb(var(--primary)) !important;
  color: rgb(var(--primary)) !important;
}
.tabulator .tabulator-header .tabulator-col {
  background: transparent !important;
  border-right: 0 !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  color: rgb(var(--primary)) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.tabulator .tabulator-row {
  background: #1a1a1a !important;
  color: #fff !important;
  border-bottom: 1px solid #2a2a2a !important;
}
.tabulator .tabulator-row.tabulator-row-even {
  background: #151515 !important;
}
.tabulator .tabulator-row:hover {
  background: #222 !important;
}
.tabulator .tabulator-footer {
  background: #1a1a1a !important;
  color: #fff !important;
  border-top: 1px solid #2a2a2a !important;
}
.tabulator .tabulator-footer .tabulator-page,
.tabulator .tabulator-footer .tabulator-page-size {
  background: #1a1a1a !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 3px !important;
}
/* page-size <select> needs the themed chevron (native arrow is stripped) */
.tabulator .tabulator-footer select.tabulator-page-size {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23949eb7' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.45rem center !important;
  background-size: 1.2em 1.2em !important;
  padding-right: 1.85rem !important;
}
.tabulator .tabulator-footer .tabulator-page:hover {
  background: #333 !important;
}
.tabulator .tabulator-footer .tabulator-page.active {
  background: rgb(var(--primary)) !important;
  border-color: rgb(var(--primary)) !important;
  color: #000 !important;
}

/* --- Flatpickr --- */
.flatpickr-calendar {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday {
  color: rgb(var(--primary)) !important;
  fill: rgb(var(--primary)) !important;
}
.flatpickr-day {
  color: #fff !important;
}
.flatpickr-day:hover {
  background: #333 !important;
  border-color: #333 !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: rgb(var(--primary)) !important;
  border-color: rgb(var(--primary)) !important;
  color: #000 !important;
}
.flatpickr-day.today {
  border-color: rgb(var(--primary)) !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
  color: rgba(255, 255, 255, 0.3) !important;
}
/* time section (enableTime) */
.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: 1px solid #333 !important;
}
.flatpickr-time,
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  background: #1a1a1a !important;
  color: #fff !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #333 !important;
}
.flatpickr-calendar .numInputWrapper span {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.flatpickr-calendar .numInputWrapper span:hover {
  background: #333 !important;
}
.flatpickr-calendar .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgb(var(--primary)) !important;
}
.flatpickr-calendar .numInputWrapper span.arrowDown:after {
  border-top-color: rgb(var(--primary)) !important;
}

/* --- Choices (enhanced select) --- */
.choices__inner {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 3px !important;
  color: #fff !important;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgb(var(--primary) / 0.2) !important;
  color: #fff !important;
}
.choices__list--multiple .choices__item {
  background: rgb(var(--primary)) !important;
  border-color: rgb(var(--primary)) !important;
  color: #000 !important;
  border-radius: 2px !important;
}

/* --- Swiper --- */
.swiper-button-next,
.swiper-button-prev {
  color: rgb(var(--primary)) !important;
}
.swiper-pagination-bullet-active {
  background: rgb(var(--primary)) !important;
}
/* Homepage Vision carousel: equal-height slides so every slide's CTA lands at
   the same height. Swiper leaves the wrapper at align-items:normal, so shorter
   slides keep their own height; force stretch + height:auto to equalise them
   (slide content uses h-full + mt-auto on the CTA to pin buttons to the bottom). */
#vision-swiper .swiper-wrapper {
  align-items: stretch;
}
#vision-swiper .swiper-slide {
  height: auto;
}
/* Homepage Vision carousel: arrows live outside the (overflow-hidden) swiper,
   nudged into the container gutter so they sit clear of the slide content.
   Like the pagination dots, the visible chevron stays small but transparent
   padding enlarges the clickable target (background-clip keeps the button
   background on the small core only). The theme sizes .swiper-button-* with
   !important, so width/height/padding need !important to win. */
#vision-prev,
#vision-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  z-index: 10;
  box-sizing: content-box !important;
  width: 1.563rem !important;
  height: 1.563rem !important;
  padding: 14px !important;
  background-clip: content-box !important;
}
#vision-prev {
  left: -52px;
}
#vision-next {
  right: -52px;
}
/* Below xl the centered container has no side gutter to hold the
   negative-offset arrows, so #vision-next overflows the viewport and causes
   horizontal scroll. Hide the arrows there; swipe and the pagination dots
   cover navigation on mobile and tablet. */
@media (max-width: 1279px) {
  #vision-prev,
  #vision-next {
    display: none;
  }
}

/* Dashboard tab strips (My Dashboard, Manage Community): many tabs in a
   non-wrapping flex row overflow the page at tablet widths. As a flex child the
   nav has min-width:auto and won't shrink, so the row pushes the document wide.
   From sm up, let the strip shrink and scroll horizontally instead. (Mobile
   stacks the tabs full-width, so this only applies at sm+.) */
@media (min-width: 640px) {
  .fgm-tablist-scroll {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
/* Easier-to-click pagination dots: the visible dash stays small, but a
   transparent padding box enlarges the clickable target (background-clip keeps
   the colour on the dash only). */
#vision-swiper .swiper-pagination-bullet {
  box-sizing: content-box !important;
  width: 22px !important;
  height: 5px !important;
  border-radius: 4px !important;
  padding: 12px 5px;
  margin: 0 1px !important;
  background-clip: content-box !important;
  opacity: 0.45;
  transition: opacity 0.2s;
}
#vision-swiper .swiper-pagination-bullet:hover {
  opacity: 0.8;
}
#vision-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Size utilities missing from the purged Tailwind build. The store/season
   templates size product/gallery images with these; without them images fall
   back to natural size. Standard Tailwind values, safe to provide globally.
   ------------------------------------------------------------------------- */
.h-14 { height: 3.5rem; }
.w-14 { width: 3.5rem; }
.h-20 { height: 5rem; }
.h-48 { height: 12rem; }
.rounded { border-radius: 0.25rem; }

/* Equal-height row: makes .box children of grid columns fill the tallest column.
   Scoped via .fgm-eq-row so it never affects other grids. The row keeps the
   bottom spacing that the (now zeroed) per-box margin used to provide. */
.fgm-eq-row { margin-bottom: 1.5rem; }
.fgm-eq-row > [class*="col-span"] { display: flex; }
.fgm-eq-row > [class*="col-span"] > .box { flex: 1 1 auto; width: 100%; margin-bottom: 0; }
