/* style.css - shared styles for donate.html, cart.html, checkout, thankyou */
:root{
  --primary: #0ea5a4;
  --accent: #06b6d4;
  --success: #10b981;
  --fg: #e6eef6;
  --muted: #94a3b8;
  --bg-dark-0: #071028;
  --bg-dark-1: #071a2a;
  --border: rgba(255,255,255,0.06);
  --max-width: 1100px;
  --radius: 12px;
  --shadow-soft: 0 8px 24px rgba(2,6,23,0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Reset & base */
* { box-sizing: border-box; }
html, body { height:100%; margin:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { background: linear-gradient(180deg,var(--bg-dark-0) 0%, var(--bg-dark-1) 100%); color:var(--fg); }
.container { max-width:var(--max-width); margin:0 auto; padding:1.25rem; }

/* Header */
header {
  position: sticky; top:0; z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(7,10,20,0.95), rgba(7,10,20,0.85));
  border-bottom: 1px solid var(--border);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:var(--max-width); margin:0 auto; padding:0.9rem 1rem; }
.brand { display:flex; align-items:center; gap:0.75rem; color:var(--fg); text-decoration:none; }
.site-logo { width:44px; height:44px; border-radius:10px; object-fit:cover; }

/* Nav links & actions */
.nav-links { display:flex; gap:0.5rem; align-items:center; }
.nav-links a { padding:0.45rem 0.8rem; border-radius:8px; color:var(--fg); text-decoration:none; font-weight:600; }
.actions .btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.55rem 0.9rem; border-radius:8px; border:0; cursor:pointer; background: linear-gradient(90deg,var(--primary),var(--accent)); color:#042; font-weight:700; text-decoration:none; }

/* Hero */
.hero { padding:2rem 1rem; text-align:center; border-bottom:1px solid var(--border); }
.kicker { display:inline-block; padding:0.36rem 0.8rem; border-radius:999px; background: rgba(6,182,212,0.06); color:var(--accent); font-weight:700; margin-bottom:0.6rem; }
h1 { margin:0 0 0.6rem 0; font-size:1.6rem; line-height:1.05; }
p.lead { max-width:760px; margin:0 auto; color:var(--muted); }

/* Cart layout */
.cart-wrap { display:flex; gap:1.25rem; align-items:flex-start; margin-top:1rem; flex-wrap:wrap; }
.cart-list { flex:1 1 560px; min-width:280px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--border); border-radius:10px; padding:1rem; box-shadow:var(--shadow-soft); }
.cart-summary { width:320px; min-width:260px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid var(--border); border-radius:10px; padding:1rem; box-shadow:var(--shadow-soft); }

.cart-item { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 0; border-bottom:1px dashed rgba(255,255,255,0.03); }
.cart-item:last-child { border-bottom:0; }
.cart-item .meta { max-width:70%; }
.cart-item .meta .title { font-weight:700; margin-bottom:4px; }
.cart-item .meta .sub { font-size:0.9rem; color:var(--muted); }

.cart-empty { padding:1rem 0; color:var(--muted); }

.cart-footer { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; margin-top:1rem; }
.small { font-size:0.9rem; color:var(--muted); }

.full-btn { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:0.6rem; padding:0.6rem; border-radius:10px; background:var(--primary); color:#042; border:none; cursor:pointer; font-weight:700; text-decoration:none; }

/* Inputs */
input[type="number"], input[type="text"], input[type="email"] { width:100%; padding:0.6rem; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:var(--fg); }

/* FAB & modal (donate page compatibility) */
.cart-fab { position:fixed; right:1rem; bottom:1rem; background: linear-gradient(90deg,var(--primary),var(--accent)); color:#042; padding:0.6rem 0.9rem; border-radius:999px; display:flex; align-items:center; gap:0.6rem; box-shadow: 0 10px 30px rgba(2,6,23,0.6); cursor:pointer; z-index:120; }
.cart-count { background:var(--success); color:#042; padding:0.15rem 0.45rem; border-radius:999px; font-weight:800; font-size:0.85rem; }

/* Cart modal (donate page) */
.cart-modal { position:fixed; right:1rem; bottom:4.6rem; width:320px; max-height:60vh; background: linear-gradient(180deg,#071428,#071a2a); border:1px solid var(--border); border-radius:12px; padding:0.6rem; box-shadow: 0 18px 48px rgba(2,6,23,0.12); overflow:auto; z-index:130; display:none; }
.cart-modal.open { display:block; }

/* Toast */
#qf-toast { position:fixed; top:1rem; right:1rem; z-index:200; display:flex; flex-direction:column; gap:0.5rem; pointer-events:none; }
#qf-toast > div { pointer-events:auto; }

/* Issues section & footer */
.issues-section { border-top:1px solid rgba(255,255,255,0.04); border-bottom:1px solid rgba(255,255,255,0.04); padding:1.25rem; text-align:center; margin-top:1.5rem; }
footer.site-footer { padding:1rem 0; text-align:center; margin-top:1.25rem; background: linear-gradient(180deg, #1a1a1a, #000); color:var(--fg); }

/* Responsive */
@media (max-width:1024px) { .cart-wrap { flex-direction:column-reverse; } .cart-summary { width:100%; } }
@media (max-width:640px) { .nav-links { display:none; } .actions { display:none; } .hero { padding:1.25rem 1rem; } }