:root {
    --gold: #C9A84C;
    --gold-light: #E8C96D;
    --gold-dim: #8a6e2e;
    --green: #1a4a2e;
    --green-mid: #2d6e47;
    --green-light: #3d8a58;
    --cream: #FAF6EE;
    --cream-dark: #F0E8D5;
    --text-dark: #1a1a1a;
    --text-mid: #4a4a4a;
    --text-light: #7a7a7a;
    --white: #ffffff;
    --shadow-card: 0 8px 48px rgba(26,74,46,0.12);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--text-dark); min-height:100vh; overflow-x:hidden; }

  /* HERO */
  .hero { background:var(--green); position:relative; overflow:hidden; padding:56px 24px 72px; text-align:center; }
  .hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,168,76,0.18) 0%, transparent 70%); pointer-events:none; }
  .hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(201,168,76,0.15); border:1px solid rgba(201,168,76,0.35); border-radius:100px; padding:6px 16px; font-size:12px; color:var(--gold-light); letter-spacing:1.5px; text-transform:uppercase; font-weight:500; margin-bottom:24px; }
  .arabic-title { font-family:'Amiri',serif; font-size:clamp(32px,7vw,56px); color:var(--gold-light); line-height:1.2; margin-bottom:8px; text-shadow:0 2px 16px rgba(201,168,76,0.3); }
  .org-name { font-size:clamp(18px,4vw,26px); font-weight:600; color:var(--white); letter-spacing:0.5px; margin-bottom:16px; }
  .org-tagline { font-size:15px; color:rgba(255,255,255,0.65); max-width:400px; margin:0 auto 32px; line-height:1.6; font-weight:300; }
  .stats-row { display:flex; justify-content:center; gap:32px; flex-wrap:wrap; }
  .stat { text-align:center; }
  .stat-num { font-family:'Amiri',serif; font-size:28px; color:var(--gold-light); line-height:1; font-weight:700; }
  .stat-label { font-size:11px; color:rgba(255,255,255,0.5); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
  .stat-divider { width:1px; height:40px; background:rgba(201,168,76,0.2); align-self:center; }

  /* WAVE */
  .wave { display:block; width:100%; margin-bottom:-2px; background:var(--green); }

  /* CAUSES */
  .causes-section { background:var(--cream); padding:40px 20px 16px; text-align:center; }
  .section-label { font-size:11px; color:var(--gold-dim); text-transform:uppercase; letter-spacing:2px; font-weight:600; margin-bottom:8px; }
  .section-title { font-family:'Amiri',serif; font-size:26px; color:var(--green); margin-bottom:24px; }
  .causes-grid { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:560px; margin:0 auto; }
  .cause-pill { display:flex; align-items:center; gap:6px; background:var(--white); border:1.5px solid var(--cream-dark); border-radius:100px; padding:8px 16px; font-size:13px; color:var(--text-mid); font-weight:500; }
  .cause-pill span { font-size:16px; }

  /* FORM CARD */
  .form-section { padding:16px 16px 40px; max-width:520px; margin:0 auto; }
  .form-card { background:var(--white); border-radius:24px; box-shadow:var(--shadow-card); overflow:hidden; border:1px solid rgba(201,168,76,0.15); }
  .form-card-header { background:linear-gradient(135deg,var(--green) 0%,var(--green-mid) 100%); padding:24px 28px 20px; position:relative; overflow:hidden; }
  .form-card-header::after { content:'﷽'; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-family:'Amiri',serif; font-size:36px; color:rgba(201,168,76,0.2); pointer-events:none; }
  .form-card-title { font-size:18px; font-weight:600; color:var(--white); margin-bottom:4px; }
  .form-card-sub { font-size:13px; color:rgba(255,255,255,0.6); }
  .form-body { padding:28px; }
  .form-group { margin-bottom:20px; }
  .form-label { display:block; font-size:12px; font-weight:600; color:var(--text-mid); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:8px; }
  .form-input { width:100%; padding:13px 16px; border:1.5px solid #E8E0D0; border-radius:12px; font-family:'DM Sans',sans-serif; font-size:15px; color:var(--text-dark); background:var(--cream); transition:all 0.2s; outline:none; -webkit-appearance:none; appearance:none; }
  .form-input:focus { border-color:var(--gold); background:var(--white); box-shadow:0 0 0 3px rgba(201,168,76,0.12); }
  .form-input::placeholder { color:#b0a898; }
  select.form-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a6e2e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; cursor:pointer; }

  /* TYPE BUTTONS */
  .type-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .type-btn { padding:11px 8px; border:1.5px solid #E8E0D0; border-radius:10px; background:var(--cream); font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; color:var(--text-mid); cursor:pointer; transition:all 0.2s; text-align:center; }
  .type-btn:hover { border-color:var(--gold); }
  .type-btn.active { background:var(--green); border-color:var(--green); color:var(--white); box-shadow:0 2px 8px rgba(26,74,46,0.25); }

  /* AMOUNT */
  .amount-input-wrap { position:relative; }
  .amount-prefix { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:17px; font-weight:600; color:var(--green); pointer-events:none; }
  .amount-input-wrap .form-input { padding-left:36px; font-size:20px; font-weight:600; color:var(--green); }
  .quick-amounts { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .quick-amt { padding:6px 14px; border:1.5px solid #E8E0D0; border-radius:100px; background:var(--cream); font-size:13px; font-weight:500; color:var(--text-mid); cursor:pointer; transition:all 0.2s; font-family:'DM Sans',sans-serif; }
  .quick-amt:hover,.quick-amt.active { border-color:var(--gold); background:rgba(201,168,76,0.1); color:var(--gold-dim); }

  /* QR */
  .qr-section { margin:24px 0 0; background:var(--cream); border-radius:16px; padding:24px 20px; text-align:center; border:1.5px dashed rgba(201,168,76,0.4); }
  .qr-label { font-size:12px; color:var(--text-light); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-bottom:16px; }
  .qr-box { display:inline-block; background:var(--white); padding:12px; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,0.08); margin-bottom:14px; border:3px solid var(--gold-light); }
  #qrcode canvas,#qrcode img { display:block; border-radius:6px; }
  .qr-amount-tag { display:inline-flex; align-items:center; gap:6px; background:var(--green); color:var(--white); border-radius:100px; padding:5px 14px; font-size:14px; font-weight:600; margin-bottom:12px; }
  .upi-id-box { background:var(--white); border:1px solid #E8E0D0; border-radius:10px; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
  .upi-id-text { font-size:14px; font-weight:600; color:var(--green); font-family:monospace; }
  .copy-btn { font-size:12px; font-weight:600; color:var(--gold-dim); cursor:pointer; background:none; border:none; font-family:'DM Sans',sans-serif; text-transform:uppercase; letter-spacing:0.5px; padding:4px 8px; border-radius:6px; transition:all 0.2s; }
  .copy-btn:hover { background:rgba(201,168,76,0.1); }
  .qr-hint { font-size:12px; color:var(--text-light); margin-top:10px; line-height:1.5; }

  /* CONFIRM */
  .paid-confirm { margin-top:20px; padding:16px; background:rgba(26,74,46,0.05); border-radius:12px; border:1.5px solid rgba(26,74,46,0.12); display:flex; align-items:flex-start; gap:12px; }
  .paid-confirm input[type="checkbox"] { width:18px; height:18px; min-width:18px; accent-color:var(--green); margin-top:2px; cursor:pointer; }
  .paid-confirm label { font-size:13px; color:var(--text-mid); line-height:1.5; cursor:pointer; }

  /* SUBMIT */
  .submit-btn { width:100%; padding:16px; background:linear-gradient(135deg,var(--green) 0%,var(--green-mid) 100%); color:var(--white); border:none; border-radius:14px; font-family:'DM Sans',sans-serif; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.25s; margin-top:20px; position:relative; overflow:hidden; letter-spacing:0.3px; }
  .submit-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(26,74,46,0.35); }
  .submit-btn:active { transform:translateY(0); }
  .submit-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
  .submit-btn-inner { display:flex; align-items:center; justify-content:center; gap:10px; }

  /* SUCCESS */
  .success-card { display:none; text-align:center; padding:48px 28px; }
  .success-icon { width:72px; height:72px; background:linear-gradient(135deg,var(--green) 0%,var(--green-mid) 100%); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:32px; box-shadow:0 8px 24px rgba(26,74,46,0.3); }
  .success-title { font-family:'Amiri',serif; font-size:28px; color:var(--green); margin-bottom:8px; }
  .success-sub { font-size:14px; color:var(--text-light); line-height:1.6; max-width:280px; margin:0 auto; }

  /* FOOTER */
  .footer { text-align:center; padding:32px 20px 48px; background:var(--cream); }
  .footer-ayah { font-family:'Amiri',serif; font-size:18px; color:var(--green); margin-bottom:6px; direction:rtl; }
  .footer-ayah-trans { font-size:12px; color:var(--text-light); font-style:italic; margin-bottom:20px; line-height:1.5; }
  .footer-info { font-size:12px; color:var(--text-light); }
  .footer-divider { width:40px; height:2px; background:var(--gold); margin:0 auto 20px; border-radius:2px; }

  /* TOAST */
  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--green); color:var(--white); padding:12px 24px; border-radius:100px; font-size:14px; font-weight:500; z-index:999; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
  .toast.show { transform:translateX(-50%) translateY(0); }

  /* ANIMATIONS */
  .fade-up { opacity:0; transform:translateY(20px); transition:opacity 0.5s ease,transform 0.5s ease; }
  .fade-up.visible { opacity:1; transform:translateY(0); }

  @media(max-width:400px) {
    .stats-row { gap:16px; }
    .stat-divider { display:none; }
    .form-body { padding:20px; }
  }