/* Theme White - Light Mode - Complete Override */

/* Apply white theme variables to the root when .theme-white is on html */
html.theme-white,
.theme-white {
  /* ===== BACKGROUNDS - WHITE ===== */
  --background: 0 0% 100%;
  --foreground: 220 15% 15%;

  --card: 0 0% 98%;
  --card-foreground: 220 15% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 15%;

  /* ===== PRIMARY - ORANGE (keep same) ===== */
  --primary: 24 100% 50%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 100% 50%;
  --secondary-foreground: 0 0% 100%;

  /* ===== MUTED - LIGHT GRAYS ===== */
  --muted: 220 10% 96%;
  --muted-foreground: 220 10% 40%;

  --accent: 24 100% 50%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  /* ===== BORDERS - LIGHT ===== */
  --border: 220 10% 88%;
  --input: 220 10% 88%;
  --ring: 24 100% 50%;

  /* ===== SHADOWS - SOFTER ===== */
  --shadow-glow: 0 0 30px hsl(24 100% 50% / 0.15);
  --shadow-card: 0 4px 20px hsl(220 20% 20% / 0.08);
  --shadow-float: 0 10px 40px hsl(220 20% 20% / 0.12);
}

/* ===== GLASS EFFECT - WHITE VERSION ===== */
.theme-white .glass-effect,
html.theme-white .glass-effect {
  background: hsl(0 0% 100% / 0.92) !important;
  backdrop-filter: blur(20px);
  border: 1px solid hsl(220 10% 88%) !important;
  box-shadow: 0 4px 20px hsl(220 20% 20% / 0.08) !important;
}

/* ===== NAVBAR - WHITE ===== */
.theme-white nav,
html.theme-white nav {
  background: hsl(0 0% 100% / 0.95) !important;
  border-bottom: 1px solid hsl(220 10% 90%);
  box-shadow: 0 2px 12px hsl(220 20% 20% / 0.06);
}

.theme-white nav a,
.theme-white nav span,
.theme-white nav button,
html.theme-white nav a,
html.theme-white nav span,
html.theme-white nav button {
  color: hsl(220 15% 20%) !important;
}

.theme-white nav .text-primary,
html.theme-white nav .text-primary {
  color: hsl(24 100% 50%) !important;
}

/* ===== HERO SECTION - KEEP VIDEO VISIBLE, TEXT READABLE ===== */
.theme-white #hero .absolute.inset-0.bg-background\/25,
html.theme-white #hero .absolute.inset-0.bg-background\/25 {
  background: linear-gradient(
    to bottom,
    hsl(0 0% 100% / 0.15) 0%,
    hsl(0 0% 100% / 0.05) 40%,
    hsl(0 0% 0% / 0.1) 100%
  ) !important;
}

/* Hero: keep all text WHITE with strong shadows for readability on video */
.theme-white #hero .text-white,
.theme-white #hero h1 .text-white,
html.theme-white #hero .text-white,
html.theme-white #hero h1 .text-white {
  color: hsl(0 0% 100%) !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.theme-white #hero .text-white\/90,
html.theme-white #hero .text-white\/90 {
  color: hsl(0 0% 100% / 0.9) !important;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.theme-white #hero .text-muted-foreground,
html.theme-white #hero .text-muted-foreground {
  color: hsl(0 0% 90%) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
}

.theme-white #hero .text-primary,
html.theme-white #hero .text-primary {
  color: hsl(24 100% 55%) !important;
  text-shadow:
    0 2px 10px rgba(255, 107, 0, 0.6),
    0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Hero stats glass cards - semi-dark for contrast on video */
.theme-white #hero .glass-effect,
html.theme-white #hero .glass-effect {
  background: hsl(0 0% 0% / 0.45) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid hsl(0 0% 100% / 0.15) !important;
  box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3) !important;
}

.theme-white #hero .glass-effect .text-primary,
html.theme-white #hero .glass-effect .text-primary {
  color: hsl(24 100% 55%) !important;
  text-shadow: 0 2px 8px rgba(255, 107, 0, 0.4) !important;
}

.theme-white #hero .glass-effect .text-muted-foreground,
html.theme-white #hero .glass-effect .text-muted-foreground {
  color: hsl(0 0% 80%) !important;
  text-shadow: none !important;
}

/* Hero outline button */
.theme-white #hero .bg-muted\/40,
html.theme-white #hero .bg-muted\/40 {
  background: hsl(0 0% 0% / 0.35) !important;
  border-color: hsl(0 0% 100% / 0.25) !important;
  color: hsl(0 0% 100%) !important;
}

.theme-white #hero .bg-muted\/40 *,
html.theme-white #hero .bg-muted\/40 * {
  color: hsl(0 0% 100%) !important;
}

/* ===== ALL SECTIONS - WHITE BACKGROUND ===== */
.theme-white section,
html.theme-white section {
  background-color: hsl(0 0% 100%) !important;
}

.theme-white .bg-background,
html.theme-white .bg-background {
  background-color: hsl(0 0% 100%) !important;
}

.theme-white .bg-card,
html.theme-white .bg-card {
  background-color: hsl(0 0% 98%) !important;
}

/* gradient-dark sections → white */
.theme-white .gradient-dark,
html.theme-white .gradient-dark {
  background: hsl(0 0% 100%) !important;
}

/* ===== TEXT COLORS - DARK FOR READABILITY ===== */
/* Generic text-white → dark (except inside hero, footer, overlays, colored backgrounds) */
.theme-white .text-white,
html.theme-white .text-white {
  color: hsl(220 15% 15%) !important;
}

.theme-white .text-foreground,
html.theme-white .text-foreground {
  color: hsl(220 15% 15%) !important;
}

.theme-white .text-muted-foreground,
html.theme-white .text-muted-foreground {
  color: hsl(220 10% 40%) !important;
}

/* Keep primary color orange */
.theme-white .text-primary,
html.theme-white .text-primary {
  color: hsl(24 100% 50%) !important;
}

/* ===== IMAGE CARDS - Proper presentation on white ===== */
/* Images inside cards get nice rounded corners, borders and shadows */
.theme-white .aspect-\[3\/4\],
.theme-white .aspect-\[4\/3\],
html.theme-white .aspect-\[3\/4\],
html.theme-white .aspect-\[4\/3\] {
  box-shadow: 0 8px 30px hsl(220 20% 20% / 0.15), 0 2px 8px hsl(220 20% 20% / 0.1) !important;
  border: 1px solid hsl(220 10% 90%) !important;
}

/* Keep text white INSIDE image overlay gradients (from-black, from-card) */
.theme-white .bg-gradient-to-t .text-white,
.theme-white [class*="from-black"] .text-white,
.theme-white .bg-gradient-to-t .text-base,
.theme-white .bg-gradient-to-t .text-sm,
.theme-white .bg-gradient-to-t p,
html.theme-white .bg-gradient-to-t .text-white,
html.theme-white [class*="from-black"] .text-white,
html.theme-white .bg-gradient-to-t .text-base,
html.theme-white .bg-gradient-to-t .text-sm,
html.theme-white .bg-gradient-to-t p {
  color: hsl(0 0% 100%) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* WhyParticipate & Inclusions: text inside image cards overlay */
.theme-white .aspect-\[3\/4\] .text-white,
.theme-white .aspect-\[3\/4\] h3,
.theme-white .aspect-\[3\/4\] p,
html.theme-white .aspect-\[3\/4\] .text-white,
html.theme-white .aspect-\[3\/4\] h3,
html.theme-white .aspect-\[3\/4\] p {
  color: hsl(0 0% 100%) !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Cards with colored backgrounds - keep white text */
.theme-white .bg-blue-500 *,
.theme-white .bg-green-500 *,
.theme-white .bg-purple-500 *,
.theme-white .bg-orange-500 *,
.theme-white .bg-cyan-500 *,
.theme-white .bg-pink-500 *,
.theme-white .bg-amber-500 *,
.theme-white .bg-indigo-500 *,
html.theme-white .bg-blue-500 *,
html.theme-white .bg-green-500 *,
html.theme-white .bg-purple-500 *,
html.theme-white .bg-orange-500 *,
html.theme-white .bg-cyan-500 *,
html.theme-white .bg-pink-500 *,
html.theme-white .bg-amber-500 *,
html.theme-white .bg-indigo-500 * {
  color: hsl(0 0% 100%) !important;
}

/* ===== SECTION TITLE text-white with text-shadow → remove shadow for white theme ===== */
.theme-white h2 .text-white,
.theme-white h3 .text-white,
html.theme-white h2 .text-white,
html.theme-white h3 .text-white {
  color: hsl(220 15% 15%) !important;
  text-shadow: none !important;
}

/* ===== CAROUSEL / LEAGUE CARDS ===== */
.theme-white .rounded-2xl.overflow-hidden.cursor-pointer,
html.theme-white .rounded-2xl.overflow-hidden.cursor-pointer {
  background: hsl(0 0% 100%) !important;
  border-color: hsl(220 10% 88%) !important;
  box-shadow: 0 4px 20px hsl(220 20% 20% / 0.1) !important;
}

/* Active carousel card */
.theme-white .border-2.border-primary,
html.theme-white .border-2.border-primary {
  box-shadow: 0 8px 30px hsl(24 100% 50% / 0.2), 0 4px 12px hsl(220 20% 20% / 0.1) !important;
}

/* ===== PALMARÈS MARQUEE CARDS ===== */
.theme-white .flex-shrink-0.w-\[300px\] .rounded-xl,
html.theme-white .flex-shrink-0.w-\[300px\] .rounded-xl {
  background: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 10% 88%) !important;
  box-shadow: 0 4px 20px hsl(220 20% 20% / 0.1) !important;
}

/* ===== RANKINGS SECTION CARDS ===== */
.theme-white .shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.4\)\],
html.theme-white .shadow-\[0_8px_30px_rgb\(0\,0\,0\,0\.4\)\] {
  box-shadow: 0 4px 20px hsl(220 20% 20% / 0.1), 0 1px 4px hsl(220 20% 20% / 0.06) !important;
}

/* Rankings: keep text white inside colored headers (from-slate, from-blue) */
.theme-white .bg-gradient-to-r.from-slate-700 *,
.theme-white .bg-gradient-to-r.from-blue-600 *,
html.theme-white .bg-gradient-to-r.from-slate-700 *,
html.theme-white .bg-gradient-to-r.from-blue-600 * {
  color: hsl(0 0% 100%) !important;
}

/* Rankings: image overlays keep white text */
.theme-white .from-black\/90 *,
html.theme-white .from-black\/90 * {
  color: hsl(0 0% 100%) !important;
}

/* ===== SPONSORS SECTION ===== */
.theme-white .w-40.h-40,
.theme-white .w-48.h-48,
html.theme-white .w-40.h-40,
html.theme-white .w-48.h-48 {
  box-shadow: 0 4px 20px hsl(220 20% 20% / 0.1) !important;
}

/* Gold sponsor cards */
.theme-white .w-24.h-24,
.theme-white .w-28.h-28,
html.theme-white .w-24.h-24,
html.theme-white .w-28.h-28 {
  box-shadow: 0 2px 12px hsl(220 20% 20% / 0.08) !important;
  border-color: hsl(220 10% 88%) !important;
}

/* ===== TESTIMONIAL / CARD backgrounds ===== */
.theme-white .bg-card\/50,
html.theme-white .bg-card\/50 {
  background: hsl(0 0% 98%) !important;
  box-shadow: 0 4px 20px hsl(220 20% 20% / 0.08) !important;
  border-color: hsl(220 10% 88%) !important;
}

.theme-white .bg-card\/30,
html.theme-white .bg-card\/30 {
  background: hsl(0 0% 98%) !important;
}

.theme-white .bg-card\/80,
html.theme-white .bg-card\/80 {
  background: hsl(0 0% 96%) !important;
}

/* ===== WhySponsor glass-effect cards ===== */
.theme-white .bg-background\/80,
html.theme-white .bg-background\/80 {
  background: hsl(0 0% 98%) !important;
}

/* ===== FOOTER - STAYS BLACK ===== */
.theme-white footer,
html.theme-white footer {
  background-color: hsl(220 15% 8%) !important;
}

.theme-white footer *,
html.theme-white footer * {
  color: hsl(0 0% 95%) !important;
}

.theme-white footer .text-muted-foreground,
html.theme-white footer .text-muted-foreground {
  color: hsl(220 10% 60%) !important;
}

.theme-white footer .text-primary,
html.theme-white footer .text-primary {
  color: hsl(24 100% 50%) !important;
}

.theme-white footer .bg-card,
html.theme-white footer .bg-card {
  background-color: hsl(220 15% 12%) !important;
}

.theme-white footer input,
.theme-white footer textarea,
html.theme-white footer input,
html.theme-white footer textarea {
  background-color: hsl(220 15% 15%) !important;
  border-color: hsl(220 10% 25%) !important;
  color: hsl(0 0% 100%) !important;
}

.theme-white footer input::placeholder,
.theme-white footer textarea::placeholder,
html.theme-white footer input::placeholder,
html.theme-white footer textarea::placeholder {
  color: hsl(220 10% 50%) !important;
}

/* ===== SCROLLBAR ===== */
.theme-white ::-webkit-scrollbar-track,
html.theme-white ::-webkit-scrollbar-track {
  background: hsl(0 0% 96%);
}

.theme-white ::-webkit-scrollbar-thumb,
html.theme-white ::-webkit-scrollbar-thumb {
  background: hsl(24 100% 50%);
}

/* ===== BUTTONS ===== */
.theme-white .border-foreground\/20,
html.theme-white .border-foreground\/20 {
  border-color: hsl(220 10% 80%) !important;
}

/* ===== CARD SHADOWS FOR DEPTH ===== */
.theme-white .shadow-2xl,
html.theme-white .shadow-2xl {
  box-shadow: 0 8px 30px hsl(220 20% 20% / 0.12) !important;
}

.theme-white .rounded-xl,
html.theme-white .rounded-xl {
  box-shadow: 0 2px 12px hsl(220 20% 20% / 0.06);
}

/* ===== PRIMARY BUTTONS - BRIGHT ORANGE WITH WHITE TEXT ===== */
.theme-white .bg-primary,
html.theme-white .bg-primary {
  background-color: hsl(24 100% 50%) !important;
  background: linear-gradient(135deg, hsl(24 100% 55%) 0%, hsl(24 100% 45%) 100%) !important;
}

.theme-white .bg-primary *,
.theme-white .bg-primary .text-white,
.theme-white button.bg-primary,
html.theme-white .bg-primary *,
html.theme-white .bg-primary .text-white,
html.theme-white button.bg-primary {
  color: hsl(0 0% 100%) !important;
}

/* Gradient primary buttons */
.theme-white .gradient-primary,
html.theme-white .gradient-primary {
  background: linear-gradient(135deg, hsl(24 100% 55%) 0%, hsl(24 100% 45%) 100%) !important;
  color: hsl(0 0% 100%) !important;
}

.theme-white .gradient-primary *,
html.theme-white .gradient-primary * {
  color: hsl(0 0% 100%) !important;
}

/* ===== DROPDOWN MENUS ===== */
.theme-white [role="menu"],
.theme-white [data-radix-popper-content-wrapper] > div,
html.theme-white [role="menu"],
html.theme-white [data-radix-popper-content-wrapper] > div {
  background-color: hsl(0 0% 100%) !important;
  border: 1px solid hsl(220 10% 88%) !important;
}

.theme-white [role="menuitem"],
html.theme-white [role="menuitem"] {
  color: hsl(220 15% 20%) !important;
}

.theme-white [role="menuitem"]:hover,
html.theme-white [role="menuitem"]:hover {
  background-color: hsl(220 10% 96%) !important;
}

/* ===== BACKGROUND GLOWS - Subtle for white ===== */
.theme-white .blur-\[150px\],
.theme-white .blur-\[120px\],
.theme-white .blur-\[200px\],
html.theme-white .blur-\[150px\],
html.theme-white .blur-\[120px\],
html.theme-white .blur-\[200px\] {
  opacity: 0.4 !important;
}

/* ===== NUMBER BADGE on image cards - keep dark/visible ===== */
.theme-white .bg-black\/50,
html.theme-white .bg-black\/50 {
  background: hsl(0 0% 0% / 0.5) !important;
}

.theme-white .bg-black\/50 span,
html.theme-white .bg-black\/50 span {
  color: hsl(0 0% 100%) !important;
}

/* ===== ICON BADGES inside image cards ===== */
.theme-white .border-white\/20,
html.theme-white .border-white\/20 {
  border-color: hsl(0 0% 100% / 0.2) !important;
}

/* Progress dots: white/30 → use muted on white bg */
.theme-white .bg-white\/30,
html.theme-white .bg-white\/30 {
  background: hsl(220 10% 80%) !important;
}

.theme-white .bg-white\/50,
html.theme-white .bg-white\/50 {
  background: hsl(220 10% 70%) !important;
}

/* ===== GLOW EFFECT on white → softer ===== */
.theme-white .glow-effect,
html.theme-white .glow-effect {
  box-shadow: 0 4px 20px hsl(24 100% 50% / 0.25) !important;
}

/* ===== EVENTS SECTION CARDS ===== */
.theme-white .from-card,
html.theme-white .from-card {
  --tw-gradient-from: hsl(0 0% 98%);
}

/* =============================================== */
/* ===== RESERVATION PAGE - WHITE THEME     ===== */
/* ===== Ultra-Modern Premium Design         ===== */
/* =============================================== */

/* --- Page background: Subtle mesh gradient --- */
html.theme-white .h-screen.bg-background {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 107, 0, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.03) 0%, transparent 60%),
    linear-gradient(180deg, #fefefe 0%, #f8faff 50%, #fff8f5 100%) !important;
}

/* --- Header bar --- */
html.theme-white .glass-effect.border-b {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 107, 0, 0.1) !important;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* --- Progress Steps --- */
html.theme-white .bg-primary {
  background: linear-gradient(135deg, #ff6b00, #ff8534) !important;
}

html.theme-white .ring-primary\/30 {
  --tw-ring-color: rgba(255, 107, 0, 0.2) !important;
}

html.theme-white .bg-muted {
  background: hsl(220 14% 92%) !important;
}

/* ==============================================
   TYPE SELECTION CARDS (Step 0)
   Frosted glass with color gradient accents
   ============================================== */
html.theme-white .reservation-type-card {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 252, 248, 0.95) 100%) !important;
  border: 1.5px solid rgba(230, 220, 210, 0.4) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.theme-white .reservation-type-card:hover {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 248, 240, 0.98) 100%) !important;
  border-color: rgba(255, 107, 0, 0.35) !important;
  box-shadow:
    0 20px 60px rgba(255, 107, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 107, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-6px) !important;
}

/* Type card icon containers */
html.theme-white .reservation-type-card .w-16.h-16 {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.08), rgba(255, 140, 50, 0.05)) !important;
  border: 2px solid rgba(255, 107, 0, 0.2) !important;
  box-shadow: 0 4px 15px rgba(255, 107, 0, 0.08) !important;
}

/* ==============================================
   ORGANISATION / FORM CARDS
   Elevated glass with colored left accent stripe
   ============================================== */
html.theme-white .reservation-card {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(250, 252, 255, 0.96) 100%) !important;
  border: 1px solid rgba(210, 218, 230, 0.45) !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 16px !important;
}

/* Demandeur - Warm orange */
html.theme-white .reservation-card-demandeur {
  background: linear-gradient(160deg,
    rgba(255, 252, 248, 0.99) 0%,
    rgba(255, 249, 244, 0.96) 50%,
    rgba(255, 255, 255, 0.98) 100%) !important;
  border: 1px solid rgba(255, 140, 50, 0.18) !important;
  border-left: 4px solid #ff6b00 !important;
  box-shadow:
    0 8px 30px rgba(255, 107, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Entreprise - Cool blue */
html.theme-white .reservation-card-entreprise {
  background: linear-gradient(160deg,
    rgba(248, 251, 255, 0.99) 0%,
    rgba(244, 249, 255, 0.96) 50%,
    rgba(255, 255, 255, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
  border-left: 4px solid #3b82f6 !important;
  box-shadow:
    0 8px 30px rgba(59, 130, 246, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Représentant - Fresh green */
html.theme-white .reservation-card-representant {
  background: linear-gradient(160deg,
    rgba(248, 255, 250, 0.99) 0%,
    rgba(244, 255, 248, 0.96) 50%,
    rgba(255, 255, 255, 0.98) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.18) !important;
  border-left: 4px solid #22c55e !important;
  box-shadow:
    0 8px 30px rgba(34, 197, 94, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Capitaine - Premium gold */
html.theme-white .reservation-card-capitaine {
  background: linear-gradient(160deg,
    rgba(255, 253, 245, 0.99) 0%,
    rgba(255, 250, 235, 0.96) 50%,
    rgba(255, 255, 255, 0.98) 100%) !important;
  border: 1px solid rgba(234, 179, 8, 0.22) !important;
  border-left: 4px solid #eab308 !important;
  box-shadow:
    0 8px 30px rgba(234, 179, 8, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Card sizing uniformity */
html.theme-white .reservation-card-demandeur,
html.theme-white .reservation-card-entreprise,
html.theme-white .reservation-card-representant,
html.theme-white .reservation-card-capitaine {
  min-height: 220px !important;
}

/* Team name card */
html.theme-white .reservation-card-team {
  background: linear-gradient(160deg,
    rgba(255, 252, 248, 0.99) 0%,
    rgba(250, 252, 255, 0.96) 100%) !important;
  border: 1px solid rgba(255, 107, 0, 0.12) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==============================================
   FORM INPUTS - Clean modern
   ============================================== */
html.theme-white .bg-background\/50,
html.theme-white input.bg-background\/50,
html.theme-white .bg-muted\/50,
html.theme-white input.bg-muted\/50 {
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  color: #111827 !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

html.theme-white .bg-background\/50:focus,
html.theme-white input.bg-background\/50:focus,
html.theme-white .bg-muted\/50:focus,
html.theme-white input.bg-muted\/50:focus {
  background: #ffffff !important;
  border-color: #ff6b00 !important;
  box-shadow:
    0 0 0 3px rgba(255, 107, 0, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.01) !important;
  outline: none !important;
}

html.theme-white .bg-background\/50::placeholder,
html.theme-white .bg-muted\/50::placeholder {
  color: #9ca3af !important;
}

html.theme-white .bg-muted\/30 {
  background: #f3f4f6 !important;
  border-radius: 10px !important;
}

/* ==============================================
   PRODUCT BUILDER - Option Cards
   Clean elevated cards with subtle color hints
   ============================================== */
html.theme-white .reservation-option-card {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 252, 255, 0.95) 100%) !important;
  border: 1.5px solid rgba(210, 218, 230, 0.5) !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  backdrop-filter: blur(12px) !important;
}

html.theme-white .reservation-option-card:hover {
  box-shadow:
    0 16px 50px rgba(255, 107, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 107, 0, 0.25) !important;
  transform: translateY(-4px) !important;
}

html.theme-white .reservation-option-card.is-selected {
  background: linear-gradient(160deg,
    rgba(255, 252, 248, 0.99) 0%,
    rgba(255, 248, 240, 0.96) 100%) !important;
  box-shadow:
    0 16px 50px rgba(255, 107, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==============================================
   PACK SELECTION CARDS
   Premium card with subtle shine
   ============================================== */
html.theme-white .reservation-pack-option {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(252, 250, 255, 0.95) 100%) !important;
  border: 1.5px solid rgba(200, 205, 220, 0.4) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html.theme-white .reservation-pack-option:hover {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.07),
    0 6px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-4px) !important;
}

html.theme-white .reservation-pack-option.is-selected {
  background: linear-gradient(160deg,
    rgba(255, 253, 250, 0.99) 0%,
    rgba(255, 248, 240, 0.96) 100%) !important;
  box-shadow:
    0 20px 60px rgba(255, 107, 0, 0.1),
    0 6px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==============================================
   PRODUCT RECAP CARD
   Premium elevated showcase
   ============================================== */
html.theme-white .reservation-product-recap {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(255, 252, 248, 0.97) 50%,
    rgba(250, 252, 255, 0.98) 100%) !important;
  border: 1.5px solid rgba(255, 107, 0, 0.15) !important;
  box-shadow:
    0 20px 60px rgba(255, 107, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html.theme-white .reservation-pack-card {
  background: linear-gradient(160deg,
    rgba(255, 253, 248, 0.98) 0%,
    rgba(255, 250, 242, 0.95) 100%) !important;
  box-shadow:
    0 12px 40px rgba(255, 107, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==============================================
   TEAM STEP - Player Cards
   Uniform clean cards
   ============================================== */
html.theme-white .reservation-player-card {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 252, 255, 0.95) 100%) !important;
  border: 1px solid rgba(210, 218, 230, 0.45) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

html.theme-white .reservation-player-card:hover {
  box-shadow:
    0 8px 28px rgba(255, 107, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 107, 0, 0.18) !important;
}

/* Captain player (gold accent) */
html.theme-white .reservation-player-card.is-captain,
html.theme-white .reservation-player-card:first-child {
  background: linear-gradient(160deg,
    rgba(255, 253, 242, 0.99) 0%,
    rgba(255, 250, 232, 0.96) 100%) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.3) !important;
  box-shadow:
    0 6px 24px rgba(234, 179, 8, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==============================================
   PAYMENT STEP
   ============================================== */
/* Recap bar */
html.theme-white .reservation-recap {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(250, 252, 255, 0.96) 100%) !important;
  border: 1px solid rgba(210, 218, 230, 0.4) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Payer & Method sections */
html.theme-white .reservation-payer-section,
html.theme-white .reservation-method-section {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(250, 252, 255, 0.95) 100%) !important;
  border: 1px solid rgba(210, 218, 230, 0.4) !important;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-radius: 16px !important;
}

/* Payer individual cards */
html.theme-white .reservation-payer-card {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 255, 0.95) 100%) !important;
  border: 1.5px solid rgba(210, 218, 230, 0.45) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}

html.theme-white .reservation-payer-card:hover {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px) !important;
}

html.theme-white .reservation-payer-card.is-selected {
  background: linear-gradient(160deg,
    rgba(255, 252, 248, 0.99) 0%,
    rgba(255, 248, 240, 0.97) 100%) !important;
  box-shadow:
    0 8px 30px rgba(255, 107, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Payment method cards */
html.theme-white .reservation-method-card {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(248, 250, 255, 0.95) 100%) !important;
  border: 1.5px solid rgba(210, 218, 230, 0.45) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-radius: 16px !important;
  transition: all 0.25s ease !important;
}

html.theme-white .reservation-method-card:hover {
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-3px) !important;
}

html.theme-white .reservation-method-card.is-selected {
  background: linear-gradient(160deg,
    rgba(255, 252, 248, 0.99) 0%,
    rgba(255, 248, 240, 0.97) 100%) !important;
  box-shadow:
    0 10px 35px rgba(255, 107, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==============================================
   CARD PAYMENT DIALOG
   Frosted glass popup
   ============================================== */
html.theme-white .reservation-card-dialog {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(250, 252, 255, 0.99) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.15) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 10px 30px rgba(59, 130, 246, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

html.theme-white .reservation-card-dialog label {
  color: #374151 !important;
}

/* ==============================================
   TEXT & GRADIENTS
   ============================================== */
html.theme-white .text-gradient {
  background: linear-gradient(135deg, #ff6b00, #ff8c33, #e85d00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.theme-white .bg-gradient-to-r.from-foreground {
  background: linear-gradient(to right, #1a1f2e, #ff6b00, #1a1f2e) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Primary badge backgrounds */
html.theme-white .bg-primary\/20 {
  background: rgba(255, 107, 0, 0.08) !important;
  border: 1px solid rgba(255, 107, 0, 0.12) !important;
  border-radius: 8px !important;
}

html.theme-white .bg-primary\/20 .text-primary {
  color: #e85d00 !important;
}

/* ==============================================
   SUCCESS SCREEN
   Light celebration with colorful accents
   ============================================== */
html.theme-white .reservation-success {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 107, 0, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8faff 40%, #fff8f5 70%, #ffffff 100%) !important;
}

html.theme-white .reservation-success-details {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(250, 252, 255, 0.97) 100%) !important;
  border: 1px solid rgba(210, 218, 230, 0.4) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  border-radius: 20px !important;
}

html.theme-white .fixed.inset-0.z-50 {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.99) 0%,
    rgba(255, 248, 243, 0.99) 50%,
    rgba(240, 244, 255, 0.99) 100%) !important;
}

/* Success confetti on light bg */
html.theme-white .reservation-success .absolute.w-3.h-3 {
  opacity: 0.7 !important;
}

/* ==============================================
   SELECT DROPDOWNS
   ============================================== */
html.theme-white [role="listbox"] {
  background: rgba(255, 255, 255, 0.99) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(210, 218, 230, 0.5) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
}

html.theme-white [role="option"] {
  color: #111827 !important;
  border-radius: 8px !important;
}

html.theme-white [role="option"]:hover,
html.theme-white [role="option"][data-highlighted] {
  background: rgba(255, 107, 0, 0.06) !important;
  color: #e85d00 !important;
}

/* ==============================================
   HEADING & FONT OVERRIDES
   ============================================== */
html.theme-white .font-heading {
  color: #111827 !important;
}

html.theme-white .trophy-winner-name.font-heading {
  color: #ffffff !important;
}

html.theme-white .reservation-card-demandeur .font-heading {
  color: #ea580c !important;
}

html.theme-white .reservation-card-entreprise .font-heading.text-blue-500 {
  color: #2563eb !important;
}

html.theme-white .reservation-card-representant .font-heading.text-green-500 {
  color: #16a34a !important;
}

html.theme-white .reservation-card-capitaine .font-heading.text-yellow-500 {
  color: #ca8a04 !important;
}

/* ==============================================
   BUTTONS
   ============================================== */
html.theme-white .gradient-primary {
  background: linear-gradient(135deg, #ff6b00, #ff8534, #e85d00) !important;
  color: #ffffff !important;
  box-shadow:
    0 8px 24px rgba(255, 107, 0, 0.3),
    0 2px 6px rgba(255, 107, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html.theme-white .gradient-primary:hover {
  box-shadow:
    0 12px 35px rgba(255, 107, 0, 0.4),
    0 4px 10px rgba(255, 107, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html.theme-white .gradient-primary,
html.theme-white .gradient-primary * {
  color: #ffffff !important;
}

/* Outline / Retour buttons */
html.theme-white .border-muted-foreground\/20 {
  border-color: rgba(210, 218, 230, 0.6) !important;
  color: #374151 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(8px) !important;
}

html.theme-white .border-muted-foreground\/20:hover {
  border-color: rgba(255, 107, 0, 0.25) !important;
  background: rgba(255, 250, 245, 0.95) !important;
  color: #ff6b00 !important;
}

/* ==============================================
   GLOW & EFFECTS - Subtle on white
   ============================================== */
html.theme-white .glow-effect {
  box-shadow:
    0 8px 28px rgba(255, 107, 0, 0.25),
    0 2px 8px rgba(255, 107, 0, 0.12) !important;
}

html.theme-white .blur-3xl {
  opacity: 0.12 !important;
}

/* ==============================================
   ICON BADGES in cards
   ============================================== */
html.theme-white .reservation-card .bg-primary\/20,
html.theme-white .reservation-card .bg-blue-500\/20,
html.theme-white .reservation-card .bg-green-500\/20,
html.theme-white .reservation-card .bg-yellow-500\/20 {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important;
}

/* ==============================================
   SCROLLBAR
   ============================================== */
html.theme-white .overflow-y-auto::-webkit-scrollbar {
  width: 5px !important;
}

html.theme-white .overflow-y-auto::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.02) !important;
  border-radius: 10px !important;
}

html.theme-white .overflow-y-auto::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff6b00, #ff8534) !important;
  border-radius: 10px !important;
}

/* ==============================================
   TRANSITIONS
   ============================================== */
html.theme-white .reservation-type-card,
html.theme-white .reservation-option-card,
html.theme-white .reservation-pack-option,
html.theme-white .reservation-payer-card,
html.theme-white .reservation-method-card,
html.theme-white .reservation-player-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==============================================
   STEP NUMBER BADGES
   ============================================== */
html.theme-white .w-5.h-5.rounded-full.bg-primary,
html.theme-white .w-5.h-5.rounded-full.bg-secondary {
  box-shadow: 0 3px 10px rgba(255, 107, 0, 0.25) !important;
}

/* Recap grid items */
html.theme-white .reservation-recap .bg-muted\/30 {
  background: #f3f4f6 !important;
  border-radius: 10px !important;
}

html.theme-white .reservation-recap .bg-primary\/20 {
  background: rgba(255, 107, 0, 0.06) !important;
  border: 1px solid rgba(255, 107, 0, 0.15) !important;
}

/* ==============================================
   DIALOG OVERLAY
   ============================================== */
html.theme-white [data-state="open"].fixed.inset-0 {
  background: rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(6px) !important;
}

/* ==============================================
   SELECT / COMBOBOX
   ============================================== */
html.theme-white .bg-background\/50[data-slot="select-trigger"],
html.theme-white button.bg-background\/50,
html.theme-white [role="combobox"].bg-background\/50 {
  background: #f9fafb !important;
  border: 1.5px solid #e5e7eb !important;
  color: #111827 !important;
}

/* ==============================================
   CAPTAIN STANDALONE CARD (Team flow)
   ============================================== */
html.theme-white .reservation-card-capitaine.max-w-lg {
  background: linear-gradient(160deg,
    rgba(255, 253, 242, 0.99) 0%,
    rgba(255, 250, 230, 0.97) 100%) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.25) !important;
  border-left: 5px solid #eab308 !important;
  box-shadow:
    0 20px 60px rgba(234, 179, 8, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* ==============================================
   MUTED FOREGROUND
   ============================================== */
html.theme-white .text-muted-foreground {
  color: #6b7280 !important;
}

/* ==============================================
   COLOR UTILITY OVERRIDES
   ============================================== */
html.theme-white .bg-primary\/20 {
  background: rgba(255, 107, 0, 0.08) !important;
}

html.theme-white .bg-blue-500\/20 {
  background: rgba(59, 130, 246, 0.08) !important;
}

html.theme-white .bg-green-500\/20 {
  background: rgba(34, 197, 94, 0.08) !important;
}

html.theme-white .bg-yellow-500\/20 {
  background: rgba(234, 179, 8, 0.08) !important;
}

/* ==============================================
   PLAYER COUNT SELECTION
   ============================================== */
html.theme-white .bg-muted\/30.border {
  background: #f3f4f6 !important;
  border: 1.5px solid #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

html.theme-white .bg-primary\/20.border-2.border-primary {
  background: rgba(255, 107, 0, 0.06) !important;
  border: 2px solid #ff6b00 !important;
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.12) !important;
}

/* Contact page — icon turns white when parent bg becomes primary (orange) */
.theme-white .contact-icon-box.bg-primary .contact-icon,
html.theme-white .contact-icon-box.bg-primary .contact-icon {
  color: hsl(0 0% 100%) !important;
}