/* ⚠️  GENEROVANÝ SOUBOR — NEEDITUJ RUČNĚ.
   Kopie ze zdroje v Kouskysveta/design-system/css/. Změny dělej tam a spusť:
   node scripts/build.mjs  (přepíše tuto kopii). */

/* ═══════════════════════════════════════════════════════════════════
   FOTKY U RECENZÍ — pole „Fotky" ve formuláři recenze + náhledy ve výpisu
   (modul pluginu ReviewPhotos). Načítá se jen na stránce produktu.
   Build kopíruje do pluginu: includes/assets/design-system/review-photos.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── Formulář: pole je skryté, dokud ho neodkryje JS ── */
.ks-rp-field[hidden],
.ks-rp-field [hidden] { display: none !important; }

.ks-rp-field {
  display: grid;
  gap: var(--s-xs);
  margin: 0 0 var(--s-md);
  font-family: var(--font-body);
  color: var(--color-tx);
}
.ks-rp-field__label { font-weight: 600; font-size: var(--t-sm); }
.ks-rp-field__opt { font-weight: 400; color: var(--color-tx-3); }

.ks-rp-field__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin: 0;
  padding: var(--s-2xs) 0 0;
  list-style: none;
}
.ks-rp-field__list:empty { display: none; }
.ks-rp-field__item { position: relative; width: 72px; height: 72px; margin: 0; padding: 0; }
.ks-rp-field__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--color-paper-2);
}

/* Odebrat fotku — malý kroužek v rohu, dotyková plocha přes ::before.
   Selektor dvakrát kvůli tlačítkům z Elementor kitu (`.elementor-kit-N button`). */
.ks-rp-field .ks-rp-field__remove,
.ks-rp-field .ks-rp-field__remove:hover,
.ks-rp-field .ks-rp-field__remove:focus {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-s);
  cursor: pointer;
}
.ks-rp-field .ks-rp-field__remove::before { content: ""; position: absolute; inset: -9px; }
.ks-rp-field .ks-rp-field__remove:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Vlastní tlačítko místo systémového „Vybrat soubor"; input zůstává
   přístupný z klávesnice (jen vizuálně skrytý). */
.ks-rp-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ks-rp-field .ks-rp-field__add {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2xs);
  justify-self: start;
  min-height: var(--min-touch);
  margin: 0;
  padding: 0 var(--s-sm);
  border: 1px dashed var(--color-line-2);
  border-radius: var(--radius-m);
  background: var(--color-paper);
  color: var(--color-tx);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.ks-rp-field .ks-rp-field__add:hover { border-color: var(--color-tx-2); }
.ks-rp-field__input:focus-visible + .ks-rp-field__add { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ks-rp-field.is-busy .ks-rp-field__add { opacity: .6; pointer-events: none; }

.ks-rp-field__hint { margin: 0; font-size: var(--t-xs); color: var(--color-tx-2); }
.ks-rp-field__error { margin: 0; font-size: var(--t-xs); color: var(--color-error); }

/* ── Výpis recenzí: náhledy pod textem ── */
.ks-rp-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin: var(--s-xs) 0 0;
}
.ks-rp-gallery__link {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--color-paper-2);
}
.ks-rp-gallery .ks-rp-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--transition-fast);
}
.ks-rp-gallery__link:hover .ks-rp-gallery__img { transform: scale(1.04); }
.ks-rp-gallery__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (min-width: 768px) {
  .ks-rp-gallery__link { width: 88px; height: 88px; }
}

/* Hláška po odeslání bez ověřeného e-mailu (fotky se nepřidaly). */
.ks-rp-notice {
  margin: var(--s-xs) 0 0;
  padding: var(--s-xs) var(--s-sm);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-s);
  background: var(--color-paper-2);
  font-size: var(--t-xs);
  color: var(--color-tx);
}