/* ===== ريادة العطاء — توحيد الجوال والكمبيوتر + حركة وجماليات ===== */
a[href="tel:541820904"] .unicode::before{content:"0"}
:root{--ra-navy:#09204d;--ra-blue:#1d4f91;--ra-gold:#c9a54a;--ra-gold2:#e8cf8a}
html{scroll-behavior:smooth}
::selection{background:var(--ra-gold);color:#fff}
/* 1) السلايدر: الصورة كاملة على كل الشاشات */
.s-block--main-slider .swiper-slide{height:auto!important;min-height:0!important;aspect-ratio:1233/535;overflow:hidden}
.s-block--main-slider .swiper-slide>.container{padding-top:0!important;padding-bottom:0!important;min-height:0!important;height:auto!important}
.s-block--main-slider .swiper,.s-block--main-slider .swiper-wrapper,.s-block--main-slider salla-slider{height:auto!important;min-height:0!important}
.s-block--main-slider .swiper-lazy{background-size:cover!important;background-position:center!important;animation:ra-kenburns 18s ease-in-out infinite alternate}
@keyframes ra-kenburns{from{transform:scale(1)}to{transform:scale(1.04)}}
/* 2) شريط الإعلان */
.top-navbar,.s-block--announcement,salla-advertisement>div{background:linear-gradient(90deg,var(--ra-navy),var(--ra-blue),var(--ra-navy))!important;background-size:200% 100%!important;animation:ra-flow 8s linear infinite}
@keyframes ra-flow{to{background-position:200% 0}}
/* 3) عناوين الأقسام */
.s-block__title h2,.s-block--about-charity h2.text-2xl{position:relative;padding-bottom:.6rem}
.s-block__title h2::after,.s-block--about-charity h2.text-2xl::after{content:"";position:absolute;bottom:0;inset-inline-start:50%;width:64px;height:4px;border-radius:4px;transform:translateX(50%);background:linear-gradient(90deg,var(--ra-gold),var(--ra-gold2),var(--ra-gold));background-size:200% 100%;animation:ra-flow 3s linear infinite}
.s-block--about-charity h2.text-2xl::after{inset-inline-start:0;transform:none}
/* 4) الإحصائيات */
@media (max-width:639px){
.statistics-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.statistics-list__item .inner{padding:14px 6px!important}
.statistics-list__item .icon-wrap{transform:scale(.85)}
}
.statistics-list__item .wrap{border-radius:16px;transition:transform .35s,box-shadow .35s}
.statistics-list__item:hover .wrap{transform:translateY(-6px);box-shadow:0 14px 30px rgba(9,32,77,.15)}
.statistics-list__item .icon-wrap::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--ra-gold);opacity:0;animation:ra-ring 2.6s ease-out infinite}
.statistics-list__item:nth-child(2) .icon-wrap::after{animation-delay:.6s}
.statistics-list__item:nth-child(3) .icon-wrap::after{animation-delay:1.2s}
.statistics-list__item:nth-child(4) .icon-wrap::after{animation-delay:1.8s}
@keyframes ra-ring{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.statistics-list__item strong{background:linear-gradient(90deg,var(--ra-navy),var(--ra-gold),var(--ra-navy));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:ra-flow 4s linear infinite}
/* 5) بنر كن سببًا */
.s-block--wide-banner .btn--primary{position:relative;animation:ra-glow 2.4s ease-in-out infinite}
@keyframes ra-glow{0%,100%{box-shadow:0 0 0 0 rgba(201,165,74,.55)}50%{box-shadow:0 0 0 12px rgba(201,165,74,0)}}
@media (max-width:639px){.s-block--wide-banner .banner-inner{min-height:300px!important}}
/* 6) بطاقات التبرع */
.s-product-card-donation{border-radius:16px!important;overflow:hidden;transition:transform .35s,box-shadow .35s}
.s-product-card-donation:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(9,32,77,.18)}
.s-product-card-donation .s-product-card-image{position:relative;overflow:hidden}
.s-product-card-donation .s-product-card-image img{transition:transform .8s ease}
.s-product-card-donation:hover .s-product-card-image img{transform:scale(1.07)}
.s-product-card-donation .s-product-card-image::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:ra-shine 5s ease-in-out infinite}
.s-product-card-donation:nth-child(2n) .s-product-card-image::after{animation-delay:1.3s}
.s-product-card-donation:nth-child(3n) .s-product-card-image::after{animation-delay:2.6s}
@keyframes ra-shine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.s-product-card-donation input.s-form-control{border-radius:10px!important;transition:border-color .25s,box-shadow .25s}
.s-product-card-donation input.s-form-control:focus{border-color:var(--ra-gold)!important;box-shadow:0 0 0 3px rgba(201,165,74,.25)!important}
.s-product-card-donation:hover salla-add-product-button button{background:var(--ra-navy)!important;color:#fff!important}
@media (max-width:639px){.s-products-list-vertical-cards{gap:10px!important}}
/* 7) مميزات الجمعية: إنفوجرافيك مرقّم */
.s-block--donations-grid .container{counter-reset:ra-step}
.s-block--donations-grid .container>div{counter-increment:ra-step}
.s-block--donations-grid .container>div>div.rounded:first-child{position:relative;border-inline-start:4px solid var(--ra-gold);transition:transform .35s,box-shadow .35s}
.s-block--donations-grid .container>div>div.rounded:first-child::before{content:"0" counter(ra-step);position:absolute;top:12px;inset-inline-end:14px;font-size:2.4rem;font-weight:800;line-height:1;color:var(--ra-gold);opacity:.28}
.s-block--donations-grid .container>div:hover>div.rounded:first-child{transform:translateY(-4px);box-shadow:0 12px 28px rgba(9,32,77,.12)}
.s-block--donations-grid .container>div>div.rounded:last-child{overflow:hidden}
.s-block--donations-grid img{transition:transform 1s ease}
.s-block--donations-grid .container>div:hover img{transform:scale(1.06)}
/* 8) الجهات الإشرافية */
.s-block--logos img{filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s,transform .4s}
.s-block--logos img:hover{filter:none;opacity:1;transform:scale(1.06)}
/* 9) عن الجمعية */
.s-block--about-charity .rounded-full{animation:ra-float 4s ease-in-out infinite}
@keyframes ra-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.s-block--about-charity img{border-radius:18px;box-shadow:0 18px 40px rgba(9,32,77,.18)}
/* 10) رحلة تبرعك: سحب أفقي على الجوال */
@media (max-width:767px){
.s-block--fixed-banner .container{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:26px}
.s-block--fixed-banner .container::-webkit-scrollbar{display:none}
.s-block--fixed-banner a.banner{width:820px;max-width:none}
.s-block--fixed-banner img{width:820px!important;height:auto!important;max-width:none}
.s-block--fixed-banner .container::after{content:"اسحب لمشاهدة رحلة تبرعك ←";position:sticky;inset-inline-start:0;display:block;width:max-content;margin-top:6px;font-size:12px;color:var(--ra-navy);opacity:.75;animation:ra-hint 1.8s ease-in-out infinite}
}
@keyframes ra-hint{0%,100%{transform:translateX(0)}50%{transform:translateX(-8px)}}
/* 11) ظهور تدريجي أثناء التمرير */
@supports (animation-timeline:view()){
.statistics-list__item,.s-product-card-donation,.s-block--donations-grid .container>div,.s-block--logos img,.s-block__title{animation:ra-reveal linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
}
@keyframes ra-reveal{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}