/* ============================================================================
   consent-desktop.css — «Графит» skin for the cookie banner (≥900px only) · 2026-09-17
   assets/consent.js injects both the banner markup (#lz-consent > .box …) and
   its own <style> at runtime, i.e. AFTER this file in the cascade. consent.js
   is NOT edited; this file simply wins on specificity by doubling the id
   (#lz-consent#lz-consent …). Link it LAST with media="(min-width: 900px)".

   Phones/tablets (<900px) keep the existing light banner untouched.

   Legal note: the two choices stay equally prominent — same row, same width,
   same height, same font size and weight. «Принять всё» is the lime fill,
   «Отклонить всё» is an outlined button with a clearly visible 1.5px white
   border (not a link, not greyed out, not smaller).

   Contrast on graphite #17191B: white 15.9:1 · rgba(255,255,255,.78) ≈ 10.8:1 ·
   lime #CDF568 ≈ 14:1 · lime focus ring on graphite is clearly visible.
   ========================================================================== */
@media (min-width: 900px) {

  #lz-consent#lz-consent{
    padding:clamp(1rem,2vw,1.5rem);
  }
  #lz-consent#lz-consent .box{
    background:#17191B;
    color:#fff;
    max-width:38rem;
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    box-shadow:0 44px 90px -44px rgba(0,0,0,.9);
    padding:1.6rem 1.75rem 1.5rem;
  }
  #lz-consent#lz-consent h2{
    color:#fff;font-size:1.1875rem;font-weight:700;letter-spacing:-.02em;
    margin:0 0 .5rem;padding-inline-end:2.5rem;
  }
  #lz-consent#lz-consent p{
    color:rgba(255,255,255,.78);font-size:.9375rem;line-height:1.6;margin:0 0 1.1rem;
  }
  #lz-consent#lz-consent a{
    color:#CDF568;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  }
  #lz-consent#lz-consent a:hover{text-decoration-thickness:2px;text-decoration-color:#CDF568}

  /* --- the two choices: identical geometry, identical weight --------------- */
  #lz-consent#lz-consent .row{gap:.75rem}
  #lz-consent#lz-consent .row .btn{flex:1 1 10rem}
  #lz-consent#lz-consent .btn{
    min-height:3.25rem;padding:0 1.25rem;
    font-size:.9375rem;font-weight:700;
    border:1.5px solid rgba(255,255,255,.58);
    border-radius:999px;
    background:transparent;color:#fff;
    transition:background-color .2s cubic-bezier(.23,1,.32,1),
               color .2s cubic-bezier(.23,1,.32,1),
               border-color .2s cubic-bezier(.23,1,.32,1);
  }
  #lz-consent#lz-consent .btn.primary{
    background:#CDF568;border-color:#CDF568;color:#17191B;
  }
  @media (hover:hover) and (pointer:fine){
    #lz-consent#lz-consent .btn:hover{background:#fff;border-color:#fff;color:#17191B}
    #lz-consent#lz-consent .btn.primary:hover{background:#fff;border-color:#fff;color:#17191B}
  }

  #lz-consent#lz-consent .row2{margin-top:.7rem}
  #lz-consent#lz-consent .linkbtn{
    color:rgba(255,255,255,.78);font-size:.875rem;
    text-decoration:underline;text-underline-offset:3px;
  }
  #lz-consent#lz-consent .linkbtn:hover{color:#fff}

  #lz-consent#lz-consent .x{
    color:rgba(255,255,255,.72);border-radius:10px;
    inset-inline-end:.6rem;top:.6rem;
    transition:background-color .2s cubic-bezier(.23,1,.32,1),color .2s cubic-bezier(.23,1,.32,1);
  }
  #lz-consent#lz-consent .x:hover{background:rgba(255,255,255,.1);color:#fff}

  /* --- preferences view ---------------------------------------------------- */
  #lz-consent#lz-consent .cats{margin:.2rem 0 1.1rem;gap:.65rem}
  #lz-consent#lz-consent .cat{
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;padding:.8rem .95rem;
  }
  #lz-consent#lz-consent .cat label{color:#fff;font-size:.9375rem}
  #lz-consent#lz-consent .cat small{color:rgba(255,255,255,.72);font-size:.8438rem;line-height:1.55}
  #lz-consent#lz-consent .cat input{width:1.25rem;height:1.25rem;accent-color:#CDF568}
  #lz-consent#lz-consent .cat input:disabled{opacity:.62}

  /* --- focus: lime ring on graphite ---------------------------------------- */
  #lz-consent#lz-consent .btn:focus-visible,
  #lz-consent#lz-consent .x:focus-visible,
  #lz-consent#lz-consent .linkbtn:focus-visible,
  #lz-consent#lz-consent input:focus-visible,
  #lz-consent#lz-consent a:focus-visible{
    outline:3px solid #CDF568;outline-offset:2px;border-radius:999px;
  }
  #lz-consent#lz-consent a:focus-visible{border-radius:3px}

  @media (prefers-reduced-motion: reduce){
    #lz-consent#lz-consent .btn,
    #lz-consent#lz-consent .x{transition:none}
  }
}