:root {
  --aid-teal: #0e4d5c;
  --aid-teal-light: #1a7a8c;
  --aid-warm: #e07a3f;
  --aid-gold: #f0b429;
  --paper: #f6f4ee;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(14,77,92,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(224,122,63,0.08), transparent 55%),
    var(--paper);
  min-height: 100vh;
  color: #1c1917;
  background-attachment: fixed;
}

.font-latin  { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
.font-arabic { font-family: 'Noto Naskh Arabic', 'Bricolage Grotesque', serif; line-height: 1.7; }
.font-persian{ font-family: 'Vazirmatn', 'Bricolage Grotesque', sans-serif; line-height: 1.75; }
.font-cjk    { font-family: 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Bricolage Grotesque', sans-serif; line-height: 1.7; }

/* Keep monospace addresses monospace regardless of language font */
.font-mono, .address-box, [dir="ltr"].qr-box { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Warm solidarity stripe across the very top */
.aid-stripe {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  z-index: 50;
  background: linear-gradient(90deg,
    var(--aid-teal) 0%,
    var(--aid-teal-light) 40%,
    var(--aid-gold) 70%,
    var(--aid-warm) 100%);
  box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}

/* ===== Supportive logo: two hands cradling a heart in a ring ===== */
.aid-logo {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #ffffff, #f0ede4);
  box-shadow: 0 4px 14px rgba(14,77,92,0.28), inset 0 0 0 2px rgba(14,77,92,0.12);
  flex-shrink: 0;
  overflow: hidden;
}
.aid-ring {
  position: absolute; inset: 3px;
  border-radius: 50%;
  border: 2px solid var(--aid-teal);
  opacity: 0.35;
}
/* The heart, warm-toned, gently pulsing */
.aid-heart {
  position: absolute;
  left: 50%; top: 36%;
  width: 15px; height: 15px;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: var(--aid-warm);
  border-radius: 3px 3px 3px 3px;
  animation: heart-beat 2.4s ease-in-out infinite;
}
.aid-heart::before, .aid-heart::after {
  content: ""; position: absolute;
  width: 15px; height: 15px; background: var(--aid-warm);
  border-radius: 50%;
}
.aid-heart::before { top: -7.5px; left: 0; }
.aid-heart::after  { left: 7.5px; top: 0; }
/* Two cupped hands rising from the bottom */
.aid-hand {
  position: absolute;
  bottom: 2px;
  width: 20px; height: 16px;
  background: linear-gradient(180deg, var(--aid-teal-light), var(--aid-teal));
}
.aid-hand-l {
  left: 5px;
  border-radius: 12px 3px 12px 12px;
  transform: rotate(14deg);
}
.aid-hand-r {
  right: 5px;
  border-radius: 3px 12px 12px 12px;
  transform: rotate(-14deg);
}
@keyframes heart-beat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); }
  50%      { transform: translate(-50%, -50%) rotate(-45deg) scale(1.14); }
}
[dir="rtl"] .aid-hand-l { transform: rotate(-14deg); }
[dir="rtl"] .aid-hand-r { transform: rotate(14deg); }

.qr-box img, .qr-box canvas { display: block; border-radius: 8px; }

.address-box { user-select: all; }

/* Page-load reveal animation, staggered via inline animation-delay */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

.wallet-card { transition: box-shadow 0.3s ease; }
.step-card { transition: transform 0.2s ease, border-color 0.2s ease; }
.step-card:hover { transform: translateY(-4px); border-color: rgba(14,77,92,0.35); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .step-card:hover { transform: none; }
  .aid-heart { animation: none; }
}

/* Language select: clean native dropdown */
select { line-height: 1.4; }