/* Battlefield 6 Creator Program - Base Overrides */
@layer base;

@layer base {
  ea-social-link {
    margin-bottom: 23px;
    margin-right: 24px;
  }

  @media only screen and (min-width: 1024px) {
    ea-local-footer {
      padding: 12px 76px 12px;
    }

    ea-social-link {
      margin: 0 0 0 24px;
    }
  }

  @media only screen and (min-width: 768px) {
    ea-local-footer {
      padding: 12px 60px 40px;
    }
  }
}

/* Battlefield Official Fonts */
@font-face {
  font-family: 'BFBody';
  src: url('/fonts/battlefield/bf-text-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BFHead';
  src: url('/fonts/battlefield/bf-headline-narrow-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BFSubheader';
  src: url('/fonts/battlefield/bf-sub-headline-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BFMono';
  src: url('/fonts/battlefield/bf-mono-book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* CSS Custom Properties for consistent theming */
:root {

  /* Brand Colours */
  --bf6-metal-01: rgb(191, 202, 209);
  --bf6-metal-02: rgb(120, 144, 158);
  --bf6-metal-03: rgb(28, 30, 31);
  --bf6-heat-sig-orange: rgb(255, 60, 0);

  /* Base Colors */
  --bf6-black: #000000;
  --bf6-white: #ffffff;

  /* Common Named Colors */
  --bf6-primary: var(--bf6-heat-sig-orange);
  --bf6-success: #00ff00;
  --bf6-success-hover: #00cc00;
  --bf6-danger: #ff4444;
  --bf6-danger-light: #ff6666;
  --bf6-warning: rgb(247, 144, 9);
  --bf6-warning-alt: #ffa500;
  --bf6-warning-yellow: #ffaa00;
  --bf6-light: var(--bf6-metal-01);
  --bf6-muted: var(--bf6-metal-02);
  --bf6-dark: var(--bf6-metal-03);
  --bf6-dark-navy: #0B0F1A;
  --bf6-ultra-dark: #0a0a0a;

  /* Layout Specific */
  --bf6-neutral: rgb(47, 56, 62);
  --bf6-card-bg: rgb(36, 43, 47);
  --bf6-card-border: rgb(85, 102, 112);

  /* Platform Brand Colors */
  --bf6-twitch: #9146ff;
  --bf6-youtube: #ff0000;
  --bf6-twitter: #1da1f2;
  --bf6-tiktok: #ff0050;
  --bf6-discord: #5865f2;
  --bf6-kick: #53fc18;

  /* Forms */
  --bf6-input-background-color: rgb(36, 43, 47);
  --bf6-input-border-color: rgb(60, 72, 80);
  --bf6-input-text-color: rgb(238, 240, 241);
  --bf6-input-label-color: rgb(238, 240, 241);
  --bf6-input-text-color-disabled: rgb(119, 133, 141);
  --bf6-input-checkbox-background-color: var(--bf6-heat-sig-orange);
  --bf6-input-checkbox-background-color-hover: rgb(232, 55, 0);
  --bf6-input-checkbox-color: var(--bf6-black);
  --bf6-input-checkbox-border-radius: 0.25rem;

  --bf6-input-text-color-warning: rgb(247, 144, 9);
  --bf6-input-border-color-warning: rgb(247, 144, 9);
  --bf6-input-background-color-warning: rgb(147, 55, 13);

  /* Background images */
  --bf6-bg-landing: url('/images/battlefield/BF6_BaseBG.jpg');
  --bf6-bg-main: url('/images/battlefield/BF6_BaseBG.jpg');
  --app-styling-background: var(--bf6-metal-03) !important;
}

/* Font loading optimization - prevent FOUT */
.battlefield6:not(.fonts-loaded) {
  /* Use system fonts initially with similar metrics to prevent layout shift */
  font-synthesis: none;
}

/* Only hide main page headings, not modal content */
.battlefield6:not(.fonts-loaded) .page-title,
.battlefield6:not(.fonts-loaded) .section-title,
.battlefield6:not(.fonts-loaded) .bf6-page > h1,
.battlefield6:not(.fonts-loaded) .bf6-page > h2,
.battlefield6:not(.fonts-loaded) .bf6-page > h3 {
  /* Hide text briefly while fonts load to prevent FOUT */
  visibility: hidden;
}

.battlefield6.fonts-loaded .page-title,
.battlefield6.fonts-loaded .section-title,
.battlefield6.fonts-loaded .bf6-page > h1,
.battlefield6.fonts-loaded .bf6-page > h2,
.battlefield6.fonts-loaded .bf6-page > h3 {
  visibility: visible;
  animation: fadeInText 0.2s ease-in;
}

@keyframes fadeInText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Global font application for all Battlefield pages */
.battlefield6,
.bf6-page,
[class*="battlefield"],
body.battlefield6,
html.battlefield6 {
  font-family: 'BFBody', Arial, sans-serif !important;
}

/* Scroll freezing on modal open */
body.battlefield6,
html.battlefield6 {
  &.frozen {
    overflow: hidden;
  }
}


.bf6-page {
  font-family: 'BFBody', Arial, sans-serif;
  background-color: var(--bf6-dark);
  background-image: var(--bf6-bg-main);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--bf6-light);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* Simple font application for Battlefield pages - let inheritance do the work */
.bf6-page,
.battlefield6,
[class*="battlefield"] {
  font-family: 'BFBody', Arial, sans-serif;
}

/* Headers use headline font */
.bf6-page h1, .bf6-page h2, .bf6-page h3, .bf6-page h4, .bf6-page h5, .bf6-page h6,
.battlefield6 h1, .battlefield6 h2, .battlefield6 h3, .battlefield6 h4, .battlefield6 h5, .battlefield6 h6,
body.battlefield6 h1, body.battlefield6 h2, body.battlefield6 h3, body.battlefield6 h4, body.battlefield6 h5, body.battlefield6 h6 {
  font-family: 'BFHead', Arial, sans-serif;
}

.bf6-page code, .bf6-page pre, .bf6-page .mono,
.battlefield6 code, .battlefield6 pre, .battlefield6 .mono {
  font-family: 'BFMono', 'SF Mono', monospace !important;
}

/* Typography utilities */
.bf6-heading {
  font-family: 'BFHead', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bf6-subheading {
  font-family: 'BFSubheader', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bf6-mono {
  font-family: 'BFMono', 'SF Mono', 'Monaco', monospace;
}

/* Common UI patterns */
.bf6-card {
  border: 2px solid var(--bf6-muted);
  transition: all 0.3s ease;
  background-color: rgba(28, 30, 31, 0.95);
}

.bf6-card:hover {
  border-color: var(--bf6-primary);
}

.bf6-card-completed {
  border-color: var(--bf6-success);
  background-color: rgba(0, 255, 0, 0.05);
}

.bf6-button-primary {
  background-color: var(--bf6-primary);
  color: var(--bf6-dark);
  border: none;
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.1em;
}

.bf6-button-primary:hover {
  filter: brightness(1.1);
}

.bf6-button-success {
  background-color: var(--bf6-success);
  color: var(--bf6-dark);
  border: none;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Roboto Mono', monospace;
}

.bf6-button-success:hover {
  background-color: var(--bf6-success-hover);
}

/* Progress bars */
.bf6-progress-bar {
  width: 100%;
  background-color: var(--bf6-muted);
  overflow: hidden;
}

.bf6-progress-fill {
  height: 100%;
  background-color: var(--bf6-primary);
  transition: all 0.3s ease;
}

.bf6-progress-fill-completed {
  background-color: var(--bf6-success);
}

/* Icons and indicators */
.bf6-icon-content {
  background-color: var(--bf6-primary);
}

.bf6-icon-ingame {
  background-color: var(--bf6-muted);
}

.bf6-icon-unlocked {
  background-color: var(--bf6-success);
}

/* Status colors */
.bf6-text-primary {
  color: var(--bf6-primary);
}

.bf6-text-success {
  color: var(--bf6-success);
}

.bf6-text-muted {
  color: var(--bf6-muted);
}

.bf6-text-light {
  color: var(--bf6-light);
}

.bf6-text-dark {
  color: var(--bf6-dark);
}

/* Special effects */
.bf6-clip-angled {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);
}

.bf6-backdrop-blur {
  backdrop-filter: blur(10px);
}

.bf6-glassmorphism {
  background-color: rgba(28, 30, 31, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation active states */
.bf6-nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.25rem;
  height: 0.125rem;
  background-color: var(--bf6-primary);
}

.bf6-filter-tab-active::after {
  content: '';
  position: absolute;
  bottom: -0.125rem;
  left: 0;
  right: 0;
  height: 0.125rem;
  background-color: var(--bf6-primary);
}

/* Leaderboard rank colors */
:root {
  --bf6-rank-gold: #ffd700;
  --bf6-rank-silver: #c0c0c0;
  --bf6-rank-bronze: #cd7f32;
}

.bf6-rank-first {
  color: var(--bf6-rank-gold);
}

.bf6-rank-second {
  color: var(--bf6-rank-silver);
}

.bf6-rank-third {
  color: var(--bf6-rank-bronze);
}

.bf6-rank-up {
  color: var(--bf6-success);
}

.bf6-rank-down {
  color: var(--bf6-danger);
}

.bf6-rank-same {
  color: var(--bf6-muted);
}

/* Loading animations */
.bf6-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--bf6-muted);
  border-radius: 50%;
  border-top-color: var(--bf6-primary);
  animation: bf6-spin 1s ease-in-out infinite;
}

@keyframes bf6-spin {
  to { transform: rotate(360deg); }
}

/* Responsive utilities */
@media (max-width: 768px) {
  .bf6-mobile-stack {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .bf6-mobile-center {
    justify-content: center;
  }

  .bf6-mobile-hide {
    display: none;
  }
}

@media (max-width: 480px) {
  .bf6-xs-center {
    justify-content: center;
    text-align: center;
  }

  .bf6-xs-full {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

/* Grid layouts */
.bf6-grid-challenges {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.bf6-grid-rewards {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.bf6-grid-leaderboard {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem 1.5rem;
  grid-template-columns: 80px 1fr 150px 120px;
}

@media (max-width: 768px) {
  .bf6-grid-challenges {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .bf6-grid-rewards {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
  }

  .bf6-grid-leaderboard {
    grid-template-columns: 60px 1fr 100px;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .bf6-grid-rewards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Utility classes for common patterns */
.bf6-shadow-glow {
  box-shadow: 0 0 20px rgba(255, 60, 0, 0.3);
}

.bf6-shadow-success {
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
}

.bf6-border-glow {
  border-color: var(--bf6-primary);
  box-shadow: 0 0 10px rgba(255, 60, 0, 0.2);
}

.bf6-border-success {
  border-color: var(--bf6-success);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

/* Modal Header Background */
.bf6-modal-header {
  background-image: url('/images/battlefield/HUDElements-03_White.png') !important;
  background-repeat: repeat-x !important;
  background-position: bottom !important;
  background-size: auto 6px !important;
}

/* Modal Content Background */
.bf6-modal-content {
  background-image: url('/images/battlefield/textures_black.jpg') !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Modal Body Background */
.bf6-modal-body {
  background-image: url('/images/battlefield/textures_black.jpg') !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ANTI-TAILWIND - Maximum specificity to override Tailwind */
.bf6-modal-content.bf6-modal-content.bf6-modal-content input,
.bf6-modal-content.bf6-modal-content.bf6-modal-content textarea,
.bf6-modal-content.bf6-modal-content.bf6-modal-content select,
.bf6-modal-content.bf6-modal-content.bf6-modal-content button[role="combobox"],
.bf6-modal-content.bf6-modal-content.bf6-modal-content .UInput input,
.bf6-modal-content.bf6-modal-content.bf6-modal-content .UTextarea textarea,
.bf6-modal-content.bf6-modal-content.bf6-modal-content .USelectMenu button,
.bf6-modal-content.bf6-modal-content.bf6-modal-content [class*="ui-input"],
.bf6-modal-content.bf6-modal-content.bf6-modal-content [class*="ui-textarea"],
.bf6-modal-content.bf6-modal-content.bf6-modal-content [class*="ui-select-trigger"],
.bf6-modal-content.bf6-modal-content.bf6-modal-content div input,
.bf6-modal-content.bf6-modal-content.bf6-modal-content div textarea,
.bf6-modal-content.bf6-modal-content.bf6-modal-content div select,
.bf6-modal-content.bf6-modal-content.bf6-modal-content div button[role="combobox"] {
  background-color: var(--bf6-input-background-color) !important;
  background-image: none !important;
  background: var(--bf6-input-background-color) !important;
  border: 1px solid var(--bf6-input-border-color) !important;
  border-radius: 0px !important;
  color: var(--bf6-input-text-color) !important;
  font-family: 'BFBody', sans-serif !important;
  box-shadow: none !important;
  /* Override Tailwind ring utilities */
  --tw-ring-shadow: none !important;
  --tw-ring-color: transparent !important;
}

/* USelectMenu Dropdown - Target actual rendered classes */
.bf6-modal-content.bf6-modal-content.bf6-modal-content .USelectMenu,
.bf6-modal-content.bf6-modal-content.bf6-modal-content button.USelectMenu,
.bf6-modal-content.bf6-modal-content.bf6-modal-content button[aria-haspopup="listbox"] {
  background-color: var(--bf6-input-background-color) !important;
  background: var(--bf6-input-background-color) !important;
  border: 1px solid var(--bf6-input-border-color) !important;
  border-radius: 0px !important;
  color: var(--bf6-input-text-color) !important;
  font-family: 'BFBody', sans-serif !important;
  /* Override Tailwind variables */
  --ui-bg: var(--bf6-input-background-color) !important;
  --ui-border-accented: var(--bf6-input-border-color) !important;
  --ui-radius: 0px !important;
  --ui-text-highlighted: var(--bf6-input-text-color) !important;
}

/* USelectMenu Dropdown Panel - Override !bg-neutral-100 */
.bf6-modal-content [role="listbox"],
.bf6-modal-content.bf6-modal-content.bf6-modal-content [role="listbox"] {
  background-color: var(--bf6-input-background-color) !important;
  background: var(--bf6-input-background-color) !important;
  border: 1px solid var(--bf6-input-border-color) !important;
  border-radius: 0px !important;
}

/* USelectMenu Options - Override !text-neutral-900 hover:!bg-neutral-200 */
.bf6-modal-content [role="option"],
.bf6-modal-content .ui-select-single-value,
.bf6-modal-content.bf6-modal-content.bf6-modal-content [role="option"] {
  background-color: var(--bf6-input-background-color) !important;
  background: var(--bf6-input-background-color) !important;
  color: var(--bf6-input-text-color) !important;
  font-family: 'BFBody', sans-serif !important;
  border-radius: 0px !important;
}

.bf6-modal-content [role="option"]:hover,
.bf6-modal-content.bf6-modal-content.bf6-modal-content [role="option"]:hover,
.bf6-modal-content.bf6-modal-content.bf6-modal-content [role="option"].virtual-select-option--focused {
  background-color: var(--bf6-input-checkbox-background-color) !important;
  background: var(--bf6-input-checkbox-background-color) !important;
  color: var(--bf6-input-checkbox-color) !important;
}

.bf6-modal-content [role="option"][aria-selected="true"],
.bf6-modal-content.bf6-modal-content.bf6-modal-content [role="option"][aria-selected="true"] {
  background-color: var(--bf6-metal-03) !important;
  background: var(--bf6-metal-03) !important;
  color: #fff !important;
}

.bf6-modal-content input:hover,
.bf6-modal-content textarea:hover,
.bf6-modal-content select:hover,
.bf6-modal-content button[role="combobox"]:hover,
.bf6-modal-content .UInput input:hover,
.bf6-modal-content .UTextarea textarea:hover,
.bf6-modal-content .USelectMenu button:hover {
  background-color: var(--bf6-input-background-color) !important;
  border-color: var(--bf6-input-checkbox-background-color-hover) !important;
}

.bf6-modal-content input:focus,
.bf6-modal-content textarea:focus,
.bf6-modal-content select:focus,
.bf6-modal-content button[role="combobox"]:focus,
.bf6-modal-content .UInput input:focus,
.bf6-modal-content .UTextarea textarea:focus,
.bf6-modal-content .USelectMenu button:focus {
  background-color: var(--bf6-input-background-color) !important;
  border-color: var(--bf6-input-checkbox-background-color) !important;
  box-shadow: 0 0 10px rgba(255, 60, 0, 0.2) !important;
  outline: none !important;
}

/* NuxtUI Checkbox Complete Override - Apex Legends Style */
.bf6-modal-content .UCheckbox button[role="checkbox"] {
  background-color: var(--bf6-input-background-color) !important;
  border: 1px solid var(--bf6-input-border-color) !important;
  border-radius: var(--bf6-input-checkbox-border-radius) !important;
  width: 20px !important;
  height: 20px !important;
  position: relative !important;
  /* Remove all default styling */
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  color: transparent !important;
  cursor: pointer !important;
}

.bf6-modal-content .UCheckbox button[role="checkbox"]:not([aria-checked="true"]):not([data-state="checked"]):hover {
  background-color: rgba(255, 60, 0, 0.1) !important;
  border-color: var(--bf6-input-checkbox-background-color-hover) !important;
  box-shadow: 0 0 10px rgba(255, 60, 0, 0.2);
}

.bf6-modal-content .UCheckbox button[role="checkbox"][aria-checked="true"],
.bf6-modal-content .UCheckbox button[role="checkbox"][data-state="checked"] {
  background-color: var(--bf6-input-checkbox-background-color) !important;
  border-color: var(--bf6-input-checkbox-background-color) !important;
}

.bf6-modal-content .UCheckbox button[role="checkbox"][aria-checked="true"]:hover,
.bf6-modal-content .UCheckbox button[role="checkbox"][data-state="checked"]:hover {
  background-color: rgba(255, 60, 0, 0.8) !important;
  border-color: var(--bf6-input-checkbox-background-color) !important;
  box-shadow: 0 0 15px rgba(255, 60, 0, 0.4);
  transform: scale(1.05);
}

/* Hide default checkmark and create custom one */
.bf6-modal-content .UCheckbox button[role="checkbox"] svg,
.bf6-modal-content .UCheckbox button[role="checkbox"] .iconify,
.bf6-modal-content .UCheckbox button[role="checkbox"] .i-lucide\:check,
.bf6-modal-content .UCheckbox button[role="checkbox"] span[class*="i-lucide"] {
  display: none !important;
}

.bf6-modal-content .UCheckbox button[role="checkbox"][aria-checked="true"]::after,
.bf6-modal-content .UCheckbox button[role="checkbox"][data-state="checked"]::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  width: 5px !important;
  height: 10px !important;
  border: solid var(--bf6-input-checkbox-color) !important;
  border-width: 0 2px 2px 0 !important;
  z-index: 10 !important;
  background: none !important;
  box-shadow: none !important;
}

/* NuxtUI Radio Group Complete Override - Apex Legends Style */
.bf6-modal-content .URadioGroup button[role="radio"] {
  background-color: var(--bf6-input-background-color) !important;
  border: 1px solid var(--bf6-input-border-color) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  position: relative !important;
  /* Remove all default styling */
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  cursor: pointer !important;
}

.bf6-modal-content .URadioGroup button[role="radio"]:not([aria-checked="true"]):not([data-state="checked"]):hover {
  background-color: rgba(255, 60, 0, 0.1) !important;
  border-color: var(--bf6-input-checkbox-background-color-hover) !important;
  box-shadow: 0 0 10px rgba(255, 60, 0, 0.2);
}

.bf6-modal-content .URadioGroup button[role="radio"][aria-checked="true"],
.bf6-modal-content .URadioGroup button[role="radio"][data-state="checked"] {
  background-color: var(--bf6-input-checkbox-background-color) !important;
  border-color: var(--bf6-input-checkbox-background-color) !important;
}

.bf6-modal-content .URadioGroup button[role="radio"][aria-checked="true"]:hover,
.bf6-modal-content .URadioGroup button[role="radio"][data-state="checked"]:hover {
  background-color: rgba(255, 60, 0, 0.8) !important;
  border-color: var(--bf6-input-checkbox-background-color) !important;
  box-shadow: 0 0 15px rgba(255, 60, 0, 0.4);
  transform: scale(1.05);
}

/* Hide default radio dot and create custom one */
.bf6-modal-content .URadioGroup button[role="radio"] span {
  display: none !important;
}

.bf6-modal-content .URadioGroup button[role="radio"][aria-checked="true"]::after,
.bf6-modal-content .URadioGroup button[role="radio"][data-state="checked"]::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--bf6-input-checkbox-color) !important;
}

/* USelectMenu Dropdown */
.bf6-modal-content .USelectMenu,
.bf6-modal-content .USelectMenu > button,
.bf6-modal-content button[aria-haspopup="listbox"] {
  background-color: var(--bf6-input-background-color) !important;
  border: 1px solid var(--bf6-input-border-color) !important;
  border-radius: 0px !important;
  color: var(--bf6-input-text-color) !important;
  font-family: 'BFBody', sans-serif !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Override Tailwind CSS Variables at root level */
:root {
  --ui-bg: var(--bf6-input-background-color) !important;
  --ui-border-accented: var(--bf6-input-border-color) !important;
  --ui-radius: 0px !important;
  --ui-text-highlighted: var(--bf6-input-text-color) !important;
}

/* Form Field Labels - BF Mono Font */
.bf6-modal-content label,
.bf6-modal-content .UFormGroup label,
.bf6-modal-content .UFormField label,
.bf6-modal-content .UCheckbox label,
.bf6-modal-content .URadioGroup label,
.bf6-modal-content .USelectMenu label,
.bf6-modal-content fieldset legend,
.bf6-modal-content .UFormHeading,
.bf6-modal-content .text-neutral-100,
.bf6-modal-content .UFormField .text-neutral-100 {
  font-family: 'BFMono', monospace !important;
  text-transform: uppercase !important;
  color: var(--bf6-input-label-color) !important;
}

/* Battlefield 6 User Menu Styles */
.user-menu-navigation .user-menu-wrapper {
  background: #000 !important;
  border-radius: 0 !important;
}

.user-menu-navigation .user-menu-bar::before {
  background-color: #000 !important;
}

.user-menu-navigation .user-menu-inner::before {
  background-color: #000 !important;
}

/* User Menu Avatar - Circle with Orange Border */
.user-menu-navigation .user-menu-avatar-wrapper img {
  border-radius: 50% !important;
  border: 2px solid var(--bf6-primary) !important;
}

/* User Menu EA ID Styling */
.user-menu-ea-id {
  font-size: 12px !important;
  color: var(--bf6-primary) !important;
  font-family: 'BFBody', Arial, sans-serif !important;
}

.user-menu-ea-id.not-linked {
  font-style: italic !important;
  font-family: Arial, sans-serif !important;
  color: var(--bf6-muted) !important;
}

/* User Menu Social Links Bar - Orange Background with White Icons */
.user-menu-navigation .user-menu-networks {
  background: var(--bf6-primary) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
}

/* Social Link Icons - White Color */
.user-menu-navigation .user-menu-social-link {
  text-decoration: none !important;
  color: #fff !important;
}

.user-menu-navigation .user-menu-social-link i {
  color: #fff !important;
}

/* Unlinked social icons - slightly transparent white */
.user-menu-navigation .user-menu-unlinked .user-menu-social-link {
  opacity: 0.6 !important;
}

.user-menu-navigation .user-menu-unlinked .user-menu-social-link:hover {
  opacity: 1 !important;
}

/* User Menu Details Section */
.user-menu-navigation .user-menu-menu {
  background: #000 !important;
}

.user-menu-navigation .user-menu-menu .user-menu-details {
  color: #fff !important;
}

/* User Menu Footer Buttons */
.user-menu-navigation .user-menu-footer button {
  background: var(--bf6-primary) !important;
  color: #000 !important;
  border: none !important;
  font-family: 'BFSubheader', Arial, sans-serif !important;
  text-transform: uppercase !important;
}

.user-menu-navigation .user-menu-footer button:hover {
  background: var(--bf6-primary) !important;
  color: #fff !important;
}

/* Fix checkbox checkmark - remove white shadow */
.bf6-modal-content .UCheckbox .i-lucide\:check,
.bf6-modal-content .UCheckbox :where(.i-lucide\:check),
.bf6-modal-content button[role="checkbox"] .i-lucide\:check,
.bf6-modal-content button[role="checkbox"] :where(.i-lucide\:check),
.i-lucide\:check,
:where(.i-lucide\:check) {
  background-color: transparent !important;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important;
  box-shadow: none !important;
  filter: none !important;
}

/* New USelect Component Styles */
.bf6-modal-content .ui-select-trigger,
.bf6-modal-content .ui-select-trigger[role="combobox"] {
  background-color: var(--bf6-input-background-color) !important;
  background-image: none !important;
  border: 1px solid var(--bf6-input-border-color) !important;
  border-radius: 0 !important;
  color: var(--bf6-input-text-color) !important;
  height: auto !important;
  min-height: 2.75rem !important;
  max-height: 2.75rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.bf6-modal-content .ui-select-trigger:hover,
.bf6-modal-content .ui-select-trigger[role="combobox"]:hover {
  background-color: var(--bf6-input-background-color) !important;
  border-color: var(--bf6-primary) !important;
}

.bf6-modal-content .ui-select-trigger:focus,
.bf6-modal-content .ui-select-trigger[role="combobox"]:focus {
  background-color: var(--bf6-input-background-color) !important;
  border-color: var(--bf6-primary) !important;
  box-shadow: 0 0 10px rgba(255, 60, 0, 0.2) !important;
  outline: none !important;
}

/* USelect dropdown icons */
.bf6-modal-content .ui-select-chevron,
.bf6-modal-content .ui-select-icons svg {
  color: var(--bf6-input-text-color) !important;
}

/* USelect comma-separated values display */
.bf6-modal-content .ui-select-comma-values,
.bf6-modal-content .ui-select-display {
  display: inline-block !important;
  max-width: 268px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  color: var(--bf6-input-text-color) !important;
}

/* Virtual Select Option Styles */
.bf6-modal-content .virtual-select-option--selected {
  background-color: var(--bf6-metal-03) !important;
  color: #fff !important;
}

.bf6-modal-content .virtual-select-option--selected .virtual-select-option-label {
  color: #fff !important;
}

/* Selected option check icon styling - iconify uses mask, so we set background-color */
.bf6-modal-content .virtual-select-option-check,
.bf6-modal-content .virtual-select-option--selected .iconify,
.bf6-modal-content .virtual-select-option--selected .i-lucide\:check,
.bf6-modal-content .virtual-select-option--selected span.iconify,
.bf6-modal-content .virtual-select-option .iconify.i-lucide\:check,
.bf6-modal-content span.iconify.i-lucide\:check,
.bf6-modal-content [role="option"] .iconify,
.bf6-modal-content [role="option"] span[class*="i-lucide"] {
  color: #fff !important;
  fill: #fff !important;
  opacity: 1 !important;
  display: inline-block !important;
  visibility: visible !important;
  background-color: #fff !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

/* Focused option icon - black on orange background */
.bf6-modal-content .virtual-select-option--focused .iconify,
.bf6-modal-content .virtual-select-option--focused span.iconify,
.bf6-modal-content .virtual-select-option--focused .i-lucide\:check,
.bf6-modal-content .virtual-select-option--focused span[class*="i-lucide"] {
  color: #000 !important;
  fill: #000 !important;
  opacity: 1 !important;
  display: inline-block !important;
  visibility: visible !important;
  background-color: #000 !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

/* Ensure selected but not focused icons are white */
.bf6-modal-content .virtual-select-option--selected:not(.virtual-select-option--focused) .iconify,
.bf6-modal-content .virtual-select-option--selected:not(.virtual-select-option--focused) span[class*="i-lucide"] {
  color: #fff !important;
  fill: #fff !important;
  background-color: #fff !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}