/* Button system. No outline or focus ring anywhere: keyboard focus = lift + soft cyan light underneath.
   .is-hover / .is-active / .is-focus mirror the real states for the static demos on /_lab/buttons. */

.btn-primary, .btn-glass, .btn-back, .btn-close, .btn-icon, .btn-neu, .seg button, .link-more, .btn-call-sticky {
  font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; /* rem: grows with the browser font size */
  text-decoration: none; cursor: pointer; border: 0; outline: none;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
:is(.btn-primary, .btn-glass, .btn-back, .btn-close, .btn-icon, .btn-neu, .seg button, .link-more, .btn-call-sticky):focus,
:is(.btn-primary, .btn-glass, .btn-back, .btn-close, .btn-icon, .btn-neu, .seg button, .link-more, .btn-call-sticky):focus-visible { outline: none; }

/* ---------- 1 · PRIMARY: neumorphic, copied from proto/hero-APPROVED-ribbon.html (.neu-cta) ---------- */
.btn-primary, .btn-call-sticky {
  position: relative; isolation: isolate; font: 600 1.0625rem Onest, system-ui, sans-serif; height: var(--btn-m); padding: 0 28px;
  border-radius: 17px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #c9f6ff; letter-spacing: .3px; white-space: nowrap;
  text-shadow: 0 0 4px rgba(143,233,255,.95), 0 0 12px rgba(0,224,255,.75), 0 0 26px rgba(0,140,255,.55);
  background: linear-gradient(145deg, #15305c 0%, #0d1f40 55%, #081530 100%);
  box-shadow: 9px 9px 20px rgba(0,0,0,.82), -7px -7px 16px rgba(46,92,170,.30),
    inset 1px 1px 1px rgba(130,180,255,.20), inset -2px -2px 3px rgba(0,0,0,.45);
  transition: box-shadow .22s ease, background .22s ease, text-shadow .3s ease, color .3s ease, transform .22s ease;
}
.btn-primary::before, .btn-call-sticky::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 55%, rgba(0,112,255,.22), transparent 72%);
}
.btn-primary::after, .btn-call-sticky::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(143,233,255,.22) 48%, rgba(0,224,255,.10) 54%, transparent 64%);
  background-size: 300% 100%; background-position: 100% 0; opacity: 0;
}
.btn-primary:is(:hover, .is-hover), .btn-call-sticky:is(:hover, .is-hover) {
  color: #e6fbff; text-shadow: 0 0 5px rgba(190,245,255,1), 0 0 16px rgba(0,224,255,.9), 0 0 34px rgba(0,140,255,.7);
  box-shadow: 11px 11px 24px rgba(0,0,0,.85), -8px -8px 18px rgba(46,92,170,.34),
    inset 1px 1px 1px rgba(130,180,255,.24), inset -2px -2px 3px rgba(0,0,0,.45);
}
.btn-primary:is(:hover, .is-hover)::after, .btn-call-sticky:is(:hover, .is-hover)::after { animation: neuSweep .85s cubic-bezier(.3,.6,.2,1) 1 forwards; }
@keyframes neuSweep { 0% { background-position: 100% 0; opacity: 1 } 80% { opacity: 1 } 100% { background-position: 0% 0; opacity: 0 } }
.btn-primary:is(:active, .is-active), .btn-call-sticky:is(:active, .is-active) {
  background: linear-gradient(145deg, #081530 0%, #0c1c3a 50%, #11284e 100%);
  box-shadow: inset 7px 7px 14px rgba(0,0,0,.85), inset -6px -6px 12px rgba(46,92,170,.26), 0 0 0 rgba(0,0,0,0);
  text-shadow: 0 0 3px rgba(143,233,255,.9), 0 0 9px rgba(0,224,255,.6), 0 0 18px rgba(0,140,255,.4);
}
.btn-primary > span, .btn-call-sticky > span { display: inline-flex; align-items: center; transition: transform .15s ease; }
.btn-primary:is(:active, .is-active) > span, .btn-call-sticky:is(:active, .is-active) > span { transform: translateY(1px) scale(.985); }
.btn-primary:is(:focus-visible, .is-focus), .btn-call-sticky:is(:focus-visible, .is-focus) {
  outline: none; transform: translateY(-2px);
  text-shadow: 0 0 6px rgba(190,245,255,1), 0 0 20px rgba(0,224,255,1), 0 0 40px rgba(0,140,255,.8);
  box-shadow: 0 10px 24px -8px rgba(0,224,255,.45), 9px 9px 20px rgba(0,0,0,.82), -7px -7px 16px rgba(46,92,170,.30),
    inset 1px 1px 1px rgba(130,180,255,.20), inset -2px -2px 3px rgba(0,0,0,.45);
}
.btn-primary.is-l { height: var(--btn-l); font-size: 1.125rem; padding: 0 34px; border-radius: var(--btn-radius); }
.btn-primary.is-s { height: var(--btn-s); font-size: 1.0625rem; padding: 0 22px; border-radius: 22px; }
.btn-call-sticky { height: 3.875rem; padding: 0 34px; border-radius: 999px; gap: 12px; font-size: 1.125rem; }
.btn-call-sticky > span { gap: 12px; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover::after, .btn-primary.is-hover::after, .btn-call-sticky:hover::after, .btn-call-sticky.is-hover::after { animation: none; }
  .btn-primary, .btn-glass, .btn-back, .btn-close, .btn-icon, .btn-neu, .seg button, .link-more { transition: none; }
  .btn-neu > span { transition: none; }
}

/* ---------- 2 · SECONDARY glass and 8 · DANGER glass ---------- */
.btn-glass {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-m); padding: 0 26px; border-radius: 17px; color: var(--cyan-bright); white-space: nowrap;
  background: transparent; transition: transform .35s var(--curve), box-shadow .35s var(--curve), background .35s;
}
.btn-glass.is-l { height: var(--btn-l); border-radius: var(--btn-radius); padding: 0 30px; }
.btn-glass.is-s { height: var(--btn-s); border-radius: 15px; padding: 0 20px; }
.btn-glass[data-glass="danger"] { color: #ffc2b8; }
.btn-glass:is(:hover, .is-hover) { transform: translateY(-2px); }
.btn-glass:is(:active, .is-active) { transform: translateY(1px) scale(.985); }
/* focus: lift, white label with a cyan glow (the primary's cue), and a stronger light underneath on the gl path */
.btn-glass:is(:focus-visible, .is-focus) { outline: none; transform: translateY(-2px); color: #fff;
  text-shadow: 0 0 6px rgba(190,245,255,.9), 0 0 16px rgba(0,224,255,.8), 0 0 30px rgba(0,140,255,.55); }

/* CSS-glass fallback: when the WebGL path is off, and for single elements WebGL cannot draw
   (more glass on screen than shader slots, or glass over an opaque panel): glass.js marks those [data-glass-css].
   With html.gl-on every other glass element is transparent here: WebGL draws it, the DOM carries the label. */
/* the blur belongs to the no-WebGL fallback only: on the gl path [data-glass-css] keeps tint, rim and shadow, never a CSS blur */
html:not(.gl-on) .btn-glass { -webkit-backdrop-filter: blur(18px) saturate(1.9) brightness(1.08); backdrop-filter: blur(18px) saturate(1.9) brightness(1.08); }
html:not(.gl-on) .btn-glass, .btn-glass[data-glass-css] {
  background: linear-gradient(172deg, rgba(150,215,255,.24) 0%, rgba(60,130,220,.10) 48%, rgba(0,20,50,.26) 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 -10px 16px rgba(0,10,30,.38), inset 0 1px 0 rgba(170,230,255,.30), inset 0 8px 14px rgba(143,233,255,.07);
}
html:not(.gl-on) .btn-glass::before, html:not(.gl-on) .btn-back::before, .btn-glass[data-glass-css]::before, .btn-back[data-glass-css]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(143,233,255,.75), rgba(0,224,255,.18) 40%, rgba(0,112,255,.10) 60%, rgba(0,112,255,.45));
  -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);
}
html:not(.gl-on) .btn-glass:is(:hover, .is-hover, :focus-visible, .is-focus), .btn-glass[data-glass-css]:is(:hover, .is-hover, :focus-visible, .is-focus) {
  background: linear-gradient(170deg, rgba(120,200,255,.24) 0%, rgba(20,90,170,.14) 45%, rgba(0,20,50,.2) 100%);
  box-shadow: 0 16px 34px rgba(0,0,0,.5), inset 0 -8px 14px rgba(0,10,30,.3), inset 0 6px 12px rgba(143,233,255,.10);
}
html:not(.gl-on) .btn-glass:is(:focus-visible, .is-focus), .btn-glass[data-glass-css]:is(:focus-visible, .is-focus) { box-shadow: 0 10px 24px -8px rgba(0,224,255,.45), 0 16px 34px rgba(0,0,0,.5), inset 0 -8px 14px rgba(0,10,30,.3); }
html:not(.gl-on) .btn-glass:is(:active, .is-active), .btn-glass[data-glass-css]:is(:active, .is-active) {
  background: linear-gradient(170deg, rgba(0,20,50,.25), rgba(20,70,140,.14) 55%, rgba(120,200,255,.14));
  box-shadow: 0 5px 12px rgba(0,0,0,.4), inset 0 6px 12px rgba(0,10,30,.45);
}
html:not(.gl-on) .btn-glass[data-glass="danger"], .btn-glass[data-glass-css][data-glass="danger"] {
  background: linear-gradient(172deg, rgba(255,170,150,.22) 0%, rgba(170,50,35,.12) 48%, rgba(40,5,5,.28) 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 -10px 16px rgba(30,0,0,.38), inset 0 1px 0 rgba(255,200,185,.28), inset 0 8px 14px rgba(255,180,160,.06);
}
html:not(.gl-on) .btn-glass[data-glass="danger"]::before, .btn-glass[data-glass-css][data-glass="danger"]::before {
  background: linear-gradient(135deg, rgba(255,190,175,.75), rgba(255,107,90,.18) 40%, rgba(160,30,20,.12) 60%, rgba(255,107,90,.45));
}
html:not(.gl-on) .btn-glass[data-glass="danger"]:is(:hover, .is-hover), .btn-glass[data-glass-css][data-glass="danger"]:is(:hover, .is-hover) { background: linear-gradient(170deg, rgba(255,150,130,.22), rgba(140,30,20,.16) 45%, rgba(40,5,5,.22)); }
html:not(.gl-on) .btn-glass[data-glass="danger"]:is(:active, .is-active), .btn-glass[data-glass-css][data-glass="danger"]:is(:active, .is-active) { box-shadow: 0 5px 12px rgba(0,0,0,.4), inset 0 6px 12px rgba(30,0,0,.45); }
html:not(.gl-on) .btn-glass[data-glass="danger"]:is(:focus-visible, .is-focus), .btn-glass[data-glass-css][data-glass="danger"]:is(:focus-visible, .is-focus) { box-shadow: 0 10px 24px -8px rgba(255,107,90,.45), 0 16px 34px rgba(0,0,0,.5); }

/* ---------- 4 · BACK: glass pill, round arrow + visible label ---------- */
.btn-back {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  height: 3.125rem; padding: 0 22px 0 14px; border-radius: 999px; color: #dbe6f5; white-space: nowrap;
  transition: transform .4s var(--curve), box-shadow .4s var(--curve), background .4s;
}
.btn-back svg { position: relative; flex: none; transition: transform .4s var(--curve); }
.btn-back:is(:hover, .is-hover) { transform: translateY(-2px); }
.btn-back:is(:hover, .is-hover) svg { transform: translateX(-3px); }
.btn-back:is(:active, .is-active) { transform: scale(.96); }
.btn-back:is(:focus-visible, .is-focus) { outline: none; transform: translateY(-2px); }
html:not(.gl-on) .btn-back { -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); }
html:not(.gl-on) .btn-back, .btn-back[data-glass-css] {
  background: rgba(10,10,10,.40);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 -6px 12px rgba(0,0,0,.35);
}
html:not(.gl-on) .btn-back::before, .btn-back[data-glass-css]::before { background: radial-gradient(circle at 85% 50%, rgba(0,224,255,.32), rgba(0,224,255,.05) 60%, transparent 70%); padding: 0; -webkit-mask: none; mask: none; transition: opacity .4s; }
html:not(.gl-on) .btn-back:is(:hover, .is-hover, :focus-visible, .is-focus)::before, .btn-back[data-glass-css]:is(:hover, .is-hover, :focus-visible, .is-focus)::before { background: radial-gradient(circle at 85% 50%, rgba(0,224,255,.55), transparent 72%); }
html:not(.gl-on) .btn-back:is(:focus-visible, .is-focus), .btn-back[data-glass-css]:is(:focus-visible, .is-focus) { box-shadow: 0 10px 24px -8px rgba(0,224,255,.45), 0 10px 30px rgba(0,0,0,.5); }
/* WebGL glass keeps the shared focus cue: lift + soft cyan light under the button */
html.gl-on :is(.btn-glass, .btn-back):not([data-glass-css]):is(:focus-visible, .is-focus) { box-shadow: 0 10px 24px -8px rgba(0,224,255,.6); }
html.gl-on .btn-glass[data-glass="danger"]:not([data-glass-css]):is(:focus-visible, .is-focus) { box-shadow: 0 10px 24px -8px rgba(255,107,90,.45); }

/* thick lens and frosted card panels (hero, nav, text cards): CSS stand-in when WebGL does not draw them */
html:not(.gl-on) :is([data-glass="lens"], [data-glass="card"]) { -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
html:not(.gl-on) :is([data-glass="lens"], [data-glass="card"]), :is([data-glass="lens"], [data-glass="card"])[data-glass-css] {
  background: linear-gradient(172deg, rgba(60,110,190,.20) 0%, rgba(10,30,70,.30) 55%, rgba(2,6,18,.45) 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(143,233,255,.18), inset 0 -14px 28px rgba(0,8,24,.35);
}

/* ---------- 5 · CLOSE, 6 · ICON, 9 · SEGMENTED: neumorphic, solid #0b1220 surfaces only ---------- */
.btn-close, .btn-icon {
  display: inline-grid; place-items: center; background: var(--neu); color: #c9d6e8;
  box-shadow: 5px 5px 12px var(--neu-dark), -4px -4px 10px var(--neu-light);
  transition: box-shadow .25s, color .25s, transform .25s;
}
.btn-close { width: 46px; height: 46px; border-radius: 13px; }
.btn-icon { width: 44px; height: 44px; border-radius: 50%; color: #b9c8dd; }
.btn-close:is(:hover, .is-hover), .btn-icon:is(:hover, .is-hover) { color: #fff; box-shadow: 7px 7px 16px var(--neu-dark), -5px -5px 12px var(--neu-light); }
.btn-close:is(:active, .is-active), .btn-icon:is(:active, .is-active), .btn-icon[aria-pressed="true"] {
  color: var(--cyan-bright); transform: scale(.98); box-shadow: inset 4px 4px 9px var(--neu-dark), inset -3px -3px 8px var(--neu-light);
}
.btn-icon[aria-pressed="true"] { color: var(--cyan); transform: none; }
.btn-close:is(:focus-visible, .is-focus), .btn-icon:is(:focus-visible, .is-focus), .seg button:is(:focus-visible, .is-focus) {
  outline: none; transform: translateY(-2px); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(0,224,255,.45), 5px 5px 12px var(--neu-dark), -4px -4px 10px var(--neu-light);
}
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 6px; padding: 6px; border-radius: 16px; background: var(--neu);
  box-shadow: inset 3px 3px 8px var(--neu-dark), inset -3px -3px 7px var(--neu-light); }
.seg button { height: 2.75rem; padding: 0 18px; border-radius: 11px; color: #93a4bd; background: transparent; transition: color .25s, box-shadow .25s, transform .25s; }
.seg button:is(:hover, .is-hover) { color: #fff; }
.seg button[aria-pressed="true"] {
  color: var(--cyan); background: #09101c; transform: none;
  box-shadow: inset 4px 4px 9px var(--neu-dark), inset -3px -3px 8px var(--neu-light);
}
.seg button:is(:focus-visible, .is-focus) { background: var(--neu); }
/* the pressed segment keeps its dish, but focus still lifts it, whitens the label and adds the light underneath
   (the [aria-pressed] rule above used to cancel every focus property) */
.seg button[aria-pressed="true"]:is(:focus-visible, .is-focus) {
  transform: translateY(-2px); color: #fff; text-shadow: 0 0 12px rgba(0,224,255,.8);
  box-shadow: 0 10px 24px -8px rgba(0,224,255,.55), inset 4px 4px 9px var(--neu-dark), inset -3px -3px 8px var(--neu-light);
}

/* ---------- 10 · NEU: the consent banner's «Отказвам», «Приемам» and «Запазете избора» (owner, Task 6B) ----------
   Raised out of a solid #0b1220 plate (.cc-plate): the house light from the top left, never white. One class for both
   choices, so they always weigh the same. Hover lifts the light, press sinks the button into the plate and the label
   moves down 1px, focus = lift + soft cyan light underneath (no ring). */
.btn-neu {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-s); padding: 0 20px; border-radius: 14px; white-space: nowrap;
  background: var(--neu); color: #dce7f6;
  box-shadow: 4px 4px 10px var(--neu-dark), -3px -3px 8px var(--neu-light);
  transition: box-shadow .22s ease, color .22s ease, transform .22s ease, text-shadow .22s ease;
}
.btn-neu > span { display: inline-flex; align-items: center; transition: transform .15s ease; }
.btn-neu:is(:hover, .is-hover) { color: #fff; box-shadow: 5px 5px 12px var(--neu-dark), -4px -4px 10px var(--neu-light); }
.btn-neu:is(:active, .is-active) {
  color: var(--cyan-bright); transform: none;
  box-shadow: inset 4px 4px 9px var(--neu-dark), inset -3px -3px 8px var(--neu-light);
}
.btn-neu:is(:active, .is-active) > span { transform: translateY(1px); }
.btn-neu:is(:focus-visible, .is-focus) {
  outline: none; transform: translateY(-2px); color: #fff; text-shadow: 0 0 12px rgba(0,224,255,.55);
  box-shadow: 0 10px 24px -8px rgba(0,224,255,.5), 4px 4px 10px var(--neu-dark), -3px -3px 8px var(--neu-light);
}

/* ---------- 3 · TEXT LINK ---------- */
.link-more { display: inline-flex; align-items: center; gap: 8px; min-height: 2.75rem; padding: 0 2px; color: var(--cyan-bright); background: none; }
.link-more::after {
  content: ""; width: 18px; height: 18px; background: currentColor; transition: transform .3s var(--curve);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.link-more:is(:hover, .is-hover) { text-decoration: underline; text-underline-offset: 5px; }
.link-more:is(:hover, .is-hover)::after { transform: translateX(4px); }
.link-more:is(:focus-visible, .is-focus) { outline: none; text-decoration: underline; text-underline-offset: 5px; text-shadow: 0 10px 24px rgba(0,224,255,.45); }

/* ---------- disabled and loading ---------- */
:is(.btn-primary, .btn-glass, .btn-back, .btn-close, .btn-icon, .btn-neu, .seg button, .link-more, .btn-call-sticky):is(:disabled, [aria-disabled="true"]) {
  opacity: .4; pointer-events: none; transform: none; filter: saturate(.4);
}
.btn-glass:is(:disabled, [aria-disabled="true"], [data-disabled])::before,
.btn-back:is(:disabled, [aria-disabled="true"], [data-disabled])::before { opacity: 0; }
.is-loading { pointer-events: none; }
.is-loading > span::before {
  content: ""; width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; flex: none;
  border: 2px solid rgba(201,246,255,.35); border-top-color: #c9f6ff; animation: btnSpin .8s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .btn-primary.is-l { padding: 0 24px; }
  .btn-glass.is-l { padding: 0 22px; }
}