/* NORTI – Core Design Tokens */
@font-face {
  font-family: "Inter";
  src: url("https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/InterVariable.woff2") format("woff2-variations"), /* Modern name for variable woff2 */
       url("https://raw.githubusercontent.com/rsms/inter/master/docs/font-files/InterVariable.woff2") format("woff2"); /* Fallback for older syntax if needed, but format('woff2') is widely supported */
  font-weight: 100 900; /* Assuming a typical full range for a variable font */
  font-style: normal;   /* Assuming it's a roman (non-italic) variable font */
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next Arabic";
  src: url("https://raw.githubusercontent.com/notofonts/noto-fonts/main/hinted/ttf/NotoKufiArabic/NotoKufiArabic-Regular.ttf") format("truetype");
  font-display: swap;
}
:root {
  --brand-coral: #F37C6C;
  --brand-dusty-mint: #A9DAB0;
  --bg-top-peach: #FDE7DC;
  --bg-bottom-mint: #D9F2E5;
  --bg-soft-beige: #FFF9F4;
  --surface-linen-white: #FAF2EB;
  --highlight-sage: #BCCDB3;
  --accent-muted-lavender: #D8C8E0;
  --text-charcoal: #3A3A3A;
  --text-stone: #7B7B7B;
  --font-logo: "Avenir Next Arabic", sans-serif;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  /* extras for legacy styles */
  --white: #ffffff;
  --shadow: rgba(0,0,0,0.1);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-charcoal);
  line-height: 1.2;
}
body {
  font-family: var(--font-body);
  color: var(--text-charcoal);
  background: var(--bg-soft-beige);
}

.btn-primary {
  background: var(--brand-coral);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-dusty-mint);
}

.btn-secondary {
  background: var(--brand-dusty-mint);
  color: var(--text-charcoal);
  border: 2px solid var(--brand-dusty-mint);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--brand-coral);
  border-color: var(--brand-coral);
  color: #fff;
}
.btn-secondary:disabled,
.btn-secondary.disabled {
  background: var(--brand-dusty-mint);
  border: 2px solid var(--brand-dusty-mint);
  color: var(--text-charcoal);
  opacity: 0.65;
}
.btn-secondary:disabled:hover,
.btn-secondary.disabled:hover,
.btn-secondary:disabled:focus,
.btn-secondary.disabled:focus {
  background: var(--brand-dusty-mint);
  border-color: var(--brand-dusty-mint);
  color: var(--text-charcoal);
}

.btn-outline-primary {
  border: 2px solid var(--brand-coral);
  color: var(--brand-coral);
  background: transparent;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--brand-coral);
  color: #fff;
}

.btn-danger {
  background: var(--brand-coral);
  border-color: var(--brand-coral);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}
.btn-danger:hover,
.btn-danger:focus {
  background: var(--brand-dusty-mint);
  border-color: var(--brand-dusty-mint);
}

/* Soft button variants (light background + darker text) for modals and light UI
   Mirrors the visual language used in ticket stat chips */
.btn-soft-primary {
  background-color: #ffe4d0; /* soft coral */
  color: #e5871d;            /* darker coral text */
  border-color: transparent;
  font-weight: 500;
}
.btn-soft-primary:hover,
.btn-soft-primary:focus {
  background-color: #ffd2b3;
  color: #cc6f12;
}

.btn-soft-secondary {
  background-color: #c8e6c9; /* soft mint */
  color: #2e7d32;            /* dark green text */
  border-color: transparent;
  font-weight: 500;
}
.btn-soft-secondary:hover,
.btn-soft-secondary:focus {
  background-color: #b7dcc0;
  color: #256b28;
}

.btn-soft-danger {
  background-color: #f8d7da; /* light red */
  color: #721c24;            /* dark red text */
  border-color: transparent;
  font-weight: 500;
}
.btn-soft-danger:hover,
.btn-soft-danger:focus {
  background-color: #f3c2c7;
  color: #5f1a1f;
}

.card {
  background: var(--surface-linen-white);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  padding: 1.5rem;
}
.tag {
  background: var(--highlight-sage);
  color: var(--text-charcoal);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1;
}
:focus-visible {
  outline: 3px solid var(--accent-muted-lavender);
  outline-offset: 2px;
}
.container {
  width: min(94%, 1280px);
  margin-inline: auto;
}
.section--top    { background: var(--bg-top-peach);    }
.section--bottom { background: var(--bg-bottom-mint);  }
:root {
  --primary: var(--brand-coral);
  --secondary: var(--brand-dusty-mint);
  --background-top: var(--bg-top-peach);
  --background-bottom: var(--bg-bottom-mint);
  --background: var(--bg-soft-beige);
  --surface: var(--surface-linen-white);
  --text: var(--text-charcoal);
  --light-text: var(--text-stone);
  --highlight: var(--highlight-sage);
  --accent: var(--accent-muted-lavender);
}

/* Donation QR code styling */
.donation-qr {
  max-width: 180px;
  height: auto;
  margin: 0 auto 1rem auto;
  display: block;
}

/* Button focus ring override to match brand colors */

/* Base button affordance (applies to all .btn*) */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-danger,
.btn-soft-primary,
.btn-soft-secondary,
.btn-soft-danger {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-danger:hover,
.btn-soft-primary:hover,
.btn-soft-secondary:hover,
.btn-soft-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-outline-primary:active,
.btn-danger:active,
.btn-soft-primary:active,
.btn-soft-secondary:active,
.btn-soft-danger:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.btn:focus,
.btn:active,
.btn-primary:focus,
.btn-secondary:focus,
.btn-outline-primary:focus,
.btn-danger:focus {
  outline: none;
  box-shadow: 0 0 0 0.25rem rgba(243, 124, 108, 0.45); /* brand coral glow */
}

/* High-emphasis primary CTA for key flows (e.g., Buy on listing page) */
.btn-buy-cta {
  background: linear-gradient(180deg, var(--brand-coral) 0%, #e46a58 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 0.9rem 1.25rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(243, 124, 108, 0.35);
  letter-spacing: 0.2px;
  animation: norti-cta-pop 240ms ease-out;
}
.btn-buy-cta:hover,
.btn-buy-cta:focus {
  background: linear-gradient(180deg, #e46a58 0%, #d85c4a 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(243, 124, 108, 0.45);
}
.btn-buy-cta:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(243, 124, 108, 0.35);
}
.btn-buy-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.3rem rgba(243, 124, 108, 0.45), 0 8px 24px rgba(243, 124, 108, 0.35);
}

@keyframes norti-cta-pop {
  0% { transform: scale(0.98); opacity: 0.85; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}