/* frontend/simple/simple.css — jednoduchý PDP konfigurátor. Světlé UI (kontext e-shopu),
   vlastní scope .tk-simple, vlastní font-family (lekce: blok nesmí dědit z okolí). */

/* Design fonty pro živý náhled (stejné rodiny jako tisk — náhled ≈ tisk). */
@font-face { font-family: 'Caveat'; src: url('/frontend/view/fonts/caveat-latin.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Caveat'; src: url('/frontend/view/fonts/caveat-latinext.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Baloo 2'; src: url('/frontend/view/fonts/baloo2-latin.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Baloo 2'; src: url('/frontend/view/fonts/baloo2-latinext.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Montserrat'; src: url('/frontend/view/fonts/montserrat-latin.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Montserrat'; src: url('/frontend/view/fonts/montserrat-latinext.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Open Sans'; src: url('/frontend/view/fonts/opensans-latin.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Open Sans'; src: url('/frontend/view/fonts/opensans-latinext.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Playfair Display'; src: url('/frontend/view/fonts/playfair-latin.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Playfair Display'; src: url('/frontend/view/fonts/playfair-latinext.woff2') format('woff2'); font-weight: 100 900; unicode-range: U+0100-024F, U+1E00-1EFF; }

@font-face { font-family: 'Playfair Display Bold'; src: url('/frontend/view/fonts/playfair700-latin.woff2') format('woff2'); font-weight: 400 900; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Playfair Display Bold'; src: url('/frontend/view/fonts/playfair700-latinext.woff2') format('woff2'); font-weight: 400 900; unicode-range: U+0100-024F, U+1E00-1EFF; }

/* Živý náhled na fotce (cfg.preview) */
.tks-preview { position: relative; width: 100%; }
.tks-preview .tks-preview-photo { width: 100%; display: block; border-radius: 12px; background: #f4f4f4; }
.tks-preview .tks-preview-area { position: absolute; }
.tks-preview .tks-preview-area[hidden] { display: none !important; } /* náhled skrytý na nepotiskové straně */
.tks-preview .tks-preview-el { position: absolute; }
.tks-preview img.tks-preview-el { object-fit: contain; }
.tks-preview .tks-preview-text { display: flex; align-items: center; justify-content: center; white-space: pre-line; text-align: center; overflow: visible; }
.tk-simple { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #1a1a1a; max-width: 560px; }
.tk-simple *, .tk-simple *::before, .tk-simple *::after { box-sizing: border-box; }
.tk-simple [hidden] { display: none !important; } /* lekce: display:flex/grid ignoruje hidden */

.tk-simple .tks-field { margin: 0 0 18px; }
.tk-simple .tks-lab { display: block; font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.tk-simple .tks-count { font-weight: 400; color: #777; margin-left: 4px; }
.tk-simple .tks-help { display: block; color: #777; font-size: 13px; margin-top: 6px; }

.tk-simple .tks-photochips, .tk-simple .tks-grid, .tk-simple .tks-dots { display: flex; flex-wrap: wrap; gap: 8px; }

.tk-simple .tks-photochip, .tk-simple .tks-chip {
  width: 64px; height: 64px; padding: 0; border: 2px solid #ddd; border-radius: 8px;
  background: #fff; cursor: pointer; overflow: hidden;
}
.tk-simple .tks-chip { background: #2b2b2b; } /* motivy z knihovny jsou často bílé → tmavý chip */
.tk-simple .tks-photochip img, .tk-simple .tks-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-simple .tks-chip img { object-fit: contain; padding: 6px; }
/* barevný swatch z produktu (Shoptet variant image) — kolečko vycentrované v dlaždici */
.tk-simple .tks-photochip.is-swatch img { object-fit: contain; padding: 8px; }
.tk-simple .tks-photochip.is-sel, .tk-simple .tks-chip.is-sel { border-color: #111; box-shadow: 0 0 0 1px #111; }
/* barva produktu jako ČISTÉ kolečko z reálného hexu (Shoptet swatch JPG má zapečené černé pozadí
   → jako dlaždice vypadal jako černý rám). Stejný vizuál jako .tks-dot (Barva jména), jen větší. */
.tk-simple .tks-photochip--dot {
  width: 40px; height: 40px; border-radius: 50%; padding: 3px;
  border: 2px solid #ddd; background: #fff; overflow: visible;
}
.tk-simple .tks-photochip--dot .tks-pcdot { display: block; width: 100%; height: 100%; border-radius: 50%; }
.tk-simple .tks-photochip--dot.is-sel { border-color: #111; box-shadow: 0 0 0 1px #111; }

.tk-simple .tks-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ddd; cursor: pointer; padding: 0; }
.tk-simple .tks-dot.is-sel { border-color: #111; box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px #111; }

/* přepínač strany předek/záda */
.tk-simple .tks-viewtabs { display: inline-flex; gap: 0; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; }
.tk-simple .tks-viewtab { padding: 8px 18px; font-size: 14px; font-weight: 700; font-family: inherit; background: #fff; color: #555; border: 0; border-right: 1px solid #ccc; cursor: pointer; }
.tk-simple .tks-viewtab:last-child { border-right: 0; }
.tk-simple .tks-viewtab.is-sel { background: #111; color: #fff; }
/* badge „+79 Kč" u příplatkové strany (záda) */
.tk-simple .tks-viewbadge { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 800; line-height: 1.6; border-radius: 999px; background: #ffe08a; color: #6b5310; vertical-align: 1px; }
.tk-simple .tks-viewtab.is-sel .tks-viewbadge { background: #ffd45e; color: #4a3800; }
/* pole skryjeme, když nepatří k aktuální straně (víc stran); [hidden] samo o sobě přebije .tks-field margin */
.tk-simple .tks-fieldwrap[hidden] { display: none !important; }

.tk-simple .tks-select, .tk-simple .tks-input {
  width: 100%; padding: 10px 12px; font-size: 15px; font-family: inherit;
  border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #1a1a1a;
}
.tk-simple .tks-input:focus, .tk-simple .tks-select:focus { outline: 2px solid #111; outline-offset: 1px; }
.tk-simple .tks-textarea { min-height: 46px; resize: vertical; line-height: 1.3; }

.tk-simple .tks-mismatch { background: #fff7e0; border: 1px solid #eacb57; color: #6b5310; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.tk-simple .tks-glyphnote { background: #eef4fb; border: 1px solid #b9d2ee; color: #234a77; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.tk-simple .tks-surcharge { background: #f3f9f3; border: 1px solid #b7ddb7; color: #1d5c1d; padding: 10px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.tk-simple .tks-missing { color: #b3261e; font-size: 14px; }
.tk-simple .tks-invalid { color: #b3261e; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* přesunutá NATIVNÍ pole produktu (velikost ap., shoptet.moveSelects) — vzhled našich selectů */
.tk-simple .tks-native select {
  width: 100%; padding: 10px 12px; font-size: 15px; font-family: inherit;
  border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #1a1a1a;
}
.tk-simple .tks-native select:focus { outline: 2px solid #111; outline-offset: 1px; }

/* přesunuté NATIVNÍ počítadlo množství (span.quantity ze Shoptet formu) jako input-group:
   border nese OBAL (nativní .amount input má border:0 — Shoptet počítá s vlastním rámem,
   který se přesunem ztratil → chyběl pravý okraj). Vnitřní šipky zůstávají Shoptet. */
.tk-simple .tks-qty .quantity {
  display: inline-flex; align-items: stretch; position: relative; overflow: hidden;
  border: 1px solid #ccc; border-radius: 8px; background: #fff; min-height: 46px;
}
.tk-simple .tks-qty .quantity .amount { border: 0 !important; border-radius: 0; }
.tk-simple .tks-qty .quantity:focus-within { outline: 2px solid #111; outline-offset: 1px; }

.tk-simple .tks-cta {
  width: 100%; padding: 14px 20px; font-size: 16px; font-weight: 800; font-family: inherit;
  background: #ffd21e; color: #111; border: 0; border-radius: 10px; cursor: pointer;
}
.tk-simple .tks-cta:hover { filter: brightness(0.95); }

/* košík na víc kusů: zákazníci berou několik tašek najednou (kamarádkám) */
.tk-simple .tks-more {
  width: 100%; padding: 11px 16px; margin-bottom: 8px; font: inherit; font-weight: 700;
  background: #fff; color: #111; border: 2px dashed #d7d2c4; border-radius: 10px; cursor: pointer;
}
.tk-simple .tks-more:hover { border-color: #e6b800; }
.tk-simple .tks-basket { margin: 4px 0 10px; }
.tk-simple .tks-basketlist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-simple .tks-basketitem {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #faf8f3; border: 1px solid #e9e4d8; border-radius: 8px;
}
.tk-simple .tks-basketitem.is-editing { border-color: #ffd21e; background: #fffaea; }
.tk-simple .tks-basketdot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.tk-simple .tks-basketname { font-weight: 700; }
.tk-simple .tks-basketmeta { flex: 1; min-width: 0; color: #6b675e; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-simple .tks-basketedit {
  flex: none; font: inherit; font-size: 13px; background: none; border: 0; color: #6b675e;
  text-decoration: underline; cursor: pointer; padding: 4px 6px;
}
.tk-simple .tks-basketedit:hover { color: #111; }
.tk-simple .tks-basketdel {
  flex: none; width: 28px; height: 28px; font-size: 20px; line-height: 1;
  background: none; border: 0; color: #a09a8c; cursor: pointer; border-radius: 6px;
}
.tk-simple .tks-basketdel:hover { color: #b3261e; background: #f3ece9; }
/* nevyplněná povinná pole: CTA zůstává ŽLUTÉ (brand, bere oči), jen zesvětlené — klik ukáže co chybí */
.tk-simple .tks-cta.is-muted { background: #ffedb0; color: #8a7420; }

/* hover akcent na volbách — žlutá dává interaktivitě brand šťávu */
.tk-simple .tks-photochip:hover, .tk-simple .tks-chip:hover, .tk-simple .tks-dot:hover { border-color: #e6b800; }
.tk-simple .tks-viewtab:hover { color: #111; }

@media (max-width: 640px) {
  .tk-simple { max-width: none; }
  .tk-simple .tks-photochip, .tk-simple .tks-chip { width: 56px; height: 56px; } /* ≥44px touch target */
  .tk-simple .tks-photochip--dot { width: 44px; height: 44px; } /* kolečko stačí menší, 44px touch target drží */
}

/* chybová hláška embedu (uložení návrhu selhalo ap.) + rezervace plochy náhledu v galerii.
   Pozn.: .tks-embed-error je v host (mimo .tk-simple scope) → bez prefixu. */
.tks-embed-error { color: #b3261e; font-size: 14px; font-weight: 700; margin: 10px 0 0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.tks-embed-error[hidden] { display: none !important; }
.tks-embed-preview-gallery { min-height: 220px; }

/* „← Zpět na tvůj návrh" — plovoucí pilulka přes fotku, jen když si zákazník prohlíží
   nativní fotky (body.tks-photos-native). Bílá, ať nekonkuruje žluté CTA. */
.tks-back-to-preview { display: none; }
body.tks-photos-native .tks-back-to-preview {
  display: inline-block; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 5; padding: 10px 18px; white-space: nowrap; cursor: pointer;
  font: 700 14px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #111;
  background: #fff; border: 1px solid #ddd; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
body.tks-photos-native .tks-back-to-preview:hover { border-color: #111; }

/* Mobilní mini-náhled u ovládání: hlavní náhled je nahoře v galerii, na mobilu daleko od polí.
   Přišpendlený thumbnail vpravo drží design na očích i při psaní. Na desktopu skrytý (náhled je vidět). */
.tks-embed-mini { display: none; }
@media (max-width: 640px) {
  .tks-embed-mini {
    display: block; position: sticky; top: 6px; z-index: 20;
    width: 116px; margin: 0 0 4px auto; /* vpravo, ať nezakrývá pole */
    background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }
  .tks-embed-mini .tks-preview-photo { border-radius: 7px; }
}

/* fabric engine: canvas podání náhledu (nasvícení + zakřivení) překrývá fotku 1:1 */
.tks-preview .tks-preview-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tks-preview .tks-preview-fx[hidden] { display: none !important; }