/* HERO */
.co-hero{position:relative;background-image:var(--bg);background-position:center;background-size:cover}
.co-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.co-hero .container{position:relative;z-index:1;min-height:260px;display:flex;align-items:center}
.co-hero h1{color:#fff;font-size:40px;letter-spacing:.02em;margin:0}

/* KROKI */
.co-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;text-align:center;margin:28px auto 6px}
.step__circle{width:48px;height:48px;border-radius:999px;border:2px solid #9dd46b;display:grid;place-items:center;font-weight:800;color:#7fbf55;margin:0 auto 8px;background:#f8fff1}
.step__circle--muted{opacity:.6}
.step__label{font-size:13px;color:#333}

/* GŁÓWNA SIATKA */
.co{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;padding:6px 20px 42px}

/* FORMULARZ */
.co-form{background:#fff;border:1px solid #e9e9e9;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.05);padding:14px}
.fld{border:0;margin:0 0 12px;padding:0}
.fld legend{font-weight:800;font-size:12px;letter-spacing:.06em;color:#556;margin:0 0 8px}
.inp{width:100%;padding:.75rem .9rem;border:1px solid #ddd;border-radius:10px;font:inherit;background:#fff}
.inp:focus{outline:none;border-color:#7cc35a;box-shadow:0 0 0 3px rgba(124,195,90,.18)}
.inp--area{min-height:120px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}

.options{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:10px;font-size:13px}
.opt input{appearance:none;width:18px;height:18px;border:1px solid #cfcfcf;border-radius:4px;display:inline-block;position:relative;background:#fff}
.opt input:checked{border-color:#111}
.opt input:checked::after{content:"";position:absolute;inset:3px;background:#111;border-radius:2px}

/* PODSUMOWANIE */
.co-summary{position:sticky;top:88px}
.box{background:#fff;border:1px solid #e9e9e9;border-radius:12px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.box__row{display:flex;justify-content:space-between;align-items:center;padding:10px 10px;border-top:1px solid #f0f0f0}
.box__row:first-child{border-top:0}

.coupon{display:flex;gap:8px;margin:10px 0}
.coupon .inp{flex:1}
.btn{display:inline-block;padding:.7rem 1.1rem;border-radius:999px;border:1px solid transparent;cursor:pointer}
.btn--coupon{background:#9aa0a6;color:#fff}

.total{margin:10px 0;background:#8dd360;color:#fff;border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;font-weight:800}
.total .grand{font-size:20px}

.btn--order{width:100%;background:#e94b4b;color:#fff;border:0;border-radius:999px;padding:.8rem 1.1rem;cursor:pointer;margin-top:8px}

/* RWD */
@media (max-width:960px){
  .co{grid-template-columns:1fr}
  .co-summary{position:static}
}

/* Faktura – spójny wygląd z formularzem */
.invoice-fld { margin-top: 12px; }
.invoice-fld legend {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.invoice-wrap { margin-top: 10px; }
.invoice-wrap.is-hidden { display:none; }
.co-field { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.co-label { font-size:13px; font-weight:600; color:#374151; }
.co-hint { margin:4px 2px 0; font-size:12px; color:#6b7280; }

/* Switch w stylu reszty (grafit/czarny) */
.co-switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.co-switch input { position:absolute; opacity:0; pointer-events:none; }
.co-switch__track {
  width:42px; height:24px; border-radius:999px; background:#e5e7eb; border:1px solid #d1d5db;
  position:relative; transition:background .15s, border-color .15s;
}
.co-switch__track::after {
  content:""; position:absolute; top:50%; left:2px; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:left .15s;
}
.co-switch input:checked + .co-switch__track { background:#111827; border-color:#111827; }
.co-switch input:checked + .co-switch__track::after { left:20px; }
.co-switch__label { font-size:13px; font-weight:600; color:#111827; }

/* Grid responsywnie */
@media (max-width: 720px){
  .grid-2 { grid-template-columns: 1fr !important; }
}