/* ============================================================
   NAPPARYE — surcouche visuelle sur le thème BetLab "basic"
   Style : paris sportifs haïtien, bleu, clair (réf. BÈL PARYAJ)
   Chargé APRÈS main.css / custom.css / color.php.
   Ne touche à aucune logique — seulement l'apparence.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root {
  --nap-blue:      #1C60DA;
  --nap-blue-deep: #123F94;
  --nap-card:      #FFFFFF;
  --nap-paper:     #F1F3F7;
  --nap-line:      #E3E6EC;
  --nap-ink:       #16181F;
  --nap-muted:     #6B7280;
  --nap-green:     #1FA463;
  --nap-radius:    14px;
  /* pousse l'accent BetLab vers le bleu royal du mockup */
  --base: 217 78% 48%;
  --base-dark: 217 78% 40%;
}

/* ---------- base ---------- */
body {
  background: var(--nap-paper) !important;
  font-family: "Barlow", "Roboto", sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.section-title, .odd-list__title, .betslip-header span,
.title, .caption-title {
  font-family: "Barlow Condensed", "Inter", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .005em;
  text-transform: uppercase;
}

/* ---------- header : sombre -> blanc ---------- */
.header-primary {
  background: var(--nap-card) !important;
  border-bottom: 1px solid var(--nap-line);
  box-shadow: 0 1px 2px rgba(23, 24, 31, .04);
  padding: 8px 0 !important;
}
.header-primary a,
.header-primary span,
.header-primary .text-white,
.header-primary .language-text,
.primary-menu-container a,
.right-side-nav a,
.right-side-nav .text-white {
  color: var(--nap-ink) !important;
}
.header-primary .form-select {
  background-color: var(--nap-card) !important;
  color: var(--nap-ink) !important;
  border: 1px solid var(--nap-line) !important;
}
.logo { position: relative; }
.logo img { max-height: 36px; width: auto; }
.logo a::after {
  content: "PARYE \00B7 GENYEN \00B7 RETR\00C8";
  position: absolute; left: 2px; top: 100%;
  font: 700 .46rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: .14em; color: var(--nap-muted); white-space: nowrap;
}

/* ---------- barre catégories sport : sombre -> blanc, chips ---------- */
.sports-category {
  background: var(--nap-card) !important;
  border-color: var(--nap-line) !important;
}
.sports-category__link {
  color: var(--nap-ink) !important;
  border-radius: 10px;
}
.sports-category__link .sports-category__text,
.sports-category__link .sports-category__icon,
.sports-category__link .sports-category__icon i,
.sports-category__link .sports-category__icon svg { color: inherit !important; }
.sports-category__text {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important; letter-spacing: .04em;
}
.sports-category__link.active {
  background: var(--nap-blue) !important;
  color: #fff !important;
}
.sports-category__link.live-btn.active {
  background: #E01021 !important;
}
@media (max-width: 991px) {
  .sports-category {
    display: flex !important; flex-direction: row !important;
    width: 100% !important; height: auto !important;
    gap: 8px; overflow-x: auto; padding: 9px 12px;
    scrollbar-width: none;
  }
  .sports-category::-webkit-scrollbar { display: none; }
  .sports-category__list { display: contents; }
  .sports-category__link {
    flex: 0 0 auto; min-width: 66px;
    border: 1px solid var(--nap-line);
    padding: 8px 12px;
  }
}

/* ---------- bannière hero ---------- */
.banner-slider, .hero-slider, .banner_slide {
  border-radius: var(--nap-radius) !important;
  overflow: hidden;
}
.banner_image { object-fit: cover; border-radius: var(--nap-radius); }

/* ---------- ligues : pastilles ---------- */
.sub-category-drawer__list { gap: 8px; }
.sub-category-drawer__link {
  background: var(--nap-card);
  border: 1px solid var(--nap-line);
  border-radius: 10px;
  padding: 7px 12px;
}
.sub-category-drawer__link.active {
  background: var(--nap-blue);
  border-color: var(--nap-blue);
  color: #fff;
}
.sub-category-drawer__link.active .sub-category-drawer__text { color: #fff; }
.sub-category-drawer__text {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important; text-transform: uppercase;
}

/* ---------- cartes de match ---------- */
.betting-body .row { --bs-gutter-y: 12px; }
.sports-card {
  background: var(--nap-card) !important;
  border: 1px solid var(--nap-line);
  border-radius: var(--nap-radius) !important;
  box-shadow: 0 8px 22px -14px rgba(23, 24, 31, .18);
}
.sports-card-wrapper { padding: 4px; }
.odd-list__team-name, .team-select-title, .odd-list__team-divide {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important; text-transform: uppercase;
}
.odd-list__team-divide { color: var(--nap-muted) !important; }
.odd-list__title {
  color: var(--nap-blue) !important;
  letter-spacing: .06em;
}

/* ---------- boutons de cote ---------- */
.oddBtn, .odd-list__outcome, .option-odd-lists .oddBtn {
  border: 1px solid var(--nap-line) !important;
  border-radius: 9px !important;
  background: var(--nap-card) !important;
  color: var(--nap-ink) !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important;
  transition: background .15s, border-color .15s, color .15s;
}
.oddBtn:hover, .odd-list__outcome:hover { border-color: var(--nap-blue) !important; }
.oddBtn.active, .odd-list__outcome.active {
  background: var(--nap-blue) !important;
  border-color: var(--nap-blue) !important;
  color: #fff !important;
}
.oddBtn.active *, .odd-list__outcome.active * { color: #fff !important; }
.oddBtn.locked, .odd-list__outcome.locked { opacity: .5; }

/* ---------- boutons généraux ---------- */
.btn--base {
  background: var(--nap-blue) !important;
  border-color: var(--nap-blue) !important;
  border-radius: 9px !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important; letter-spacing: .03em;
}
.btn--base:hover { background: var(--nap-blue-deep) !important; border-color: var(--nap-blue-deep) !important; }
.btn { border-radius: 9px; }

/* ---------- bet slip ---------- */
.betslip { border-radius: 16px 16px 0 0; }
.betslip-header, .betslip__footer, .betslip__body { background: var(--nap-card); }
.bet-type__btn span {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important; text-transform: uppercase;
}
.bet-type__btn input:checked + span { color: var(--nap-blue) !important; }
.betslip__footer-btn, .betPlaceBtn, .bet-place-btn {
  background: var(--nap-blue) !important;
  border-color: var(--nap-blue) !important;
}
.total-return-amount { color: var(--nap-green) !important; font-weight: 700; }
.betslip-input-inner { color: var(--nap-muted); }

/* ---------- nav mobile bas : sombre -> blanc ---------- */
.app-nav {
  background: var(--nap-card) !important;
  border-top: 1px solid var(--nap-line) !important;
  box-shadow: 0 -6px 18px -12px rgba(23, 24, 31, .2);
}
.app-nav__menu-link, .app-nav__menu-text,
.app-nav__menu-icon i, .app-nav__drawer-link, .app-nav__drawer-text {
  color: var(--nap-muted) !important;
}
.app-nav__menu-text {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase;
}
.app-nav__menu-link.active,
.app-nav__menu-link.active .app-nav__menu-text,
.app-nav__menu-link.active .app-nav__menu-icon i { color: var(--nap-blue) !important; }
.app-nav__menu-icon img { filter: grayscale(1) brightness(0) opacity(.42); }
.app-nav__menu-link.active .app-nav__menu-icon img { filter: none; }
.app-nav__menu-link-important {
  background: var(--nap-blue) !important;
  border-color: var(--nap-blue) !important;
  color: #fff !important;
}
.open-betslip .bet-count { background: #E01021 !important; color: #fff !important; }
.app-nav__drawer { background: var(--nap-card) !important; }

/* ---------- footer ---------- */
.footer--light, .footer-bottom { background: var(--nap-card) !important; }
.footer--light *, .footer-bottom * { color: var(--nap-muted); }
.footer--light a:hover, .footer-bottom a:hover { color: var(--nap-blue); }

/* ---------- divers ---------- */
.preloader { background: var(--nap-paper) !important; }
.back-to-top .back-top { background: var(--nap-blue) !important; }
::selection { background: rgba(28, 96, 218, .18); }