/* ============================================================
   10-ui — elementy UI globalne: sticky CTA, cookie baner, menu mobile
   ============================================================ */

/* ------------------------------------------------------------
   1. Sticky CTA (czarna pigułka gooey, prawy dolny róg)
   ------------------------------------------------------------ */

.s-ui__sticky {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease, bottom 0.3s ease;
}

.s-ui__sticky.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* gdy cookie baner jest widoczny, sticky wisi nad nim */
body.po-cookies-visible .s-ui__sticky {
  bottom: 84px;
}

.s-ui__sticky-shapes {
  position: absolute;
  inset: 0;
  filter: url("#goo");
  pointer-events: none;
}

.s-ui__sticky-pill {
  position: absolute;
  inset: 0;
  background: var(--c-black);
  border-radius: var(--radius-pill);
}

/* kula startuje pod pigułką przy lewej krawędzi i wyjeżdża w lewo */
.s-ui__sticky-ball {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--btn-circle);
  height: var(--btn-circle);
  background: var(--c-black);
  border-radius: 50%;
}

.s-ui__sticky-label {
  position: relative;
  z-index: 2;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  color: var(--c-cream);
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.s-ui__sticky-arrow {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: var(--btn-circle);
  height: var(--btn-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.s-ui__sticky-arrow img {
  width: 9px;
  height: 11px;
  transform: rotate(90deg); /* glyph strzałki w dół → w lewo (lustrzane odbicie
                               CTA navbara: tam kula i strzałka uciekają w prawo,
                               tu kula wyjeżdża w lewo) */
}

/* ------------------------------------------------------------
   2. Cookie baner (3007:4743)
   ------------------------------------------------------------ */

.s-ui__cookies {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  max-width: calc(100vw - 40px);
}

.s-ui__cookies[hidden] {
  display: none;
}

.s-ui__cookies-pill {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 17px 22px;
  background: var(--c-black);
  border-radius: 30px;
}

.s-ui__cookies-text {
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.42px; /* 3% z 14px */
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-tooltip);
  white-space: nowrap;
}

.s-ui__cookies-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.s-ui__cookies-link {
  padding: 2px 0;
  background: none;
  border: none;
  border-bottom: 1px dashed currentColor;
  border-radius: 0;
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, border-bottom-style 0.25s ease;
}

.s-ui__cookies-link--manage {
  color: var(--c-grey);
}

.s-ui__cookies-link--accept {
  color: var(--c-cream);
}

.s-ui__cookies-link:hover {
  color: var(--c-cream);
  border-bottom-style: solid;
}

/* ------------------------------------------------------------
   3. Menu mobile (warianty navbara 3011:5503) — widoczne ≤900px
   ------------------------------------------------------------ */

/* hamburger: kółko 42×42 z siatką kropek (3× trzy-kropki.svg) */
.s-ui__burger {
  display: none;
  position: fixed;
  top: 22px;
  right: var(--page-margin);
  z-index: 105;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.3px;
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--c-cream);
  cursor: pointer;
  transition: background 0.25s ease;
}

.s-ui__burger:hover {
  background: var(--c-menu);
}

.s-ui__burger-row {
  display: block;
  line-height: 0;
}

.s-ui__burger-row img {
  width: 14.5px;
  height: 2.65px;
}

.s-ui__menu {
  position: fixed;
  inset: 0;
  z-index: 110;
}

.s-ui__menu[hidden] {
  display: none;
}

.s-ui__menu-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* kremowy panel rozwijany od góry, zaokrąglony dołem (wg Variant2) */
.s-ui__menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  background: var(--c-cream);
  border-radius: 0 0 30px 30px;
}

.s-ui__menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
}

/* logo w panelu wg Variant2 (3011:5504): organic-logo-animation 130.98×45.44 */
.s-ui__menu-logo img {
  width: 131px;
  height: 45px;
}

.s-ui__menu-close {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--c-cream);
  cursor: pointer;
  transition: background 0.25s ease;
}

.s-ui__menu-close:hover {
  background: var(--c-menu);
}

.s-ui__menu-close img {
  width: 15px;
  height: 15px;
}

.s-ui__menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.s-ui__menu-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--c-cream);
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: var(--fs-btn);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  line-height: 1;
  transition: background 0.25s ease;
}

.s-ui__menu-link:hover {
  background: var(--c-menu);
}

/* menu mobile tylko ≤900px (desktopowe menu z main.css chowa się wtedy) */
@media (max-width: 900px) {
  .s-ui__burger {
    display: flex;
  }

  /* KOLIZJA: main.css chowa CTA navbara dopiero ≤640px, a kropki (burger)
     pojawiają się już ≤900px — w pasie 641–900px burger nakładał się na pigułkę
     „Zapytaj o ofertę". Wg makiety mobile navbar = logo + kropki, więc CTA
     chowamy zawsze, gdy widoczny jest burger. Docelowo ta reguła powinna
     trafić do css/main.css (patch w raporcie) — tu duplikat, żeby sekcja UI
     nie psuła navbara. */
  .navbar__cta-wrap {
    display: none;
  }
}

@media (min-width: 901px) {
  .s-ui__menu {
    display: none;
  }
}

/* blokada scrolla pod otwartym menu (klasa z JS na body) */
body.po-menu-open {
  overflow: hidden;
}

/* ------------------------------------------------------------
   Mobile ≤767px
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  .s-ui__cookies-pill {
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 14px 20px;
  }

  /* baner po zawinięciu jest wyższy — sticky odsuwamy mocniej */
  body.po-cookies-visible .s-ui__sticky {
    bottom: 104px;
  }
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .s-ui__sticky {
    transition: none;
  }
}