/* =========================================================
   GOLDENCUT — PÉNZTÁR / CHECKOUT (penztar.html)
   Egylapos, kétoszlopos: bal a szakaszok, jobb a sticky összesítő.
   Örökli a fejlécet/footert/JS-t; ez a sheet csak a checkout-
   specifikus szabályokat adja. Mezők a base input-ízlésre épülnek.
   ========================================================= */

:root { --header-h: 78px; }

body.checkout-page {
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(90,145,101,0.06), transparent 60%),
    var(--bg);
}
body.checkout-page .page-bg { display: none; }

/* Konténer + címsáv */
.co-wrap { max-width: var(--maxw); margin: 0 auto; padding: 7.5rem 2rem 6rem; }
.co-head { margin-bottom: 2.5rem; }
.co-head .breadcrumb { margin-bottom: 1rem; }
.co-head h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em;
}

/* =========================================================
   GRID
   ========================================================= */
.co-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: start; }
.co-main { display: grid; gap: 1.4rem; }

/* ---------- Szakasz-kártyák ---------- */
.co-section {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 4px;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
}
.co-section-head { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1.4rem; }
.co-index { font-family: var(--f-display); font-style: italic; color: var(--gold); font-size: 1rem; }
.co-section-head h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -0.01em; }

/* ---------- Mezők ---------- */
.co-field { margin-bottom: 1rem; }
.co-field:last-child { margin-bottom: 0; }
.co-field label {
  display: block; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 0.5rem;
}
.co-field input, .co-field select, .co-field textarea {
  width: 100%; padding: 0.85rem 1rem; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); border-radius: 2px; color: var(--ink);
  font-family: var(--f-body); font-size: 0.95rem;
  transition: border-color .3s var(--ease);
}
.co-field textarea { resize: vertical; min-height: 90px; }
.co-field input::placeholder, .co-field textarea::placeholder { color: var(--ink-dim); }
.co-field input:focus, .co-field select:focus, .co-field textarea:focus { outline: none; border-color: var(--gold); }
.co-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.co-row.thirds { grid-template-columns: 0.6fr 1fr 1fr; }

/* ---------- Rádió-opciók ---------- */
.co-options { display: grid; gap: 0.7rem; }
.co-option {
  display: flex; align-items: center; gap: 0.9rem; cursor: pointer;
  padding: 0.95rem 1.1rem; border: 1px solid var(--line); border-radius: 3px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.co-option:hover { border-color: var(--gold-deep); }
.co-option input { accent-color: var(--gold); width: 18px; height: 18px; flex: 0 0 auto; }
.co-option .co-opt-label { flex: 1; }
.co-option .co-opt-label strong { display: block; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.co-option .co-opt-label span { font-size: 0.82rem; color: var(--ink-dim); }
.co-option .co-opt-price { color: var(--gold); font-weight: 600; font-size: 0.92rem; }
.co-option:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }

/* Kártyamezők (csak bankkártya választásakor) */
.co-card-fields { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line-soft); }
.co-card-fields[hidden] { display: none; }

/* Számlázási blokk + jelölőnégyzetek */
.co-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
.co-check input { accent-color: var(--gold); margin-top: 0.2rem; flex: 0 0 auto; }
.co-check a { color: var(--gold); }
#billingBlock { margin-top: 1.2rem; }
#billingBlock[hidden] { display: none; }
.co-section .co-check + .co-field { margin-top: 1.2rem; }

/* =========================================================
   ÖSSZESÍTŐ (sticky)
   ========================================================= */
.co-summary {
  position: sticky; top: var(--header-h);
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.co-summary h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; margin-bottom: 1.3rem; }
.co-items { display: grid; gap: 1rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--line-soft); }
.co-item { display: flex; align-items: center; gap: 0.9rem; }
.co-item-img {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--line-soft); position: relative;
}
.co-item-img img { width: 100%; height: 100%; object-fit: cover; }
.co-item-qty {
  position: absolute; top: -8px; right: -8px; background: var(--gold); color: #15110a;
  font-size: 0.66rem; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px;
  display: grid; place-items: center;
}
.co-item-body { flex: 1; }
.co-item-body h3 { font-family: var(--f-display); font-weight: 400; font-size: 1rem; }
.co-item-body p { font-size: 0.78rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.co-item-price { color: var(--ink); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }

/* Kupon */
.co-coupon { display: flex; gap: 0.6rem; margin: 1.3rem 0; }
.co-coupon input {
  flex: 1; padding: 0.7rem 0.9rem; background: rgba(255,255,255,0.03);
  border: 1px solid var(--line); border-radius: 2px; color: var(--ink);
  font-family: var(--f-body); font-size: 0.9rem;
}
.co-coupon input:focus { outline: none; border-color: var(--gold); }
.co-coupon button {
  padding: 0.7rem 1.1rem; background: transparent; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
  font-family: var(--f-body); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.co-coupon button:hover { border-color: var(--gold); color: var(--gold); }

/* Ár-sorok */
.co-totals { display: grid; gap: 0.7rem; padding-top: 1.3rem; border-top: 1px solid var(--line-soft); }
.co-line { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--ink-soft); }
.co-line span:last-child { color: var(--ink); font-weight: 500; }
.co-grand {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.co-grand span { font-family: var(--f-display); font-size: 1.05rem; }
.co-grand strong { font-family: var(--f-display); font-size: 1.7rem; color: var(--gold); font-weight: 600; }

.co-summary .btn-primary { width: 100%; margin-top: 1.4rem; }
.co-secure {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 1rem; font-size: 0.78rem; color: var(--ink-dim);
}
.co-secure .ico { color: var(--gold); }
.co-thanks { margin-top: 1rem; text-align: center; color: var(--green); font-size: 0.9rem; }
.co-thanks[hidden] { display: none; }

/* =========================================================
   RESZPONZÍV
   ========================================================= */
@media (max-width: 980px) {
  .co-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .co-summary { position: static; order: 2; }
}
@media (max-width: 540px) {
  .co-wrap { padding-top: 6.5rem; }
  .co-row, .co-row.thirds { grid-template-columns: 1fr; }
}