/**
 * Odds On — brand tokens.
 * Dark-navy + electric-cyan palette. Loaded after parent Vite bundle.
 * Source: oddsoncompetitions.co.uk (live site extracted 2026-06-09).
 *
 * Apply skill: wp-apply-theme
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. Core brand tokens
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Primary — electric cyan */
  --color-primary:                    #00d4ff;
  --color-primary-dark:               #00a8cc;
  --color-primary-gradient-end:       #0066ff;
  --color-primary-gradient-end-light: #00b8ff;

  /* ── Accent — amber / golden */
  --color-accent:      #fbbf24;
  --color-accent-dark: #d97706;

  /* ── Pink accent — section badges (matches production oddsoncompetitions.co.uk) */
  --color-accent-pink: #ec4899;

  /* ── On-primary: dark text on cyan buttons */
  --color-on-primary: #0a0e27;

  /* ── Canvas (page background) */
  --color-background-light: #0a0e27;
  --color-background-dark:  #060916;

  /* ── Elevated surface — cards, header, footer (80% opacity, matches production) */
  --color-surface: #0f172acc;

  /* ── Subtle border — inactive tabs, dividers */
  --color-border-light: #252e55;

  /* ── Secondary — subtle navy card overlay */
  --color-secondary: #1a2340;

  /* ── Text */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #a0b4cc;
  --color-text-muted:     #6b82a0;

  /* ── Shadow */
  --shadow-primary: 0 10px 20px -10px rgba(0, 212, 255, 0.35);

  /* ── Primary CTA button gradient (matches production oddsoncompetitions.co.uk) */
  --color-button-gradient: linear-gradient(180deg, #00d4ff 0%, #1e63ff 100%);
  --radius-xl: 1.5rem;

  /* ── Gray scale (dark-theme: 50 = darkest surface, 900 = near-white) */
  --color-gray-50:  #1a2040;
  --color-gray-100: #1e2545;
  --color-gray-200: #252e55;
  --color-gray-300: #2f3d6b;
  --color-gray-400: #4a5a80;
  --color-gray-500: #6b7fa0;
  --color-gray-600: #8a9fba;
  --color-gray-700: #aabdd0;
  --color-gray-800: #c8d6e5;
  --color-gray-900: #e8edf8;

  /* ── Status triplets — dark-theme variants */
  --color-success:        #10b981;
  --color-danger:         #ef4444;
  --color-warning:        #f59e0b;
  --color-info:           #00d4ff;

  --color-success-bg:     #064e3b;
  --color-success-border: #059669;
  --color-success-text:   #6ee7b7;

  --color-danger-bg:      #7f1d1d;
  --color-danger-border:  #dc2626;
  --color-danger-text:    #fca5a5;

  --color-warning-bg:     #78350f;
  --color-warning-border: #d97706;
  --color-warning-text:   #fcd34d;

  --color-info-bg:        #0a1e35;
  --color-info-border:    #00a8cc;
  --color-info-text:      #00d4ff;

  /* ── Tailwind indigo scale → remapped to cyan family (prevents indigo bleed) */
  --color-indigo-50:  #0a0e27;
  --color-indigo-100: #0d1232;
  --color-indigo-200: #101840;
  --color-indigo-300: #1a2a60;
  --color-indigo-400: #2a4480;
  --color-indigo-500: #3a5fa0;
  --color-indigo-600: #00a8cc;
  --color-indigo-700: #00c0e8;
  --color-indigo-800: #00d4ff;
  --color-indigo-900: #7ff0ff;
  --color-indigo-950: #e0faff;

  /* ── Tailwind blue scale → remapped to cyan family */
  --color-blue-400: #00d4ff;
  --color-blue-500: #00b8e6;
  --color-blue-600: #00a8cc;

  /* ── Nera Core plugin bridge (future-safe; no-op if plugin not active) */
  --nera-primary:        #00d4ff;
  --nera-text:           #ffffff;
  --nera-text-secondary: #a0b4cc;
  --nera-bg:             #0a0e27;
  --nera-surface:        #0f172acc;
  --nera-border:         rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Surface panels on dark background
   bg-white panels should resolve to dark surface on this theme.
   ───────────────────────────────────────────────────────────────────────────── */
.bg-surface,
.bg-surface\/95 {
  background-color: var(--color-surface);
}

.bg-white {
  background-color: var(--color-surface);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. @utility overrides — gradient / shadow utilities
   Redeclare with brand tokens so parent's hardcoded-indigo versions lose.
   ───────────────────────────────────────────────────────────────────────────── */
.text-gradient-primary {
  background: linear-gradient(135deg, #00d4ff 0%, #00b8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-primary,
[class*='bg-gradient-primary'] {
  background: linear-gradient(135deg, #00d4ff, #0066ff);
}

.shadow-primary {
  box-shadow: 0 10px 20px -10px rgba(0, 212, 255, 0.35);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Section badge — pink pill (Browse by Category, Quick Guide, About, etc.)
   ───────────────────────────────────────────────────────────────────────────── */
.nera-section-badge-pink {
  background-color: rgba(236, 72, 153, 0.1);
  color: var(--color-accent-pink) !important;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.nera-section-badge-pink svg,
.nera-section-badge-pink .text-accent-pink {
  color: var(--color-accent-pink) !important;
}

.nera-card {
  background-color: var(--color-surface);
  border-radius: 1rem;
  border: 1px solid var(--color-border-light);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Primary CTA button — View All Competitions, etc.
   ───────────────────────────────────────────────────────────────────────────── */
.nera-btn-primary {
  background: var(--color-button-gradient);
  border-radius: var(--radius-xl);
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  color: #ffffff !important;
}

.nera-btn-primary:hover {
  translate: 0 -0.125rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  filter: brightness(110%);
  color: #ffffff !important;
}

.ncs-product-card__cta.nera-btn-primary {
  border-radius: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Quick Guide — icon box hover (group-hover utilities not in Vite scan)
   ───────────────────────────────────────────────────────────────────────────── */
#quick-guide .quick-guide-card.group:hover div[class*="bg-accent/10"] {
  background-color: var(--color-accent);
  color: var(--color-background-dark);
}

#quick-guide .quick-guide-card.group:hover div[class*="bg-accent/10"] svg {
  color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Credibility bar — surface + border-light (utilities not in Vite scan)
   ───────────────────────────────────────────────────────────────────────────── */
.credibility-section {
  background-color: var(--color-surface);
  border-color: var(--color-border-light);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7b. About section — image column (oddsoncompetitions.co.uk parity)
   ───────────────────────────────────────────────────────────────────────────── */
.about-image-container .about-image-wrapper {
  border: 0;
  border-radius: 2rem;
}

.about-image-container .about-floating-badge.nera-card {
  border-radius: 2rem;
  border-color: rgba(255, 255, 255, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. Site footer — surface bg + border-light (beats border-gray-200 utility)
   ───────────────────────────────────────────────────────────────────────────── */
#site-footer.ncs-site-footer {
  --ncs-footer-bg: var(--color-surface);
  --ncs-footer-border-top: var(--color-border-light);
  background-color: var(--color-surface);
  border-top-color: var(--color-border-light);
}

/* Bottom bar — production uses surface + border-light, not solid background-dark */
#site-footer.ncs-site-footer > .bg-background-dark {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
}

/* Brand logo — match production: w-auto max-w-[150px] object-contain object-left */
#site-footer.ncs-site-footer .lg\:col-span-2 .wp-block-image {
  width: auto;
  max-width: 150px;
  margin-bottom: 1.5rem;
}

#site-footer.ncs-site-footer .lg\:col-span-2 .wp-block-image img {
  width: auto;
  max-width: 150px;
  height: auto;
  object-fit: contain;
  object-position: left;
}

/* Footer bottom bar — payment labels (Visa, Mastercard, etc.) */
#site-footer.ncs-site-footer > .bg-background-dark .text-gray-400 {
  color: var(--color-text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8a. Contact hero — inlined page-hero duplicate in parent Twig (not overridable)
   ───────────────────────────────────────────────────────────────────────────── */
main.nera-contact-page > section.bg-gradient-to-br {
  background-image: none;
  background-color: transparent;
}

main.nera-contact-page > section .text-on-primary {
  color: var(--color-text-primary);
}

main.nera-contact-page > section .text-on-primary\/80 {
  color: var(--color-text-secondary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8c. Contact form — Fluent Forms (production parity: nera-contact-form-wrap)
   ───────────────────────────────────────────────────────────────────────────── */
main.nera-contact-page .nera-contact-form-wrap .ff-el-group input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
main.nera-contact-page .nera-contact-form-wrap .ff-el-group textarea,
main.nera-contact-page .nera-contact-form-wrap .ff-el-group select {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: 1.25rem;
  color: var(--color-text-primary);
  background-color: var(--color-surface) !important;
  border: 2px solid var(--color-border-light) !important;
  transition: all 0.2s;
}

main.nera-contact-page .nera-contact-form-wrap .ff-el-group input::placeholder,
main.nera-contact-page .nera-contact-form-wrap .ff-el-group textarea::placeholder {
  color: var(--color-text-muted);
}

main.nera-contact-page .nera-contact-form-wrap .ff-el-group input:focus,
main.nera-contact-page .nera-contact-form-wrap .ff-el-group textarea:focus,
main.nera-contact-page .nera-contact-form-wrap .ff-el-group select:focus {
  border-color: var(--color-primary) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

main.nera-contact-page .nera-contact-form-wrap .ff-el-group label,
main.nera-contact-page .nera-contact-form-wrap .ff-el-form-control-label {
  color: var(--color-text-primary);
  font-weight: 700;
}

main.nera-contact-page .nera-contact-form-wrap .ff-el-group,
main.nera-contact-page .nera-contact-form-wrap .ff-el-form-control-label {
  margin-bottom: 1rem;
}

main.nera-contact-page .nera-contact-form-wrap .fluentform,
main.nera-contact-page .nera-contact-form-wrap .ff-form-wrapper {
  background: transparent !important;
}

main.nera-contact-page .nera-contact-form-wrap .ff_submit_btn_wrapper {
  display: flex;
  justify-content: center;
}

main.nera-contact-page .nera-contact-form-wrap .fluentform button[type="submit"],
main.nera-contact-page .nera-contact-form-wrap .ff-btn-submit,
main.nera-contact-page .nera-contact-form-wrap input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  background: var(--color-button-gradient) !important;
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}

@media (min-width: 40rem) {
  main.nera-contact-page .nera-contact-form-wrap .fluentform button[type="submit"],
  main.nera-contact-page .nera-contact-form-wrap .ff-btn-submit,
  main.nera-contact-page .nera-contact-form-wrap input[type="submit"] {
    width: auto;
  }
}

main.nera-contact-page .nera-contact-form-wrap .fluentform button[type="submit"]:hover,
main.nera-contact-page .nera-contact-form-wrap .ff-btn-submit:hover,
main.nera-contact-page .nera-contact-form-wrap input[type="submit"]:hover {
  translate: 0 -0.125rem;
  filter: brightness(110%);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8b. Draw Results — top offset below sticky header
   (Tailwind pt-12/lg:pt-20 are not in the child build; use explicit spacing.)
   ───────────────────────────────────────────────────────────────────────────── */
main.nera-draw-results-page {
  padding-top: 2rem;
}

@media (min-width: 1024px) {
  main.nera-draw-results-page {
    padding-top: 5rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Site body background — transparent shells (cards stay bg-surface)
   Active when ACF image is set (body.odds-on-has-body-bg).
   ───────────────────────────────────────────────────────────────────────────── */
body.odds-on-has-body-bg #page,
body.odds-on-has-body-bg .site-content,
body.odds-on-has-body-bg #content,
body.odds-on-has-body-bg main.nera-homepage,
body.odds-on-has-body-bg main.nera-about-us-page,
body.odds-on-has-body-bg main.nera-draw-results-page,
body.odds-on-has-body-bg main.nera-contact-page,
body.odds-on-has-body-bg main.nera-winners-page,
body.odds-on-has-body-bg main.nera-product-listing,
body.odds-on-has-body-bg #primary.site-main {
  background-color: transparent !important;
  background-image: none !important;
}

/* Homepage + marketing section shells (parent + child components) */
body.odds-on-has-body-bg .ending-soon-section,
body.odds-on-has-body-bg #categories-competitions,
body.odds-on-has-body-bg #advanced-filter-competitions,
body.odds-on-has-body-bg .quick-guide-section,
body.odds-on-has-body-bg .about-section-premium,
body.odds-on-has-body-bg .about-mission-section,
body.odds-on-has-body-bg .about-transparency-section,
body.odds-on-has-body-bg .trust-features-section,
body.odds-on-has-body-bg .about-community-section,
body.odds-on-has-body-bg .about-hero-section,
body.odds-on-has-body-bg .hero-section#about-hero,
body.odds-on-has-body-bg .winners-section,
body.odds-on-has-body-bg main.nera-winners-page > section.bg-surface,
body.odds-on-has-body-bg main.nera-product-listing > section.bg-surface,
body.odds-on-has-body-bg .faq-section {
  background-color: transparent !important;
  background-image: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Toast notifications — readable text on dark surface
   Parent footer uses text-gray-800 (light-theme gray); site is always dark.
   ───────────────────────────────────────────────────────────────────────────── */
.fixed.top-20.right-6.z-\[9999\] .group.bg-surface {
  border-color: var(--color-border-light);
}

.fixed.top-20.right-6.z-\[9999\] .text-gray-800 {
  color: var(--color-text-primary) !important;
}

.fixed.top-20.right-6.z-\[9999\] button.text-gray-400 {
  color: var(--color-text-muted);
}

.fixed.top-20.right-6.z-\[9999\] button.text-gray-400:hover {
  color: var(--color-text-primary);
  background-color: var(--color-gray-100);
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. Gray text utilities — parent templates use light-theme gray semantics.
   Child Vite @theme resets --color-gray-* to dark values; map explicitly.
   ───────────────────────────────────────────────────────────────────────────── */
.text-gray-900,
.text-gray-800,
a.text-gray-900 {
  color: var(--color-text-primary);
}

a.text-gray-900:hover {
  color: var(--color-primary);
}

.text-gray-700 {
  color: var(--color-text-secondary);
}

.text-gray-600,
.text-gray-500 {
  color: var(--color-text-muted);
}

.bg-success-bg .text-gray-900,
.woocommerce-thankyou-order-received {
  color: var(--color-success-text);
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. Scroll-to-top — match parent bg-gray-900 (inverted scale breaks utility)
   ───────────────────────────────────────────────────────────────────────────── */
#nera-scroll-top {
  background-color: #111827 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

#nera-scroll-top:hover {
  background-color: #000000 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. Instant wins — light amber panels keep parent light-theme text
   StatsBar / winner cards use amber-50 backgrounds; global .text-gray-900 → white.
   ───────────────────────────────────────────────────────────────────────────── */
.instant-wins-section [class*='from-amber-50'] .text-gray-900 {
  color: #111827 !important;
}

.instant-wins-section [class*='from-amber-50'] .text-gray-800 {
  color: #1f2937 !important;
}

.instant-wins-section [class*='from-amber-50'] .text-gray-700 {
  color: #374151 !important;
}

.instant-wins-section [class*='from-amber-50'] .text-gray-600 {
  color: #4b5563 !important;
}

.instant-wins-section [class*='from-amber-50'] .text-gray-500 {
  color: #6b7280 !important;
}

.instant-wins-section [class*='from-amber-50'] .bg-gray-200 {
  background-color: #e5e7eb !important;
}

.instant-wins-section [class*='from-amber-50'] .border-gray-200 {
  border-color: #e5e7eb !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   15. Single product — related competitions section blends with page canvas
   ───────────────────────────────────────────────────────────────────────────── */
.single-product section:has(.related-competitions) {
  background-color: transparent !important;
}