/* ============================================================
   HŘÍŠNĚ DOBRÉ — app shell (checkout, account, tracking)
   loads after brand.css
   ============================================================ */

/* ---------- generic forms ---------- */
.field{ display:block; margin-bottom:16px; }
.field > span{ display:block; font-weight:700; font-size:13px; margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-md);
  border:2.5px solid var(--ink); background:var(--paper);
  font-family:var(--ui); font-size:15px; color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:3px 3px 0 var(--chili); }
.field textarea{ resize:vertical; min-height:80px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.checkrow{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; }
.checkrow input{ width:18px; height:18px; accent-color:var(--chili); margin-top:2px; flex:none; }

/* page hero strip (light) */
.app-head{ background:var(--paper-2); border-bottom:3px solid var(--ink); padding:36px 0 30px; }
.app-head h1{ font-size:clamp(34px,5vw,64px); margin:6px 0 0; }

/* ---------- stepper ---------- */
.stepper{ display:flex; align-items:center; gap:0; margin:0 0 8px; flex-wrap:wrap; }
.stepper__item{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:var(--ink-soft); }
.stepper__num{ width:30px; height:30px; border-radius:50%; border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:14px; background:var(--paper); }
.stepper__item.is-active{ color:var(--ink); }
.stepper__item.is-active .stepper__num{ background:var(--chili); color:#fff; }
.stepper__item.is-done .stepper__num{ background:var(--ink); color:var(--toxic); }
.stepper__bar{ width:34px; height:3px; background:var(--ink); opacity:.3; margin:0 12px; }

/* ---------- checkout layout ---------- */
.checkout{ display:grid; grid-template-columns:1.4fr .9fr; gap:36px; align-items:start; }
.checkout > *{ min-width:0; }
.co-card{ background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg); padding:28px; margin-bottom:20px; box-shadow:var(--shadow-hard); }
.co-card h2{ font-size:24px; margin-bottom:18px; }
.co-step{ display:none; }
.co-step.is-active{ display:block; }

/* delivery / payment option tiles */
.opt-tile{ display:flex; align-items:center; gap:14px; padding:16px 18px; border:2.5px solid var(--ink); border-radius:var(--r-md); margin-bottom:12px; cursor:pointer; background:var(--paper); transition:box-shadow .12s ease, background .12s ease; }
.opt-tile:hover{ background:var(--paper-2); }
.opt-tile.is-active{ box-shadow:4px 4px 0 var(--chili); }
.opt-tile input{ width:20px; height:20px; accent-color:var(--chili); flex:none; }
.opt-tile__icon{ font-size:26px; }
.opt-tile__main{ flex:1; }
.opt-tile__main b{ font-family:var(--display); font-size:18px; display:block; }
.opt-tile__main span{ font-size:13px; color:var(--ink-soft); }
.opt-tile__price{ font-family:var(--display); font-weight:800; font-size:18px; }

/* order summary */
.summary{ position:sticky; top:96px; background:var(--paper-2); border:3px solid var(--ink); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-hard); }
.summary h3{ font-size:22px; margin-bottom:16px; }
.sum-item{ display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; margin-bottom:14px; }
.sum-item__img{ width:48px; height:48px; border:2px solid var(--ink); border-radius:10px; }
.sum-item__name{ font-family:var(--display); font-weight:700; font-size:15px; line-height:1.1; }
.sum-line{ display:flex; justify-content:space-between; font-size:14.5px; padding:5px 0; }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; margin-top:8px; border-top:2px solid var(--ink); }
.sum-total .price{ font-size:30px; }
.promo{ display:flex; gap:8px; margin:16px 0; }
.promo input{ flex:1; padding:11px 14px; border-radius:var(--r-pill); border:2.5px solid var(--ink); background:var(--paper); font-family:var(--ui); }

/* ---------- account shell ---------- */
.acct{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
.acct > *{ min-width:0; }
.acct-side{ position:sticky; top:96px; background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-hard); }
.acct-user{ display:flex; align-items:center; gap:13px; padding-bottom:18px; margin-bottom:16px; border-bottom:2px solid rgba(26,19,15,.12); }
.acct-avatar{ width:48px; height:48px; border-radius:50%; border:2.5px solid var(--ink); background:var(--chili); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:20px; flex:none; }
.acct-user b{ font-family:var(--display); font-size:17px; display:block; }
.acct-user span{ font-size:12.5px; color:var(--ink-soft); }
.acct-nav{ display:flex; flex-direction:column; gap:4px; }
.acct-nav a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-md); font-weight:600; font-size:15px; }
.acct-nav a:hover{ background:var(--paper-2); }
.acct-nav a.is-active{ background:var(--ink); color:var(--paper); }
.acct-nav a .badge{ margin-left:auto; background:var(--chili); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); }

.acct-main h1{ font-size:clamp(30px,4vw,52px); margin-bottom:6px; }

/* stat tiles */
.acct-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:22px 0 8px; }
.acct-stat{ border:3px solid var(--ink); border-radius:var(--r-md); padding:20px; background:var(--paper); }
.acct-stat b{ font-family:var(--display); font-weight:800; font-size:34px; display:block; line-height:1; }
.acct-stat span{ font-size:13px; color:var(--ink-soft); }

/* ---------- order cards / list ---------- */
.order-card{ border:3px solid var(--ink); border-radius:var(--r-lg); background:var(--paper); margin-bottom:16px; overflow:hidden; }
.order-card__head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 22px; background:var(--paper-2); border-bottom:2px solid var(--ink); }
.order-card__head .num{ font-family:var(--display); font-weight:800; font-size:18px; }
.order-card__head .date{ font-size:13px; color:var(--ink-soft); }
.order-card__body{ display:flex; align-items:center; gap:18px; padding:18px 22px; flex-wrap:wrap; }
.order-thumbs{ display:flex; gap:8px; }
.order-thumb{ width:46px; height:46px; border:2px solid var(--ink); border-radius:10px; }

.status{ font-weight:700; font-size:12px; padding:6px 13px; border-radius:var(--r-pill); border:2px solid var(--ink); letter-spacing:0.03em; }
.status--proc{ background:var(--ember); }
.status--ship{ background:var(--teal); color:#fff; }
.status--done{ background:var(--ink); color:var(--toxic); }
.status--prep{ background:var(--toxic); }

/* ---------- timeline (order detail / tracking) ---------- */
.timeline{ position:relative; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:13px; top:6px; bottom:6px; width:3px; background:rgba(26,19,15,.18); }
.tl-step{ position:relative; padding-bottom:26px; }
.tl-step:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-34px; top:0; width:28px; height:28px; border-radius:50%; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; font-size:13px; }
.tl-step.done .tl-dot{ background:var(--ink); color:var(--toxic); }
.tl-step.current .tl-dot{ background:var(--chili); color:#fff; animation:pulse 1.6s ease-in-out infinite; }
.tl-step.todo{ opacity:.5; }
.tl-step h4{ font-family:var(--display); font-size:18px; margin:2px 0 3px; }
.tl-step .when{ font-size:13px; color:var(--ink-soft); }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(229,51,27,.5); } 50%{ box-shadow:0 0 0 7px rgba(229,51,27,0); } }

/* progress bar (tracking) */
.track-prog{ height:14px; border:2.5px solid var(--ink); border-radius:var(--r-pill); background:var(--paper); overflow:hidden; }
.track-prog__fill{ height:100%; background:var(--teal); border-right:2.5px solid var(--ink); transition:width 1s ease; }

/* ---------- business dashboard ---------- */
.biz{ display:grid; grid-template-columns:240px 1fr; gap:30px; align-items:start; }
.biz > *{ min-width:0; }
.biz-card{ border:3px solid var(--ink); border-radius:var(--r-lg); background:var(--paper); padding:24px; }
.biz-table{ width:100%; border-collapse:collapse; }
.biz-table th{ text-align:left; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); padding:10px 12px; border-bottom:2.5px solid var(--ink); }
.biz-table td{ padding:14px 12px; border-bottom:1.5px solid rgba(26,19,15,.12); font-weight:600; }
.biz-table tr:last-child td{ border-bottom:0; }

/* auth */
.auth{ max-width:460px; margin:0 auto; }
.auth-card{ background:var(--paper); border:3px solid var(--ink); border-radius:var(--r-lg); padding:36px; box-shadow:var(--shadow-hard-lg); }
.auth-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:2.5px solid var(--ink); border-radius:var(--r-pill); overflow:hidden; margin-bottom:26px; }
.auth-tab{ padding:13px; font-family:var(--ui); font-weight:700; background:var(--paper); border:0; font-size:15px; }
.auth-tab.is-active{ background:var(--ink); color:var(--paper); }
.auth-pane{ display:none; }
.auth-pane.is-active{ display:block; }
.auth-divider{ text-align:center; margin:20px 0; position:relative; color:var(--ink-soft); font-size:13px; }
.auth-divider::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(26,19,15,.14); z-index:0; }
.auth-divider span{ position:relative; background:var(--paper); padding:0 12px; z-index:1; }

/* ---------- legal / text pages ---------- */
.legal{ display:grid; grid-template-columns:240px 1fr; gap:40px; align-items:start; }
.legal > *{ min-width:0; }
.legal-toc{ position:sticky; top:96px; border:3px solid var(--ink); border-radius:var(--r-lg); padding:20px; background:var(--paper); box-shadow:var(--shadow-hard); }
.legal-toc h4{ font-family:var(--ui); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
.legal-toc a{ display:block; padding:8px 12px; border-radius:var(--r-md); font-weight:600; font-size:14.5px; }
.legal-toc a:hover{ background:var(--paper-2); }
.legal-body{ max-width:760px; }
.legal-body h2{ font-size:clamp(24px,3vw,34px); margin:40px 0 14px; scroll-margin-top:96px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body h3{ font-family:var(--display); font-size:20px; margin:24px 0 8px; }
.legal-body p, .legal-body li{ color:var(--ink-soft); line-height:1.7; font-size:16px; }
.legal-body ul{ padding-left:22px; }
.legal-body li{ margin-bottom:6px; }
.legal-callout{ border:2.5px solid var(--ink); border-left-width:8px; border-radius:var(--r-md); padding:18px 20px; background:var(--paper-2); margin:18px 0; }
.legal-callout p{ margin:0; color:var(--ink); font-weight:600; }
.legal-faq{ border:2.5px solid var(--ink); border-radius:var(--r-md); padding:16px 20px; margin-bottom:10px; background:var(--paper); }
.legal-faq summary{ font-family:var(--display); font-weight:700; font-size:17px; cursor:pointer; }
.legal-faq[open] summary{ margin-bottom:8px; }

@media (max-width:900px){
  .legal{ grid-template-columns:1fr; }
  .legal-toc{ position:static; }
  .checkout{ grid-template-columns:1fr; }
  .summary{ position:static; order:-1; }
  .acct{ grid-template-columns:1fr; }
  .acct-side{ position:static; }
  .acct-nav{ flex-direction:row; flex-wrap:wrap; }
  .biz{ grid-template-columns:1fr; }
  .field-row,.field-row-3{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .acct-stats{ grid-template-columns:1fr; }
}