/* ==========================================================================
   Vitamin Shop - Plan zakupowy
   Arkusz awaryjny wtyczki. Wszystkie selektory sa scope-owane do korzeni
   .vs-subskrypcja i .vs-plany, zeby wtyczka nie zaczepila obcego motywu.
   Wartosci tokenow sa takie same jak w motywie potomnym; fallbacki po
   przecinku sprawiaja, ze wtyczka wyglada sensownie takze bez motywu.
   ========================================================================== */

.vs-subskrypcja,
.vs-plany{
  --vs-brand:      var(--brand, #0FCA19);
  --vs-brand-ink:  var(--brand-ink, #0B7A10);
  --vs-brand-tint: var(--brand-tint, #E9FBEA);
  --vs-ink:        var(--ink, #101418);
  --vs-slate:      var(--slate, #5A646E);
  --vs-line:       var(--line, #E4E8EC);
  --vs-card:       var(--card, #FFFFFF);
  --vs-surface:    var(--surface, #F6F8F9);
  --vs-r-sm:       var(--r-sm, 10px);
  --vs-r-md:       var(--r-md, 14px);
  --vs-dur:        var(--dur-1, 140ms);
  color: var(--vs-ink);
}

/* Tryb ciemny. Motyw potomny przelacza sie atrybutem data-theme, a bez motywu
   zostaje preferencja systemowa. Oba przypadki obsluzone osobno, zeby zaden
   kolor nie mial jedynej definicji w bloku warunkowym. */
:root[data-theme="dark"] .vs-subskrypcja,
:root[data-theme="dark"] .vs-plany{
  --vs-brand-ink:  var(--brand-ink, #3BE045);
  --vs-brand-tint: var(--brand-tint, #122814);
  --vs-ink:        var(--ink, #F2F5F7);
  --vs-slate:      var(--slate, #A3ADB6);
  --vs-line:       var(--line, #2A3138);
  --vs-card:       var(--card, #161B21);
  --vs-surface:    var(--surface, #151A1F);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .vs-subskrypcja,
  :root:not([data-theme="light"]) .vs-plany{
    --vs-brand-ink:  var(--brand-ink, #3BE045);
    --vs-brand-tint: var(--brand-tint, #122814);
    --vs-ink:        var(--ink, #F2F5F7);
    --vs-slate:      var(--slate, #A3ADB6);
    --vs-line:       var(--line, #2A3138);
    --vs-card:       var(--card, #161B21);
    --vs-surface:    var(--surface, #151A1F);
  }
}

/* ---------- Przelacznik na karcie produktu ---------- */

.vs-subskrypcja{
  display:block;
  width:100%;
  margin:16px 0;
  clear:both;
}

.vs-subskrypcja__opcje{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.vs-subskrypcja .buyopt{
  border:2px solid var(--vs-line);
  border-radius:var(--vs-r-md);
  padding:14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  cursor:pointer;
  background:var(--vs-card);
  min-height:44px;
  margin:0;
  transition:border-color var(--vs-dur) ease, background-color var(--vs-dur) ease;
}

.vs-subskrypcja .buyopt:hover{ border-color:var(--vs-brand-ink); }
.vs-subskrypcja .buyopt:focus-within{ outline:2px solid var(--vs-brand-ink); outline-offset:2px; }
.vs-subskrypcja .buyopt.is-sel{ border-color:var(--vs-brand); background:var(--vs-brand-tint); }

.vs-subskrypcja .buyopt input[type="radio"]{
  width:20px;
  height:20px;
  accent-color:var(--vs-brand);
  margin:2px 0 0;
  flex:none;
}

.vs-subskrypcja .buyopt__body{ flex:1; }

.vs-subskrypcja .buyopt b{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:.9375rem;
  font-weight:700;
}

.vs-subskrypcja .buyopt__desc{
  font-size:.8125rem;
  color:var(--vs-slate);
  display:block;
  margin-top:2px;
  line-height:1.5;
}

.vs-subskrypcja .buyopt .price{
  font-size:1.25rem;
  display:inline;
  font-weight:700;
}

/* Plakietka rabatu - zielone tlo z czarnym tekstem, jak w logo (8,3:1). */
.vs-subskrypcja .badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:26px;
  padding:0 9px;
  line-height:1;
  border-radius:var(--r-xs, 6px);
  font-family:'Barlow Condensed', system-ui, sans-serif;
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  white-space:nowrap;
}

.vs-subskrypcja .badge--brand{ background:var(--vs-brand); color:#0B0F0B; }

/* ---------- Wybor czestotliwosci ---------- */

.vs-subskrypcja .subfreq{
  margin:10px 0 0;
  padding:12px 14px;
  border:1px solid var(--vs-line);
  border-radius:var(--vs-r-md);
  background:var(--vs-surface);
}

.vs-subskrypcja .subfreq[hidden]{ display:none; }

.vs-subskrypcja .subfreq__label{
  display:block;
  font-size:.8125rem;
  font-weight:600;
  color:var(--vs-slate);
  margin-bottom:8px;
}

.vs-subskrypcja .subfreq__opts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.vs-subskrypcja .subfreq__opt{
  min-height:44px;
  padding:0 16px;
  border:2px solid var(--vs-line);
  border-radius:var(--r-full, 999px);
  background:var(--vs-card);
  color:var(--vs-ink);
  font-weight:600;
  font-size:.875rem;
  cursor:pointer;
  transition:border-color var(--vs-dur) ease, background-color var(--vs-dur) ease;
}

.vs-subskrypcja .subfreq__opt:hover{ border-color:var(--vs-brand-ink); }
.vs-subskrypcja .subfreq__opt:focus-visible{ outline:2px solid var(--vs-brand-ink); outline-offset:2px; }
.vs-subskrypcja .subfreq__opt.is-sel{ border-color:var(--vs-brand); background:var(--vs-brand-tint); }

.vs-subskrypcja__oszczednosc{
  margin:10px 0 0;
  font-size:.875rem;
  font-weight:700;
  color:var(--vs-brand-ink);
}

.vs-subskrypcja__nota{
  margin:6px 0 0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--vs-slate);
}

/* ---------- Moje plany ---------- */

.vs-plany{ display:block; }

.vs-plany__nota,
.vs-plany__pusto{
  font-size:.9375rem;
  line-height:1.6;
  color:var(--vs-slate);
  margin:0 0 16px;
}

.vs-plan{
  border:1px solid var(--vs-line);
  border-radius:var(--vs-r-md);
  background:var(--vs-card);
  padding:16px;
  margin:0 0 14px;
}

.vs-plan.is-wstrzymany,
.vs-plan.is-zakonczony{ opacity:.82; }

.vs-plan__gora{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.vs-plan__tytul{
  margin:0;
  font-size:1.125rem;
  font-weight:700;
  font-family:'Barlow Condensed', system-ui, sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
}

.vs-plan .badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:var(--r-xs, 6px);
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  white-space:nowrap;
  /* Neutralne tlo domyslne. Zielen marki znaczy tu aktywny, wiec plan
     wstrzymany i zakonczony nie moga jej dostawac. */
  background:var(--vs-surface);
  color:var(--vs-slate);
}

.vs-plan .badge--brand{ background:var(--vs-brand); color:#0B0F0B; }

.vs-plan__pozycje{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  font-size:.9375rem;
}

.vs-plan__pozycje li{ margin:0 0 4px; }

.vs-plan__nastepna{
  margin:10px 0 0;
  font-weight:700;
  color:var(--vs-brand-ink);
}

.vs-plan__nastepna--off{ color:var(--vs-slate); font-weight:600; }

.vs-plan__forma{
  margin:14px 0 0;
  padding:14px 0 0;
  border-top:1px solid var(--vs-line);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.vs-plan__czest{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:.875rem;
  font-weight:600;
  color:var(--vs-slate);
}

/* Etykieta obejmuje juz tylko select, wiec sama musi ustawic swoje dzieci
   w jednej linii - inaczej opis i lista rozjezdzaja sie w pionie. */
.vs-plan__czest label{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.vs-plan__czest select{
  min-height:44px;
  padding:0 10px;
  border:2px solid var(--vs-line);
  border-radius:var(--vs-r-sm);
  background:var(--vs-card);
  color:var(--vs-ink);
}

.vs-plan__akcje{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.vs-plan__btn{
  min-height:44px;
  padding:0 18px;
  border:2px solid var(--vs-line);
  border-radius:var(--vs-r-sm);
  background:var(--vs-card);
  color:var(--vs-ink);
  font-weight:700;
  font-size:.875rem;
  cursor:pointer;
  transition:border-color var(--vs-dur) ease, background-color var(--vs-dur) ease;
}

.vs-plan__btn:hover{ border-color:var(--vs-brand-ink); }
.vs-plan__btn:focus-visible{ outline:2px solid var(--vs-brand-ink); outline-offset:2px; }

/* CTA: tlo marki z czarnym tekstem - zielen na bieli ma tylko 2,2:1 i nigdy
   nie moze isc pod tekst. */
.vs-plan__btn--glowny{
  background:var(--vs-brand);
  border-color:var(--vs-brand);
  color:#0B0F0B;
}

.vs-plan__btn--glowny:hover{ filter:brightness(.94); border-color:var(--vs-brand); }

.vs-plan__btn--cichy{
  background:transparent;
  color:var(--vs-slate);
  border-color:transparent;
  text-decoration:underline;
}

@media (min-width:600px){
  .vs-plan__forma{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

@media (prefers-reduced-motion: reduce){
  .vs-subskrypcja *,
  .vs-plany *{
    transition:none !important;
    animation:none !important;
  }
}