/* ==========================================================================
   World Pro Racing — Global Stylesheet
   ========================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  --wpr-black:        #0A0A0F;
  --wpr-bg:           #07070B;
  --wpr-card:         #13131A;
  --wpr-red:          #BE202E;
  --wpr-blue:         #1863DC;
  --wpr-blue-light:   #1E76BC;
  --wpr-white:        #FFFFFF;
  --wpr-muted:        #8A8A9A;
  --wpr-radius-card:  8px;
  --wpr-radius-input: 4px;

  /* Type scale (fluid) — one source of truth for every title/heading/body role.
     Headings use Barlow Condensed; body/labels use Inter. */
  --fs-hero:        clamp(2.75rem, 6vw, 5rem);        /* main page hero        */
  --fs-page-title:  clamp(2.25rem, 4.5vw, 3.5rem);   /* page / large title    */
  --fs-section:     clamp(1.75rem, 3.5vw, 2.75rem);  /* section heading (h2)  */
  --fs-subsection:  clamp(1.375rem, 2.4vw, 1.75rem); /* sub heading (h3)      */
  --fs-card-title:  1.25rem;                         /* card / item title     */
  --fs-lead:        1.125rem;                        /* intro / lead text     */
  --fs-body:        1rem;
  --fs-small:       0.875rem;
  --fs-label:       0.75rem;                         /* eyebrow / micro-label */
  --lh-tight:       1.05;
  --lh-heading:     1.15;
  --lh-body:        1.6;
}

/* ==========================================================================
   Shared Utilities
   ========================================================================== */

.wpr-heading-accent { color: var(--wpr-red); }
[data-theme="light"] .wpr-heading-accent { color: var(--wpr-red); }

/* ==========================================================================
   Base Resets
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background-color: var(--wpr-black);
  color: var(--wpr-white);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--wpr-card);
  clip: auto !important;
  clip-path: none;
  color: var(--wpr-white);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 12px 20px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.wpr-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 480px) {
  .wpr-container { padding-left: 16px; padding-right: 16px; }
}

/* Grid systems */
.wpr-grid-2,
.wpr-grid-3,
.wpr-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .wpr-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .wpr-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .wpr-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Card Component
   ========================================================================== */

.wpr-card {
  background: var(--wpr-card);
  border-radius: var(--wpr-radius-card);
  padding: 24px;
}

/* ==========================================================================
   Button Components
   ========================================================================== */

.wpr-btn-primary {
  display: inline-block;
  background: var(--wpr-red);
  color: #fff;
  border: none;
  border-radius: var(--wpr-radius-input);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s ease;
  line-height: 1;
}

.wpr-btn-primary:hover,
.wpr-btn-primary:focus-visible {
  filter: brightness(1.1);
  color: #fff;
  text-decoration: none;
}

.wpr-btn-secondary {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--wpr-radius-input);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 28px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
  line-height: 1;
}

.wpr-btn-secondary:hover,
.wpr-btn-secondary:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
}

.wpr-btn--ghost {
  display: inline-block;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--wpr-radius-input);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  line-height: 1;
}
.wpr-btn--ghost:hover,
.wpr-btn--ghost:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .wpr-btn--ghost {
  color: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .wpr-btn--ghost:hover {
  color: #111;
  border-color: rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Button BEM system — used across events, home, modals
   ========================================================================== */

.wpr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 22px;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .2s, border-color .2s, color .2s, filter .2s;
  line-height: 1;
  white-space: nowrap;
  background: none;
  color: #fff;
}

.wpr-btn--red {
  background: var(--wpr-red);
  border-color: var(--wpr-red);
  color: #fff;
}
.wpr-btn--red:hover,
.wpr-btn--red:focus-visible { filter: brightness(1.12); color: #fff; text-decoration: none; }

.wpr-btn--outline {
  background: transparent;
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.wpr-btn--outline:hover,
.wpr-btn--outline:focus-visible { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }

.wpr-btn--sm { font-size: 12px; padding: 7px 16px; }

/* ==========================================================================
   Section Components
   ========================================================================== */

.wpr-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.wpr-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-section);
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
}

.wpr-badge {
  display: inline-block;
  font-size: .7rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.wpr-badge--cancelled { background: rgba(190,32,46,.15); color: var(--wpr-red); }

.wpr-slot-count { font-size: .8rem; color: rgba(255,255,255,.6); }

/* ==========================================================================
   Section Components (layout)
   ========================================================================== */

.wpr-section {
  padding: 80px 0;
}

.wpr-section-dark {
  background: var(--wpr-black);
}

.wpr-section-card {
  background: var(--wpr-card);
}

/* ==========================================================================
   Badge Components
   ========================================================================== */

.wpr-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wpr-badge-red {
  background: var(--wpr-red);
  color: #fff;
}

.wpr-badge-blue {
  background: var(--wpr-blue);
  color: #fff;
}
.wpr-badge a,
.wpr-badge-blue a,
.wpr-badge-red a {
  color: inherit !important;
  text-decoration: none !important;
}

.wpr-badge-muted {
  background: rgba(255, 255, 255, 0.1);
  color: var(--wpr-muted);
}

/* ==========================================================================
   Site Header
   ========================================================================== */

header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
}

header.site-header.is-scrolled {
  border-bottom-color: rgba(255,255,255,0.1);
}

header.site-header.is-scrolled {
  background: rgba(10, 10, 15, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* When mobile nav overlay is open, backdrop-filter creates a fixed-position
   containing block that clips the overlay to the header height. Disable it. */
header.site-header.is-scrolled.nav-is-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(10, 10, 15, 0.97);
}

.wpr-header-inner {
  display: flex;
  height: 72px;
  align-items: center;
}

/* Logo */
.wpr-header-logo,
.wp-block-site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  flex-grow: 0 !important;
  width: auto !important;
}

.wpr-header-logo img,
.wp-block-site-logo img {
  height: 36px !important;
  width: auto !important;
  max-width: none;
  display: block;
}

.wpr-logo-fallback {
  display: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
}

.wpr-header-logo img[src=""],
.wpr-header-logo img:not([src]) {
  display: none;
}

/* WP Navigation block — desktop links */
.site-header .wpr-nav-menu {
  flex: 1;
  justify-content: center;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-pages-list__item__link {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 14px !important;
  transition: color 0.2s ease;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-pages-list__item__link:hover {
  color: #fff !important;
}

/* Remove WP nav block default backgrounds */
.site-header .wp-block-navigation,
.site-header .wp-block-navigation .wp-block-navigation-item,
.site-header .wp-block-navigation .wp-block-page-list {
  background: transparent !important;
}

/* Submenu dropdown — matches dark brand, modern small dropdown */
.site-header .wp-block-navigation__submenu-container {
  background: rgba(15, 15, 22, 0.97) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  min-width: 180px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border-radius: 6px;
  margin: 0 !important;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 10px 14px !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
  width: 100%;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
  background: rgba(190, 32, 46, 0.15);
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: #fff !important;
}
[data-theme="light"] .site-header .wp-block-navigation__submenu-container {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: #1a1a1f !important;
}
[data-theme="light"] .site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
  background: rgba(190, 32, 46, 0.08);
}

/* WP nav mobile hamburger button */
.site-header .wp-block-navigation__responsive-container-open {
  color: #fff;
  padding: 8px;
}

.site-header .wp-block-navigation__responsive-container-open svg {
  display: block;
}

/* WP nav mobile overlay */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(10, 10, 15, 0.97) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-pages-list__item__link {
  color: #fff !important;
  font-size: 20px;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Reset browser default focus/current-page highlight in mobile overlay.
   WP nav block auto-focuses the first item on open, triggering focus-visible. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
.site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
  background: transparent !important;
  border: none !important;
  color: var(--wpr-red) !important;
}

/* WP nav close button */
.site-header .wp-block-navigation__responsive-container-close {
  color: #fff;
}

/* Right-side actions group */
.wpr-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Account icon button */
.wpr-account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.wpr-account-btn:hover,
.wpr-account-btn:focus-visible {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
  background: rgba(255,255,255,0.07);
  text-decoration: none;
}

body.logged-in .wpr-account-btn {
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

body.logged-in .wpr-account-btn::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--wpr-black);
}

/* Book Now CTA */
.site-header .header-cta {
  flex-shrink: 0;
  font-size: 13px;
  padding: 10px 18px;
}

[data-theme="light"] .site-header .header-cta { display: inline-flex; }

/* Book Now stays on mobile. It is the only conversion action in the header and
   most visitors arrive on a phone, so it is compacted rather than hidden.
   Height stays at the 44px touch minimum even as the padding tightens.
   The header row has to give up space for it: at 375px the original
   40px padding + 135px logo + two 24px gaps + actions came to 380px, which
   overflowed the viewport and clipped the button. Reclaimed from the header's
   own padding, gap and logo width only - .wpr-container is left alone because
   it sets the rhythm for every other page. */
@media (max-width: 640px) {
  .site-header .wpr-header-inner {
    gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-header .wpr-header-logo img,
  .site-header .wpr-header-logo .custom-logo {
    max-width: 112px;
    height: auto;
  }
  .wpr-header-actions { gap: 8px; }

  .site-header .header-cta,
  [data-theme="light"] .site-header .header-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}
/* Narrowest phones: tighten further before anything is allowed to clip. */
@media (max-width: 380px) {
  .site-header .wpr-header-inner { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .site-header .wpr-header-logo img,
  .site-header .wpr-header-logo .custom-logo { max-width: 96px; }
  .site-header .header-cta,
  [data-theme="light"] .site-header .header-cta {
    padding: 0 11px;
    font-size: 11px;
  }
}

/* Nav link hover — animated red underline */
.site-header .wp-block-navigation-item__content {
  position: relative !important;
  padding-bottom: 2px !important;
}

.site-header .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--wpr-red);
  border-radius: 2px;
  transition: left 0.2s ease, right 0.2s ease;
}

.site-header .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation-item__content[aria-current="page"]::after,
.site-header .current-menu-item .wp-block-navigation-item__content::after {
  left: 0;
  right: 0;
}

.site-header .wp-block-navigation-item__content[aria-current="page"],
.site-header .current-menu-item .wp-block-navigation-item__content {
  color: #fff !important;
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

/* Pre-footer CTA strip */
.footer-pre-cta {
  background: linear-gradient(135deg, var(--wpr-red) 0%, #8B0F1A 100%);
  position: relative;
  overflow: hidden;
}
.footer-pre-cta::after {
  content: '';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.footer-pre-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.footer-pre-cta__text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
}
.footer-pre-cta__text span {
  display: block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}
.footer-pre-cta__btn {
  display: inline-block;
  background: #fff;
  color: var(--wpr-red);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.footer-pre-cta__btn:hover { opacity: 0.9; }

/* Main footer body */
.footer-main {
  background: var(--wpr-card);
  position: relative;
}
.footer-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(190, 32, 46, 0.04) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(190, 32, 46, 0.04) 40px);
  pointer-events: none;
}
.footer-main .wpr-container { position: relative; }

/* Two columns from the smallest screen up. A single stacked column made the
   footer 1280px tall on a 390px phone - over one and a half screens of scrolling
   past 18 links to reach the bottom of the page. The link groups are narrow
   enough to sit side by side even at 320px; only the brand block needs the
   full width. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 16px;
  padding: 32px 0 28px;
}
/* Full width only while the grid is two columns. From 768px up the grid is
   1.8fr 1fr 1fr 1fr and the brand belongs in the first column, so spanning it
   there strands the links on a second row with an empty right half. */
.footer-grid > .footer-brand {
  grid-column: 1 / -1;
}

@media (min-width: 480px) {
  .footer-grid {
    gap: 24px;
  }
}

@media (min-width: 768px) {
  .footer-grid > .footer-brand {
    grid-column: auto;
  }
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 48px 0 40px;
  }
}

/* Brand column */
.footer-brand a {
  display: inline-block;
  text-decoration: none;
}
.footer-brand img {
  height: 32px;
  width: auto;
}
.footer-brand p {
  color: var(--wpr-muted);
  font-size: 13px;
  margin: 16px 0 20px;
  line-height: 1.7;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  text-decoration: none;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.5;
}
.footer-social__icon svg { transition: fill 0.2s ease; }
.footer-social__icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.footer-social__icon--instagram:hover svg { fill: #E1306C; }
.footer-social__icon--facebook:hover svg  { fill: #1877F2; }
.footer-social__icon--tiktok:hover svg    { fill: #ffffff; }
.footer-social__icon--youtube:hover svg   { fill: #FF0000; }
.footer-social__icon--discord:hover svg   { fill: #5865F2; }

/* Per-round broadcast links: Facebook/YouTube/Twitch/Kick icons + external-TV chip.
   Monochrome by default; each icon animates to its platform brand colour on hover. */
.wpr-broadcast { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
.wpr-broadcast__links { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
/* State heading / badge (drives before -> live -> replay) */
.wpr-broadcast__state { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; line-height: 1; }
.wpr-broadcast--section .wpr-broadcast__state { font-size: 20px; }
.wpr-broadcast--card .wpr-broadcast__state { font-size: 12px; letter-spacing: 0.16em; color: #8A8A9A; }
.wpr-broadcast__state--before { color: #C8CDD6; }
.wpr-broadcast--card .wpr-broadcast__state--before { color: #8A8A9A; }
/* LIVE badge — pulsing red dot */
.wpr-broadcast__live { display: inline-flex; align-items: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #FF2D2D; font-size: 20px; line-height: 1; }
.wpr-broadcast--card .wpr-broadcast__live { font-size: 13px; letter-spacing: 0.1em; }
.wpr-broadcast__live-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF2D2D; box-shadow: 0 0 0 0 rgba(255,45,45,0.6); animation: wpr-live-pulse 1.5s infinite; }
.wpr-broadcast--card .wpr-broadcast__live-dot { width: 8px; height: 8px; }
@keyframes wpr-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,45,45,0.55); } 70% { box-shadow: 0 0 0 9px rgba(255,45,45,0); } 100% { box-shadow: 0 0 0 0 rgba(255,45,45,0); } }
.wpr-broadcast__icon,
.wpr-broadcast__tv {
  display: inline-flex; align-items: center; justify-content: center; height: 34px;
  border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #8A8A9A; text-decoration: none;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.wpr-broadcast__icon { width: 34px; }
.wpr-broadcast__icon svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.wpr-broadcast__icon:hover,
.wpr-broadcast__tv:hover { transform: translateY(-2px); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.wpr-broadcast__icon--facebook:hover { color: #1877F2; }
.wpr-broadcast__icon--youtube:hover  { color: #FF0000; }
.wpr-broadcast__icon--twitch:hover   { color: #9146FF; }
.wpr-broadcast__icon--kick:hover     { color: #53FC18; }
.wpr-broadcast__tv { gap: 7px; padding: 0 13px; color: #C8CDD6; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; }
.wpr-broadcast__tv svg { width: 16px; height: 16px; }
.wpr-broadcast__tv:hover { color: #fff; border-color: rgba(190,32,46,0.45); background: rgba(190,32,46,0.12); }

/* Event page "Watch this round" section (top of the Overview tab) */
.wpr-event-watch { margin: 0 0 26px; padding: 18px 20px; background: #13131A; border: 1px solid #2A2A35; border-left: 3px solid #BE202E; border-radius: 6px; }
.wpr-event-watch .wpr-broadcast { margin-top: 0; }

/* ==========================================================================
   Broadcast Team — commentators + race control (director + stewards) (championship + event pages)
   ========================================================================== */
.wpr-people { margin: 0 0 30px; }
.wpr-people__eyebrow { display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.25em; color: #BE202E; margin: 0 0 6px; }
.wpr-people__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.05; color: #fff; margin: 0 0 18px; }
.wpr-people__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.wpr-people__grid--single { grid-template-columns: minmax(0, 460px); }

.wpr-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 18px; background: #13131A; border: 1px solid #2A2A35; border-radius: 10px; transition: transform .18s ease, border-color .18s ease; }
.wpr-person:hover { transform: translateY(-3px); border-color: rgba(190,32,46,0.5); }
.wpr-person__avatar { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #0A0A0F; border: 2px solid #2A2A35; }
.wpr-person__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpr-person__avatar--initials { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 34px; color: #BE202E; background: rgba(190,32,46,0.12); border-color: rgba(190,32,46,0.35); }
.wpr-person__body { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wpr-person__role { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: #8A8A9A; }
.wpr-person__name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.1; color: #fff; }
.wpr-person__bio { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; color: #A0A0AE; margin: 4px 0 0; max-width: 34ch; }
.wpr-person__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.wpr-person__social { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #8A8A9A; text-decoration: none; transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease; }
.wpr-person__social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
/* Website glyph is a stroked globe, not a filled shape — keep it outlined. */
.wpr-person__social--website svg { fill: none; stroke: currentColor; stroke-width: 1.8px; }
.wpr-person__social:hover { transform: translateY(-2px); background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.wpr-person__social--instagram:hover { color: #E4405F; }
.wpr-person__social--x:hover        { color: #fff; }
.wpr-person__social--facebook:hover { color: #1877F2; }
.wpr-person__social--youtube:hover  { color: #FF0000; }
.wpr-person__social--twitch:hover   { color: #9146FF; }
.wpr-person__social--tiktok:hover   { color: #fff; }
.wpr-person__social--kick:hover     { color: #53FC18; }
.wpr-person__social--website:hover  { color: #BE202E; }

/* Race director inline variant (event/round page): horizontal + compact */
.wpr-people--inline { margin-bottom: 22px; }
.wpr-people--inline .wpr-person { flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 16px 18px; }
.wpr-people--inline .wpr-person__avatar { width: 64px; height: 64px; }
.wpr-people--inline .wpr-person__avatar--initials { font-size: 24px; }
.wpr-people--inline .wpr-person__body { align-items: flex-start; }
.wpr-people--inline .wpr-person__socials { justify-content: flex-start; }
.wpr-people--inline .wpr-person__bio { text-align: left; }

/* Race Control — Race Director + Stewards in one tidy officials row (director
   first). auto-fit + a capped width keeps 2 cards neatly side by side instead of
   stretching wide or leaving awkward empty tracks. */
.wpr-people__grid--officials { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: start; }
.wpr-people--inline .wpr-people__grid--officials { grid-template-columns: repeat(auto-fit, minmax(300px, 380px)); }

@media (max-width: 639px) {
  .wpr-people__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .wpr-people__title { font-size: 24px; }
  .wpr-person { padding: 18px 12px; }
  .wpr-person__avatar { width: 76px; height: 76px; }
  /* Inline officials (event/round horizontal cards): full width on phones —
     same specificity as the desktop rule above, later in source so it wins. */
  .wpr-people--inline .wpr-people__grid--officials { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Shared Mobile Card Table skeleton — @media (max-width:639px)
   Opt-in: add class "wpr-cardtable" to the <table> element.
   Each page stylesheet adds per-table overrides (prominence, sizing, colours).
   ========================================================================== */
@media (max-width: 639px) {
  .wpr-cardtable thead { display: none; }

  .wpr-cardtable tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: #13131A;
    border: 1px solid #2A2A35;
    border-left: 3px solid #2A2A35;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 0;
    overflow: hidden;
  }

  .wpr-cardtable td {
    padding: 8px 12px 6px;
    border-bottom: none;
    box-sizing: border-box;
  }

  /* data-label pseudo-element: 9px IBM Plex Mono uppercase label above each value */
  .wpr-cardtable td::before {
    content: attr(data-label);
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4A4A55;
    margin-bottom: 2px;
    font-weight: 400;
  }
}

/* Column headings */
.footer-col-heading {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wpr-red);
  margin: 0 0 16px;
}

/* Nav links (Navigate + Legal columns) */
.footer-nav nav a,
.footer-legal-col nav a {
  display: block;
  color: rgba(240, 240, 240, 0.7);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 0;
  transition: color 0.2s ease;
}
.footer-nav nav a:hover,
.footer-legal-col nav a:hover {
  color: var(--wpr-white);
}

/* Contact column */
.footer-contact p {
  color: rgba(240, 240, 240, 0.7);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
}

/* Bottom bar */
.footer-bottom {
  background: var(--wpr-card);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
}
.footer-copyright {
  color: var(--wpr-muted);
  font-size: 12px;
  margin: 0;
}
.footer-dev {
  color: var(--wpr-muted);
  font-size: 12px;
  margin: 0;
}
.footer-dev__heart {
  color: var(--wpr-red);
}
.footer-dev a {
  color: var(--wpr-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-dev a:hover {
  color: var(--wpr-white);
}

/* ── Footer + CTA Mobile Fixes ── */
@media (max-width: 600px) {
  .footer-pre-cta__inner { flex-direction: column; text-align: center; padding: 24px 16px; gap: 16px; }
  .footer-pre-cta__text { font-size: 22px; }
  .footer-brand p { margin: 10px 0 14px; }
  .footer-col-heading { margin-bottom: 10px; }
  .footer-nav nav a, .footer-legal-col nav a { padding: 3px 0; }
  .footer-bottom__inner { justify-content: center; text-align: center; }

}

/* ==========================================================================
   Legal Page Prose
   ========================================================================== */

.wp-block-group .wp-block-post-content h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
}
.wp-block-group .wp-block-post-content h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  color: #E8E8EC;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.wp-block-group .wp-block-post-content p,
.wp-block-group .wp-block-post-content li {
  color: #8A8A98;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.wp-block-group .wp-block-post-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.wp-block-group .wp-block-post-content a {
  color: #BE202E;
  text-decoration: none;
}
.wp-block-group .wp-block-post-content a:hover {
  text-decoration: underline;
}

/* ── Footer newsletter signup (pill, big headline) ────────────────────── */
.footer-newsletter__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 60px; padding-bottom: 60px; }
.footer-newsletter__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.04; color: #fff; margin: 0 0 14px; }
.footer-newsletter__sub { margin: 0; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1.6; max-width: 420px; }
/* min-width:0 lets the grid columns shrink so the pill never exceeds its track. */
.footer-newsletter__text, .footer-newsletter__form-wrap { min-width: 0; }
.footer-newsletter__form-wrap { width: 100%; }
.wpr-newsletter-form { box-sizing: border-box; max-width: 100%; }
.wpr-newsletter-form { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 999px; padding: 7px 7px 7px 24px; box-shadow: 0 14px 36px rgba(0,0,0,.4); position: relative; }
.wpr-newsletter-form__input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: #14141a; font-size: 16px; font-family: 'Inter', sans-serif; padding: 13px 0; }
.wpr-newsletter-form__input::placeholder { color: #8a8a95; }
.wpr-newsletter-form__btn { flex-shrink: 0; background: var(--wpr-red); color: #fff; border: none; border-radius: 999px; padding: 14px 32px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: filter .15s; white-space: nowrap; }
.wpr-newsletter-form__btn:hover { filter: brightness(1.08); }

/* Nothing should compete with the form on the page where money changes hands.
   The red band tells a customer to "Book your session" while they are already
   booking one, and points back to the start of the flow. The newsletter input is
   white on a dark page, which made it higher contrast than the Continue button
   and pulled the eye off the actual action.
   Keyed off the booking flow itself, not a page id, so it survives the page
   being recreated or renamed. */
body:has(.wpr-progress-steps) .footer-pre-cta,
body:has(.wpr-progress-steps) .footer-newsletter {
  display: none;
}

/* Mobile compression. Must sit AFTER the base rules above: these selectors are
   the same specificity, so an earlier media query loses to a later plain rule
   no matter how narrow the viewport. The block was 325px of a 1130px footer,
   most of it the 60px top and bottom padding inherited from the desktop layout. */
@media (max-width: 600px) {
  .footer-newsletter__inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .footer-newsletter__title { font-size: 24px; margin: 0 0 8px; }
  .footer-newsletter__sub { font-size: 14px; line-height: 1.5; }
  .wpr-newsletter-form { padding: 6px 6px 6px 18px; }
  .wpr-newsletter-form__input { font-size: 15px; padding: 11px 0; }
  .wpr-newsletter-form__btn { padding: 12px 20px; font-size: 14px; }
}
.wpr-newsletter-form__btn:disabled { opacity: .6; cursor: default; }
.wpr-newsletter-form__hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.wpr-newsletter-form__msg { margin: 14px 4px 0; font-size: 13px; min-height: 1em; color: rgba(255,255,255,.4); }
@media (max-width: 820px) {
  .footer-newsletter__inner { grid-template-columns: 1fr; gap: 22px; padding-top: 44px; padding-bottom: 44px; }
  .footer-newsletter__sub { max-width: none; }
}
@media (max-width: 460px) {
  .wpr-newsletter-form { padding-left: 18px; }
  .wpr-newsletter-form__btn { padding: 12px 20px; font-size: 14px; }
  .wpr-newsletter-form__input { font-size: 15px; }
}

/* Clickable driver names -> public /driver/{id} profile (sitewide). */
.wpr-driver-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(190,32,46,0.85); transition: color 0.12s ease, border-color 0.12s ease; cursor: pointer; }
.wpr-driver-link:hover, .wpr-driver-link:focus { color: #BE202E; border-bottom-color: #BE202E; }

/* ── Livery submission (gated tab) ─────────────────────────────────────────── */
.wpr-livery { padding: 8px 0; }
.wpr-livery__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 28px; line-height: 1.05; margin: 0 0 6px; color: #fff; }
.wpr-livery__sub { color: #8A8A95; margin: 0 0 20px; }
.wpr-livery__status { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; background: #13131A; border: 1px solid #2A2A35; border-left: 3px solid #8A8A95; padding: 14px 18px; margin-bottom: 16px; }
.wpr-livery__status-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8A8A95; }
.wpr-livery__status-value { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; }
.wpr-livery__rev { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #8A8A95; margin-left: auto; }
.wpr-livery__note { background: rgba(232,194,74,.08); border-left: 3px solid #E8C24A; color: #E4D9B4; padding: 10px 14px; margin: 0 0 16px; }
.wpr-livery__problems { list-style: none; margin: 0 0 16px; padding: 0; }
.wpr-livery__problems li { background: rgba(190,32,46,.08); border-left: 3px solid #BE202E; color: #E8B0B5; padding: 9px 14px; margin-bottom: 6px; }
.wpr-livery__problems li.wpr-livery__problem--review { background: rgba(232,194,74,.08); border-left-color: #E8C24A; color: #E4D9B4; }
.wpr-livery__ok { color: #2ECC71; margin: 0 0 16px; }
.wpr-livery__guidelines { background: #13131A; border: 1px solid #2A2A35; padding: 16px 20px; margin-bottom: 18px; color: #C5C5CE; line-height: 1.6; }
.wpr-livery__guidelines p:last-child { margin-bottom: 0; }
.wpr-livery__upload { background: #13131A; border: 1px solid #2A2A35; padding: 18px 20px; margin-top: 18px; }
.wpr-livery__upload label { display: block; color: #fff; font-weight: 600; margin-bottom: 10px; }
.wpr-livery__upload label span { display: block; font-weight: 400; color: #8A8A95; font-size: 13px; margin-top: 3px; }
.wpr-livery__upload input[type=file] { display: block; color: #C5C5CE; margin-bottom: 14px; max-width: 100%; }
.wpr-livery__msg { margin: 12px 0 0; padding: 9px 14px; border-left: 3px solid #8A8A95; background: rgba(255,255,255,.03); color: #C5C5CE; }
.wpr-livery__msg--ok    { border-left-color: #2ECC71; color: #9BE8BC; }
.wpr-livery__msg--warn  { border-left-color: #E8C24A; color: #E4D9B4; }
.wpr-livery__msg--error { border-left-color: #BE202E; color: #E8B0B5; }

/* Livery: responsive + a11y hardening (Codex review). */
.wpr-livery { min-width: 0; overflow-wrap: anywhere; }
.wpr-livery__guidelines img, .wpr-livery__guidelines video { max-width: 100%; height: auto; }
.wpr-livery__guidelines table, .wpr-livery__guidelines pre { display: block; max-width: 100%; overflow-x: auto; }
.wpr-livery__upload input[type=file] { width: 100%; min-width: 0; }
/* Native file button is a real touch target on mobile. */
.wpr-livery__upload input[type=file]::file-selector-button {
    min-height: 44px; padding: 0 14px; margin-right: 12px; cursor: pointer;
    background: #1E1E27; color: #fff; border: 1px solid #3A3A47; border-radius: 2px;
    font-family: 'Inter', sans-serif; font-weight: 600;
}
.wpr-livery__upload input[type=file]::file-selector-button:hover { border-color: #BE202E; }
/* Scoped so the site-wide button metrics are untouched. */
.wpr-livery .wpr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
/* Dark UI hides the default focus ring; make it unmissable. */
.wpr-livery :is(a, button, input):focus-visible { outline: 3px solid #E8C24A; outline-offset: 3px; }

@media (max-width: 480px) {
    /* Stack the status row: margin-left:auto otherwise strands the revision on its
       own right-aligned line once the value wraps. */
    .wpr-livery__status { align-items: flex-start; gap: 4px; padding: 12px 14px; }
    .wpr-livery__status-label, .wpr-livery__status-value, .wpr-livery__rev { flex-basis: 100%; }
    .wpr-livery__rev { margin-left: 0; }
    .wpr-livery__guidelines, .wpr-livery__upload { padding: 14px; }
    .wpr-livery__title { font-size: 24px; }
    .wpr-livery .wpr-btn { width: 100%; }
    /* 11px uppercase at .2em tracking is punishing on a phone. */
    .wpr-livery__status-label { font-size: 12px; letter-spacing: .12em; }
}
.wpr-livery__preview { display:inline-block; background:rgba(190,32,46,.12); border-left:3px solid #BE202E; color:#E8B0B5; font-size:13px; padding:8px 12px; margin:18px 0 0; }

/* Livery status line inside the championship Rounds accordion (read-only; uploads live in My Account). */
.wpr-livery-status-line { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; background:#13131A; border:1px solid #2A2A35; border-left:3px solid #8A8A95; padding:11px 16px; margin:0 0 14px; }
.wpr-livery-status-line__k { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#8A8A95; }
.wpr-livery-status-line__v { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; font-size:17px; }
.wpr-livery-status-line a { margin-left:auto; color:#BE202E; font-weight:600; font-size:14px; }
@media (max-width:480px){ .wpr-livery-status-line a { margin-left:0; flex-basis:100%; } }

/* Livery regulations: one collapsible block at the top of My Liveries. */
.wpr-livery-regs { background:#13131A; border:1px solid #2A2A35; border-left:3px solid #E8C24A; margin:0 0 30px; }
.wpr-livery-regs__summary { cursor:pointer; list-style:none; padding:15px 20px; font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; font-size:19px; color:#fff; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.wpr-livery-regs__summary::-webkit-details-marker { display:none; }
.wpr-livery-regs__summary::after { content:'+'; margin-left:auto; color:#E8C24A; font-size:22px; line-height:1; }
.wpr-livery-regs[open] .wpr-livery-regs__summary::after { content:'\2212'; }
.wpr-livery-regs__hint { font-family:'Inter',sans-serif; font-weight:400; text-transform:none; font-size:13px; color:#8A8A95; }
.wpr-livery-regs__body { padding:0 20px 18px; color:#C5C5CE; line-height:1.65; border-top:1px solid #2A2A35; margin-top:-2px; padding-top:16px; }
.wpr-livery-regs__body p:first-child { margin-top:0; }
.wpr-livery-regs__body ul { margin:10px 0 14px; padding-left:20px; }
.wpr-livery-regs__body li { margin-bottom:6px; }
.wpr-livery-regs__summary:focus-visible { outline:3px solid #E8C24A; outline-offset:-3px; }
@media (max-width:480px){ .wpr-livery-regs__summary { font-size:17px; padding:13px 15px; } .wpr-livery-regs__body { padding:14px 15px 16px; } }

/* ── Kart design request panel (design_request mode) ─────────────────────── */
.wpr-livery__design { margin-top: 4px; }
.wpr-livery__swatch-group { margin-bottom: 18px; }
.wpr-livery__swatch-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: #C9C9D2; margin: 0 0 8px; }
.wpr-livery__swatch-label span { text-transform: none; letter-spacing: 0; color: #8A8A95; }
.wpr-livery__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.wpr-livery__swatch { width: 38px; height: 38px; border: 2px solid #2A2A35; border-radius: 4px; cursor: pointer; padding: 0; transition: transform .1s, border-color .1s; }
.wpr-livery__swatch:hover { transform: scale(1.12); border-color: #8A8A95; }
.wpr-livery__swatch.is-selected { border-color: var(--wpr-red); outline: 2px solid var(--wpr-red); outline-offset: 1px; }
.wpr-livery__logos-in { margin: 20px 0 16px; }
.wpr-livery__logo-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.wpr-livery__logo-row input[type=file] { flex: 1 1 260px; min-width: 0; }
.wpr-livery__logo-label { flex: 1 1 180px; background: #0F0F15; border: 1px solid #2A2A35; color: #F5F5F5; padding: 8px 10px; font-family: Inter, sans-serif; font-size: 14px; }
.wpr-livery__design-note { color: #8A8A95; font-size: 13px; margin: 0 0 10px; }
.wpr-livery__design-locked { background: #13131A; border: 1px solid #2A2A35; border-left: 3px solid #2ECC71; padding: 14px 18px; }
.wpr-livery__design-locked p { margin: 0 0 8px; }
.wpr-livery__design-locked p:last-child { margin-bottom: 0; color: #8A8A95; }
.wpr-livery__chip { display: inline-block; width: 22px; height: 22px; border: 1px solid #2A2A35; border-radius: 3px; vertical-align: middle; margin: 0 12px 0 6px; }
@media (max-width:480px){ .wpr-livery__swatch { width: 44px; height: 44px; } }