/*
 * Potisk golfových míčků — stránka /potisk a konfigurátor (assets/ballprint/widget.js).
 *
 * Vše pod `.gbp`, tokeny `--gbp-*` — stránka stojí v obou vzhledech eshopu
 * (v1 Bootstrap, v2 gb.css) a nesmí na nich záviset ani s nimi kolidovat
 * (stejný přístup jako rezervace simulátoru, assets/booking/widget.css).
 * Barvy jsou pevně světlé jako zbytek eshopu. Dotykové cíle ≥ 44 px, fokus
 * z klávesnice viditelný, rozvržení do 16px okraje na telefonu.
 * Písma: v1 Bebas Neue (nadpisy stránky) a Roboto z lokálních souborů eshopu,
 * v2 písmo vzhledu v2 (`--gb-font`). Velikosti jen ze škály `--gbp-fs-*`
 * a jedna tloušťka tučného `--gbp-fw-bold` — nová velikost patří do škály, ne do pravidla.
 */

/* Vlastní jména rodin („GBP …“): widget vložený do cizí stránky (matrix) by jinak těmito
   deklaracemi „přebral“ Roboto z jejího zásobníku písem a stahoval ho z eshopu (CORS chyba). */
@font-face {
  font-family: "GBP Bebas Neue";
  src: url("/dist/webfonts/BebasNeue-Regular.woff2") format("woff2"), url("/dist/webfonts/BebasNeue-Regular.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GBP Roboto";
  src: url("/dist/webfonts/Roboto-Regular.woff2") format("woff2"), url("/dist/webfonts/Roboto-Regular.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}

.gbp {
  --gbp-primary:      #092857;
  --gbp-primary-2:    #061a3d;
  --gbp-cta:          #3a772e;   /* bílý text 5,4 : 1 (značková #49943c má jen 3,4 : 1) */
  --gbp-cta-2:        #2e6425;
  --gbp-danger:       #b3261e;
  --gbp-text:         #1d242d;
  --gbp-muted:        #4b5563;
  --gbp-bg:           #f5f5f5;
  --gbp-surface:      #ffffff;
  --gbp-surface-alt:  #fafaf7;
  --gbp-line:         #d6d6d6;
  --gbp-line-soft:    #ebe9e2;
  --gbp-accent-soft:  #e8eef7;
  --gbp-ok-bg:        #e5efdc;
  --gbp-ok-ink:       #2e6425;
  --gbp-warn-bg:      #fdf3dc;
  --gbp-warn-bd:      #f1dca8;
  --gbp-warn-ink:     #6f5410;
  --gbp-bad-bg:       #fbe3e0;
  --gbp-bad-ink:      #8d1c10;
  --gbp-info-bg:      #e8eef7;
  --gbp-info-ink:     #1c3d6e;
  --gbp-ai:           #6b3fa0;   /* fialová = výstup AI */
  --gbp-ai-soft:      #f1eaf9;
  --gbp-shadow:       0 6px 18px rgba(9,40,87,0.10);
  --gbp-radius:       10px;
  --gbp-font-heading: "GBP Bebas Neue", "Bebas Neue", "GBP Roboto", Arial, sans-serif;
  --gbp-font-body:    "GBP Roboto", "Roboto", Arial, sans-serif;
  /* Typografická škála — celá stránka i konfigurátor jen z těchhle hodnot. */
  --gbp-fs-xs:  13px;   /* popisky: štítky, metadata, drobný text */
  --gbp-fs-sm:  14px;   /* doplňující text: poznámky, kontrola, řádky ceny, ceník */
  --gbp-fs-md:  16px;   /* text, ovládací prvky, názvy položek */
  --gbp-fs-lg:  18px;   /* nadpisy bloků (karty, kroky, cena, tabulky), úvodní odstavec */
  --gbp-fs-xl:  24px;   /* celková cena */
  --gbp-fs-h2:  clamp(28px, 4vw, 40px);
  --gbp-fs-h1:  clamp(34px, 6vw, 56px);
  --gbp-fw-bold: 700;

  background: var(--gbp-bg);
  color: var(--gbp-text);
  font-family: var(--gbp-font-body);
  font-size: var(--gbp-fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Vzhled v2 (body.v2) nemá Bebas ani Roboto — celá stránka jeho písmem a jeho velikostmi
   nadpisů (gb.css --gb-fs-2xl / -xl, tloušťka 600; písmo v2 jiné řezy nemá). */
body.v2 .gbp {
  --gbp-font-heading: var(--gb-font, "Google Sans Flex", "Segoe UI", Roboto, Arial, sans-serif);
  --gbp-font-body:    var(--gbp-font-heading);
  --gbp-fs-h2:  var(--gb-fs-xl, 24px);
  --gbp-fs-h1:  var(--gb-fs-2xl, 32px);
  --gbp-fw-bold: 600;
}
body.v2 .gbp .gbp-h1, body.v2 .gbp .gbp-h2 { font-weight: var(--gbp-fw-bold); letter-spacing: normal; line-height: 1.25; }
.gbp *, .gbp *::before, .gbp *::after { box-sizing: border-box; }
.gbp :where(h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset, legend, table) { margin: 0; padding: 0; }
.gbp :where(ol, ul) { list-style: none; }
.gbp :where(fieldset) { border: 0; min-width: 0; }
.gbp :where(th, td) { background: transparent; color: inherit; border: 0; text-transform: none; font-weight: inherit; text-align: left; }
.gbp :where(button, input, select, textarea) { font-family: inherit; font-size: var(--gbp-fs-md); }
.gbp :where(strong, b) { font-weight: var(--gbp-fw-bold); }   /* ne „bolder“ prohlížeče (u tučného rodiče až 900) */
.gbp a:not(.gbp-btn) { color: var(--gbp-primary); }   /* ne tlačítka-odkazy: .gbp a (0,1,1) přebíjelo .gbp-btn--cta bílou (kontrast 2,66 : 1) */
.gbp :focus-visible { outline: 3px solid rgba(73,148,60,0.6); outline-offset: 2px; }
.gbp [hidden] { display: none !important; }
/* v1 (dist/css/styles.min.css) dává všem radio a checkboxům `position: relative; top: -2px`
   selektorem se specificitou (0,2,1): skryté radio v segmentu pak zabíralo místo (bílý pruh
   vlevo u zvolené volby) a checkboxy se jako „positioned" kreslily přes sticky náhled.
   Skrytá radia widgetu mají proto níž selektory (0,3,1). */
.gbp input[type="checkbox"], .gbp input[type="radio"] { position: static; top: auto; }
/* v1 (master-golf.css) dává všem h1–h6 písmo Bebas. Bebas mají jen nadpisy stránky (.gbp-h1/.gbp-h2);
   nadpisy karet, kroků a ceny jsou písmem textu — jinak by každá úroveň nadpisu měla jiné písmo. */
.gbp .gbp-infocard h3, .gbp .gbp-step__title, .gbp .gbp-summary__title { font-family: var(--gbp-font-body); letter-spacing: normal; text-transform: none; }
.gbp-nowrap { white-space: nowrap; }
.gbp-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gbp-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.gbp-page { max-width: 1180px; margin: 0 auto; padding: 24px 16px 56px; }

/* ── typografie a sekce ── */
.gbp-h1, .gbp-h2 { font-family: var(--gbp-font-heading); font-weight: 400; color: var(--gbp-primary); letter-spacing: 0.01em; line-height: 1.05; }
.gbp-h1 { font-size: var(--gbp-fs-h1); }
.gbp-h2 { font-size: var(--gbp-fs-h2); margin-bottom: 6px; }
.gbp-sub { color: var(--gbp-muted); margin-bottom: 16px; max-width: 70ch; }
.gbp-small { font-size: var(--gbp-fs-xs); color: var(--gbp-muted); }
.gbp-note { font-size: var(--gbp-fs-sm); color: var(--gbp-muted); }
.gbp-label { display: block; font-size: var(--gbp-fs-sm); font-weight: var(--gbp-fw-bold); color: var(--gbp-text); margin-bottom: 6px; }
.gbp-section { margin-top: 40px; }

.gbp-hero {
  background: var(--gbp-surface);
  border: 1px solid var(--gbp-line-soft);
  border-radius: var(--gbp-radius);
  padding: 28px 24px;
  display: grid; gap: 12px; justify-items: start;
}
.gbp-kicker { font-size: var(--gbp-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--gbp-fw-bold); color: var(--gbp-muted); }
.gbp-lead { font-size: var(--gbp-fs-lg); max-width: 64ch; }
.gbp-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.gbp-trust li { position: relative; padding-left: 24px; font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); }
.gbp-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--gbp-ok-ink); font-weight: var(--gbp-fw-bold); }

.gbp-techinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gbp-infocard { background: var(--gbp-surface); border: 1px solid var(--gbp-line-soft); border-radius: var(--gbp-radius); padding: 18px 20px; }
.gbp-infocard h3 { font-size: var(--gbp-fs-lg); font-weight: var(--gbp-fw-bold); line-height: 1.3; color: var(--gbp-primary); margin-bottom: 8px; }
.gbp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gbp-facts li { font-size: var(--gbp-fs-xs); font-weight: var(--gbp-fw-bold); color: var(--gbp-info-ink); background: var(--gbp-info-bg); border-radius: 99px; padding: 5px 12px; }

.gbp-card { background: var(--gbp-surface); border: 1px solid var(--gbp-line); border-radius: var(--gbp-radius); box-shadow: var(--gbp-shadow); position: relative; }
.gbp-unavailable { padding: 20px; display: grid; gap: 12px; justify-items: start; }
.gbp:not(.gbp-js) .gbp-app { display: none; }

/* ── tlačítka ── */
.gbp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font-weight: var(--gbp-fw-bold); font-size: var(--gbp-fs-md); line-height: 1.1; text-decoration: none; cursor: pointer; text-align: center;
}
.gbp-btn--cta { background: var(--gbp-cta); color: #fff; }
.gbp-btn--cta:hover { background: var(--gbp-cta-2); color: #fff; }
.gbp-btn--ghost { background: #fff; color: var(--gbp-primary); border-color: var(--gbp-primary); }
.gbp-btn--ghost:hover { background: var(--gbp-accent-soft); }
.gbp-btn--sm { min-height: 44px; font-size: var(--gbp-fs-sm); padding: 0 16px; }
.gbp-btn--ai { color: var(--gbp-ai); border-color: var(--gbp-ai); }
.gbp-btn--ai:hover { background: var(--gbp-ai-soft); }
.gbp-btn[disabled] { opacity: 0.6; cursor: default; }
.gbp-link { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--gbp-primary); font-weight: var(--gbp-fw-bold); text-decoration: underline; cursor: pointer; }

/* ── upozornění ── */
.gbp-alert { border-radius: 8px; padding: 10px 14px; font-size: var(--gbp-fs-sm); margin: 10px 0; }
.gbp-alert--info { background: var(--gbp-info-bg); color: var(--gbp-info-ink); }
.gbp-alert--warn { background: var(--gbp-warn-bg); color: var(--gbp-warn-ink); border: 1px solid var(--gbp-warn-bd); }
.gbp-alert--error { background: var(--gbp-bad-bg); color: var(--gbp-bad-ink); }
.gbp-app > .gbp-alert { margin: 16px 16px 0; }

/* ── konfigurátor: rozvržení ── */
.gbp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gbp-stagecol { padding: 20px; border-right: 1px solid var(--gbp-line-soft); background: var(--gbp-surface-alt); border-radius: var(--gbp-radius) 0 0 var(--gbp-radius); }
.gbp-stagebox > * + * { margin-top: 12px; }
/* Sticky je celý blok náhledu (náhled, volby, poznámka) — nic v jeho sloupci pod ním nepodjíždí.
   Jen na monitoru dost vysokém, aby se blok vešel celý. */
@media (min-width: 900px) and (min-height: 700px) {
  .gbp-stagebox { position: sticky; top: 16px; z-index: 2; }
}
.gbp-form { padding: 20px 22px 24px; display: grid; gap: 18px; }
.gbp-form.is-busy { cursor: progress; }
/* Obsluha v matrixu u zakázky, kterou už měnit nejde (jen náhled): formulář zůstává plně čitelný (obsluha
   z něj čte zadání zákazníka — ztlumení nesplnilo kontrast), zamčení ukazují zakázané prvky a pruh nad formulářem. */
.gbp-form.is-view, .gbp-form.is-view * { cursor: default; }
.gbp-form.is-view .gbp-tech:not(.is-on), .gbp-form.is-view .gbp-seg__opt input:not(:checked) + span { background: var(--gbp-surface-alt); }

/* Jen náhled (stránka tiskárny): bez formuláře, náhled přes celou kartu. */
.gbp-app--viewer .gbp-grid { grid-template-columns: minmax(0, 1fr); }
.gbp-app--viewer .gbp-stagecol { border-right: 0; border-radius: var(--gbp-radius); }
.gbp-app--viewer .gbp-stagebox { position: static; }
.gbp-app--viewer .gbp-stage { aspect-ratio: 4 / 3; }

/* Widget vložený do cizí stránky (detail zakázky v matrixu): šířku dává sloupec stránky, ne okno —
   rozvržení se láme podle kontejneru (@container gbp níž). Písmo stránky: Roboto z /dist/webfonts
   je jen na eshopu. Lepivý náhled pod horní lištou matrixu. */
.gbp--embed { container: gbp / inline-size; background: transparent; --gbp-font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.gbp--embed .gbp-app { box-shadow: none; border: 0; border-radius: 0; }   /* kartu dává stránka */
.gbp--embed .gbp-stagecol { border-radius: 0; }
.gbp--embed .gbp-stagebox { top: var(--gbp-sticky-top, 16px); }
/* Na širokém monitoru by čtvercový náhled přerostl okno — výšku drží okno, šířku sloupec. */
.gbp--embed .gbp-stage { max-height: max(360px, calc(100vh - 240px)); }
/* 3D náhled zakázky v bloku Personalizace (Můj účet, v1 i v2): kartu a pozadí dává stránka, náhled
   bez vnitřního okraje, poměr stran jako konfigurátor (míček, ne krajina). */
.gbp--inline { background: transparent; }
.gbp--inline .gbp-app { box-shadow: none; border: 0; background: transparent; }
.gbp--inline .gbp-stagecol { padding: 0; background: transparent; border-radius: 0; }
.gbp--inline .gbp-stage { aspect-ratio: 1 / 0.92; }
@container gbp (max-width: 820px) {
  .gbp-grid { grid-template-columns: minmax(0, 1fr); }
  .gbp-stagecol { border-right: 0; border-bottom: 1px solid var(--gbp-line-soft); border-radius: var(--gbp-radius) var(--gbp-radius) 0 0; }
  .gbp-stagebox { position: static; }
}

.gbp-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 0.92; overflow: hidden;
  border-radius: var(--gbp-radius); border: 1px solid var(--gbp-line);
  background: radial-gradient(120% 90% at 45% 30%, #ffffff 0%, #f1f3f5 55%, #e3e7eb 100%);
}
.gbp-stage__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gbp-stage__cv--2d { object-fit: contain; }
.gbp-stage__cv--3d { cursor: grab; touch-action: none; }
.gbp-stage__cv--3d:active { cursor: grabbing; }
.gbp-stage__badge { position: absolute; left: 10px; top: 10px; font: var(--gbp-fw-bold) var(--gbp-fs-xs)/1 var(--gbp-font-body); color: #fff; background: var(--gbp-primary); border-radius: 99px; padding: 6px 10px; }
.gbp-stage__zoom {
  position: absolute; right: 8px; top: 8px; z-index: 1; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--gbp-primary); background: rgba(255,255,255,0.92); border: 1px solid var(--gbp-line); border-radius: 50%;
}
.gbp-stage__zoom:hover { background: #fff; border-color: var(--gbp-primary); }
.gbp-stage.is-zoomed .gbp-stage__zoom { display: none; }

/* zvětšený náhled (dialog v top layer; proměnné --gbp-* dědí z DOM) */
.gbp-zoomdlg {
  width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px);
  padding: 16px; border: 0; border-radius: var(--gbp-radius); overflow: auto;
  background: var(--gbp-surface); color: var(--gbp-text); box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}
.gbp-zoomdlg::backdrop { background: rgba(6,26,61,0.62); }
.gbp-zoomdlg .gbp-stage { aspect-ratio: auto; height: min(calc(100vh - 150px), 900px); min-height: 280px; }
.gbp-zoomdlg .gbp-stageopts { margin-top: 8px; }
.gbp-zoomdlg__close {
  position: absolute; right: 24px; top: 24px; z-index: 2; width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--gbp-primary); background: #fff; border: 1px solid var(--gbp-line); border-radius: 50%;
}
.gbp-zoomdlg__close:hover { border-color: var(--gbp-primary); }
.gbp-stage__hint { position: absolute; left: 10px; bottom: 10px; font-size: var(--gbp-fs-xs); font-weight: var(--gbp-fw-bold); color: var(--gbp-muted); background: rgba(255,255,255,0.9); border: 1px solid var(--gbp-line); border-radius: 99px; padding: 6px 10px; }
/* Na dotykovém zařízení bez myši nemá „kolečkem přiblížíte“ smysl — jiná věta. */
.gbp-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .gbp-hint-mouse { display: none; }
  .gbp-hint-touch { display: inline; }
}
.gbp-stage__msg { position: absolute; left: 12px; right: 60px; top: 12px; font-size: var(--gbp-fs-xs); color: var(--gbp-muted); }
.gbp-stage__msg:empty { display: none; }
.gbp-stageopts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--gbp-fs-sm); color: var(--gbp-muted); }
.gbp-stageopts label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.gbp-stageopts input { width: 20px; height: 20px; accent-color: var(--gbp-primary); }

.gbp-proof { border: 1px solid var(--gbp-line); border-radius: 8px; background: #fff; }
.gbp-proof summary { cursor: pointer; padding: 12px 14px; min-height: 44px; font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); }
.gbp-proof__body { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 0 14px 14px; align-items: start; }
.gbp-proof__cv { width: 180px; height: auto; aspect-ratio: 210 / 297; border: 1px solid #cfd3d6; border-radius: 3px; background: #fff; }
.gbp-proof__body .gbp-btn { margin-top: 10px; }

/* ── kroky formuláře: čísla ve sloupci vlevo, spojená linkou; obsah kroku lícuje s nadpisem ── */
.gbp-step { position: relative; display: grid; gap: 10px; padding-left: 40px; }
.gbp-step::before {
  content: ""; position: absolute; left: 13px; top: 34px; bottom: -12px; width: 2px;
  border-radius: 1px; background: var(--gbp-line-soft);
}
.gbp-step--end::before { display: none; }
/* legend: Bootstrap 5 (v1) mu dává float, šířku 100 % a velké písmo — tady neplatí */
.gbp-step__title { position: relative; display: block; float: none; width: auto; min-height: 28px; margin: 0; padding: 3px 0 0; font-size: var(--gbp-fs-lg); line-height: 1.3; font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); }
.gbp-step__n {
  position: absolute; left: -40px; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--gbp-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: var(--gbp-fs-sm); line-height: 1; font-weight: var(--gbp-fw-bold);
}
/* v1 last.css: `h3 span { font-size: 100% !important }` — číslo kroku 6 (nadpis h3) by bylo větší. */
.gbp .gbp-step__n { font-size: var(--gbp-fs-sm) !important; }
.gbp-input {
  width: 100%; min-height: 48px; padding: 10px 12px; color: var(--gbp-text); background: #fff;
  border: 1px solid #b8b6ad; border-radius: 8px;
}
textarea.gbp-input { min-height: 88px; resize: vertical; }
select.gbp-input { cursor: pointer; }
.gbp-field { display: grid; gap: 4px; }

/* výběr míčku s hledáním (vzor: mselect v matrixu) */
.gbp-pick { position: relative; }
.gbp-pick__btn {
  width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px;
  text-align: left; cursor: pointer; color: var(--gbp-text); background: #fff; border: 1px solid #b8b6ad; border-radius: 10px;
}
.gbp-pick__btn:hover, .gbp-pick__btn[aria-expanded="true"] { border-color: var(--gbp-primary); }
.gbp-pick__btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(9,40,87,0.12); }
.gbp-pick__img { width: 48px; height: 48px; flex: none; object-fit: contain; background: #fff; border-radius: 6px; }
.gbp-pick__txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gbp-pick__name { font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); line-height: 1.3; }
.gbp-pick__meta { font-size: var(--gbp-fs-xs); line-height: 1.35; color: var(--gbp-muted); font-variant-numeric: tabular-nums; }
.gbp-stock-in { color: var(--gbp-ok-ink); font-weight: var(--gbp-fw-bold); }
.gbp-stock-out { color: var(--gbp-warn-ink); }
.gbp-pick__caret { flex: none; width: 10px; height: 10px; margin: -4px 2px 0 0; border: solid var(--gbp-primary); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.gbp-pick__btn[aria-expanded="true"] .gbp-pick__caret { margin-top: 4px; transform: rotate(-135deg); }
.gbp-pick__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: 6px; padding: 8px;
  background: #fff; border: 1px solid var(--gbp-line); border-radius: 10px; box-shadow: 0 14px 36px rgba(9,40,87,0.18);
}
/* Seznam je blok, ne grid: v gridu s max-height zůstaly řádky na min-height a dvouřádkové názvy (telefon) přetekly do dalšího. */
.gbp-pick__list { max-height: min(380px, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.gbp-pick__opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.gbp-pick__opt + .gbp-pick__opt { margin-top: 2px; }
.gbp-pick__opt .gbp-pick__img { width: 40px; height: 40px; }
.gbp-pick__opt:hover { background: var(--gbp-surface-alt); }
.gbp-pick__opt.is-selected { background: var(--gbp-accent-soft); }
.gbp-pick__opt.is-active { box-shadow: inset 0 0 0 2px var(--gbp-primary); }
.gbp-pick__empty { padding: 10px 8px; font-size: var(--gbp-fs-sm); color: var(--gbp-muted); }

.gbp-qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gbp-qty__btn { width: 48px; height: 48px; border-radius: 8px; border: 1px solid #b8b6ad; background: #fff; color: var(--gbp-primary); font-size: 22px; font-weight: var(--gbp-fw-bold); cursor: pointer; }
.gbp-qty__btn:hover { background: var(--gbp-accent-soft); }
.gbp-qty__in { width: 96px; text-align: center; }
.gbp-qty__pcs { font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); }

/* technologie */
.gbp-techs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 8px; }   /* místo pro štítek „výhodnější" na hraně karty */
.gbp-tech {
  position: relative; display: grid; gap: 3px; padding: 12px 14px; min-height: 96px; cursor: pointer;
  background: #fff; border: 2px solid var(--gbp-line); border-radius: 10px;
}
.gbp .gbp-tech input[type="radio"] { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.gbp-tech:focus-within { outline: 3px solid rgba(73,148,60,0.6); outline-offset: 2px; }
.gbp-tech__name { font-weight: var(--gbp-fw-bold); font-size: var(--gbp-fs-md); color: var(--gbp-primary); }
.gbp-tech__desc { font-size: var(--gbp-fs-xs); color: var(--gbp-muted); }
.gbp-tech__price { font-weight: var(--gbp-fw-bold); margin-top: 4px; font-variant-numeric: tabular-nums; }
.gbp-tech__per { font-size: var(--gbp-fs-xs); color: var(--gbp-muted); font-variant-numeric: tabular-nums; }
.gbp-tech__per:empty { display: none; }
.gbp-tech__why { font-size: var(--gbp-fs-xs); color: var(--gbp-bad-ink); }
.gbp-tech.is-on { border-color: var(--gbp-primary); box-shadow: 0 0 0 3px rgba(9,40,87,0.12); }
.gbp-tech.is-disabled { cursor: not-allowed; background: #f2f2f2; }
.gbp-tech.is-disabled .gbp-tech__name, .gbp-tech.is-disabled .gbp-tech__desc { color: #555d6b; }
/* štítek sedí na horní hraně karty — nepřekryje název ani v delších překladech */
.gbp-tech.is-best::after {
  content: attr(data-best); position: absolute; right: 10px; top: -11px;
  font-size: var(--gbp-fs-xs); line-height: 1; font-weight: var(--gbp-fw-bold);
  color: var(--gbp-ok-ink); background: var(--gbp-ok-bg); border: 1px solid #c9dcb9; padding: 4px 8px; border-radius: 99px;
}

/* segmentové volby (radio) */
.gbp-seg { display: flex; border: 1px solid #b8b6ad; border-radius: 10px; overflow: hidden; background: #fff; }
.gbp-seg__opt { flex: 1; position: relative; display: flex; }
.gbp .gbp-seg__opt input[type="radio"] { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.gbp-seg__opt span {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 6px 8px; font-weight: var(--gbp-fw-bold); font-size: var(--gbp-fs-md); color: var(--gbp-primary); cursor: pointer;
  border-left: 1px solid var(--gbp-line-soft);
}
.gbp-seg__opt:first-child span { border-left: 0; }
.gbp-seg__opt input:checked + span { background: var(--gbp-primary); color: #fff; }
.gbp-seg__opt input:focus-visible + span { outline: 3px solid rgba(73,148,60,0.6); outline-offset: -3px; }
.gbp-sub-row { display: grid; gap: 8px; }

.gbp-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.gbp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gbp-fs-xs); border: 1px solid var(--gbp-line); border-radius: 99px; padding: 4px 10px 4px 5px; color: var(--gbp-muted); background: #fff; }
.gbp-chip i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.18); display: inline-block; }

/* nahrání souboru */
.gbp-panel { display: grid; gap: 10px; }
.gbp-drop {
  display: grid; gap: 2px; justify-items: center; text-align: center; padding: 20px 14px; cursor: pointer;
  border: 2px dashed #a9a597; border-radius: 10px; background: var(--gbp-surface-alt); color: var(--gbp-muted);
}
.gbp-drop strong { color: var(--gbp-primary); font-size: var(--gbp-fs-md); }
.gbp-drop small { font-size: var(--gbp-fs-xs); }
.gbp-drop.is-over, .gbp-drop:hover { border-color: var(--gbp-primary); background: var(--gbp-accent-soft); }
.gbp-panel:focus-within .gbp-drop { outline: 3px solid rgba(73,148,60,0.6); outline-offset: 2px; }
.gbp-file { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--gbp-line); border-radius: 8px; background: #fff; }
.gbp-file__thumb { width: 56px; height: 56px; object-fit: contain; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 12px 12px; border-radius: 6px; flex: none; }
.gbp-file__body { flex: 1 1 160px; min-width: 0; }
.gbp-file__name { font-weight: var(--gbp-fw-bold); overflow-wrap: anywhere; }
.gbp-file__status { font-size: var(--gbp-fs-xs); color: var(--gbp-muted); }
.gbp-progress { height: 6px; background: var(--gbp-line-soft); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.gbp-progress span { display: block; height: 100%; width: 0; background: var(--gbp-cta); transition: width 0.2s; }
.gbp-vector { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; border-left: 4px solid var(--gbp-ai); background: var(--gbp-ai-soft); border-radius: 6px; }
.gbp-vector .gbp-note { flex-basis: 100%; }

/* text */
.gbp-textopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.gbp-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.gbp-swatch { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gbp .gbp-swatch input[type="radio"] { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
.gbp-swatch span:not(.gbp-sr) { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.3); box-shadow: inset 0 0 0 2px #fff; }
.gbp-swatch input:checked + span { outline: 3px solid var(--gbp-primary); outline-offset: 1px; }
.gbp-swatch input:focus-visible + span { outline: 3px solid rgba(73,148,60,0.7); outline-offset: 2px; }
.gbp-swatch--custom input[type="color"] { width: 36px; height: 36px; padding: 0; border: 1px solid rgba(0,0,0,0.3); border-radius: 50%; background: none; cursor: pointer; }

.gbp-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--gbp-fs-sm); cursor: pointer; padding: 6px 0; }
.gbp-check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--gbp-primary); }

/* velikost */
.gbp-range { display: grid; grid-template-columns: minmax(0, 150px) 1fr auto; gap: 10px; align-items: center; }
.gbp-range label { font-size: var(--gbp-fs-sm); font-weight: var(--gbp-fw-bold); }
.gbp-range input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--gbp-primary); }
.gbp-range output { font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }

/* kontrola tisknutelnosti */
.gbp-checks { display: grid; gap: 6px; font-size: var(--gbp-fs-sm); }
.gbp-checks li { position: relative; padding: 8px 10px 8px 34px; border-radius: 8px; line-height: 1.35; }
.gbp-checks li::before { position: absolute; left: 11px; top: 8px; font-weight: var(--gbp-fw-bold); }
.gbp-check-ok { background: var(--gbp-ok-bg); color: var(--gbp-ok-ink); }
.gbp-check-ok::before { content: "✓"; }
.gbp-check-warn { background: var(--gbp-warn-bg); color: var(--gbp-warn-ink); border: 1px solid var(--gbp-warn-bd); }
.gbp-check-warn::before { content: "!"; }
.gbp-check-bad { background: var(--gbp-bad-bg); color: var(--gbp-bad-ink); }
.gbp-check-bad::before { content: "✕"; }
.gbp-check-info { background: var(--gbp-info-bg); color: var(--gbp-info-ink); }
.gbp-check-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }

/* cena a akce */
.gbp-summary { display: grid; gap: 10px; border-top: 2px solid var(--gbp-line-soft); padding-top: 16px; }
.gbp-summary__title { font-size: var(--gbp-fs-lg); font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); }
.gbp-price { display: grid; gap: 6px; min-height: 48px; transition: opacity 0.15s; }
.gbp-price.is-stale { opacity: 0.55; }
.gbp-price__lines { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: var(--gbp-fs-sm); color: var(--gbp-muted); }
.gbp-price__lines dd { color: var(--gbp-text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gbp-price__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--gbp-line-soft); padding-top: 8px; font-weight: var(--gbp-fw-bold); }
.gbp-price__total strong { font-size: var(--gbp-fs-xl); font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); font-variant-numeric: tabular-nums; }
.gbp-price__per { text-align: right; font-size: var(--gbp-fs-sm); color: var(--gbp-muted); }
.gbp-price__hint { font-size: var(--gbp-fs-sm); color: var(--gbp-ok-ink); background: var(--gbp-ok-bg); border-radius: 8px; padding: 8px 10px; }
.gbp-price__offer { font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); }
.gbp-price__loading { color: var(--gbp-muted); font-size: var(--gbp-fs-sm); }
.gbp-nonret { font-size: var(--gbp-fs-xs); color: var(--gbp-warn-ink); background: var(--gbp-warn-bg); border: 1px solid var(--gbp-warn-bd); border-radius: 8px; padding: 8px 10px; }
.gbp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gbp-actions .gbp-btn--cta { flex: 1 1 220px; }

.gbp-inquiry, .gbp-success { display: grid; gap: 10px; padding: 16px; border-radius: 10px; border: 2px solid var(--gbp-primary); background: #fff; }
.gbp-inquiry:focus, .gbp-success:focus { outline: none; }
.gbp-success { border-color: var(--gbp-cta); background: var(--gbp-ok-bg); }
.gbp-success__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gbp-cta); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: var(--gbp-fw-bold); }

.gbp-loader { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.8); border-radius: var(--gbp-radius); }
.gbp-spin { width: 40px; height: 40px; border: 3px solid var(--gbp-line); border-top-color: var(--gbp-primary); border-radius: 50%; animation: gbp-spin 0.8s linear infinite; }
@keyframes gbp-spin { to { transform: rotate(360deg); } }

/* ── jak to funguje ── */
.gbp-how { counter-reset: gbp-how; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gbp-how li { counter-increment: gbp-how; background: var(--gbp-surface); border: 1px solid var(--gbp-line-soft); border-radius: var(--gbp-radius); padding: 16px; display: grid; gap: 6px; align-content: start; }
.gbp-how li::before { content: counter(gbp-how); width: 28px; height: 28px; border-radius: 50%; background: var(--gbp-primary); color: #fff; font-size: var(--gbp-fs-sm); font-weight: var(--gbp-fw-bold); display: flex; align-items: center; justify-content: center; }
.gbp-how strong { color: var(--gbp-primary); }
.gbp-how span { font-size: var(--gbp-fs-sm); color: var(--gbp-muted); }

/* ── ceník ── */
.gbp-tables { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.gbp-tablewrap { overflow-x: auto; background: var(--gbp-surface); border: 1px solid var(--gbp-line-soft); border-radius: var(--gbp-radius); }
.gbp-table { width: 100%; border-collapse: collapse; font-size: var(--gbp-fs-sm); }
.gbp-table caption { caption-side: top; text-align: left; font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); padding: 12px 14px 4px; font-size: var(--gbp-fs-lg); }
/* Cena se nezalomí (.gbp-nowrap), jednotka „za zakázku" smí pod ni — úzký sloupec místo posuvníku. */
.gbp-table th, .gbp-table td { padding: 9px 12px; border-top: 1px solid var(--gbp-line-soft); font-variant-numeric: tabular-nums; }
.gbp-table th { white-space: nowrap; }
.gbp-table thead th { font-weight: var(--gbp-fw-bold); color: var(--gbp-muted); border-top: 0; }
.gbp-table tbody th { font-weight: var(--gbp-fw-bold); }
.gbp-table small { color: var(--gbp-muted); font-size: var(--gbp-fs-xs); white-space: nowrap; }
.gbp-table__setup th, .gbp-table__setup td { background: var(--gbp-surface-alt); }
.gbp-tables + .gbp-small { margin-top: 10px; }

/* ── FAQ ── */
.gbp-faq { display: grid; gap: 8px; margin-top: 12px; }
.gbp-faq__item { background: var(--gbp-surface); border: 1px solid var(--gbp-line-soft); border-radius: var(--gbp-radius); }
.gbp-faq__item summary { cursor: pointer; padding: 14px 16px; min-height: 48px; font-weight: var(--gbp-fw-bold); color: var(--gbp-primary); list-style-position: inside; }
.gbp-faq__item p { padding: 0 16px 14px; color: var(--gbp-text); }

/* ── telefon a tablet ── */
@media (max-width: 1080px) {
  .gbp-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gbp-tables { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .gbp-grid { grid-template-columns: 1fr; }
  .gbp-stagecol { border-right: 0; border-bottom: 1px solid var(--gbp-line-soft); border-radius: var(--gbp-radius) var(--gbp-radius) 0 0; }
  .gbp-techinfo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gbp-page { padding: 16px 16px 40px; }
  .gbp-hero { padding: 20px 16px; }
  .gbp-stagecol, .gbp-form { padding: 16px; }
  .gbp-step { padding-left: 36px; }
  .gbp-step__n { left: -36px; }
  .gbp-table th, .gbp-table td { padding: 8px 9px; }
  .gbp-zoomdlg { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 8px; border-radius: 0; }
  .gbp-zoomdlg .gbp-stage { height: calc(100vh - 120px); height: calc(100dvh - 120px); }
  .gbp-zoomdlg__close { right: 16px; top: 16px; }
  .gbp-techs { grid-template-columns: 1fr; gap: 16px; }
  .gbp-textopts { grid-template-columns: 1fr; }
  .gbp-how { grid-template-columns: 1fr; }
  .gbp-range { grid-template-columns: 1fr auto; }
  .gbp-range label { grid-column: 1 / -1; }
  .gbp-proof__body { grid-template-columns: 1fr; }
  .gbp-seg--wide { flex-direction: column; }
  .gbp-seg--wide .gbp-seg__opt span { border-left: 0; border-top: 1px solid var(--gbp-line-soft); }
  .gbp-seg--wide .gbp-seg__opt:first-child span { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gbp-spin { animation-duration: 2s; }
  .gbp-progress span, .gbp-price { transition: none; }
}

/* Tisk náhledu 1:1 (tlačítko „Vytisknout náhled“) jde ze samostatného dokumentu
   ve skrytém iframe s vlastním @page (widget.js) — stránka sama @page nemění. */