/* =========================================================================
   alantouz — CHECKOUT, ONBOARDING & CRM
   Loaded after style.css. Same design tokens.
   ========================================================================= */

/* ---------- shared shell ---------- */
.cohero { padding-top: clamp(28px, 4vw, 48px); }

/* ---------- checkout layout ---------- */
.co { display:grid; grid-template-columns: 1.05fr .8fr; gap: clamp(28px,4vw,56px); align-items:start; }
@media (max-width: 920px){ .co { grid-template-columns: 1fr; } .co__side { order: -1; position: static; } }

.co__card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,3vw,36px); box-shadow: 0 30px 70px -48px rgba(23,48,41,.4); }
.co__card h2 { font-family: var(--display); font-weight:800; font-size: 1.3rem; letter-spacing:-0.02em; margin-bottom: 4px; }
.co__card .sub { color: var(--fir-dim); font-size:.9rem; margin-bottom: 10px; }
.co__card label { display:block; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color: var(--fir-dim); margin: 16px 0 7px; }
.co__card input, .co__card select, .co__card textarea { width:100%; font: inherit; font-size:.97rem; color: var(--fir); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .25s; }
.co__card input:focus, .co__card select:focus, .co__card textarea:focus { outline:none; border-color: var(--emerald-deep); }
.co__row { display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.co__row3 { display:grid; grid-template-columns: .8fr 1.2fr; gap: 0 16px; }
@media (max-width: 560px){ .co__row, .co__row3 { grid-template-columns: 1fr; } }

.co__hint { display:flex; gap: 11px; align-items:flex-start; background: var(--mist); border: 1px solid color-mix(in oklab, var(--emerald), white 40%); border-radius: var(--radius); padding: 14px 16px; margin-top: 22px; font-size:.88rem; color: var(--fir-soft); line-height: 1.5; }
.co__hint svg { flex:none; margin-top: 2px; color: var(--emerald-deep); }

/* payment methods */
.paymethods { display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 560px){ .paymethods { grid-template-columns: 1fr; } }
.paym { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 12px; text-align:center; cursor:pointer; transition: all .2s; font-weight:600; font-size:.9rem; color: var(--fir-soft); display:grid; gap:6px; justify-items:center; }
.paym svg { color: var(--fir-dim); }
.paym:hover { border-color: var(--emerald-deep); }
.paym.sel { border-color: var(--emerald-deep); background: var(--mist); color: var(--fir); }
.paym.sel svg { color: var(--emerald-deep); }

.co__pay .btn { width:100%; justify-content:center; margin-top: 24px; }
.co__legal { margin-top: 13px; font-size:.78rem; color: var(--fir-dim); text-align:center; line-height:1.5; }
.co__legal a { color: var(--emerald-deep); }

/* order summary side */
.co__side { position: sticky; top: 90px; }
.osum { background: var(--fir); color:#fff; border-radius: var(--radius-lg); padding: clamp(24px,3vw,32px); position:relative; overflow:hidden; }
.osum::before { content:""; position:absolute; right:-18%; top:-40%; width:60%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(52,167,123,.35), transparent 65%); }
.osum small.tag { display:inline-block; background: rgba(52,167,123,.22); color:#7ad6ae; font-weight:700; font-size:.76rem; padding: 5px 13px; border-radius:100px; letter-spacing:.04em; text-transform:uppercase; }
.osum h2 { font-family: var(--display); font-weight:800; font-size: 1.5rem; letter-spacing:-0.02em; margin: 12px 0 4px; position:relative; color:#fff; }
.osum .for { color: rgba(255,255,255,.65); font-size:.9rem; }
.osum ul { list-style:none; display:grid; gap: 9px; margin: 18px 0; position:relative; }
.osum ul li { display:flex; gap: 9px; align-items:flex-start; font-size:.9rem; color: rgba(255,255,255,.85); }
.osum ul svg { flex:none; margin-top:2px; color:#57c79a; width:15px; height:15px; }
.osum__rows { border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; display:grid; gap: 8px; position:relative; }
.osum__rows div { display:flex; justify-content:space-between; font-size:.92rem; color: rgba(255,255,255,.75); }
.osum__rows div.total { font-family: var(--display); font-weight:800; font-size: 1.25rem; color:#fff; border-top: 1px solid rgba(255,255,255,.15); padding-top: 12px; margin-top: 4px; }
.osum__note { margin-top: 14px; font-size:.78rem; color: rgba(255,255,255,.55); line-height: 1.5; position:relative; }
.osum__switch { margin-top: 16px; font-size:.84rem; position:relative; }
.osum__switch a { color:#7ad6ae; text-decoration: underline; text-underline-offset: 2px; }

/* processing overlay state on pay button */
.btn.is-busy { pointer-events:none; opacity:.7; }

/* ---------- onboarding ---------- */
.ob { max-width: 720px; margin-inline: auto; }
.ob__progress { height: 6px; background: var(--line-soft, #e8ece9); border-radius: 100px; overflow:hidden; margin-bottom: clamp(24px,3vw,36px); }
.ob__progress i { display:block; height:100%; width:0; background: linear-gradient(90deg, var(--emerald), var(--emerald-deep)); border-radius:100px; transition: width .5s var(--ease); }
.ob__step { display:none; }
.ob__step.on { display:block; animation: ob-in .45s var(--ease); }
@keyframes ob-in { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.ob__kicker { font-size:.8rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--emerald-deep); margin-bottom: 10px; }
.ob h2 { font-family: var(--display); font-weight:800; font-size: clamp(1.5rem,2.8vw,2.1rem); letter-spacing:-0.02em; line-height:1.15; margin-bottom: 8px; }
.ob .hint { color: var(--fir-dim); font-size:.95rem; margin-bottom: 22px; }
.ob label { display:block; font-size:.86rem; font-weight:700; color: var(--fir); margin: 20px 0 8px; }
.ob label small { display:block; font-weight:500; color: var(--fir-dim); font-size:.8rem; margin-top:2px; }
.ob input, .ob textarea, .ob select { width:100%; font: inherit; font-size:.98rem; color: var(--fir); background:#fff; border:1.5px solid var(--line); border-radius: 12px; padding: 12px 15px; transition: border-color .25s; }
.ob input:focus, .ob textarea:focus { outline:none; border-color: var(--emerald-deep); }
.ob textarea { min-height: 84px; resize: vertical; }

.ob__chips { display:flex; flex-wrap:wrap; gap: 9px; }
.ob__chips span { border:1.5px solid var(--line); background:#fff; border-radius:100px; padding: 9px 17px; font-size:.92rem; font-weight:600; color: var(--fir-soft); cursor:pointer; transition: all .2s; user-select:none; }
.ob__chips span:hover { border-color: var(--emerald-deep); color: var(--emerald-deep); }
.ob__chips span.sel { background: var(--fir); border-color: var(--fir); color:#fff; }

.ob__nav { display:flex; gap: 12px; align-items:center; margin-top: 30px; }
.ob__nav .btn { min-width: 170px; justify-content:center; }
.ob__back { font: inherit; font-size:.9rem; font-weight:600; color: var(--fir-dim); background:none; border:none; cursor:pointer; padding: 10px 14px; border-radius: 100px; display:inline-flex; gap:7px; align-items:center; }
.ob__back:hover { color: var(--fir); background: var(--surface); }
.ob__skipnote { margin-left:auto; font-size:.8rem; color: var(--fir-dim); }

.ob__welcome { text-align:center; padding: clamp(20px,4vw,40px) 0; }
.ob__welcome .conf { width: 76px; height:76px; border-radius:50%; background: var(--mist); color: var(--emerald-deep); display:grid; place-items:center; margin: 0 auto 22px; }
.ob__welcome h1 { font-family: var(--display); font-weight:800; font-size: clamp(1.8rem,3.6vw,2.7rem); letter-spacing:-0.025em; line-height:1.1; }
.ob__welcome p { color: var(--fir-soft); font-size: 1.05rem; max-width: 54ch; margin: 16px auto 0; line-height: 1.6; }
.ob__welcome .btn { margin-top: 30px; }

/* ---------- CRM ---------- */
.crm { max-width: 1100px; margin-inline:auto; }
.crm__empty { text-align:center; padding: 60px 20px; color: var(--fir-dim); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.crm__list { display:grid; gap: 16px; }
.crmcard { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 26px; }
.crmcard__head { display:flex; gap: 12px 20px; align-items:center; flex-wrap:wrap; cursor:pointer; }
.crmcard__head b { font-family: var(--display); font-size: 1.1rem; }
.crmcard__head .pkg { background: var(--mist); color: var(--emerald-deep); font-weight:700; font-size:.78rem; padding: 5px 13px; border-radius:100px; }
.crmcard__head .when { color: var(--fir-dim); font-size:.84rem; }
.crmcard__head .chev { margin-left:auto; color: var(--fir-dim); transition: transform .3s; }
.crmcard.open .chev { transform: rotate(180deg); }
.badge { font-weight:700; font-size:.76rem; padding: 5px 13px; border-radius:100px; letter-spacing:.03em; }
.badge--paid { background: #e3f4ec; color: #196048; }
.badge--open { background: #faf0e0; color: #9a6b1f; }
.badge--ob { background: #e7eefb; color: #2e4f8f; }
.crmcard__body { display:none; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.crmcard.open .crmcard__body { display:grid; gap: 22px; }
.crm__grid { display:grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; }
@media (max-width: 700px){ .crm__grid { grid-template-columns: 1fr; } }
.crm__grid div { font-size:.92rem; color: var(--fir-soft); padding: 7px 0; border-bottom: 1px dashed var(--line); }
.crm__grid div b { color: var(--fir); display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom: 2px; }
.crm__qa h3 { font-family: var(--display); font-weight:700; font-size: 1rem; margin: 18px 0 8px; color: var(--emerald-deep); }
.crm__qa dl { display:grid; gap: 8px; }
.crm__qa dt { font-size:.82rem; font-weight:700; color: var(--fir); }
.crm__qa dd { font-size:.92rem; color: var(--fir-soft); margin-bottom: 6px; white-space: pre-wrap; }
.crm__tools { display:flex; gap: 10px; flex-wrap:wrap; margin-top: 6px; }
.crm__tools button { font: inherit; font-size:.84rem; font-weight:600; padding: 9px 16px; border-radius:100px; border:1px solid var(--line); background:#fff; cursor:pointer; color: var(--fir-soft); }
.crm__tools button:hover { border-color: var(--emerald-deep); color: var(--emerald-deep); }