/**
 * Gift Card — style frontu (checkout).
 *
 * REGULA (CLAUDE.md 6 + [[Konwencja - zawsze uzywaj zmiennych (design tokens)]]):
 * Front = tokeny motywu SKLEPU var(--wh-*) z fallbackiem na neutralne wartosci.
 * Dzieki temu blok karty propaguje branding sklepu (kolor primary, radius, spacing),
 * zamiast byc "wyspa" z jaskrawymi hardcodowanymi kolorami.
 */

.wh-giftcard {
  margin-bottom: var(--wh-space-md, 1.6rem);
  padding: var(--wh-space-md, 1.6rem);
  border: 1px solid var(--wh-color-border-subtle, #e5e7eb);
  border-radius: var(--wh-radius-md, 0.8rem);
  background: var(--wh-color-bg-subtle, #f8f8f8);
}

/* --- Naglowek z checkboxem "Mam karte" --- */
.wh-giftcard__toggle {
  display: flex;
  align-items: center;
  gap: var(--wh-space-sm, 0.8rem);
  cursor: pointer;
  font-weight: var(--wh-font-weight-semibold, 600);
  margin: 0;
}
.wh-giftcard__toggle-input {
  width: 1.8rem;
  height: 1.8rem;
  cursor: pointer;
  /* nadpisanie ukrywania checkboxow w niektorych motywach */
  opacity: 1;
  position: static;
}
.wh-giftcard__icon {
  vertical-align: middle;
  color: var(--wh-color-primary, #2874fc);
}

/* --- Formularz (kod + check) --- */
.wh-giftcard__form {
  margin-top: var(--wh-space-md, 1.6rem);
  padding-top: var(--wh-space-md, 1.6rem);
  border-top: 1px solid var(--wh-color-border-subtle, #e5e7eb);
}

/* Rzad "pole kodu + przycisk Sprawdz".
   Wczesniej byl to bootstrapowy `input-group` w wersji 3 (`span.input-group-btn`),
   ktorej Hummingbird (Bootstrap 5) nie zna: elementy mialy rozne wysokosci i
   zerowy odstep. Wlasny rzad rozwiazuje oba naraz — `align-items: stretch`
   zrownuje wysokosci niezaleznie od paddingow motywu. */
.wh-giftcard__code-row {
  display: flex;
  align-items: stretch;
  gap: var(--wh-space-sm, 0.8rem);
  flex-wrap: wrap;
}
.wh-giftcard__code-row .wh-giftcard__code-input {
  flex: 1 1 18rem;
  min-width: 0;                       /* bez tego flex nie pozwala sie zwezic */
  letter-spacing: 0.1rem;             /* kod czyta sie znak po znaku */
}
.wh-giftcard__code-row .wh-giftcard__code-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Box wyniku sprawdzenia salda --- */
.wh-giftcard__result {
  margin-top: var(--wh-space-md, 1.6rem);
  padding: var(--wh-space-md, 1.6rem);
  border-radius: var(--wh-radius-sm, 0.4rem);
  background: var(--wh-color-bg-base, #fff);
  border: 1px solid var(--wh-color-border-subtle, #e5e7eb);
}
.wh-giftcard__result p { margin: 0 0 var(--wh-space-sm, 0.8rem); }

/* --- Stan: karta zaaplikowana --- */
.wh-giftcard__applied {
  border-radius: var(--wh-radius-sm, 0.4rem);
  padding: var(--wh-space-md, 1.6rem);
  background: var(--wh-color-bg-base, #fff);
  border: 1px solid var(--wh-color-border-subtle, #e5e7eb);
  border-left: 4px solid var(--wh-color-primary, #2874fc);
}
.wh-giftcard__applied-title {
  display: flex;
  align-items: center;
  gap: var(--wh-space-xs, 0.4rem);
  font-weight: var(--wh-font-weight-bold, 700);
  margin-bottom: var(--wh-space-sm, 0.8rem);
}
.wh-giftcard__applied-title .material-icons { color: var(--wh-color-primary, #2874fc); }
.wh-giftcard__row { display: block; margin-bottom: var(--wh-space-3xs, 0.2rem); }
.wh-giftcard__remaining { color: var(--wh-color-semantic-danger, #dc2626); font-weight: var(--wh-font-weight-semibold, 600); }
.wh-giftcard__covered { color: var(--wh-color-semantic-success, #16a34a); font-weight: var(--wh-font-weight-bold, 700); }
.wh-giftcard__note { color: var(--wh-color-text-muted, #6b7280); font-style: italic; }

/* --- Przyciski (delegujemy wyglad do motywu, tu tylko spacing/ikona) --- */
.wh-giftcard__btn-icon {
  vertical-align: middle;
  font-size: var(--wh-font-size-base, 1.6rem);
  margin-right: var(--wh-space-xs, 0.4rem);
}
.wh-giftcard__remove { margin-top: var(--wh-space-md, 1.6rem); }

/* ============ Formularz odbiorcy prezentu (gift_recipient) ============ */
.wh-gift-recipient {
  margin: var(--wh-space-md, 1.6rem) 0;
  padding: var(--wh-space-md, 1.6rem);
  border: 1px solid var(--wh-color-border-subtle, #e5e7eb);
  border-left: 4px solid var(--wh-color-primary, #2874fc);
  border-radius: var(--wh-radius-md, 0.8rem);
  background: var(--wh-color-bg-subtle, #f8f8f8);
}
.wh-gift-recipient__title {
  display: flex;
  align-items: center;
  gap: var(--wh-space-xs, 0.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  margin: 0 0 var(--wh-space-sm, 0.8rem);
}
.wh-gift-recipient__title .material-icons { color: var(--wh-color-primary, #2874fc); }
.wh-gift-recipient__intro { margin: 0 0 var(--wh-space-md, 1.6rem); color: var(--wh-color-text-muted, #6b7280); }
.wh-gift-recipient__label { display: block; font-weight: var(--wh-font-weight-semibold, 600); margin-bottom: var(--wh-space-xs, 0.4rem); }
.wh-gift-recipient__req { color: var(--wh-color-semantic-danger, #dc2626); }
.wh-gift-recipient__input { max-width: 32rem; }
.wh-gift-recipient__hint { margin: var(--wh-space-sm, 0.8rem) 0 0; color: var(--wh-color-text-muted, #6b7280); }
.wh-gift-recipient__icon-btn { vertical-align: middle; margin-right: var(--wh-space-xs, 0.4rem); }

/* ============ Strona sprawdzania salda (balance) ============ */
.wh-balance { max-width: 56rem; margin: 0 auto; padding: var(--wh-space-lg, 3.2rem) var(--wh-space-md, 1.6rem); }
.wh-balance__head { text-align: center; margin-bottom: var(--wh-space-lg, 3.2rem); }
.wh-balance__head .material-icons { font-size: 4.8rem; color: var(--wh-color-primary, #2874fc); }
.wh-balance__title { margin-top: var(--wh-space-sm, 0.8rem); }
.wh-balance__card {
  border: 1px solid var(--wh-color-border-subtle, #e5e7eb);
  border-radius: var(--wh-radius-md, 0.8rem);
  margin-bottom: var(--wh-space-lg, 3.2rem);
  overflow: hidden;
}
.wh-balance__card-head {
  padding: var(--wh-space-md, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  background: var(--wh-color-bg-subtle, #f7f7f7);
  border-bottom: 1px solid var(--wh-color-border-subtle, #e5e7eb);
}
.wh-balance__card-head--primary {
  display: flex;
  align-items: center;
  gap: var(--wh-space-xs, 0.4rem);
  background: var(--wh-color-primary, #2874fc);
  color: var(--wh-color-text-inverse, #fff);
}
.wh-balance__card-body { padding: var(--wh-space-md, 1.6rem); }
.wh-balance__table { width: 100%; border-collapse: collapse; }
.wh-balance__table td { padding: var(--wh-space-sm, 0.8rem) 0; border-bottom: 1px solid var(--wh-color-border-subtle, #f0f0f0); }
.wh-balance__table tr:last-child td { border-bottom: none; }
.wh-balance__k { color: var(--wh-color-text-muted, #6b7280); width: 50%; }
.wh-balance__code { font-weight: var(--wh-font-weight-bold, 700); letter-spacing: 0.2rem; }
.wh-balance__amount { font-weight: var(--wh-font-weight-bold, 700); }
.wh-balance__amount--ok { color: var(--wh-color-semantic-success, #16a34a); }
.wh-balance__amount--zero { color: var(--wh-color-semantic-danger, #dc2626); }
.wh-balance__label { display: block; font-weight: var(--wh-font-weight-semibold, 600); margin-bottom: var(--wh-space-xs, 0.4rem); }
.wh-balance__req { color: var(--wh-color-semantic-danger, #dc2626); }
.wh-balance__field { margin-bottom: var(--wh-space-md, 1.6rem); }
.wh-balance__code-input { letter-spacing: 0.2rem; text-align: center; }
.wh-balance__submit { width: 100%; }
.wh-balance__submit .material-icons { vertical-align: middle; margin-right: var(--wh-space-xs, 0.4rem); }
.wh-balance__card-head .material-icons,
.wh-balance__head .material-icons { vertical-align: middle; }

/* ============ Blok w stopce ============ */
/* Od 1.5.0 blok uzywa struktury wh_linklist (`.wh-linklist`, `.wh-linklist__title`
   jako <button>, `.wh-linklist__items`) — dzieki temu wchodzi w uklad kolumn
   stopki i zwija sie na malych ekranach tak samo jak sasiednie sekcje.
   ⚠️ NIE nadpisujemy tu naglowka ani odstepow: wyglad ma pochodzic z wh_linklist,
   inaczej ta jedna kolumna znowu odstaje. Zostaja wylacznie style ikony i linku,
   ktorych tamten modul nie zna. Wszystko na tokenach — brand sie propaguje.
   (Reguła `.wh-giftcard-footer__title` usunieta wraz z elementem <p>.) */
.wh-giftcard-footer__list { margin: 0; padding: 0; list-style: none; }
.wh-giftcard-footer__item + .wh-giftcard-footer__item { margin-top: var(--wh-space-xs, 0.6rem); }
.wh-giftcard-footer__link {
    display: inline-flex;
    align-items: center;
    gap: var(--wh-space-xs, 0.6rem);
    color: inherit;
    opacity: 0.85;
}
.wh-giftcard-footer__link:hover,
.wh-giftcard-footer__link:focus { color: inherit; opacity: 1; }
.wh-giftcard-footer__icon { font-size: var(--wh-font-size-base, 1.6rem); }

/* ============ Szczegoly zamowienia klienta ============ */
.wh-giftcard-detail__code { font-weight: var(--wh-font-weight-bold, 700); letter-spacing: 0.1rem; }
.wh-giftcard-detail__used { font-weight: var(--wh-font-weight-bold, 700); color: var(--wh-color-semantic-success, #16a34a); }
.wh-giftcard-detail__refund-row { align-items: center; }
.wh-giftcard-detail__refund { font-weight: var(--wh-font-weight-bold, 700); color: var(--wh-color-primary, #2874fc); }
.wh-giftcard-detail__refund-icon { vertical-align: middle; font-size: var(--wh-font-size-base, 1.6rem); }

/* Karty KUPIONE w zamowieniu (1.6.2): kod, wartosc, saldo, waznosc, PDF */
.wh-giftcard-issued { margin: var(--wh-space-md, 1.6rem) 0; }
.wh-giftcard-issued__title { margin-bottom: var(--wh-space-sm, 0.8rem); }
.wh-giftcard-issued__card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--wh-space-md, 1.6rem);
  padding: var(--wh-space-md, 1.6rem);
  border: 1px solid var(--wh-color-border-subtle, #d7d7d7);
  border-radius: var(--wh-radius-md, 0.4rem);
  background: var(--wh-color-bg-base, #fff);
}
.wh-giftcard-issued__card + .wh-giftcard-issued__card { margin-top: var(--wh-space-sm, 0.8rem); }
.wh-giftcard-issued__list { margin: 0; display: grid; gap: var(--wh-space-xs, 0.4rem); }
.wh-giftcard-issued__row { display: flex; gap: var(--wh-space-sm, 0.8rem); }
.wh-giftcard-issued__row dt { margin: 0; min-width: 14rem; font-weight: normal; }
.wh-giftcard-issued__row dd { margin: 0; font-weight: var(--wh-font-weight-bold, 700); color: var(--wh-color-text-primary, #000); }
/* Bootstrap barwi <code> na rozowo (--bs-code-color) — kod karty ma byc czytelny jak reszta */
.wh-giftcard-issued .wh-giftcard-detail__code { color: var(--wh-color-text-primary, #000); font-size: var(--wh-font-size-base, 1.6rem); }
/* tekst stanu: 55 % zieleni w czerni — kontrast >= 7:1 (CLAUDE.md: proporcje domieszki dla tekstu) */
.wh-giftcard-issued__row .wh-giftcard-issued__status--active { color: color-mix(in srgb, var(--wh-color-semantic-success, #16a34a) 55%, #000); }