/* ============================================================
   ForNails — PDP: licznik wysylki, sticky ATC mobile-only,
   ostatnio ogladane. Wlasny arkusz mu-pluginu fn-design-urgency.php.
   Celowo NIEZALEZNY od Woodmart Customizer Additional CSS
   (post 19068) i od innych plikow fn-design-*.css — nowy, osobny
   plik, zero edycji cudzych arkuszy. Korzysta ze wspolnych
   zmiennych --fn-* (kolory/fonty marki) zdefiniowanych globalnie
   w Additional CSS, z fallbackami na wypadek innej kolejnosci
   ladowania arkuszy.
   Data: 2026-07-16.
   ============================================================ */

/* ------------------------------------------------------------
   1) Licznik "zamow dzis, wyslemy dzis"
   ------------------------------------------------------------ */
.fn-urgency-shipping{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--fn-bg-soft, #F3E9E5);
  border: 1px solid var(--fn-accent-light, #E4C989);
  border-radius: 6px;
  font-family: var(--fn-font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fn-text, #2E2321);
}

.fn-urgency-icon{
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--fn-accent, #C9A15A);
}

.fn-urgency-icon svg{
  display: block;
  width: 100%;
  height: 100%;
}

.fn-urgency-text strong{
  color: var(--fn-primary, #A34B65);
}

.fn-urgency-countdown{
  color: var(--fn-primary, #A34B65);
  font-weight: 700;
  white-space: nowrap;
}

/* Warianty "po godzinie granicznej" / "weekend" — spokojniejszy, mniej pilny wyglad
   (bez zlotej ramki/akcentu, bo nie ma juz nic do "odliczania"). */
.fn-urgency-branch-after_cutoff,
.fn-urgency-branch-weekend{
  background: var(--fn-bg-soft, #F3E9E5);
  border-color: var(--fn-border, #DDD0CB);
}

.fn-urgency-branch-after_cutoff .fn-urgency-icon,
.fn-urgency-branch-weekend .fn-urgency-icon{
  color: var(--fn-muted, #8B7D77);
}

@media (max-width: 480px){
  .fn-urgency-shipping{
    font-size: 13px;
    padding: 10px 12px;
  }
}

/* ------------------------------------------------------------
   2) Sticky "Dodaj do koszyka" — TYLKO mobile (<=768px), tak jak
   sam Woodmart definiuje granice mobile/desktop dla tego
   komponentu (patrz woo-opt-sticky-add-to-cart.css: @media
   max-width:768.98px). Natywnie po wlaczeniu obu opcji motywu
   pasek pokazuje sie TEZ na desktopie/tablecie >=769px — zadanie
   wymaga "tylko mobile", wiec tutaj wymuszamy ukrycie powyzej tej
   granicy + zerujemy kompensujacy padding-bottom body, ktory
   Woodmart dolozylby dla niewidocznego juz paska.
   ------------------------------------------------------------ */

/* Naprawa realnego braku w motywie: --wd-sticky-btn-height nie jest
   NIGDZIE zdefiniowana na tej instalacji (pola "Height on desktop/
   tablet/mobile" tez nigdy nie zostaly zapisane w bazie -> ten sam
   wzorzec "nieustawiona opcja motywu = false" jak przy kilkunastu
   innych bugach w tym projekcie). Wartosci ponizej to DOKLADNIE
   defaulty zadeklarowane przez sam motyw w polu 'default' ustawien
   (inc/admin/settings/product.php: desktop/tablet=95, mobile=42) —
   nic nie wymyslone, tylko odtworzone to, co powinno byc zapisane
   od poczatku.
   */
:root{
  --wd-sticky-btn-height: 95px;
}
@media (max-width: 768.98px){
  :root{
    --wd-sticky-btn-height: 42px;
  }
}

@media (min-width: 769px){
  .wd-sticky-btn{
    display: none !important;
  }
  /* Body dostaje klase wd-sticky-btn-on (bo single_sticky_add_to_cart=true) i Woodmart
     doklada padding-bottom rowny wysokosci paska — ale skoro pasek jest ukryty na tej
     szerokosci, ten padding jest juz niepotrzebny. */
  body.wd-sticky-btn-on{
    padding-bottom: 0 !important;
  }
}

/* Znaleziony i naprawiony REALNY bug na mobile, ten sam mechanizm co juz kilkukrotnie
   udokumentowany w tym projekcie (toast koszyka, drawer mini-koszyka, panel menu
   hamburgera) — przejscie CSS `.wd-sticky-btn{transition:transform .5s ...}` potrafi
   "zamrozic sie" w stanie startowym (translateY 100% wlasnej wysokosci = poza ekranem)
   mimo poprawnie dodanej klasy .wd-sticky-btn-shown, najpewniej przez zajety glowny watek
   od petli bledow POST do sgw.stape.bg (zepsuty kontener GTM klienta, zadanie #52,
   potwierdzone w konsoli: "Error sending SGW POST ... failed (404)" powtarzajace sie w
   petli). Zweryfikowane bezposrednio w przegladarce: ustawienie transition:none
   natychmiast naprawia widocznosc paska (transform wraca do identity od razu, bez
   czekania na przejscie, ktore i tak sie nie konczylo). Ten sam, juz sprawdzony lek co w
   fn-design-tablet-fix.php — wylaczenie animacji, nie logiki. Scoped tylko do mobile,
   bo na desktopie pasek jest i tak calkowicie ukryty (patrz wyzej). */
@media (max-width: 768.98px){
  .wd-sticky-btn{
    transition: none !important;
  }
}

/* Unikanie kolizji z pigulka WhatsApp (fn-whatsapp.php, position:fixed prawy dolny róg) —
   gdy sticky pasek jest realnie widoczny (klasa .wd-sticky-btn-shown, dodawana/usuwana
   natywnym JS motywu przy scrollu), przesuwamy pigulke w gore o wysokosc paska. Klase
   body.fn-sticky-atc-visible przelacza fn-design-urgency.js (MutationObserver na
   .wd-sticky-btn, zero ingerencji w fn-whatsapp.php). Fallback 60px w var() na wypadek
   gdyby zmienna --wd-sticky-btn-height z jakiegos powodu byla niedostepna. */
@media (max-width: 768.98px){
  body.fn-sticky-atc-visible .fn-whatsapp-pill{
    bottom: calc(10px + var(--wd-sticky-btn-height, 60px)) !important;
    /* transition:none (nie animowane) — zweryfikowane na zywo, ze `transition: bottom .25s`
       potrafi "zamrozic sie" w stanie startowym dokladnie tym samym mechanizmem co pasek
       sticky wyzej (zajety glowny watek od petli sgw.stape.bg), wiec pozycja pigulki
       zmienia sie NATYCHMIAST przy przelaczeniu klasy zamiast czekac na animacje, ktora
       mogla nigdy sie nie dokonczyc. */
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   3) "Ostatnio ogladane"
   ------------------------------------------------------------ */
.fn-recently-viewed{
  padding: 36px 0 8px;
}

.fn-recently-viewed-title{
  font-family: var(--fn-font-heading, 'Playfair Display', Georgia, 'Times New Roman', serif);
  color: var(--fn-text, #2E2321);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 20px;
  text-align: left;
}

@media (max-width: 767px){
  .fn-recently-viewed{
    padding: 26px 0 4px;
  }
  .fn-recently-viewed-title{
    font-size: 20px;
    margin-bottom: 16px;
  }
}

/* Duplikat licznika w mobilnym sticky ATC Woodmart (hook after_add_to_cart_form
   odpala sie ponownie w pasku .wd-sticky-btn). Byl juz przyciety do 0px (overflow),
   ale usuwamy go z DOM sticky calkowicie dla czystosci. Dodane 16.07.2026 po QA. */
.wd-sticky-btn .fn-urgency-shipping { display: none !important; }