/* =========================================================
   BcardPay Premium Skin (override)
   - Minimal, institutional, premium fintech
   - Keeps logo colors intact
   - Adds subtle 8-color accent aura without changing the logo
   ========================================================= */

:root{
  /* Base */
  --bg0:#070B14;
  --bg1:#0B1220;
  --panel: rgba(255,255,255,.04);
  --panel2: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.10);
  --text:#EAF0FF;
  --muted:#B7C3E0;

  /* Primary (match your fintech blue vibe) */
  --primary:#1F5ED9; /* BcardPay blue */
  --primary2:#2A74FF;
  --ok:#22C55E;
  --warn:#F59E0B;

  /* Radius & shadows */
  --r1:14px;
  --r2:18px;
  --r3:26px;
  --shadow1: 0 16px 40px rgba(0,0,0,.38);
  --shadow2: 0 10px 24px rgba(0,0,0,.28);

  /* Premium glass */
  --glass: blur(14px);
}

/* Page background: premium, calm, institutional */
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 700px at 12% 0%, rgba(31,94,217,.22), transparent 60%),
    radial-gradient(900px 600px at 88% 8%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(800px 450px at 60% 110%, rgba(168,85,247,.10), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  color: var(--text);
}

/* Typography */
h1,h2,h3{letter-spacing:-.02em}
h1{
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.06;
}
p{color: var(--muted)}
strong{color: var(--text)}

/* Top bar: glass + subtle bottom glow */
.top{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(11,18,32,.70);
  backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--line);
}
.top::after{
  content:"";
  display:block;
  height:1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(31,94,217,.35),
    rgba(34,197,94,.25),
    rgba(168,85,247,.25),
    rgba(255,255,255,0));
  opacity:.7;
}
.brand__logo{
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
.brand__name{
  font-weight: 900;
}
.brand__tagline{
  color: rgba(183,195,224,.95);
}

/* Nav links */
.nav__link{
  color: rgba(234,240,255,.88);
  opacity: .92;
  transition: .15s ease;
}
.nav__link:hover{opacity: 1; transform: translateY(-1px)}

/* Containers spacing */
.container{max-width: 1200px}

/* Hero: premium card */
.hero{
  margin-top: 14px;
}
.hero__content{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: clamp(16px, 2.2vw, 28px);
  box-shadow: var(--shadow1);
  position: relative;
  overflow: hidden;
}
.hero__content::before{
  /* 8-color aura ribbon (subtle) */
  content:"";
  position:absolute;
  inset:-2px -2px auto -2px;
  height: 6px;
  background: linear-gradient(90deg,
    #1F5ED9, /* blue */
    #8B5CF6, /* violet */
    #22C55E, /* green */
    #F59E0B, /* amber */
    #EF4444, /* red */
    #06B6D4, /* cyan */
    #A855F7, /* purple */
    #F97316  /* orange */
  );
  opacity: .9;
}
.hero__note{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.badge{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
}

/* Filters: premium controls */
.filters{
  margin-top: 18px;
  gap: 12px;
  align-items: end;
}
.field label{
  color: rgba(183,195,224,.95);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field select,
.field input{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: .16s ease;
}
.field select:focus,
.field input:focus{
  outline: none;
  border-color: rgba(31,94,217,.55);
  box-shadow: 0 0 0 4px rgba(31,94,217,.18);
}

/* Layout cards */
.map, .list{
  border-radius: var(--r3);
}
.map{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
.map__top{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.map__title{font-weight: 950}
.map__hint{color: var(--muted)}
.map__canvas{
  background: rgba(0,0,0,.18);
}
#mapFrame{
  filter: saturate(1.05) contrast(1.02);
}

/* List bar */
.list__bar{
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.list__title{font-weight: 950}

/* Agent cards: premium */
.card.agent{
  border-radius: var(--r3);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 30px rgba(0,0,0,.26);
  overflow: hidden;
  transition: .18s ease;
}
.card.agent:hover{
  transform: translateY(-2px);
  border-color: rgba(31,94,217,.28);
  box-shadow: 0 20px 44px rgba(0,0,0,.35);
}
.card__head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.agent__name{
  margin: 0;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.01em;
}
.agent__id{
  color: rgba(183,195,224,.9);
  font-weight: 800;
  font-size: 12px;
}

/* Rows */
.card__body{padding: 14px 16px}
.row{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.row:last-child{border-bottom: none}
.label{
  color: rgba(183,195,224,.95);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.value{color: var(--text)}

/* Pills & chips */
.pill{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.12);
}
.pill--blue{
  background: rgba(31,94,217,.14);
  border-color: rgba(31,94,217,.30);
}
.pill--gray{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: rgba(234,240,255,.88);
}
.pill--ok{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
}

.chip{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.92);
}
.chips{gap: 8px}

/* Buttons: premium */
.btn{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  letter-spacing: .01em;
  border: 1px solid rgba(255,255,255,.12);
  transition: .16s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn--primary, .btn{
  background: linear-gradient(180deg, rgba(31,94,217,.98), rgba(31,94,217,.78));
  box-shadow: 0 12px 26px rgba(31,94,217,.22);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 18px rgba(0,0,0,.14);
}
.btn--ghost:hover{
  border-color: rgba(31,94,217,.30);
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

/* Disabled state helper */
.is-disabled{ pointer-events:none; opacity:.55; filter: grayscale(.15); }

/* Security & CTA: premium panels */
.security__inner, .cta{
  border-radius: var(--r3);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
}
.security__title{
  font-weight: 950;
}
.security__text a{color: rgba(234,240,255,.95); text-decoration: underline}

.cta{
  margin-top: 14px;
  padding: 16px 18px;
  position: relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  inset:auto -20% 0 -20%;
  height: 140px;
  background: radial-gradient(closest-side, rgba(31,94,217,.18), transparent 70%);
}
.cta__title{font-weight: 950}

/* Footer */
.footer{
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.55);
  backdrop-filter: var(--glass);
}

/* Mobile refinements */
@media (max-width: 760px){
  .row{grid-template-columns: 1fr; gap: 6px}
  .label{opacity: .92}
  .btn{width: 100%}
  .card__foot{display:grid; gap:10px}
}



/* =========================
   PATCH LISIBILITÉ PREMIUM
   Garde le design, améliore le contraste
========================= */

/* Fond général */
body{
  color:#1f2937 !important;
}

/* Cartes */
.card,
.card.agent,
.panelBox,
.list__bar,
.hero__content,
.map,
.security__inner,
.cta{
  background:#f8f9fc !important;
  color:#1f2937 !important;
}

/* Titres principaux */
h1, h2, h3,
.agent__name,
.list__title,
.map__title,
.cta__title,
.security__title,
.panelTitle,
.agentRatingsTitle,
.agentCommentsTitle{
  color:#1f2937 !important;
  opacity:1 !important;
}

/* Sous-textes / textes secondaires */
.muted,
.brand__tagline,
.map__hint,
.card__sub,
.reviewDate,
.agent__id{
  color:#667085 !important;
  opacity:1 !important;
}

/* Labels */
.label,
.rateLabel,
.field label{
  color:#667085 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

/* Valeurs */
.value,
.reviewText,
.reviewName,
.ratingValue,
.rateNum,
.agentRatingsSummary,
.panelTitle{
  color:#1f2937 !important;
  opacity:1 !important;
}

/* Lignes de détail */
.row{
  border-bottom:1px dashed rgba(31,41,55,.10) !important;
}

/* Chips services */
.chip{
  background:#ffffff !important;
  border:1px solid #dbe3f0 !important;
  color:#344054 !important;
  font-weight:700 !important;
}

/* Pills type agent */
.pill{
  color:#24324a !important;
  opacity:1 !important;
  font-weight:800 !important;
}

.pill--blue{
  background:#eef4ff !important;
  border-color:#bcd0ff !important;
  color:#244aa5 !important;
}

.pill--gray{
  background:#f2f4f7 !important;
  border-color:#d0d5dd !important;
  color:#475467 !important;
}

.pill--ok{
  background:#eafbf0 !important;
  border-color:#b7ebc6 !important;
  color:#166534 !important;
}

/* Badge vérifié */
.pill--verified{
  background:#e8f1ff !important;
  border-color:#b7ccff !important;
  color:#2457c5 !important;
  box-shadow:0 6px 18px rgba(37,87,197,.12) !important;
}

/* Inputs / selects / textarea */
input,
select,
textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #d0d5dd !important;
  opacity:1 !important;
}

input::placeholder,
textarea::placeholder{
  color:#98a2b3 !important;
  opacity:1 !important;
}

/* Focus champs */
input:focus,
select:focus,
textarea:focus{
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.12) !important;
  outline:none !important;
}

/* Boutons */
.btn{
  font-weight:800 !important;
  opacity:1 !important;
}

.btn--ghost{
  background:#ffffff !important;
  color:#2457c5 !important;
  border:1px solid #d7e3ff !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
}

.btn--ghost:hover{
  background:#f5f9ff !important;
  color:#1d4ed8 !important;
}

.btn--primary,
.btn:not(.btn--ghost):not(.btn--danger){
  background:linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}

/* Bouton Appeler très visible */
.card__foot .btn:first-child{
  box-shadow:0 10px 24px rgba(37,99,235,.22) !important;
}

/* Avis / commentaire */
.review{
  background:#ffffff !important;
  border:1px solid #e4e7ec !important;
}

.reviewsBox,
.miniMap,
.panelBox{
  background:#fdfdff !important;
}

/* Étoiles */
.star{
  opacity:.28 !important;
  color:#d0d5dd !important;
}

.star--on{
  opacity:1 !important;
  color:#f4b400 !important;
}

/* Zone formulaire avis */
.reviewForm{
  border-top:1px dashed #d0d5dd !important;
}

/* Lien téléphone / texte cliquable */
a{
  color:#2457c5;
}

a:hover{
  color:#1d4ed8;
}

/* Header / navigation */
.top{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}

.nav__link{
  color:#344054 !important;
  opacity:1 !important;
}

.nav__link:hover{
  color:#1d4ed8 !important;
}

/* Ombres plus douces pour éviter l'effet "voile" */
.card.agent,
.card,
.panelBox,
.list__bar,
.hero__content{
  box-shadow:0 14px 30px rgba(15,23,42,.08) !important;
}

/* Mobile : lisibilité encore renforcée */
@media (max-width: 768px){
  .agent__name,
  h1, h2, h3{
    font-size:clamp(18px, 4vw, 24px) !important;
  }

  .label,
  .field label{
    font-size:12px !important;
  }

  .value,
  .reviewText,
  .btn{
    font-size:14px !important;
  }

  .card__foot{
    gap:8px !important;
  }

  .btn{
    min-height:44px !important;
  }
}


/* =========================
   PATCH LISIBILITÉ PREMIUM
   Garde le design, améliore le contraste
========================= */

/* Fond général */
body{
  color:#1f2937 !important;
}

/* Cartes */
.card,
.card.agent,
.panelBox,
.list__bar,
.hero__content,
.map,
.security__inner,
.cta{
  background:#f8f9fc !important;
  color:#1f2937 !important;
}

/* Titres principaux */
h1, h2, h3,
.agent__name,
.list__title,
.map__title,
.cta__title,
.security__title,
.panelTitle,
.agentRatingsTitle,
.agentCommentsTitle{
  color:#1f2937 !important;
  opacity:1 !important;
}

/* Sous-textes / textes secondaires */
.muted,
.brand__tagline,
.map__hint,
.card__sub,
.reviewDate,
.agent__id{
  color:#667085 !important;
  opacity:1 !important;
}

/* Labels */
.label,
.rateLabel,
.field label{
  color:#667085 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

/* Valeurs */
.value,
.reviewText,
.reviewName,
.ratingValue,
.rateNum,
.agentRatingsSummary,
.panelTitle{
  color:#1f2937 !important;
  opacity:1 !important;
}

/* Lignes de détail */
.row{
  border-bottom:1px dashed rgba(31,41,55,.10) !important;
}

/* Chips services */
.chip{
  background:#ffffff !important;
  border:1px solid #dbe3f0 !important;
  color:#344054 !important;
  font-weight:700 !important;
}

/* Pills type agent */
.pill{
  color:#24324a !important;
  opacity:1 !important;
  font-weight:800 !important;
}

.pill--blue{
  background:#eef4ff !important;
  border-color:#bcd0ff !important;
  color:#244aa5 !important;
}

.pill--gray{
  background:#f2f4f7 !important;
  border-color:#d0d5dd !important;
  color:#475467 !important;
}

.pill--ok{
  background:#eafbf0 !important;
  border-color:#b7ebc6 !important;
  color:#166534 !important;
}

/* Badge vérifié */
.pill--verified{
  background:#e8f1ff !important;
  border-color:#b7ccff !important;
  color:#2457c5 !important;
  box-shadow:0 6px 18px rgba(37,87,197,.12) !important;
}

/* Inputs / selects / textarea */
input,
select,
textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #d0d5dd !important;
  opacity:1 !important;
}

input::placeholder,
textarea::placeholder{
  color:#98a2b3 !important;
  opacity:1 !important;
}

/* Focus champs */
input:focus,
select:focus,
textarea:focus{
  border-color:#3b82f6 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.12) !important;
  outline:none !important;
}

/* Boutons */
.btn{
  font-weight:800 !important;
  opacity:1 !important;
}

.btn--ghost{
  background:#ffffff !important;
  color:#2457c5 !important;
  border:1px solid #d7e3ff !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
}

.btn--ghost:hover{
  background:#f5f9ff !important;
  color:#1d4ed8 !important;
}

.btn--primary,
.btn:not(.btn--ghost):not(.btn--danger){
  background:linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}

/* Bouton Appeler très visible */
.card__foot .btn:first-child{
  box-shadow:0 10px 24px rgba(37,99,235,.22) !important;
}

/* Avis / commentaire */
.review{
  background:#ffffff !important;
  border:1px solid #e4e7ec !important;
}

.reviewsBox,
.miniMap,
.panelBox{
  background:#fdfdff !important;
}

/* Étoiles */
.star{
  opacity:.28 !important;
  color:#d0d5dd !important;
}

.star--on{
  opacity:1 !important;
  color:#f4b400 !important;
}

/* Zone formulaire avis */
.reviewForm{
  border-top:1px dashed #d0d5dd !important;
}

/* Lien téléphone / texte cliquable */
a{
  color:#2457c5;
}

a:hover{
  color:#1d4ed8;
}

/* Header / navigation */
.top{
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}

.nav__link{
  color:#344054 !important;
  opacity:1 !important;
}

.nav__link:hover{
  color:#1d4ed8 !important;
}

/* Ombres plus douces pour éviter l'effet "voile" */
.card.agent,
.card,
.panelBox,
.list__bar,
.hero__content{
  box-shadow:0 14px 30px rgba(15,23,42,.08) !important;
}

/* Mobile : lisibilité encore renforcée */
@media (max-width: 768px){
  .agent__name,
  h1, h2, h3{
    font-size:clamp(18px, 4vw, 24px) !important;
  }

  .label,
  .field label{
    font-size:12px !important;
  }

  .value,
  .reviewText,
  .btn{
    font-size:14px !important;
  }

  .card__foot{
    gap:8px !important;
  }

  .btn{
    min-height:44px !important;
  }
}