/* ============================================================
   ESCAPE GAME FANTASIA — shop.css
   ============================================================ */

/* ---------- STEPS ---------- */
.steps-bar { display: flex; align-items: center; margin-bottom: 2.5rem; }
.step-item { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.step-item:last-child { flex: 0; }
.step-num { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 0.75rem; color: var(--text2); flex-shrink: 0; transition: all 0.3s ease; }
.step-item.active .step-num { background: var(--green); border-color: var(--green); color: #fff; }
.step-item.done .step-num { background: var(--green-dark); border-color: var(--green-light); color: var(--green-light); }
.step-label { font-family: var(--font-ui); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); white-space: nowrap; }
.step-item.active .step-label { color: var(--text); }
.step-connector { flex: 1; height: 1px; background: var(--border); margin: 0 0.5rem; }
.shop-step { display: none; }
.shop-step.active { display: block; }

/* ---------- BONS GRID ---------- */
.bons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 1rem; margin: 2rem 0; }
.bon-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; transition: all 0.25s ease; }
.bon-row:hover { border-color: var(--green); }
.bon-row.has-qty { border-color: var(--gold); background: rgba(245,197,24,.04); }
.bon-amount-label { font-family: var(--font-title); font-weight: 700; font-size: 2rem; color: var(--gold); line-height: 1; }
.bon-chf { font-family: var(--font-ui); font-size: 0.65rem; letter-spacing: 0.15em; color: var(--text2); text-transform: uppercase; margin-top: 0.1rem; }
.bon-qty-ctrl { display: flex; align-items: center; gap: 0.75rem; }
.qty-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border2); background: none; color: var(--text2); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; line-height: 1; }
.qty-btn:hover { border-color: var(--green-light); color: var(--green-light); }
.qty-val { font-family: var(--font-ui); font-size: 1rem; color: var(--text); min-width: 20px; text-align: center; font-weight: 600; }

/* ---------- CART SUMMARY ---------- */
.cart-summary { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; }
.cart-summary-title { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green-light); margin-bottom: 1rem; }
.cart-line { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.cart-line:last-child { border-bottom: none; padding-top: 0.75rem; }
.cart-line-label { color: var(--text2); }
.cart-line-val { font-family: var(--font-ui); color: var(--gold); font-weight: 600; }
.cart-total-row { font-size: 1.05rem; }
.cart-total-row .cart-line-label { color: var(--text); font-weight: 600; }
.cart-total-row .cart-line-val { font-size: 1.3rem; }
.cart-empty-msg { color: var(--text2); font-size: 0.88rem; font-style: italic; text-align: center; padding: 1rem 0; }

/* ---------- PAYMENT METHODS ---------- */
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.payment-method { border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; cursor: pointer; transition: all 0.25s ease; text-align: center; }
.payment-method:hover { border-color: var(--green); }
.payment-method.selected { border-color: var(--green-light); background: rgba(42,107,60,.08); }
.payment-icon { font-size: 1.8rem; display: block; margin-bottom: 0.4rem; }
.payment-name { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.payment-detail-block { display: none; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-top: 1rem; font-size: 0.88rem; }
.payment-detail-block.visible { display: block; }
.payment-detail-block strong { color: var(--text); display: block; margin-bottom: 0.25rem; }
.payment-detail-block p { margin-bottom: 0.5rem; font-size: 0.85rem; }
.twint-logo-link img { height: 44px; margin: 0.75rem auto 0.5rem; }
.payment-ref-note { background: rgba(245,197,24,.06); border-left: 3px solid var(--gold); padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--text2); margin-top: 0.75rem; border-radius: 0 var(--radius) var(--radius) 0; }
.payment-ref-note strong { color: var(--gold); }

/* ---------- ORDER SUCCESS ---------- */
.order-success { text-align: center; padding: 3rem 1rem; }
.success-icon { width: 80px; height: 80px; border: 2px solid var(--green-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.order-success h2 { font-family: var(--font-title); font-size: 3rem; color: var(--gold); margin-bottom: 0.75rem; }
.order-number { display: inline-block; background: var(--green-dark); border: 1px solid var(--green); color: var(--gold); font-family: 'Courier New', monospace; font-size: 1.3rem; padding: 0.5rem 1.5rem; border-radius: var(--radius); margin: 1rem 0; letter-spacing: 0.1em; }
.success-details { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; text-align: left; margin: 1.5rem 0; }
.success-details p { font-size: 0.9rem; margin-bottom: 0.5rem; }

/* ---------- CONDITIONS BON ---------- */
.conditions-list { counter-reset: cond; }
.conditions-list li { counter-increment: cond; display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; color: var(--text2); }
.conditions-list li::before { content: counter(cond, decimal-leading-zero); font-family: var(--font-ui); font-size: 0.7rem; color: var(--green-light); flex-shrink: 0; margin-top: 0.1rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .bons-grid { grid-template-columns: 1fr; }
  .payment-methods { grid-template-columns: 1fr; }
  .steps-bar .step-label { display: none; }
}