/* ═══════════════════════════════════════════════════════════
   CART-PAGE.CSS — Cart & Checkout Shared Styles
   CloudV24 Design System
   ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   SHARED HERO
══════════════════════════════════════ */
.cart-hero {
  padding: 140px 5% 2.5rem;
  text-align: center;
  background: var(--dark, #0a0e27);
  border-bottom: 1px solid var(--border, rgba(255,255,255,.07));
  position: relative;
  overflow: hidden;
}

.cart-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,.07) 0%, transparent 65%);
  pointer-events: none;
}

.cart-hero__content { position: relative; z-index: 2; margin-bottom: 2rem; }
.cart-hero__content .badge {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: 1rem;
}
.cart-hero__content .badge svg { width: 15px; height: 15px; }

.cart-hero__content h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800; color: var(--text, #e2e8f0);
  margin: 0 0 .6rem; line-height: 1.1;
  background: linear-gradient(135deg, #fff 0%, var(--c-cyan, #00d4ff) 70%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.cart-hero__content p {
  font-size: 1rem; color: var(--text-dim, #8892b0);
  margin: 0; max-width: 500px; margin: 0 auto;
}

/* Progress steps */
.cart-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  row-gap: .5rem;
}

.cart-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.cart-step__dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--border, rgba(255,255,255,.1));
  background: var(--surface, rgba(22,28,50,.85));
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
  color: var(--text-dim, #8892b0);
}
.cart-step__dot svg { width: 16px; height: 16px; }

.cart-step span {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim, #8892b0);
  transition: color .3s;
}

.cart-step--active .cart-step__dot {
  border-color: var(--c-cyan, #00d4ff);
  background: rgba(0,212,255,.12);
  color: var(--c-cyan, #00d4ff);
  box-shadow: 0 0 18px rgba(0,212,255,.3);
}
.cart-step--active span { color: var(--c-cyan, #00d4ff); }

.cart-step--done .cart-step__dot {
  border-color: var(--c-emerald, #10b981);
  background: rgba(16,185,129,.12);
  color: var(--c-emerald, #10b981);
}
.cart-step--done span { color: var(--c-emerald, #10b981); }

.cart-step__line {
  width: 60px; height: 2px;
  background: var(--border, rgba(255,255,255,.07));
  margin-bottom: 1.4rem;
  flex-shrink: 0;
  transition: background .3s;
}
.cart-step__line--done { background: var(--c-emerald, #10b981); }

/* ══════════════════════════════════════
   CART PAGE — MAIN LAYOUT
══════════════════════════════════════ */
.cart-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}

/* Alert / message banner */
.cart-alert {
  display: flex; align-items: center; gap: .65rem;
  padding: .9rem 1.2rem;
  border-radius: var(--radius-md, 12px);
  font-size: .9rem; font-weight: 500;
  margin-bottom: 1.75rem;
}
.cart-alert svg { width: 18px; height: 18px; flex-shrink: 0; }
.cart-alert--success { background: rgba(16,185,129,.1); border: 1.5px solid rgba(16,185,129,.28); color: #6ee7b7; }
.cart-alert--info    { background: rgba(0,212,255,.08);  border: 1.5px solid rgba(0,212,255,.22);  color: var(--c-cyan, #00d4ff); }
.cart-alert--error   { background: rgba(239,68,68,.08);  border: 1.5px solid rgba(239,68,68,.25);  color: #fca5a5; }

/* Cart layout: items + summary */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
}

/* ── Items column ── */
.cart-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.cart-items-header h2 {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.1rem; font-weight: 700;
  color: var(--text, #e2e8f0);
}
.cart-items-header h2 svg { width: 18px; height: 18px; color: var(--c-cyan, #00d4ff); }

.cart-count-badge {
  font-size: .75rem; font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 50px;
  background: rgba(0,212,255,.1);
  border: 1px solid rgba(0,212,255,.22);
  color: var(--c-cyan, #00d4ff);
}

.cart-items-list { display: flex; flex-direction: column; gap: .75rem; }

/* Single cart item */
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg, 18px);
  padding: 1.2rem 1.4rem;
  transition: border-color .3s, box-shadow .3s;
  animation: itemFadeIn .4s ease both;
}
.cart-item:hover {
  border-color: rgba(0,212,255,.25);
  box-shadow: 0 8px 28px rgba(0,212,255,.07);
}

@keyframes itemFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Domain info */
.cart-item__domain { display: flex; align-items: center; gap: .85rem; min-width: 0; }

.cart-item__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--radius-md, 12px);
  background: rgba(0,212,255,.1);
  border: 1px solid rgba(0,212,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cyan, #00d4ff);
  transition: transform .3s;
}
.cart-item:hover .cart-item__icon { transform: scale(1.1) rotate(-5deg); }
.cart-item__icon svg { width: 18px; height: 18px; }

.cart-item__name {
  font-size: 1.05rem; font-weight: 700;
  color: var(--text, #e2e8f0);
  font-family: 'Space Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item__tld { color: var(--c-cyan, #00d4ff); }

.cart-item__meta { display: flex; align-items: center; gap: .55rem; margin-top: .25rem; flex-wrap: wrap; }

.cart-item__badge {
  font-size: .68rem; font-weight: 700;
  padding: .18rem .55rem;
  border-radius: 50px;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.2);
  color: var(--c-violet, #7c3aed);
}
.cart-item__rate { font-size: .75rem; color: var(--text-dim, #8892b0); font-family: 'Space Mono', monospace; }

/* Period select */
.cart-item__period { display: flex; flex-direction: column; gap: .3rem; }
.cart-item__period label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim, #8892b0); }

.period-select-wrap { position: relative; display: flex; align-items: center; }

.period-select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-sm, 8px);
  padding: .55rem 2.2rem .55rem .85rem;
  font-size: .84rem; font-weight: 600;
  font-family: 'Outfit', sans-serif;
  color: var(--text, #e2e8f0);
  cursor: pointer; outline: none;
  transition: border-color .25s;
  white-space: nowrap;
}
.period-select:focus { border-color: rgba(0,212,255,.45); }

.period-chevron {
  position: absolute; right: .55rem;
  width: 14px; height: 14px;
  color: var(--text-dim, #8892b0);
  pointer-events: none;
}

/* Price */
.cart-item__price { text-align: right; }
.cart-item__subtotal {
  font-size: 1.2rem; font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--c-cyan, #00d4ff));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.cart-item__price-note { font-size: .72rem; color: var(--text-dim, #8892b0); white-space: nowrap; }

/* Remove button */
.remove-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm, 8px);
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.18);
  color: #f87171; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
  flex-shrink: 0;
}
.remove-btn svg { width: 15px; height: 15px; }
.remove-btn:hover { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); transform: scale(1.08); }

/* Continue shopping */
.cart-continue { margin-top: 1.1rem; }
.continue-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .85rem; font-weight: 600;
  color: var(--text-dim, #8892b0); text-decoration: none;
  transition: color .2s, gap .2s;
}
.continue-link svg { width: 15px; height: 15px; }
.continue-link:hover { color: var(--c-cyan, #00d4ff); gap: .6rem; }

/* ── Summary column ── */
.cart-summary {
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem;
  position: sticky;
  top: 90px;
}

.cart-summary__head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cart-summary__head h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; font-weight: 700; color: var(--text, #e2e8f0); flex: 1;
}
.cart-summary__head h3 svg { width: 17px; height: 17px; color: var(--c-cyan, #00d4ff); }

.cart-summary__lines { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .85rem; }

.summary-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .86rem; color: var(--text-dim, #8892b0);
}
.summary-line__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

.cart-summary__divider { height: 1px; background: rgba(255,255,255,.05); margin: .85rem 0; }

.summary-line--sub  { font-weight: 600; color: var(--text, #e2e8f0); }
.summary-line--free span:first-child { display: flex; align-items: center; gap: .3rem; }
.summary-line--free svg { width: 14px; height: 14px; color: var(--c-emerald, #10b981); flex-shrink: 0; }
.summary-line--total {
  font-size: 1.15rem; font-weight: 800;
  color: var(--text, #e2e8f0);
}
.summary-line--total span:last-child {
  background: linear-gradient(135deg, #fff, var(--c-cyan, #00d4ff));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 1.3rem;
}

.free-tag {
  font-size: .7rem; font-weight: 800;
  padding: .18rem .6rem; border-radius: 50px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.2);
  color: var(--c-emerald, #10b981);
}

/* Checkout CTA */
.checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; margin-top: 1.4rem;
  padding: 1rem;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, var(--c-cyan, #00d4ff), #0099bb);
  color: #0a0e27; font-size: .95rem; font-weight: 700;
  font-family: 'Outfit', sans-serif;
  text-decoration: none; border: none;
  transition: opacity .2s, transform .15s, box-shadow .25s;
}
.checkout-btn svg { width: 17px; height: 17px; }
.checkout-btn__arrow { margin-left: auto; transition: transform .25s; }
.checkout-btn:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,212,255,.28); }
.checkout-btn:hover .checkout-btn__arrow { transform: translateX(4px); }

/* Trust */
.cart-trust {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem .75rem;
  margin-top: 1.25rem;
}
.trust-item {
  display: flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 600;
  color: var(--text-dim, #8892b0);
}
.trust-item svg { width: 13px; height: 13px; color: var(--c-emerald, #10b981); flex-shrink: 0; }

/* Payment icons */
.cart-payment-icons {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.pay-icon {
  font-size: .65rem; font-weight: 800; letter-spacing: .04em;
  padding: .25rem .6rem;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim, #8892b0);
}

/* ── Empty cart ── */
.cart-empty {
  max-width: 520px; margin: 4rem auto;
  text-align: center;
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg, 18px);
  padding: 4rem 2.5rem;
}

.cart-empty__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(0,212,255,.08);
  border: 2px solid rgba(0,212,255,.18);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.75rem;
  color: var(--c-cyan, #00d4ff);
}
.cart-empty__icon svg { width: 36px; height: 36px; opacity: .5; }

.cart-empty h2 { font-size: 1.65rem; font-weight: 800; color: var(--text, #e2e8f0); margin-bottom: .75rem; }
.cart-empty p  { font-size: .92rem; color: var(--text-dim, #8892b0); margin-bottom: 2rem; line-height: 1.6; }

.cart-empty__links {
  display: flex; gap: 1.5rem; justify-content: center;
  margin-top: 1.25rem; flex-wrap: wrap;
}
.cart-empty__links a { font-size: .85rem; color: var(--text-dim, #8892b0); text-decoration: none; transition: color .2s; }
.cart-empty__links a:hover { color: var(--c-cyan, #00d4ff); }

/* ══════════════════════════════════════
   CHECKOUT PAGE
══════════════════════════════════════ */
.cart-hero--checkout { background: var(--dark, #0a0e27); }
.cart-hero--checkout::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.07) 0%, transparent 65%);
}

.checkout-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  align-items: start;
}

/* Secure bar */
.checkout-secure-bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem 1.1rem;
  background: rgba(16,185,129,.07);
  border: 1.5px solid rgba(16,185,129,.2);
  border-radius: var(--radius-md, 12px);
  font-size: .82rem; font-weight: 600;
  color: var(--c-emerald, #10b981);
  margin-bottom: 1.5rem;
}
.checkout-secure-bar svg { width: 15px; height: 15px; flex-shrink: 0; }
.checkout-secure-bar span { flex: 1; }

/* Error alert */
.checkout-alert {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .9rem 1.2rem;
  border-radius: var(--radius-md, 12px);
  font-size: .88rem; margin-bottom: 1.25rem;
}
.checkout-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.checkout-alert--error { background: rgba(239,68,68,.08); border: 1.5px solid rgba(239,68,68,.25); color: #fca5a5; }

/* Form sections */
.co-section {
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  transition: border-color .3s;
}
.co-section:hover { border-color: rgba(0,212,255,.12); }

.co-section__head {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.5rem;
}
.co-section__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-cyan, #00d4ff), #0099bb);
  color: #0a0e27; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.co-section__head h3 { font-size: 1rem; font-weight: 700; color: var(--text, #e2e8f0); }

.co-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.co-field--full { grid-column: 1 / -1; }

.co-field { display: flex; flex-direction: column; gap: .45rem; }
.co-field label { font-size: .8rem; font-weight: 600; color: var(--text, #e2e8f0); }
.req { color: var(--c-red, #ef4444); }

.co-input-wrap {
  position: relative; display: flex; align-items: center;
}
.co-input-wrap > svg:first-child {
  position: absolute; left: .85rem;
  width: 15px; height: 15px;
  color: var(--text-dim, #8892b0); pointer-events: none; z-index: 1;
}
.co-input-wrap input,
.co-input-wrap select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-md, 12px);
  padding: .8rem .9rem .8rem 2.4rem;
  font-size: .9rem; font-family: 'Outfit', sans-serif;
  color: var(--text, #e2e8f0); outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.co-input-wrap input::placeholder { color: var(--text-dim, #8892b0); }
.co-input-wrap input:focus,
.co-input-wrap select:focus {
  border-color: rgba(0,212,255,.45);
  box-shadow: 0 0 0 3px rgba(0,212,255,.08);
}

.co-input-wrap--select .select-chevron {
  position: absolute; right: .85rem;
  left: auto; width: 14px; height: 14px;
  color: var(--text-dim, #8892b0); pointer-events: none;
}

/* Pay button */
.pay-btn {
  width: 100%; padding: 1.1rem 1.75rem;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(135deg, var(--c-cyan, #00d4ff), #0099bb);
  color: #0a0e27; border: none; cursor: pointer;
  font-family: 'Outfit', sans-serif;
  transition: opacity .2s, transform .15s, box-shadow .25s;
  margin-top: .5rem;
}
.pay-btn__content,
.pay-btn__loading {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: 1.05rem; font-weight: 700;
}
.pay-btn__content svg,
.pay-btn__loading svg { width: 19px; height: 19px; }
.pay-btn:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,212,255,.3); }
.pay-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { animation: spin 1s linear infinite; }

.pay-disclaimer {
  display: flex; align-items: center; gap: .4rem;
  font-size: .74rem; color: var(--text-dim, #8892b0);
  text-align: center; justify-content: center;
  margin-top: .85rem;
}
.pay-disclaimer svg { width: 12px; height: 12px; color: var(--c-emerald, #10b981); flex-shrink: 0; }
.pay-disclaimer a { color: var(--c-cyan, #00d4ff); text-decoration: none; }
.pay-disclaimer a:hover { text-decoration: underline; }

/* Order summary (checkout) */
.co-summary {
  background: var(--surface, rgba(22,28,50,.85));
  border: 1.5px solid var(--border, rgba(255,255,255,.07));
  border-radius: var(--radius-lg, 18px);
  padding: 1.75rem;
  position: sticky;
  top: 90px;
}

.co-summary__head {
  display: flex; align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.co-summary__head h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1rem; font-weight: 700; color: var(--text, #e2e8f0); flex: 1;
}
.co-summary__head h3 svg { width: 17px; height: 17px; color: var(--c-cyan, #00d4ff); }
.co-summary__edit {
  display: flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 600;
  color: var(--c-cyan, #00d4ff); text-decoration: none;
  transition: opacity .2s;
}
.co-summary__edit svg { width: 13px; height: 13px; }
.co-summary__edit:hover { opacity: .75; }

.co-summary__items { display: flex; flex-direction: column; gap: .65rem; }

.co-summary-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem;
  background: rgba(255,255,255,.02);
  border-radius: var(--radius-sm, 8px);
}
.co-summary-item__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cyan, #00d4ff);
}
.co-summary-item__icon svg { width: 15px; height: 15px; }
.co-summary-item__info { flex: 1; min-width: 0; }
.co-summary-item__name {
  font-size: .9rem; font-weight: 700;
  font-family: 'Space Mono', monospace;
  color: var(--text, #e2e8f0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-summary-item__name em { color: var(--c-cyan, #00d4ff); font-style: normal; }
.co-summary-item__period { font-size: .73rem; color: var(--text-dim, #8892b0); }
.co-summary-item__price { font-size: .92rem; font-weight: 700; color: var(--text, #e2e8f0); white-space: nowrap; }

.co-summary__divider { height: 1px; background: rgba(255,255,255,.05); margin: .9rem 0; }

.co-summary__line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--text-dim, #8892b0); margin-bottom: .45rem;
}
.co-summary__line span:first-child { display: flex; align-items: center; gap: .3rem; }
.co-summary__line svg { width: 13px; height: 13px; color: var(--c-emerald, #10b981); flex-shrink: 0; }
.co-summary__line--free span { display: flex; align-items: center; gap: .3rem; }

.co-summary__total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .5rem;
}
.co-summary__total span:first-child { font-size: 1rem; font-weight: 700; color: var(--text, #e2e8f0); }
.co-summary__total-amount {
  font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--c-cyan, #00d4ff));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Guarantees */
.co-guarantees {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column; gap: .75rem;
}
.co-guarantee {
  display: flex; align-items: flex-start; gap: .7rem;
}
.co-guarantee__icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--radius-sm, 8px);
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cyan, #00d4ff);
}
.co-guarantee__icon svg { width: 15px; height: 15px; }
.co-guarantee strong { display: block; font-size: .83rem; font-weight: 700; color: var(--text, #e2e8f0); margin-bottom: .15rem; }
.co-guarantee p { font-size: .76rem; color: var(--text-dim, #8892b0); margin: 0; line-height: 1.4; }

/* Payment methods */
.co-payment-methods {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.co-pm-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim, #8892b0); margin-bottom: .6rem; }
.co-pm-icons { display: flex; gap: .4rem; flex-wrap: wrap; }
.co-pm-icon {
  font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  padding: .22rem .55rem;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-dim, #8892b0);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .cart-layout     { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary, .co-summary { position: static; }
}

@media (max-width: 768px) {
  .cart-main, .checkout-main { padding: 2rem 1rem 5rem; }
  .cart-hero { padding: 120px 4% 2rem; }
  .cart-step__line { width: 35px; }

  .cart-item {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
  }
  .cart-item__domain { grid-column: 1 / -1; }
  .cart-item__period { grid-column: 1 / 2; }
  .cart-item__price  { grid-column: 2 / 3; text-align: right; }
  .cart-item__remove { grid-column: 3 / 4; grid-row: 2; }

  .co-fields { grid-template-columns: 1fr; }
  .co-field--full { grid-column: 1; }
}

@media (max-width: 480px) {
  .cart-steps { gap: 0; }
  .cart-step__line { width: 20px; }
  .cart-step span { display: none; }
  .cart-step__dot { width: 32px; height: 32px; }
  .cart-step__dot svg { width: 14px; height: 14px; }

  .cart-item { grid-template-columns: 1fr; gap: .75rem; }
  .cart-item__price { text-align: left; }
  .cart-item__remove { display: flex; justify-content: flex-end; }
}