/* FactuPay — rendu « liquid glass » des notifications et des icônes
   Chargé après site.css et auth.css. Tout est en CSS ; glass.js ajoute la
   réfraction des bords sur Chrome et Edge (les autres navigateurs gardent
   le verre dépoli, sans déformation). */

/* ---------- Surfaces de verre : notifications uniquement ---------- */
:is(.notif, .withdraw-card, .rem, .float-badge, .toast, .lg) {
  --lg-bg: linear-gradient(140deg, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, .34) 48%, rgba(255, 255, 255, .5) 100%);
  --lg-blur: 14px;
  --lg-blur-refract: 3px;
  --lg-sat: 190%;
  --lg-rim: rgba(255, 255, 255, .95);
  --lg-rim-soft: rgba(255, 255, 255, .18);
  --lg-sheen: rgba(255, 255, 255, .55);
  --lg-drop: rgba(0, 20, 53, .26);
  isolation: isolate;
  border: 0;
  background: var(--lg-bg);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 1px rgba(255, 255, 255, .12),
    inset 0 0 18px rgba(255, 255, 255, .14),
    0 2px 6px rgba(0, 20, 53, .08),
    0 14px 36px -8px var(--lg-drop);
}
/* Réfraction (glass.js) : la déformation passe avant un flou plus léger */
:is(.notif, .withdraw-card, .rem, .float-badge, .toast, .lg).lg-refract {
  -webkit-backdrop-filter: var(--lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(1.04);
  backdrop-filter: var(--lg-refract) blur(var(--lg-blur-refract)) saturate(var(--lg-sat)) brightness(1.04);
}
/* Liseré : plus vif en haut à gauche et en bas à droite, comme une lentille */
:is(.notif, .withdraw-card, .rem, .float-badge, .toast, .lg)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, var(--lg-rim) 0%, var(--lg-rim-soft) 30%, rgba(255, 255, 255, .04) 55%, var(--lg-rim-soft) 78%, var(--lg-rim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Reflet : un arc net qui part du coin haut gauche */
:is(.notif, .withdraw-card, .rem, .float-badge, .toast, .lg)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(150% 120% at -10% -30%, var(--lg-sheen) 0%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, 0) 43%);
  opacity: .8;
}
:is(.notif, .withdraw-card, .rem.paid, .lg:not(.lg-dark)) { text-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
/* Texte secondaire plus foncé sur le verre clair : il reste lisible sur photo */
.notif > span > span, .withdraw-card small, .rem.paid span span { color: rgba(0, 0, 0, .66); opacity: 1; }
.dash .notif, .rem { position: relative; }

/* Panneau de notifications de l'app : verre plus couvrant pour rester lisible */
.notif-panel { --lg-bg: linear-gradient(140deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .7)); --lg-blur: 22px; --lg-blur-refract: 12px; }

/* Verre sombre : relances sur le vert profond, badge flottant, toast */
.rem {
  --lg-bg: linear-gradient(140deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 50%, rgba(255, 255, 255, .13) 100%);
  --lg-rim: rgba(255, 255, 255, .7);
  --lg-rim-soft: rgba(255, 255, 255, .12);
  --lg-sheen: rgba(255, 255, 255, .26);
  --lg-drop: rgba(0, 8, 40, .4);
  --lg-blur: 18px;
  color: #fff;
}
.rem.paid {
  --lg-bg: linear-gradient(140deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .7) 100%);
  --lg-rim: rgba(255, 255, 255, 1);
  --lg-sheen: rgba(255, 255, 255, .6);
  background: var(--lg-bg);
  color: #000;
}
.float-badge, .toast, .lg-dark {
  --lg-bg: linear-gradient(140deg, rgba(56, 66, 104, .62) 0%, rgba(8, 12, 30, .74) 55%, rgba(20, 28, 60, .7) 100%);
  --lg-rim: rgba(255, 255, 255, .62);
  --lg-rim-soft: rgba(255, 255, 255, .1);
  --lg-sheen: rgba(255, 255, 255, .22);
  --lg-drop: rgba(0, 6, 30, .45);
  --lg-blur: 20px;
  --lg-blur-refract: 6px;
}

/* La notification du héros apparaît par sa propre opacité : une opacité
   sur le parent couperait le flou d'arrière-plan pendant le fondu. */
.frame-media .dash { opacity: 1; }
.frame-media .dash .notif { opacity: clamp(0, calc((var(--p) - .55) * 3), 1); }

/* Puces des opérateurs et barre de progression dans la carte de retrait */
.withdraw-card .op {
  border: 0; background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 3px rgba(0, 20, 53, .1);
}
.withdraw-card .op.on { background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1.5px #000, 0 2px 6px rgba(0, 20, 53, .14); }
.withdraw-card .progress { background: rgba(255, 255, 255, .45); box-shadow: inset 0 1px 2px rgba(0, 20, 53, .12); }
.withdraw-card .chip.ok { background: rgba(227, 233, 247, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.rem .day {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 8, 40, .2);
}
.rem.paid .day { background: linear-gradient(160deg, #d6e2f7, #60cdff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 4px rgba(20, 53, 110, .2), 0 2px 6px rgba(10, 34, 80, .2); }

/* Accessibilité : transparence réduite = verre opaque */
@media (prefers-reduced-transparency: reduce) {
  :is(.notif, .withdraw-card, .rem, .float-badge, .toast, .lg) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :is(.notif, .withdraw-card, .rem.paid) { background: #fff; }
  .rem { background: #1a3b8e; }
  .float-badge, .toast, .lg-dark { background: #080d17; }
  .lg:not(.lg-dark) { background: #fff; }
}