/* ==========================================================================
   VITAMIN SHOP - DROPSHIPPING
   Arkusz frontu. Wtyczka dokleja do sklepu tylko trzy rzeczy widoczne dla
   klienta: plakietke terminu na kaflu, wiersz terminu pod przyciskiem zakupu
   (tylko bez wtyczki karty produktu) oraz komunikat o liczbie paczek.

   Kolory ida z tokenow motywu z awaryjna wartoscia lokalna, wiec wtyczka
   wyglada sensownie takze bez motywu potomnego - razem z trybem ciemnym.
   Kazdy kolor zdefiniowany dla trybu ciemnego ma BLIZNIACZA regule dla
   preferencji systemowej, bo inaczej widzi go wylacznie ten, kto kliknal
   przelacznik w naglowku.
   ========================================================================== */

:root{
  --vsd-ink:#101418;
  --vsd-slate:#5A646E;
  --vsd-line:#E4E8EC;
  --vsd-card:#FFFFFF;
  --vsd-info:#1D4ED8;
  --vsd-info-tint:#E6EDFD;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --vsd-ink:#F2F5F7;
    --vsd-slate:#A3ADB6;
    --vsd-line:#2A3138;
    --vsd-card:#161B21;
    --vsd-info:#93B4FF;
    --vsd-info-tint:#132039;
  }
}

:root[data-theme="dark"]{
  --vsd-ink:#F2F5F7;
  --vsd-slate:#A3ADB6;
  --vsd-line:#2A3138;
  --vsd-card:#161B21;
  --vsd-info:#93B4FF;
  --vsd-info-tint:#132039;
}

/* ---------- 1. PLAKIETKA TERMINU ----------
   Plakietka wlasna wtyczki, motyw jej nie zna, wiec bez :where().
   Ksztalt bierze z reguly .badge - motywu albo wtyczki konwersji - a stad
   ma tylko kolory. Blekit, bo zielen i czerwien sa juz zajete przez
   plakietki bestsellera i promocji, a bursztyn przez ostatnie sztuki. */
.badge.badge--termin{
  background:var(--vsd-info-tint);
  color:#123A8A;
}

:root[data-theme="dark"] .badge.badge--termin{ background:#132039; color:#BBD0FF }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge.badge--termin{ background:#132039; color:#BBD0FF }
}

/* Plakietka wtyczki nie ma wlasnego ksztaltu, gdy w sklepie nie ma ani motywu
   potomnego, ani wtyczki konwersji. Ten blok jest wylacznie na taki przypadek
   i stoi w :where(), zeby przegral z kazda pelniejsza wersja. */
:where(.badge.badge--termin){
  display:inline-flex; align-items:center;
  min-height:26px; padding:0 9px; line-height:1;
  border-radius:6px;
  font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.07em; white-space:nowrap;
}

/* ---------- 2. WIERSZ TERMINU POD PRZYCISKIEM ----------
   Widoczny TYLKO w sklepie bez wtyczki karty produktu - z nia termin stoi
   wyzej, w kolumnie decyzyjnej. */
.vs-ds-termin{
  display:flex; align-items:flex-start; gap:9px;
  margin:14px 0 0;
  padding:11px 13px;
  border:1px solid var(--line, var(--vsd-line));
  border-radius:var(--r-sm, 10px);
  background:var(--card, var(--vsd-card));
  color:var(--ink, var(--vsd-ink));
  font-size:.9375rem; line-height:1.45;
}

.vs-ds-termin svg{
  flex:0 0 auto;
  margin-top:2px;
  color:var(--vsd-info);
}

/* Drugi poziom jest spanem, bo caly wiersz siedzi w akapicie - a span jest
   z definicji wsadowy, wiec bez display:block tekst i podpis stanelyby obok
   siebie w jednej linii. */
.vs-ds-termin__tresc{ display:block; min-width:0 }

.vs-ds-termin b{ display:block; font-weight:700 }

.vs-ds-termin__tresc span{
  display:block;
  margin-top:2px;
  color:var(--slate, var(--vsd-slate));
  font-size:.8125rem;
}