/* ═══════════════════════════════════════════════════════════════
   CART.CSS
   Page-specific styles for the checkout/cart page (topbar, order
   summary, payment panel, success overlay, etc).

   REQUIRES styles.css to be loaded FIRST. This page's design tokens
   line up almost exactly with styles.css's, so nearly everything in
   the original :root and the entire header/nav/mobile-nav component
   (.nav-inner, .nav-logo*, .nav-btn*, .nav-bell-btn, .notif-badge,
   .nav-user-*, .nav-avatar*, .nav-dropdown-*, .mobile-bottom-nav,
   .mbn-*, and the slideDown dropdown-open trigger) has been omitted
   as an exact duplicate. The one real difference is the header's
   position, called out below — same situation as dashboard.css,
   since this page also has a topbar.
═══════════════════════════════════════════════════════════════ */

:root {
  /* New token — not present in styles.css */
  --shadow: 0 2px 12px rgba(37,99,235,0.08);

  /* Differs from styles.css's --green-light (#D1FAE5), kept as a
     page-local override for the success-tick/item-price colors */
  --green-light: #ECFDF5;

  /* Alias: same 12px value as styles.css's --radius-md, kept under
     the shorter name this file's rules already use. Because custom
     properties resolve per-element at render time (not per file),
     this single alias also fixes the border-radius on any reused
     styles.css component (e.g. .nav-user-dropdown) to the same 12px
     used throughout this page — no need to re-declare those rules. */
  --radius: var(--radius-md);

  /* --blue, --blue-dark, --blue-light, --blue-mid, --green,
     --green-dark, --ink, --ink-2, --ink-3, --muted, --muted-2,
     --border, --surface, --white, --danger, --amber, --nav-h,
     --topbar-h, --shadow-sm, --shadow-md, --font-sans, --font-display
     all come from styles.css's :root — not redeclared here. */
}

/* Only the differences from styles.css's body — darker text and a
   min-height so a short cart page doesn't clip. background/color
   here match dashboard.css's page treatment for consistency. */
body {
  background: var(--surface);
  color: var(--ink-2);
  min-height: 100vh;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; }

/* ═══════════════════════════════════════════
   TOP BAR — new, styles.css only reserves --topbar-h
═══════════════════════════════════════════ */
#edukated-topbar {
  background: linear-gradient(90deg, var(--blue) 0%, #1E40AF 100%);
  color: white; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px; height: var(--topbar-h); position: relative; z-index: 1001;
}
#edukated-topbar a { color: #BAE6FD; text-decoration: underline; text-underline-offset: 2px; }
#topbarClose {
  position: absolute; right: 16px; background: none; border: none;
  color: rgba(255,255,255,.7); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px;
}
#topbarClose:hover { color: white; }

/* ═══════════════════════════════════════════
   NAVBAR — override only
   Same reasoning as dashboard.css: this page has a topbar, so the
   header needs position: sticky (settles below the topbar, then
   sticks once you scroll past it) instead of styles.css's
   position: fixed. Everything else — background, border, shadow,
   z-index, font-family — is identical to styles.css and inherited.
   Don't reuse this override on a page without #edukated-topbar.
═══════════════════════════════════════════ */
#edukated-header { position: sticky; top: 0; }

/* ═══════════════════════════════════════════
   AUTH LOADER — new, not in styles.css
═══════════════════════════════════════════ */
.auth-loader { position: fixed; inset: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.auth-loader.hide { display: none; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   PAGE LAYOUT
═══════════════════════════════════════════ */
.page-wrap { max-width: 1100px; margin: 0 auto; padding: 36px 20px 80px; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted-2); margin-bottom: 28px; flex-wrap: wrap; }
.breadcrumb a { color: var(--blue); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--muted-2); }

/* Page title */
.page-title { font-size: 1.75rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.page-sub   { font-size: 0.9rem; color: var(--muted); margin-bottom: 32px; }

/* Two-column grid */
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }

/* ═══════════════════════════════════════════
   ORDER SUMMARY (left)
═══════════════════════════════════════════ */
.order-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.order-card-head { padding: 18px 22px 14px; border-bottom: 1.5px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.order-card-head h2 { font-size: 1rem; font-weight: 800; }
.item-count-badge { background: var(--blue-light); color: var(--blue); font-size: 0.74rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; }

.order-items { padding: 8px 0; }

.order-item { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--border); transition: background .12s; }
.order-item:last-child { border-bottom: none; }
.order-item:hover { background: var(--surface); }

.item-thumb {
  width: 52px; height: 52px; border-radius: 10px; background: var(--blue-light);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  flex-shrink: 0; overflow: hidden;
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.item-details { flex: 1; min-width: 0; }
.item-details h4 { font-size: 0.9rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-details .item-cat { font-size: 0.76rem; color: var(--muted-2); }

.item-price { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: var(--ink); flex-shrink: 0; }
.item-price.free { color: var(--green-dark); }

.item-remove {
  background: none; border: none; color: var(--muted-2); font-size: 1.1rem;
  line-height: 1; padding: 6px; border-radius: 6px; transition: color .15s, background .15s; flex-shrink: 0;
}
.item-remove:hover { color: var(--danger); background: #FEF2F2; }

/* Empty state */
.empty-cart { text-align: center; padding: 60px 24px; }
.empty-cart .icon { font-size: 3rem; margin-bottom: 14px; }
.empty-cart h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.empty-cart p { font-size: 0.86rem; color: var(--muted-2); margin-bottom: 22px; }
.btn-browse {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue); color: white; padding: 11px 22px;
  border-radius: 10px; font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: background .15s;
}
.btn-browse:hover { background: var(--blue-dark); }

/* ═══════════════════════════════════════════
   PAYMENT PANEL (right)
═══════════════════════════════════════════ */
.payment-panel { display: flex; flex-direction: column; gap: 18px; }

.summary-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.summary-card h2 { font-size: 1rem; font-weight: 800; margin-bottom: 18px; }

.summary-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 0.86rem; }
.summary-line .label { color: var(--muted); }
.summary-line .val   { font-weight: 600; color: var(--ink-2); }
.summary-divider { height: 1px; background: var(--border); margin: 14px 0; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; }
.summary-total .label { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.summary-total .val   { font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; color: var(--ink); }

/* Paystack / checkout button */
.btn-pay {
  width: 100%; padding: 15px; background: var(--blue); color: white;
  border: none; border-radius: 12px; font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s;
  position: relative; overflow: hidden; margin-top: 18px;
}
.btn-pay:hover:not(:disabled) { background: var(--blue-dark); transform: translateY(-1px); }
.btn-pay:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-pay .btn-text { transition: opacity .2s; }
.btn-pay.loading .btn-text { opacity: 0; }
.btn-pay .btn-spinner {
  display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite;
}
.btn-pay.loading .btn-spinner { display: block; }

.pay-note { text-align: center; font-size: 0.76rem; color: var(--muted-2); margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Trust badges */
.trust-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.trust-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 0.82rem; color: var(--ink-3); }
.trust-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.trust-icon { font-size: 1.1rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   SUCCESS OVERLAY
═══════════════════════════════════════════ */
.success-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,0.55); z-index: 500;
  align-items: center; justify-content: center; padding: 20px;
}
.success-overlay.show { display: flex; }

.success-card {
  background: white; border-radius: 18px; max-width: 540px; width: 100%;
  padding: 36px 32px; text-align: center; box-shadow: 0 20px 60px rgba(15,23,42,0.2);
  animation: popIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from { opacity:0; transform: scale(.9); } to { opacity:1; transform: scale(1); } }

.success-tick {
  width: 64px; height: 64px; background: var(--green-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  font-size: 1.8rem;
}
.success-card h2 { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.success-card p  { font-size: 0.88rem; color: var(--muted); margin-bottom: 24px; line-height: 1.7; }

.download-list { text-align: left; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.download-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 12px 16px;
}
.download-item .d-icon { font-size: 1.3rem; flex-shrink: 0; }
.download-item .d-info { flex: 1; min-width: 0; }
.download-item .d-info h5 { font-size: 0.86rem; font-weight: 700; color: var(--ink); margin-bottom: 1px; }
.download-item .d-info span { font-size: 0.74rem; color: var(--muted-2); }
.btn-dl {
  background: var(--green); color: white; border: none;
  padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; text-decoration: none; display: inline-block; transition: background .15s; flex-shrink: 0;
}
.btn-dl:hover { background: var(--green-dark); }

.success-actions { display: flex; gap: 10px; }
.btn-dashboard {
  flex: 1; padding: 12px; background: var(--blue); color: white; border: none;
  border-radius: 10px; font-size: 0.88rem; font-weight: 700; cursor: pointer;
  text-decoration: none; display: inline-block; text-align: center; transition: background .15s;
}
.btn-dashboard:hover { background: var(--blue-dark); }
.btn-continue {
  flex: 1; padding: 12px; background: var(--surface); color: var(--muted);
  border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.88rem;
  font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
  text-align: center; transition: border-color .15s, color .15s;
}
.btn-continue:hover { border-color: var(--ink-2); color: var(--ink-2); }

.ref-chip {
  display: inline-block; background: var(--blue-light); color: var(--blue);
  font-size: 0.74rem; font-weight: 700; padding: 4px 12px; border-radius: 20px;
  font-family: monospace; letter-spacing: 0.05em; margin-bottom: 20px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE — only what's not already in styles.css.
   (styles.css's 640px breakpoint already sets
   .mobile-bottom-nav { display: flex } for this page too.)
═══════════════════════════════════════════ */
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .payment-panel { order: -1; }
}
@media (max-width: 640px) {
  .page-wrap { padding-bottom: 90px; }
  .success-card { padding: 28px 20px; }
  .success-actions { flex-direction: column; }
}