/**
 * Dotazník ve Webflow designu — jen to, co CSS z Webflow (site.css theme)
 * nepokrývá. (Starý main.css pro rawtheme odstraněn 23. 10. 2026.)
 *
 * Pravidlo: sem patří výhradně věci, které v maketě nejsou (chybové hlášky,
 * <button> místo <a>, stavy validace). Vzhled komponent řeší Webflow třídy.
 */

/* Animace míchání granulí (#step-submission) — celý soubor je scopnutý na
   .rc-* třídy.
   @import musí zůstat PŘED všemi pravidly, jinak ho prohlížeč zahodí. */
@import url('steps/submission-animation.css');

/* Tlačítka fází musí být <button> (JS jim nastavuje disabled), Webflow .btn
   je navržený pro <a> — srovnáme UA styly. */
#rawbark-comparator button.btn {
  border: 0 none;
  /* Jen rodina — velikost/tučnost/line-height si nese .btn ze site.css.
     Zkratka `font: inherit` by je přebila (vyšší specificita) a tlačítko
     by mělo 16px/400 místo 18px/700. */
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#rawbark-comparator button.btn[disabled] {
  cursor: not-allowed;
  opacity: .45;
}

/* Chybové hlášky validace — v maketě nejsou, držíme je v duchu designu. */
#rawbark-comparator .invalid-feedback {
  display: none;
  width: 100%;
  margin-top: var(--size-xxs, 5px);
  color: var(--rb--orange, #f5a623);
  font-size: 14px;
  line-height: 1.3;
}

#rawbark-comparator .invalid-feedback .error-icon {
  margin-right: 4px;
}

#rawbark-comparator .input.is-invalid,
#rawbark-comparator .w-select.is-invalid {
  border-color: var(--rb--orange, #f5a623);
}

/* Info panely u otázek — výchozí stav = zavřeno (ve Webflow to dělá ix2). */
#rawbark-comparator .filter-navigation[data-rb-info-panel] {
  display: none;
  opacity: 0;
}

/* Náhled nahrané fotky v pytli.
   Pozici a velikost .dog-photo-holder určuje site.css (Webflow) — tady jen
   dokreslíme obrázek, jinak by šedý placeholder z návrhu zůstal prázdný. */
.dog-photo-holder {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Skryté nativní vstupy, které design nezobrazuje, ale JS je potřebuje. */
#rawbark-comparator input[type="file"].rb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * Cropper modal
 * Od 10. 9. 2026 vzhled (pozadí, rádius, hlavička, tlačítka) dělají
 * třídy z Webflow designu — `.modal_card.l`, `.card-inner`,
 * `.heading-wrapper`, `.form-footer.s-m`, `.btn`, `.ms-icon` (viz maketa
 * `#add-photo` v docs/webflow-mockups/sestavit-krmivo.html a stejný
 * partial sjednocený v theme, pages-parts/shared/photo-upload-cropper-modal.php
 * + assets/css/components/photo-upload-cropper.css). Tady zůstává jen to,
 * co design systém neřeší: fixní overlay přes stránku, vycentrování karty
 * a limity výšky plochy s obrázkem + barvy vodítek CropperJS.
 * ------------------------------------------------------------------ */
body.cropper-open {
  overflow: hidden;
}

.rawbark-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

/* photo-processor.js otevírá modal přes jQuery fadeIn(), které po animaci
   nechá element bez inline display — jistota, že zůstane viditelný. */
#cropper-container:not([style*="display: none"]) {
  display: block !important;
}

.rawbark-photo-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

/* Šířku karty dává `.modal_card.l` (685 px) z design systému — tady jen
   pozicování na střed a limit výšky, aby se cropper vešel na obrazovku. */
.rawbark-photo-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-height: 90vh;
  overflow: auto;
}

.rawbark-photo-modal-body {
  max-height: calc(90vh - 220px);
  overflow: auto;
}

.rawbark-photo-cropper-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.rawbark-photo-cropper-container img {
  display: block;
  max-width: 100%;
  max-height: 400px;
}

#cropper-container .cropper-view-box {
  outline: 1px solid var(--rb--orange, #f99e22);
  outline-color: rgba(249, 158, 34, .75);
}

#cropper-container .cropper-line,
#cropper-container .cropper-point {
  background-color: var(--rb--orange, #f99e22);
}

#cropper-container.processing {
  pointer-events: none;
}

#cropper-container.processing .rawbark-photo-modal-content {
  opacity: .7;
}

@media (max-width: 768px) {
  .rawbark-photo-modal-content { width: 95%; }
  .rawbark-photo-modal-footer .h-flex { flex-wrap: wrap; justify-content: center; }
  .rawbark-photo-modal-footer #crop-image { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Stavy foto kroku a spinner v tlačítkách
 * ------------------------------------------------------------------ */

/* Vybraná dlaždice „Nahrát fotografii" a stav po nahrání fotky. */
.card.add-photo.photo-option-card.selected,
.card.add-photo.photo-option-card.photo-ready {
  border-style: solid;
  border-color: var(--rb--orange, #f5a623);
}

.card.add-photo.photo-option-card {
  cursor: pointer;
}

/* form-submitter.js / photo-processor.js přepisují obsah tlačítka
   bootstrapovým spinnerem — bootstrap se na webflow stránkách nenačítá. */
#rawbark-comparator .spinner-border {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  border: .15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rbSpinner .75s linear infinite;
}

#rawbark-comparator .spinner-border-sm {
  width: .85em;
  height: .85em;
  border-width: .12em;
}

@keyframes rbSpinner {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ *
 * Odznak věkové kategorie (Štěně / Dospělý / Senior)
 *
 * V maketě není — grafik ho nenavrhl, ale funkčně dává smysl (věk mění
 * recepturu). Aby karta zůstala výškově 1:1 s předlohou, sedí odznak
 * absolutně v pravém horním rohu karty a do toku nezasahuje.
 * ------------------------------------------------------------------ */
#step-3 .card.sub {
  position: relative;
}

#age-category-container {
  position: absolute;
  top: var(--size-s, 15px);
  right: var(--size-s, 15px);
  margin: 0;
}

#age-category-container .field-label {
  margin-top: 0;
  margin-bottom: 0;
}

/* Krok 4 — plemeno (kolega 21. 10. 2026): od tabletu select a „Neznámé
   plemeno" vedle sebe — tlačítko má přirozenou šířku, select se roztáhne.
   Panel velikostí a chybová hláška jdou na vlastní řádek pod ně. */
@media (min-width: 768px) {
  #step-4 .input-wrapper.max-w-530 {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  #step-4 #plemeno-nevim {
    flex: 0 0 auto;
    width: auto; /* .btn.primary má pod 992 px width: 100 % (site.css) */
  }
  #step-4 .unknown-breed-size,
  #step-4 #breed-error {
    flex: 0 0 100%;
  }
}

/* „Neznámé plemeno" zvolené tlačítkem: select dál ukazuje „Vyberte plemeno"
   (stav nese oranžové tlačítko + panel velikostí). Hodnota selectu zůstává
   „0" — přes text jen přeložíme placeholder, nativní seznam se nemění.
   Třídu .rb-breed-unknown, padding a velikost písma selectu dává comparator-webflow.js. */
#step-4 .input-wrapper.rb-breed-unknown {
  position: relative;
}
#step-4 .input-wrapper.rb-breed-unknown select {
  color: transparent;
}
#step-4 .input-wrapper.rb-breed-unknown select option {
  color: var(--rb--purple-900, #280014);
}
#step-4 .input-wrapper.rb-breed-unknown::after {
  content: attr(data-rb-placeholder);
  position: absolute;
  top: 50%;
  left: var(--rb-select-pad, 20px);
  right: 48px;
  transform: translateY(-50%);
  font-size: var(--rb-select-font, inherit);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Animace odeslání: fotka v rámečku od kraje ke kraji. Otvor rámečku
   (ramecek-big*.png, i vánoční/valentýnský) je ~83–84 % jeho šířky, vnější
   hrana bílého okraje ~86 % → fotka 85 % se schová pod bílý okraj a pytel
   mezi fotkou a rámečkem neprosvítá (dřív 54 px v 70px rámečku). */
.rc-submission-bag .rc-bag-photo-circle {
  width: calc(70px * .85);
  height: calc(70px * .85);
}
@media (max-width: 575px) {
  .rc-submission-bag .rc-bag-photo-circle {
    width: calc(58px * .85);
    height: calc(58px * .85);
  }
}

/* Foto krok: ikona fotoaparátu v dlaždici „Nahrát fotografii" zůstává i po
   nahrání (kolega 21. 10. 2026). photo-processor.js ji po nahrání schová
   (.hide() = inline display:none) — to platí pro starý vzhled, kde se na jejím
   místě ukazoval náhled; ve webflow je náhled v polaroidu vedle. */
#step-photo #upload-placeholder {
  display: flex !important;
}

/* Otázky s otazníkem (Pokyny 21. 10. #66): .info-icon sedí v nadpisu hned
   za posledním slovem — v .rb-q-tail se nezalomí, takže při víc řádcích
   nespadne na vlastní řádek. Mezera = dřívější gap-s mezi h3 a ikonou. */
#rawbark-comparator .rb-q-tail {
  white-space: nowrap;
}
#rawbark-comparator .rb-q-tail > .info-icon {
  display: inline-flex;
  margin-left: var(--size-s);
  vertical-align: middle;
  position: relative;
  top: -.08em;
}

/* Foto krok (Pokyny 21. 10. #60): po nahrání „Změnit fotografii" + kulaté
   tlačítko „Smazat" vedle. Bez fotky je mazací tlačítko schované. */
#step-photo .rb-photo-actions {
  flex-wrap: nowrap;
  justify-content: center;
  align-self: stretch;
}
#step-photo .rb-photo-actions #upload-photo-button {
  min-width: 0;
}
#step-photo #remove-photo-button {
  flex: none;
  width: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
}
#upload-photo-card:not(.photo-ready) #remove-photo-button {
  display: none;
}