/* Faizan-e-Sufia Masjid Appeal Styles */
:root {
    --fes-emerald: #0F2318;
    --fes-forest:  #1B4332;
    --fes-sage:    #52796F;
    --fes-gold:    #C9A84C;
    --fes-gold-d:  #b89438;
    --fes-cream:   #FAF6EE;
    --fes-white:   #F0EBE0;
    --fes-muted:   #D4B896;
    --fes-text:    #3a3328;
}
#fes-masjid-wrap * { box-sizing: border-box; }
#fes-masjid-wrap { font-family: 'Lato', sans-serif; color: var(--fes-text); }
.fes-urdu, #fes-masjid-wrap.lang-ur { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; }
#fes-masjid-wrap.lang-ur .fes-mat-grid { direction: ltr; }

/* Language visibility */
#fes-masjid-wrap.lang-en .ur-text { display: none !important; }
#fes-masjid-wrap.lang-ur .en-text { display: none !important; }

/* Language bar */
.fes-lang-bar { background: var(--fes-emerald); padding: 14px 20px; display: flex; justify-content: center; gap: 0; position: sticky; top: 0; z-index: 200; border-bottom: 2px solid rgba(201,168,76,0.3); }
.fes-lang-btn { padding: 10px 32px; border: 2px solid var(--fes-gold); background: transparent; color: var(--fes-gold); font-family: 'Lato', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; cursor: pointer; transition: all 0.2s; }
.fes-lang-btn:first-child { border-right: none; }
.fes-lang-btn.active { background: var(--fes-gold); color: var(--fes-emerald); }
#fes-btn-ur { font-family: 'Noto Nastaliq Urdu', serif; font-size: 16px; letter-spacing: 0; }

/* Hadith */
.fes-hadith-bar { background: linear-gradient(135deg, var(--fes-emerald), var(--fes-forest)); padding: 40px 20px; text-align: center; border-bottom: 3px solid var(--fes-gold); }
.fes-hadith-quote { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--fes-white); font-style: italic; max-width: 700px; margin: 0 auto 12px; line-height: 1.8; }
#fes-masjid-wrap.lang-ur .fes-hadith-quote { font-family: 'Noto Nastaliq Urdu', serif; font-style: normal; font-size: 22px; line-height: 2; }
.fes-hadith-ref { color: var(--fes-gold); font-size: 14px; letter-spacing: 1px; margin: 0; }

/* Overview */
.fes-overview { background: var(--fes-cream); padding: 60px 20px; }
.fes-overview-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.fes-materials-total { margin-top: 20px; padding: 14px 20px; background: var(--fes-forest); color: var(--fes-offwhite); font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fes-materials-total strong { color: var(--fes-gold); font-size: 15px; }
.fes-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--fes-sage); display: block; margin-bottom: 14px; }
#fes-masjid-wrap.lang-ur .fes-label { font-family: 'Noto Nastaliq Urdu', serif; letter-spacing: 0; font-size: 14px; }
.fes-section-title { font-family: 'Playfair Display', serif; color: var(--fes-emerald); font-size: 36px; margin: 8px 0 16px; line-height: 1.2; }
#fes-masjid-wrap.lang-ur .fes-section-title { font-family: 'Noto Nastaliq Urdu', serif; line-height: 1.8; }
.fes-location { color: var(--fes-sage); font-size: 15px; margin: 0 0 20px; }
.fes-body-text { font-size: 16px; line-height: 1.9; margin: 0 0 24px; }
#fes-masjid-wrap.lang-ur .fes-body-text { font-family: 'Noto Nastaliq Urdu', serif; font-size: 18px; line-height: 2.2; }
.fes-cost-box { background: var(--fes-forest); padding: 24px 28px; border-left: 4px solid var(--fes-gold); }
#fes-masjid-wrap.lang-ur .fes-cost-box { border-left: none; border-right: 4px solid var(--fes-gold); }
.fes-cost-label { color: var(--fes-gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 8px; }
.fes-cost-amount { font-family: 'Playfair Display', serif; color: var(--fes-white); font-size: 40px; font-weight: 700; }
.fes-cost-sub { color: var(--fes-muted); font-size: 14px; margin-top: 6px; }

/* Materials */
.fes-materials { }
.fes-subsection-title { font-family: 'Playfair Display', serif; color: var(--fes-emerald); font-size: 22px; margin: 0 0 20px; }
#fes-masjid-wrap.lang-ur .fes-subsection-title { font-family: 'Noto Nastaliq Urdu', serif; }
.fes-materials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fes-material-card { background: #fff; border: 1px solid rgba(27,67,50,0.15); padding: 20px 16px; text-align: center; border-top: 3px solid var(--fes-gold); }
.fes-material-icon { font-size: 32px; margin-bottom: 10px; }
.fes-material-name { font-weight: 700; color: var(--fes-emerald); font-size: 14px; margin-bottom: 6px; }
#fes-masjid-wrap.lang-ur .fes-material-name { font-family: 'Noto Nastaliq Urdu', serif; font-size: 16px; }
.fes-material-qty { color: var(--fes-sage); font-size: 12px; margin-bottom: 8px; }
.fes-material-cost {
    font-size: 13px;
    font-weight: 700;
    color: var(--fes-forest);
    margin-top: 4px;
    background: rgba(27,67,50,0.07);
    padding: 4px 8px;
    border-radius: 2px;
}
.fes-material-qty { color: var(--fes-sage); font-size: 12px; margin-bottom: 4px; }

/* Tiers */
.fes-tiers-section { background: var(--fes-emerald); padding: 60px 20px; }
.fes-section-header { text-align: center; margin-bottom: 36px; }
.fes-section-header .fes-label { display: inline-block; }
.fes-tiers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.fes-tier-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.25); padding: 28px 20px; text-align: center; transition: all 0.3s; }
.fes-tier-card:hover { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.5); }
.fes-tier-icon { font-size: 36px; margin-bottom: 12px; }
.fes-tier-label { font-family: 'Playfair Display', serif; color: var(--fes-gold); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
#fes-masjid-wrap.lang-ur .fes-tier-label { font-family: 'Noto Nastaliq Urdu', serif; }
.fes-tier-prices { color: var(--fes-sage); font-size: 12px; margin-bottom: 10px; }
.fes-tier-desc { color: var(--fes-muted); font-size: 13px; line-height: 1.6; margin-bottom: 20px; min-height: 40px; }
#fes-masjid-wrap.lang-ur .fes-tier-desc { font-family: 'Noto Nastaliq Urdu', serif; font-size: 15px; line-height: 2; }
.fes-tier-btn { width: 100%; padding: 12px; background: var(--fes-gold); border: none; color: var(--fes-emerald); font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; cursor: pointer; transition: all 0.2s; }
.fes-tier-btn:hover { background: var(--fes-gold-d); transform: translateY(-1px); }
#fes-masjid-wrap.lang-ur .fes-tier-btn { font-family: 'Noto Nastaliq Urdu', serif; font-size: 15px; letter-spacing: 0; }

/* Musalla */
.fes-musalla-section { background: var(--fes-forest); padding: 60px 20px; }
.fes-musalla-section .fes-section-title { color: var(--fes-white); }
.fes-muted { color: var(--fes-muted); font-size: 15px; }
#fes-masjid-wrap.lang-ur .fes-muted { font-family: 'Noto Nastaliq Urdu', serif; font-size: 16px; }
@keyframes fes-pulse { 0%,100%{opacity:1}50%{opacity:0.5} }
.fes-live-badge { display: inline-block; background: var(--fes-gold); color: var(--fes-emerald); font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 4px 14px; margin-bottom: 12px; animation: fes-pulse 2s infinite; }
.fes-progress-wrap { max-width: 900px; margin: 0 auto 16px; }
.fes-progress-bar { background: rgba(0,0,0,0.3); border-radius: 2px; height: 10px; overflow: hidden; margin-bottom: 8px; }
#fes-progress-fill { height: 100%; background: linear-gradient(90deg, var(--fes-gold), var(--fes-gold-d)); width: 0%; transition: width 1s ease; }
.fes-progress-labels { display: flex; justify-content: space-between; color: var(--fes-muted); font-size: 13px; }
.fes-progress-labels span > span:first-child { color: var(--fes-gold); font-weight: 700; font-size: 18px; }
.fes-qibla-label { text-align: center; color: var(--fes-gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; margin: 16px 0 12px; }
.fes-mihrab { text-align: center; margin-bottom: 16px; }
.fes-mihrab > div:first-child { display: inline-block; width: 110px; background: linear-gradient(180deg,var(--fes-emerald),var(--fes-forest)); border: 2px solid var(--fes-gold); padding: 14px 18px; border-radius: 55px 55px 0 0; font-size: 20px; }
.fes-mihrab-label { color: var(--fes-gold); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; margin-top: 4px; }
.fes-mat-grid { display: grid; grid-template-columns: repeat(10,1fr); gap: 3px; max-width: 900px; margin: 0 auto; direction: ltr; }
.fes-mat { aspect-ratio: 2/3; border-radius: 4px 4px 6px 6px; cursor: pointer; position: relative; transition: transform 0.15s, box-shadow 0.15s; border: 1px solid rgba(0,0,0,0.15); overflow: hidden; }
.fes-mat:hover { transform: scale(1.1); z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.fes-mat.available { background: linear-gradient(180deg,#8B7355 0%,#6B563F 30%,#5C4A35 60%,#8B7355 100%); }
.fes-mat.sponsored { background: linear-gradient(180deg,#1B6B4A 0%,#145238 30%,#0F3D2B 60%,#1B6B4A 100%); }
.fes-mat::before { content:''; position:absolute; top:12%; left:50%; transform:translateX(-50%); width:55%; height:25%; border-radius:50% 50% 0 0; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); }
.fes-mat::after { content:''; position:absolute; top:5%; left:50%; transform:translateX(-50%); width:70%; height:18%; border-radius:50% 50% 0 0/100% 100% 0 0; border:1px solid rgba(255,255,255,0.2); border-bottom:none; }
.fes-mat-name { position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; text-align:center; font-family:'Lato',sans-serif; font-size:10px; line-height:1.2; font-weight:600; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 4px; text-shadow:0 1px 2px rgba(0,0,0,0.75); pointer-events:none; z-index:5; }
.fes-block-start { overflow:visible; z-index:5; }
.fes-legend { display:flex; gap:24px; justify-content:center; margin-top:20px; }
.fes-legend-item { display:flex; align-items:center; gap:8px; color:var(--fes-muted); font-size:13px; }
.fes-legend-swatch { width:18px; height:28px; border-radius:3px 3px 4px 4px; }
.fes-legend-swatch.available { background:linear-gradient(180deg,#8B7355,#5C4A35); }
.fes-legend-swatch.sponsored { background:linear-gradient(180deg,#1B6B4A,#0F3D2B); }
.fes-tooltip { display:none; position:fixed; background:var(--fes-emerald); color:var(--fes-white); padding:8px 12px; border-radius:3px; font-size:12px; z-index:9999; pointer-events:none; border:1px solid var(--fes-gold); max-width:160px; line-height:1.5; }

/* Form */
.fes-form-section { background: var(--fes-cream); padding: 70px 20px; }
.fes-form-section .fes-section-title { color: var(--fes-emerald); }
.fes-currency-tabs { display: flex; border: 2px solid var(--fes-forest); max-width: 600px; margin: 0 auto 24px; }
.fes-currency-tab { flex: 1; padding: 14px 8px; border: none; background: var(--fes-cream); color: var(--fes-forest); font-family: 'Lato', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1px; cursor: pointer; transition: all 0.2s; border-right: 2px solid var(--fes-forest); }
.fes-currency-tab:last-child { border-right: none; }
.fes-currency-tab.active { background: var(--fes-gold); color: var(--fes-emerald); }
.fes-unit-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--fes-forest); margin-bottom: 10px; }
#fes-masjid-wrap.lang-ur .fes-unit-label { font-family: 'Noto Nastaliq Urdu', serif; letter-spacing: 0; font-size: 14px; }
.fes-unit-btns { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; max-width: 600px; margin: 0 auto 14px; }
.fes-unit-btn { padding: 14px 4px; border: 2px solid var(--fes-forest); background: var(--fes-cream); color: var(--fes-emerald); font-family: 'Lato', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; transition: all 0.2s; }
.fes-unit-btn.active { background: var(--fes-gold); border-color: var(--fes-gold); color: var(--fes-emerald); }
.fes-custom-unit { display: flex; align-items: center; gap: 10px; max-width: 600px; margin: 0 auto 24px; }
.fes-custom-unit input { flex: 1; padding: 13px 16px; border: 2px solid rgba(27,67,50,0.3); background: #fff; font-size: 16px; font-family: 'Lato',sans-serif; color: var(--fes-emerald); outline: none; }
.fes-custom-unit input:focus { border-color: var(--fes-gold); }
.fes-amount-summary { background: var(--fes-forest); padding: 20px 28px; max-width: 600px; margin: 0 auto 28px; display: flex; justify-content: space-between; align-items: center; }
.fes-amount-label { color: var(--fes-muted); font-size: 13px; margin-bottom: 4px; }
#fes-masjid-wrap.lang-ur .fes-amount-label { font-family: 'Noto Nastaliq Urdu', serif; }
.fes-amount-big { font-family: 'Playfair Display', serif; color: var(--fes-gold); font-size: 32px; font-weight: 700; }
.fes-units-display { color: var(--fes-white); font-size: 15px; font-weight: 700; }
.fes-equiv-display { color: var(--fes-sage); font-size: 12px; margin-top: 4px; }
.fes-pkr-panel { background: var(--fes-emerald); padding: 28px; border: 2px solid var(--fes-gold); max-width: 600px; margin: 0 auto 24px; }
.fes-pkr-title { font-family: 'Playfair Display', serif; color: var(--fes-gold); font-size: 18px; margin: 0 0 16px; }
#fes-masjid-wrap.lang-ur .fes-pkr-title { font-family: 'Noto Nastaliq Urdu', serif; }
.fes-bank-table { width: 100%; font-size: 14px; }
.fes-bank-table td { padding: 6px 8px; color: var(--fes-muted); vertical-align: top; }
.fes-bank-table td:last-child { color: var(--fes-white); }
.fes-pkr-note { color: var(--fes-muted); font-size: 13px; line-height: 1.7; margin: 12px 0 0; }
#fes-masjid-wrap.lang-ur .fes-pkr-note { font-family: 'Noto Nastaliq Urdu', serif; font-size: 15px; line-height: 2; }
#fes-stripe-panel { max-width: 600px; margin: 0 auto; }
.fes-name-email-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.fes-field label.fes-field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--fes-forest); margin-bottom: 8px; }
#fes-masjid-wrap.lang-ur .fes-field-label { font-family: 'Noto Nastaliq Urdu', serif; letter-spacing: 0; font-size: 13px; }
.fes-field input { width: 100%; padding: 13px 16px; border: 2px solid rgba(27,67,50,0.25); background: #fff; font-size: 15px; font-family: 'Lato',sans-serif; outline: none; }
.fes-field input:focus { border-color: var(--fes-gold); }
#fes-payment-element { margin-bottom: 20px; min-height: 40px; }
.fes-error-msg { color: #c0392b; font-size: 14px; margin-bottom: 12px; padding: 10px 14px; background: #fdf0f0; border-left: 3px solid #c0392b; }
.fes-donate-btn { width: 100%; padding: 18px; background: var(--fes-gold); border: none; color: var(--fes-emerald); font-family: 'Lato',sans-serif; font-weight: 900; font-size: 14px; letter-spacing: 2px; cursor: pointer; transition: all 0.3s; margin-bottom: 12px; }
.fes-donate-btn:hover { background: var(--fes-gold-d); transform: translateY(-1px); }
.fes-donate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
#fes-masjid-wrap.lang-ur .fes-donate-btn { font-family: 'Noto Nastaliq Urdu', serif; font-size: 18px; letter-spacing: 0; }
.fes-secure-note { text-align: center; color: #6b6358; font-size: 12px; }

/* Responsive */
@media (max-width: 768px) {
    .fes-overview-grid { grid-template-columns: 1fr !important; gap: 32px; }
    .fes-materials-grid { grid-template-columns: repeat(2,1fr); }
    .fes-name-email-row { grid-template-columns: 1fr; }
    .fes-section-title { font-size: 26px; }
    .fes-tiers-grid { grid-template-columns: 1fr 1fr; }
    .fes-currency-tabs { flex-direction: column; }
    .fes-currency-tab { border-right: none; border-bottom: 2px solid var(--fes-forest); }
    .fes-currency-tab:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
    .fes-tiers-grid { grid-template-columns: 1fr; }
    .fes-materials-grid { grid-template-columns: 1fr; }
    .fes-unit-btns { grid-template-columns: repeat(3,1fr); }
    .fes-mat-grid { grid-template-columns: repeat(10,1fr); gap: 2px; }
    .fes-hadith-quote { font-size: 16px; }
}


/* ============================================================
   ENHANCED VISUAL EFFECTS
   ============================================================ */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Animated geometric background pattern on dark sections */
.fes-hadith-bar {
    background: linear-gradient(135deg, var(--fes-emerald) 0%, #0d2b1a 50%, var(--fes-forest) 100%) !important;
    position: relative;
    overflow: hidden;
}
.fes-hadith-bar::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A84C' fill-opacity='0.04'%3E%3Cpath d='M40 0C18 0 0 18 0 40s18 40 40 40 40-18 40-40S62 0 40 0zm0 72C22.3 72 8 57.7 8 40S22.3 8 40 8s32 14.3 32 32-14.3 32-32 32z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: fes-rotate 60s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}
@keyframes fes-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Tiers section Islamic pattern */
.fes-tiers-section {
    position: relative;
    overflow: hidden;
}
.fes-tiers-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23C9A84C' fill-opacity='0.03'%3E%3Cpolygon points='30,0 60,30 30,60 0,30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Tier card hover lift */
.fes-tier-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}
.fes-tier-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4) !important;
    background: rgba(201,168,76,0.1) !important;
    border-color: rgba(201,168,76,0.6) !important;
}

/* Musalla section - subtle starfield */
.fes-musalla-section {
    background: radial-gradient(ellipse at top, #1e4a36 0%, var(--fes-forest) 50%, #0d2b1a 100%) !important;
    position: relative;
}

/* Progress bar pulse animation */
#fes-progress-fill {
    animation: fes-progress-glow 2s ease-in-out infinite alternate;
}
@keyframes fes-progress-glow {
    from { box-shadow: 0 0 6px rgba(201,168,76,0.4); }
    to   { box-shadow: 0 0 16px rgba(201,168,76,0.8); }
}

/* Mat hover improved */
.fes-mat {
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease !important;
}
.fes-mat:hover {
    transform: scale(1.15) translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
    filter: brightness(1.2) !important;
    z-index: 20 !important;
}
.fes-mat.sponsored:hover {
    box-shadow: 0 6px 20px rgba(201,168,76,0.4) !important;
}

/* Mihrab glow */
.fes-mihrab > div:first-child {
    box-shadow: 0 0 20px rgba(201,168,76,0.25), inset 0 0 20px rgba(0,0,0,0.3) !important;
    transition: box-shadow 0.3s ease;
}
.fes-mihrab > div:first-child:hover {
    box-shadow: 0 0 35px rgba(201,168,76,0.5), inset 0 0 20px rgba(0,0,0,0.3) !important;
}

/* Form section - subtle texture */
.fes-form-section {
    background: linear-gradient(180deg, #FAF6EE 0%, #F5EFE3 100%) !important;
    position: relative;
}
.fes-form-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231B4332' fill-opacity='0.025'%3E%3Cpath d='M20 0L40 20L20 40L0 20Z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Donate button pulse */
.fes-donate-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease !important;
}
.fes-donate-btn::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    transition: width 0.4s ease, height 0.4s ease;
}
.fes-donate-btn:hover::after {
    width: 300px;
    height: 300px;
}
.fes-donate-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(201,168,76,0.45) !important;
}

/* Currency tabs */
.fes-currency-tab {
    transition: all 0.2s ease !important;
}
.fes-currency-tab:hover {
    background: rgba(201,168,76,0.15) !important;
}
.fes-currency-tab.active {
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2);
}

/* Unit buttons */
.fes-unit-btn {
    transition: all 0.2s ease !important;
    position: relative;
}
.fes-unit-btn:hover {
    background: rgba(27,67,50,0.1) !important;
    border-color: var(--fes-forest) !important;
    transform: translateY(-1px);
}
.fes-unit-btn.active {
    box-shadow: 0 4px 12px rgba(201,168,76,0.4) !important;
}

/* Amount display animation */
#fes-amount-display {
    transition: all 0.3s ease;
}

/* Section header gold divider glow */
.fes-section-header::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--fes-gold), transparent);
    margin: 16px auto 0;
    animation: fes-glow 2s ease-in-out infinite alternate;
}
@keyframes fes-glow {
    from { box-shadow: 0 0 4px var(--fes-gold); opacity: 0.7; }
    to   { box-shadow: 0 0 12px var(--fes-gold); opacity: 1; }
}

/* Scroll reveal animation */
@keyframes fes-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fes-animate {
    animation: fes-fade-up 0.6s ease forwards;
}

/* PKR panel slide in */
#fes-pkr-panel {
    animation: fes-fade-up 0.3s ease;
}

/* Live badge enhanced */
.fes-live-badge {
    animation: fes-pulse 1.5s ease-in-out infinite !important;
    box-shadow: 0 0 12px rgba(201,168,76,0.5);
    letter-spacing: 3px !important;
}
@keyframes fes-pulse {
    0%,100% { opacity: 1; box-shadow: 0 0 8px rgba(201,168,76,0.4); }
    50%      { opacity: 0.7; box-shadow: 0 0 20px rgba(201,168,76,0.8); }
}

/* Overview section refined */
.fes-overview {
    background: linear-gradient(180deg, #FAF6EE 0%, #F2EBE0 100%) !important;
}

/* Material cards hover */
.fes-material-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    cursor: default;
}
.fes-material-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
    border-top-color: var(--fes-forest) !important;
}

/* Cash donation cards hover */
.fes-cash-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.fes-cash-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
    border-left-color: var(--fes-gold) !important;
}

/* Responsive improvements */
@media (max-width: 480px) {
    .fes-hadith-quote { font-size: 16px !important; line-height: 1.7 !important; }
    .fes-mat-grid { gap: 2px !important; }
    .fes-mat:hover { transform: scale(1.08) !important; }
    .fes-tier-card:hover { transform: translateY(-3px) !important; }
}


/* ===== Sponsors Honour Roll ===== */
.fes-honour-roll { max-width:900px; margin:52px auto 0; padding-top:40px; border-top:1px solid rgba(201,168,76,0.25); }
.fes-roll-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; margin-top:8px; }
.fes-roll-item { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(201,168,76,0.18); border-radius:4px; }
.fes-roll-name { color:#F0EBE0; font-family:'Lato',sans-serif; font-weight:600; font-size:15px; line-height:1.3; }
.fes-roll-country { color:#C9A84C; font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:1px; margin-left:4px; }
.fes-roll-units { color:#9DB4A6; font-size:13px; white-space:nowrap; text-align:right; }
.fes-roll-count { color:#C9A84C; font-weight:700; display:block; }
.fes-roll-nums { font-size:12px; color:#7c9488; }
@media (max-width:640px){ .fes-roll-grid{ grid-template-columns:1fr; } .fes-roll-item{ padding:10px 12px; } .fes-roll-name{ font-size:14px; } .fes-mat-name{ font-size:7px; padding:0 1px; } }