/* QeInbox — cart / checkout page. Builds on v3.css tokens and components. */

.cart-page { min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(900px 500px at 15% -10%, rgba(104,227,113,.08), transparent 60%), var(--bg); }

/* header */
.cnav { border-bottom: 1px solid var(--line); }
.cnav__in { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.cnav__secure { display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cnav__secure .ic { color: var(--green); }

/* layout */
.cart { flex: 1; padding-block: clamp(32px, 6vw, 72px) 72px; }
.cart__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: start; max-width: 1120px; }
.cart__main { display: grid; gap: 14px; }
.cart__back { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: .9rem; color: var(--muted); margin-bottom: 10px; transition: color .2s; }
.cart__back:hover { color: var(--fg); }
.cart__title { font-size: clamp(2rem, 4vw, 2.9rem); }
.cart__lead { font-size: 1.05rem; margin-bottom: 18px; }

/* form */
.checkout { display: grid; gap: 22px; }
.cstep { display: grid; gap: 14px; padding: 26px 28px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.cstep__h { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 1.05rem; }
.cstep__h span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--green); font: 600 .82rem/1 var(--mono); }
.cstep__note { font-size: .86rem; color: var(--dim); }
.cstep__note--stripe { display: flex; gap: 8px; align-items: flex-start; }
.cstep__note--stripe .ic { margin-top: 3px; color: var(--muted); }

/* form fields (shared look with the contact modal) */
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > span { font-size: .88rem; font-weight: 500; color: var(--muted); }
.field input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(8,16,12,.6); color: var(--fg); font: inherit; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field input::placeholder { color: var(--dim); }
.field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.field__err { display: none; font-style: normal; font-size: .82rem; color: var(--red); }
.field.is-bad .field__err { display: block; }
.field.is-bad input { border-color: var(--red); }

/* payment placeholder (replaced by the Stripe Payment Element) */
.pay { min-height: 60px; }
.pay__ph { display: grid; gap: 14px; }
.pay__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pay__input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line-2); background: rgba(8,16,12,.4); color: var(--dim); font-size: 1rem; cursor: not-allowed; }

.checkout__pay { width: 100%; height: 62px; border: 0; cursor: pointer; font-family: inherit; }
.checkout__pay[disabled] { opacity: .7; cursor: progress; transform: none; }
.checkout__msg { padding: 14px 16px; border-radius: 12px; font-size: .92rem; background: var(--green-soft); border: 1px solid rgba(104,227,113,.35); color: var(--fg); }
.checkout__msg.is-error { background: rgba(240,122,110,.1); border-color: rgba(240,122,110,.4); }
.checkout__msg a { color: var(--green); text-decoration: underline; }
.checkout__fine { font-size: .82rem; color: var(--dim); text-align: center; }
.checkout__fine a { text-decoration: underline; }
.checkout__fine a:hover { color: var(--fg); }

/* order summary */
.summary { display: grid; gap: 18px; position: sticky; top: 32px; }
.summary__card { display: grid; gap: 20px; padding: 30px; border-radius: 22px; background: linear-gradient(170deg, rgba(104,227,113,.14), var(--card) 55%); border: 1px solid rgba(104,227,113,.4); box-shadow: 0 40px 90px -50px var(--green-glow); }
.summary__item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.summary__item h2 { font-size: 1.15rem; font-weight: 600; }
.summary__item .muted { font-size: .9rem; }
.summary__item > b { font-size: 2.4rem; line-height: 1; letter-spacing: -.04em; color: var(--green); }
.summary .covers { padding: 18px 20px; }
.summary .covers__list { font-size: .92rem; }
.summary .checks { font-size: .93rem; padding-top: 18px; }
.summary__totals { display: grid; gap: 10px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .95rem; }
.summary__totals div { display: flex; justify-content: space-between; }
.summary__totals dt { color: var(--muted); }
.summary__totals dd { margin: 0; }
.summary__due { padding-top: 12px; margin-top: 4px; border-top: 1px dashed var(--line-2); font-weight: 600; font-size: 1.08rem; }
.summary__due dt { color: var(--fg) !important; }
.summary__due small { font-weight: 400; font-size: .78rem; color: var(--dim); }
.summary__trust { display: grid; gap: 12px; padding: 0 6px; font-size: .9rem; color: var(--muted); }
.summary__trust p { display: flex; gap: 10px; align-items: flex-start; }
.summary__trust .ic { margin-top: 3px; color: var(--green); }
.summary__trust b { color: var(--fg); }

/* footer */
.cfoot { border-top: 1px solid var(--line); padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); font-size: .85rem; color: var(--dim); }
.cfoot__in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cfoot__in span:last-child { display: flex; gap: 18px; }
.cfoot a:hover { color: var(--fg); }
.cfoot a[href^="mailto"] { color: var(--muted); }

@media (max-width: 900px) {
  .cart__grid { grid-template-columns: 1fr; max-width: 640px; }
  .summary { position: static; }
}
@media (max-width: 560px) {
  .cnav__in { height: 64px; }
  .cstep { padding: 22px 18px; }
  .summary__card { padding: 24px 20px; }
  .pay__row { gap: 10px; }
}