/* ═══════════════════════════════════════════════════════════
   OVERTAKE — prodej dárkových poukazů (navazuje na css/style.css)
   ═══════════════════════════════════════════════════════════ */

/* ── Hlavička / patička ── */
.shop-top { border-bottom: 1px solid var(--c-line); background: rgba(7,7,7,.9);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
.shop-top__in { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.shop-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--c-text); }
.shop-logo img { height: 30px; }
.shop-logo span { font-family: var(--f-deco); font-size: 1.05rem; letter-spacing: .03em; text-transform: uppercase; }
.shop-logo i { color: var(--c-orange); font-style: normal; }
.shop-back { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em;
  color: var(--c-text-2); text-decoration: none; }
.shop-back:hover { color: var(--c-orange); }

.shop-foot { border-top: 1px solid var(--c-line); margin-top: 70px; padding: 26px 0 40px; }
.shop-foot .container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  font-size: .78rem; color: var(--c-text-3); }
.shop-foot a { color: var(--c-text-2); text-decoration: none; }
.shop-foot a:hover { color: var(--c-orange); }

.shop { padding-top: 54px; }
.shop__grid { display: grid; grid-template-columns: 1fr 370px; gap: 26px; align-items: start; }
.shop__main { display: flex; flex-direction: column; gap: 16px; }

/* ── Karty kroků ── */
.card { background: var(--c-card); border: 1px solid var(--c-line-2); border-radius: var(--r-lg); padding: 24px 26px 26px; }
.card__h { display: flex; align-items: center; gap: 12px; font-family: var(--f-display);
  font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 18px; }
.card__h .num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--c-orange);
  border: 1px solid rgba(242,72,34,.4); border-radius: 6px; padding: 4px 8px; }

.lbl { display: block; font-size: .82rem; font-weight: 600; color: var(--c-text-2); margin: 16px 0 8px; }
.lbl:first-of-type { margin-top: 0; }
.lbl .opt { color: var(--c-text-3); font-weight: 400; }
.hint { font-size: .78rem; color: var(--c-text-3); margin-top: 10px; line-height: 1.5; }
.hint a { color: var(--c-orange); }

input[type=text], input[type=email], input[type=number], textarea {
  width: 100%; background: var(--c-bg-2); border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  color: var(--c-text); font-family: var(--f-body); font-size: .95rem; padding: 13px 15px; }
input:focus, textarea:focus { outline: none; border-color: var(--c-orange); }
input::placeholder, textarea::placeholder { color: #4a4a4a; }
textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Přepínač zážitek/částka ── */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.seg button { background: var(--c-bg-2); border: 1.5px solid var(--c-line-2); color: var(--c-text-2);
  border-radius: var(--r-md); padding: 13px; font-family: var(--f-body); font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: var(--tx); }
.seg button:hover { border-color: #3a3a3a; color: var(--c-text); }
.seg button.active { border-color: var(--c-orange); color: var(--c-text); background: rgba(242,72,34,.1); }

/* ── Volby (sedačky / hodiny / částky) ── */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts button { background: var(--c-bg-2); border: 1.5px solid var(--c-line-2); color: var(--c-text-2);
  border-radius: var(--r-md); padding: 12px 18px; font-family: var(--f-body); font-size: .92rem; font-weight: 600;
  cursor: pointer; transition: var(--tx); min-width: 62px; }
.opts button:hover { border-color: #3a3a3a; color: var(--c-text); }
.opts button.active { border-color: var(--c-orange); color: var(--c-text); background: rgba(242,72,34,.12); }
.opts button small { display: block; font-family: var(--f-mono); font-size: .62rem; font-weight: 500;
  color: var(--c-text-3); margin-top: 3px; letter-spacing: .04em; }
.opts button.active small { color: var(--c-orange); }

/* ── Souhrn ── */
.shop__side { position: sticky; top: 90px; }
.summary { background: var(--c-card); border: 1px solid var(--c-line-2); border-radius: var(--r-lg); padding: 26px; }
.summary__tag { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em; color: var(--c-text-3);
  text-transform: uppercase; margin-bottom: 14px; }
.summary__what { font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--c-text); }
.summary__price { font-family: var(--f-display); font-size: 3.6rem; line-height: 1; color: var(--c-orange);
  margin: 10px 0 20px; letter-spacing: .01em; }
.summary__list { list-style: none; padding: 0; margin: 0 0 22px; font-size: .84rem; color: var(--c-text-2); }
.summary__list li { padding: 7px 0 7px 24px; position: relative; border-top: 1px solid var(--c-line); }
.summary__list li::before { content: '✓'; position: absolute; left: 0; color: var(--c-green); font-weight: 700; }

.agree { display: flex; gap: 11px; align-items: flex-start; font-size: .8rem; line-height: 1.55;
  color: var(--c-text-2); margin-bottom: 16px; cursor: pointer; }
.agree input { margin-top: 2px; accent-color: var(--c-orange); width: 17px; height: 17px; flex: 0 0 auto; }
.agree a { color: var(--c-orange); }

.summary__note { font-size: .82rem; line-height: 1.5; margin-top: 12px; }
.summary__note.err { color: #ff8a7a; }
.summary__note.ok { color: var(--c-green); }
.summary__fine { font-size: .7rem; color: var(--c-text-3); margin-top: 14px; line-height: 1.5; }

button[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 900px) {
  .shop__grid { grid-template-columns: 1fr; }
  .shop__side { position: static; }
}
@media (max-width: 520px) {
  .row2 { grid-template-columns: 1fr; }
  .card { padding: 20px 18px 22px; }
}

/* ─────────────── Platební stránka ─────────────── */
.pay { padding-bottom: 20px; }
.pay__grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.pay__qr { text-align: center; }
.qrbox { background: #fff; border-radius: var(--r-md); padding: 10px; margin: 4px 0 12px;
  display: flex; align-items: center; justify-content: center; }
.qrbox svg { width: 100%; height: auto; max-width: 260px; display: block; }

.paylist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; align-items: baseline; }
.paylist dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-3); }
.paylist dd { margin: 0; font-size: 1.05rem; color: var(--c-text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paylist dd b { font-family: var(--f-mono); font-weight: 700; }
.paylist dd b.vs { color: var(--c-orange); font-size: 1.2rem; }
.paylist dd.mono-sm { font-family: var(--f-mono); font-size: .8rem; color: var(--c-text-2); word-break: break-all; }
.cpy { background: transparent; border: 1px solid var(--c-line-2); color: var(--c-text-3); border-radius: 6px;
  padding: 4px 9px; font-family: var(--f-mono); font-size: .66rem; cursor: pointer; letter-spacing: .05em; }
.cpy:hover { border-color: var(--c-orange); color: var(--c-orange); }

.pay__sum { display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 20px 26px; flex-wrap: wrap; }
.pay__sum > div { display: flex; flex-direction: column; gap: 5px; }
.pay__sum .k { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3); }
.pay__sum .v { font-size: 1.05rem; font-weight: 600; }
.pay__sum .v--price { font-family: var(--f-display); font-size: 2rem; color: var(--c-orange); line-height: 1; }
.pay__hint { margin-top: 18px; }

.pay__done { text-align: center; max-width: 560px; margin: 60px auto; }
.pay__done h1 { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 3rem); text-transform: uppercase;
  line-height: .95; margin-bottom: 14px; }
.pay__done p { color: var(--c-text-2); margin-bottom: 22px; line-height: 1.6; }
.pay__check { width: 74px; height: 74px; border-radius: 50%; background: rgba(55,210,122,.14);
  border: 2px solid var(--c-green); color: var(--c-green); font-size: 2.2rem; line-height: 70px;
  margin: 0 auto 22px; }

@media (max-width: 820px) { .pay__grid { grid-template-columns: 1fr; } }

/* ── Nápověda k překlepu v e-mailu ── */
.typo-hint { margin-top: 8px; font-size: .82rem; color: #ffcba8;
  background: rgba(242,72,34,.1); border: 1px solid rgba(242,72,34,.35);
  border-radius: var(--r-md); padding: 9px 12px; }
.typo-fix { background: transparent; border: none; color: var(--c-orange); font: inherit;
  font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; }

/* ── „Ulož si odkaz" — cesta k poukazu, která nezávisí na e-mailu ── */
.keep { margin-top: 22px; }
.keep--big { background: rgba(242,72,34,.06); border-color: rgba(242,72,34,.3); }
.keep__t { font-weight: 700; color: #fff; font-size: .95rem; margin-bottom: 8px; }
.keep__p { font-size: .88rem; line-height: 1.65; color: var(--c-dim); margin: 0 0 14px; }
.keep__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #0f0f0f; border: 1px solid #262626; border-radius: var(--r-md); padding: 10px 12px; }
.keep__row code { flex: 1; min-width: 0; font-family: var(--f-mono, ui-monospace, Menlo, monospace);
  font-size: .78rem; color: #cfcfcf; overflow-wrap: anywhere; user-select: all; }