/* ═══════════════════════════════════════════════════════════════
   Doughnut Czechia E-shop — formular.css
   Styly specifické pro stránku objednávkového formuláře.
═══════════════════════════════════════════════════════════════ */


/* ── PAGE ───────────────────────────────────────────────────── */
.page { max-width: 1060px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.page-title { font-size: 1.875rem; font-weight: var(--fw-black); letter-spacing: -.02em; margin-bottom: .25rem; }
.page-sub   { font-size: var(--fs-base); color: #555; }


/* ── GRID LAYOUT ─────────────────────────────────────────────
   Desktop (>720px):
     col 1 (1fr)    col 2 (290px)
     ┌────────────┐ ┌────────────┐
     │ .form-col  │ │            │  row 1
     │ (sekce 1–5)│ │  .sum-col  │
     ├────────────┤ │ (sticky)   │  row 2
     │.submit-col │ │            │
     └────────────┘ └────────────┘

   .sum-col má grid-row: 1 / 3 → výška = form + submit
   .sum-sticky má prostor pro scrollování.

   Mobile (≤720px): jeden sloupec, pořadí přes order:
     1. form-col   2. sum-col   3. submit-col
──────────────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-rows: auto auto;
  column-gap: 2rem;
  row-gap: 1.5rem;
  margin-top: 2rem;
}

.form-col   { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.sum-col    { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.submit-col { grid-column: 1; grid-row: 2; min-width: 0; }

.sum-sticky { position: sticky; top: 80px; }


/* ── SECTION ────────────────────────────────────────────────── */
.section      { background: var(--color-white); border: 2px solid var(--color-black); border-radius: var(--rl); overflow: hidden; }
.section-head { display: flex; align-items: center; gap: 12px; padding: 1.125rem 1.5rem; border-bottom: 2px solid var(--color-black); }
.section-num  { width: 28px; height: 28px; border-radius: 50%; background: var(--color-black); color: var(--color-primary); font-weight: var(--fw-black); font-size: .8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.section-title { font-weight: var(--fw-bold); font-size: var(--fs-xl); }
.section-body  { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }


/* ── FIELDS ─────────────────────────────────────────────────── */
.field     { display: flex; flex-direction: column; gap: 6px; }
.row2      { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.label     { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: #555; }
.label-req { color: var(--color-error); margin-left: 2px; }
.label-opt { font-size: var(--fs-xs); font-weight: var(--fw-regular); text-transform: none; letter-spacing: 0; color: #999; }

.input,
.select {
  font-family: var(--font);
  font-size: var(--fs-lg);
  padding: .625rem .875rem;
  border: 2px solid var(--color-black);
  border-radius: var(--r);
  background: var(--color-white);
  color: var(--color-black);
  outline: none;
  width: 100%;
  transition: border-color .15s;
  appearance: none;
  -webkit-appearance: none;
}
.input:focus,
.select:focus  { border-color: var(--color-accent); }
.input:disabled { background: var(--color-grey); color: #888; cursor: not-allowed; border-color: #ccc; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2.5rem;
}

.hint { font-size: var(--fs-xs); color: #666; line-height: 1.5; }


/* ── PRICE ──────────────────────────────────────────────────── */
.price-val { font-size: 1.375rem; font-weight: var(--fw-black); letter-spacing: -.02em; }
.price-vat { font-size: var(--fs-xs); color: #666; margin-top: 2px; }


/* ── QUANTITY ────────────────────────────────────────────────── */
.qty       { display: flex; align-items: center; }
.qty-btn   { width: 40px; height: 42px; border: 2px solid var(--color-black); background: var(--color-grey); font-size: 1.25rem; font-weight: var(--fw-bold); cursor: pointer; font-family: var(--font); transition: background .12s; flex-shrink: 0; }
.qty-btn:first-child { border-radius: var(--r) 0 0 var(--r); border-right: none; }
.qty-btn:last-child  { border-radius: 0 var(--r) var(--r) 0; border-left: none; }
.qty-btn:hover { background: var(--color-primary); }
.qty-val   { width: 52px; height: 42px; border: 2px solid var(--color-black); border-left: none; border-right: none; text-align: center; font-family: var(--font); font-size: var(--fs-lg); font-weight: var(--fw-bold); background: var(--color-white); }
.qty-val:focus { outline: none; }


/* ── RADIO ──────────────────────────────────────────────────── */
.radio-group { display: flex; flex-direction: column; gap: .625rem; }
.radio-opt   { display: flex; align-items: center; gap: 12px; padding: .875rem 1.125rem; border: 2px solid var(--color-black); border-radius: var(--r); cursor: pointer; transition: background .12s; user-select: none; }
.radio-opt.sel { background: var(--color-primary); }
.radio-opt.dis { opacity: .45; cursor: not-allowed; background: var(--color-grey); pointer-events: none; }
.radio-opt-info { flex: 1; }
.radio-opt-inner { display: flex; align-items: center; gap: 12px; width: 100%; }
.radio-opt-inner .radio-opt-info { flex: 1; }
.radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-black); background: var(--color-white); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.radio-opt.sel .radio-dot { background: var(--color-black); }
.dot-inner { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); display: none; }
.radio-opt.sel .dot-inner { display: block; }
.radio-main { font-weight: var(--fw-bold); font-size: var(--fs-base); flex: 1; }
.radio-sub  { font-size: var(--fs-sm); color: #444; margin-top: 2px; }
.radio-opt.sel .radio-sub { color: var(--color-black); }
.badge      { padding: 2px 8px; background: var(--color-black); color: var(--color-primary); font-size: var(--fs-xs); font-weight: var(--fw-bold); border-radius: var(--rs); flex-shrink: 0; }
.badge-soon { padding: 2px 8px; background: #f0f0f0; color: #888; border: 1px solid #ccc; font-size: .7rem; font-weight: var(--fw-bold); border-radius: var(--rs); flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; }


/* ── CONDITIONAL ─────────────────────────────────────────────── */
.cond     { overflow: hidden; max-height: 0; transition: max-height .35s ease, opacity .3s ease; opacity: 0; }
.cond.on  { max-height: 800px; opacity: 1; }


/* ── ZÁSILKOVNA ──────────────────────────────────────────────── */
.zbox { border: 2px dashed var(--color-black); border-radius: var(--r); padding: 1.25rem; text-align: center; background: var(--color-grey); cursor: pointer; transition: background .15s; }
.zbox:hover   { background: #ebebeb; }
.zbox.picked  { border-style: solid; background: var(--color-white); text-align: left; }
.zcheck { width: 28px; height: 28px; background: var(--color-primary); border: 2px solid var(--color-black); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pickup-info  { background: var(--color-grey); border: 2px solid var(--color-black); border-radius: var(--r); padding: 1rem 1.125rem; display: flex; gap: 12px; }
.pickup-name  { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.pickup-addr  { font-size: var(--fs-sm); color: #444; margin-top: 2px; line-height: 1.6; }


/* ── TOGGLE ──────────────────────────────────────────────────── */
.toggle  { display: flex; border: 2px solid var(--color-black); border-radius: var(--r); overflow: hidden; }
.tog-btn { flex: 1; padding: .5rem 1rem; font-family: var(--font); font-size: .875rem; font-weight: var(--fw-bold); border: none; background: var(--color-white); color: var(--color-black); cursor: pointer; transition: background .12s, color .12s; -webkit-appearance: none; appearance: none; }
.tog-btn + .tog-btn { border-left: 2px solid var(--color-black); }
.tog-btn.on { background: var(--color-black); color: var(--color-primary); }


/* ── FIRMA FIELDS ────────────────────────────────────────────── */
.firma-fields { display: flex; flex-direction: column; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0,0,0,.1); margin-top: .25rem; }


/* ── PAY INFO ────────────────────────────────────────────────── */
.pay-info { background: var(--color-grey); border: 2px solid var(--color-black); border-radius: var(--r); padding: 1rem 1.125rem; font-size: .875rem; line-height: 1.6; color: #333; }
.pay-info strong { font-weight: var(--fw-bold); }


/* ── CHECKBOX ────────────────────────────────────────────────── */
.chk-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; user-select: none; }
.chk     { width: 22px; height: 22px; border: 2px solid var(--color-black); border-radius: var(--rs); background: var(--color-white); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: background .12s; }
.chk.on  { background: var(--color-black); }
.chk-mark { display: none; }
.chk.on .chk-mark { display: block; }
.chk-txt { font-size: .875rem; line-height: 1.5; }
.chk-txt a { color: var(--color-accent); font-weight: var(--fw-semibold); }


/* ── BUTTON ──────────────────────────────────────────────────── */
.btn-primary {
  display: block; width: 100%;
  padding: .875rem 2rem;
  font-family: var(--font); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  background: var(--color-accent); color: var(--color-white);
  border: 2px solid var(--color-accent); border-radius: var(--r);
  cursor: pointer; text-align: center;
  transition: transform .12s, background .15s;
}
.btn-primary:hover    { background: #0020cc; transform: translateY(-2px); }
.btn-primary:disabled { opacity: .65; cursor: not-allowed; transform: none; }


/* ── SUMMARY ─────────────────────────────────────────────────── */
.sum        { background: var(--color-white); border: 2px solid var(--color-black); border-radius: var(--rl); overflow: hidden; }
.sum-head   { background: var(--color-black); padding: 1rem 1.25rem; }
.sum-title  { font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--color-primary); }
.sum-body   { padding: 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
.sum-row    { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: .875rem; }
.sum-lbl    { color: #555; flex: 1; }
.sum-val    { font-weight: var(--fw-semibold); text-align: right; flex-shrink: 0; }
.sum-div    { border: none; border-top: 1px solid rgba(0,0,0,.12); }
.sum-total     { display: flex; justify-content: space-between; align-items: center; }
.sum-total-lbl { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.sum-total-val { font-weight: var(--fw-black); font-size: 1.5rem; }
.sum-vat    { font-size: var(--fs-xs); color: #777; text-align: right; margin-top: 2px; }
.steps      { display: flex; flex-direction: column; gap: 6px; margin-top: .25rem; }
.step       { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: #555; }
.step-dot   { width: 8px; height: 8px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.step-dot.on { background: var(--color-primary); border: 1.5px solid var(--color-black); }

.sum-product-name {
  font-weight: var(--fw-black); font-size: var(--fs-base);
  color: var(--color-black); padding-bottom: .5rem;
  border-bottom: 1px solid rgba(0,0,0,.1); margin-bottom: .125rem;
}


/* ── VARIANT ROWS ────────────────────────────────────────────── */
.variant-opt {
  display: flex; align-items: center; gap: 12px;
  padding: .875rem 1.125rem;
  border: 2px solid var(--color-black); border-radius: var(--r);
  cursor: pointer; transition: background .12s; user-select: none;
  flex-wrap: wrap;
}
.variant-opt.sel { background: var(--color-primary); }
.variant-opt.dis { opacity: .5; cursor: not-allowed; background: var(--color-grey); pointer-events: none; }
.variant-opt-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.variant-name  { font-weight: var(--fw-bold); font-size: var(--fs-base); }
.variant-price { font-size: .875rem; color: #444; margin-top: 2px; white-space: nowrap; }
.variant-opt.sel .variant-price { color: var(--color-black); }
.variant-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.variant-low-stock {
  display: inline-flex; align-items: center;
  background: #fff3cd; color: #7a4f00;
  border: 1.5px solid #e0aa00;
  font-size: .6875rem; font-weight: var(--fw-bold);
  padding: 1px 6px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0;
}
.variant-low-stock--sold {
  background: #fde8e8; color: #7a0000; border-color: var(--color-error);
}

/* Checkbox pro varianty */
.variant-chk { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--color-black); border-radius: var(--rs); background: var(--color-white); display: flex; align-items: center; justify-content: center; transition: background .12s; }
.variant-opt.sel .variant-chk { background: var(--color-black); }
.variant-chk-mark { display: none; }
.variant-opt.sel .variant-chk-mark { display: block; }

/* Quantity pro varianty */
.variant-qty { display: none; align-items: center; flex-shrink: 0; }
.variant-opt.sel .variant-qty { display: flex; }
.vqty-btn {
  width: 32px; height: 34px;
  border: 2px solid var(--color-black); background: rgba(0,0,0,.06);
  font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-black);
  cursor: pointer; font-family: var(--font);
  transition: background .12s; flex-shrink: 0;
  -webkit-appearance: none; appearance: none;
}
.vqty-btn:first-child { border-radius: var(--r) 0 0 var(--r); border-right: none; }
.vqty-btn:last-child  { border-radius: 0 var(--r) var(--r) 0; border-left: none; }
.vqty-btn:hover { background: rgba(0,0,0,.15); }
.vqty-val {
  width: 40px; height: 34px;
  border: 2px solid var(--color-black); border-left: none; border-right: none;
  text-align: center; font-family: var(--font); font-size: .875rem; font-weight: var(--fw-bold);
  background: var(--color-white);
  -moz-appearance: textfield;
}
.vqty-val::-webkit-outer-spin-button,
.vqty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vqty-val:focus { outline: none; }


/* ── STRIPE ──────────────────────────────────────────────────── */
.stripe-fields { display: flex; flex-direction: column; gap: .75rem; margin-top: .875rem; padding-top: .875rem; border-top: 1px solid rgba(0,0,0,.15); }
.stripe-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stripe-element { padding: .625rem .875rem; border: 2px solid var(--color-black); border-radius: var(--r); background: var(--color-white); transition: border-color .15s; min-height: 44px; }
.stripe-element.StripeElement--focus   { border-color: var(--color-accent); }
.stripe-element.StripeElement--invalid { border-color: var(--color-error); }
.stripe-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: #1a5c1f; margin-bottom: 6px; display: block; }


/* ── TOOLTIP ─────────────────────────────────────────────────── */
.tooltip-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; }
.tooltip-icon {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--color-black); background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-bold);
  cursor: pointer; flex-shrink: 0; color: var(--color-black);
  line-height: 1; user-select: none;
}
.variant-opt.sel .tooltip-icon { border-color: var(--color-black); background: rgba(255,255,255,.7); }
.tooltip-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--color-black); color: var(--color-white);
  font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1.5;
  padding: .5rem .75rem; border-radius: var(--r); width: 220px;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 10; text-align: left;
}
.tooltip-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--color-black);
}
.tooltip-wrap:hover .tooltip-bubble,
.tooltip-wrap.open  .tooltip-bubble { opacity: 1; }


/* ── VALIDATION ──────────────────────────────────────────────── */
.field-err       { font-size: var(--fs-xs); color: var(--color-error); font-weight: var(--fw-semibold); margin-top: 4px; display: none; }
.field-err.on    { display: block; }
.radio-err       { font-size: var(--fs-xs); color: var(--color-error); font-weight: var(--fw-semibold); margin-top: 6px; display: none; }
.radio-err.on    { display: block; }
.zbox.err        { border-color: var(--color-error); border-style: dashed; }
.chk-row.err .chk { border-color: var(--color-error); }


/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .form-col   { grid-column: 1; grid-row: auto; order: 1; }
  .sum-col    { grid-column: 1; grid-row: auto; order: 2; }
  .submit-col { grid-column: 1; grid-row: auto; order: 3; }
  .sum-sticky { position: static; }
  .row2       { grid-template-columns: 1fr; }
  .page-title { font-size: 1.5rem; }
  .section-body { padding: 1.125rem; }
  .section-head { padding: 1rem 1.125rem; }
}

@media (min-width: 721px) and (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr) 250px; }
}

@media (max-width: 600px) {
  .variant-opt.sel .variant-right {
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
  }
  .stripe-field-row { grid-template-columns: 1fr; }
}