/* ==========================================================================
   fix 3: one liquid glass for everything the header pill opens, and for buttons that sit on a field
   (Vilius, 11 Oct 2026: "every header pill pop up has to match the header pill liquid design exactly";
   "buttons such as make my badge also liquid glass").
   The values are the scrolled header pill's own (assets/navigation.css:82), never restyled per pop-up.
   Loaded only while fix3_home or fix3_private is on (app/fix3.php). Fields *inside* the glass (the code input,
   88% white) keep their own fill.
   ========================================================================== */
:root{
  --pill-bg:rgba(255,255,255,.16);
  --pill-filter:blur(20px) saturate(1.7);
  --pill-edge:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.12);
  --pill-shadow:0 10px 28px -14px rgba(15,21,25,.28);
}

/* every pop-up the header opens: code, language, account, the phone menu, the site menus, and the bell panel (Part E) */
html:root body :is(.v4-pop,.v4-drawer,.v3-pop,.bf-language-popover,.bf-drawer-langlist,.f3-bellpanel){
  background:var(--pill-bg)!important;border-color:transparent!important;
  -webkit-backdrop-filter:var(--pill-filter)!important;backdrop-filter:var(--pill-filter)!important;
  box-shadow:var(--pill-edge),var(--pill-shadow)!important}

/* a button on a field ("Make my badge" and its kind): the same glass, white text, pill shape */
.f3-glassbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--pill-bg);color:#fff;font:600 15px/1 var(--text,inherit);text-decoration:none;border:0;cursor:pointer;
  -webkit-backdrop-filter:var(--pill-filter);backdrop-filter:var(--pill-filter);box-shadow:var(--pill-edge),var(--pill-shadow);
  transition:background .15s}
.f3-glassbtn:hover{background:rgba(255,255,255,.24)}
.f3-glassbtn:focus-visible{outline:none;box-shadow:var(--pill-edge),var(--pill-shadow),0 0 0 2px rgba(255,255,255,.7)}
.f3-glassbtn svg{width:18px;height:18px}

/* no backdrop-filter, reduced transparency: the same fallback the site already uses for floating glass */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:root body :is(.v4-pop,.v4-drawer,.v3-pop,.bf-language-popover,.bf-drawer-langlist,.f3-bellpanel){background:rgba(255,255,255,.94)!important}
  .f3-glassbtn{background:rgba(14,20,23,.55)}
}
@media (prefers-reduced-transparency:reduce){
  html:root body :is(.v4-pop,.v4-drawer,.v3-pop,.bf-language-popover,.bf-drawer-langlist,.f3-bellpanel){background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}