/* =========================================================================
   جمعية الشفاعة والرحمة — طبقة صغيرة فوق قالب Deen (style.rtl.css)
   التصميم نفسه من القالب؛ هذا الملف يضبط فقط:
   1. ألوان الشعار والخطوط العربية
   2. ملاحظات العربية (التباعد بين الحروف، اتجاه الأسهم)
   3. الشعار في الهيدر والتذييل
   4. عناصر المعاينة (نص بانتظار التزويد)
   5. عناصر إضافية للصفحات الجديدة (رمز التحقق، الخطوات، الحساب)
   ========================================================================= */

/* ---------- 1. الألوان والخطوط ---------- */
:root {
    --theme-color: #00933B;      /* أخضر الشعار */
    --theme-color2: #F7E01C;     /* أصفر الشعار */
    --theme-dark: #0D3B22;
    --theme-dark2: #072614;
    --accent-maroon: #8C1222;    /* لون كتابة اسم الجمعية في الشعار */
    --smoke-color: #E3F4E8;
    --smoke-color2: #FBF5EA;     /* خلفية الشعار الكريمية */
    --smoke-color4: #C9E6D2;
    --smoke-color5: #FBF3C4;
    --th-border-color2: #99C7A8;

    --title-font: "Cairo", "IBM Plex Sans Arabic", Tahoma, sans-serif;
    --title-font2: "Aref Ruqaa", "Cairo", serif;
    --body-font: "IBM Plex Sans Arabic", "Cairo", Tahoma, sans-serif;
}

/* ---------- 2. ملاحظات العربية ---------- */
/* التباعد بين الحروف يكسر اتصال الحروف العربية */
*, *::before, *::after { letter-spacing: 0 !important; }
body { line-height: 1.8; }
h1, h2, h3, h4, h5, h6 { line-height: 1.45; }
.sec-title, .hero-title, .breadcumb-title { line-height: 1.4; }
.sub-title { line-height: 1.6; font-weight: 700; }

/* الأسهم المائلة ↗ تصبح ↖ في الاتجاه العربي */
.arrow-angle { transform: scaleX(-1); }
.th-btn:hover .arrow-angle, .th-btn:focus .arrow-angle, .th-btn:active .arrow-angle { transform: scaleX(-1) rotate(-45deg); }
/* الأسهم الأفقية → تصبح ← */
.sh-flip { transform: scaleX(-1); }

/* الأرقام والهواتف تبقى من اليسار لليمين */
input[type="tel"], input[inputmode="numeric"], .ltr { direction: ltr; unicode-bidi: isolate; }
input[type="tel"], input[inputmode="numeric"] { text-align: right; }

/* ---------- 3. الشعار ---------- */
.sh-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.sh-logo img { width: 64px; height: 64px; flex: none; }
.sh-logo-text { display: flex; flex-direction: column; line-height: 1.35; text-align: right; }
.sh-logo-text b { font-family: var(--title-font); font-weight: 800; font-size: 21px; color: var(--theme-dark); white-space: nowrap; }
.sh-logo-text small { font-size: 13px; color: var(--body-color); white-space: nowrap; }
.sh-logo--white .sh-logo-text b { color: #fff; }
.sh-logo--white .sh-logo-text small { color: rgba(255, 255, 255, .75); }
.header-layout1 .menu-area .sh-logo img { width: 50px; height: 50px; }
.header-layout1 .menu-area .sh-logo-text small { display: none; }
.footer-wrapper .about-logo .sh-logo img { width: 76px; height: 76px; }
.mobile-logo .sh-logo img { width: 52px; height: 52px; }
.mobile-logo .sh-logo-text b { font-size: 17px; }
.preloader .bounce img { width: 90px; height: 90px; }
@media (max-width: 575px) {
    .sh-logo img { width: 52px; height: 52px; }
    .sh-logo-text b { font-size: 17px; }
    .sh-logo-text small { font-size: 12px; }
}

/* ---------- 4. عناصر المعاينة ---------- */
/* نص بانتظار تزويده من الجمعية (هاتف، بريد، عنوان، تاريخ...) */
.ph-token {
    display: inline-block;
    padding: 0 6px;
    border: 1px dashed currentColor;
    border-radius: 5px;
    line-height: 1.6;
    opacity: .9;
}
.th-btn.disabled { opacity: .6; pointer-events: none; }
.dropdown-link .dropdown-menu a.disabled { opacity: .5; pointer-events: none; }

/* أسهم القالب المرسومة بـ clip-path أو أيقونات اتجاهية */
.footer-widget.widget_meta a:before, .footer-widget.widget_pages a:before, .footer-widget.widget_archive a:before,
.footer-widget.widget_categories a:before, .footer-widget.widget_nav_menu a:before { transform: scaleX(-1); }
.breadcumb-menu li:after { transform: scaleX(-1); }
.th-mobile-menu ul li a:before { content: "\f104"; }

/* الكلمات المفرّغة في الشريط المتحرك: الحدود تتقاطع عند اتصال الحروف العربية، فنلوّنها بالأصفر بدل التفريغ */
.marquee-card .text-stroke { -webkit-text-stroke: 0 !important; color: var(--theme-color2) !important; }

/* ---------- 5. عناصر الصفحات الجديدة (بأسلوب القالب) ---------- */
/* الخطوات والحالات: يظهر العنصر النشط فقط */
[data-step]:not(.is-active), [data-state]:not(.is-active) { display: none; }

/* مؤشر خطوات التبرع */
.sh-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 35px; counter-reset: step; }
.sh-steps li { flex: 1; position: relative; padding-top: 50px; text-align: center; font-family: var(--title-font); font-weight: 600; font-size: 15px; color: var(--body-color); counter-increment: step; line-height: 1.5; }
.sh-steps li::before { content: counter(step); position: absolute; top: 0; right: 50%; transform: translateX(50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--smoke-color2); color: var(--title-color); font-weight: 700; z-index: 1; border: 1px solid var(--th-border-color); }
.sh-steps li::after { content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 2px; background: var(--th-border-color); }
.sh-steps li:last-child::after { display: none; }
.sh-steps li.is-done::before { content: "\f00c"; font-family: var(--icon-font); font-weight: 900; background: var(--theme-color); border-color: var(--theme-color); color: #fff; }
.sh-steps li.is-done::after { background: var(--theme-color); }
.sh-steps li.is-current { color: var(--title-color); }
.sh-steps li.is-current::before { background: var(--theme-color2); border-color: var(--theme-color2); }

/* رمز التحقق */
.sh-otp { display: flex; gap: 10px; justify-content: center; direction: ltr; margin: 10px 0 18px; }
.sh-otp input { width: 56px; height: 62px; padding: 0 !important; text-align: center; font-size: 26px; font-weight: 700; font-family: var(--title-font); border: 1px solid var(--th-border-color); border-radius: 10px; background: var(--white-color); color: var(--title-color); }
.sh-otp input:focus { border-color: var(--theme-color); outline: 0; }
.sh-otp.is-invalid input { border-color: var(--error-color); }
@media (max-width: 400px) { .sh-otp { gap: 6px; } .sh-otp input { width: 44px; height: 54px; font-size: 22px; } }
.sh-otp-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 15px; margin-bottom: 20px; }
.sh-link-btn { background: none; border: 0; padding: 0; color: var(--theme-color); font-weight: 600; }
.sh-link-btn:disabled { color: var(--body-color); opacity: .6; }

/* شارات الحالة في الحساب */
.sh-badge { display: inline-block; padding: 2px 12px; border-radius: 50px; font-size: 13px; font-weight: 700; line-height: 1.8; white-space: nowrap; }
.sh-badge.success { background: #E3F4E8; color: #0E7A3B; }
.sh-badge.pending { background: #FFF4D1; color: #8A5A00; }
.sh-badge.danger { background: #FCE8EA; color: #A5172A; }
.sh-badge.muted { background: #EEF1EF; color: #5F6B64; }

/* بطاقة ملخص في الحساب (على نمط counter-card / widget-donation-wrap) */
.sh-stat { background: var(--smoke-color2); border-radius: 16px; padding: 26px; height: 100%; }
.sh-stat .box-number { font-size: 34px; margin-bottom: 4px; color: var(--title-color); }
.sh-stat .box-text { margin: 0; }
.sh-stat.bg-theme .box-number, .sh-stat.bg-theme .box-text { color: #fff; }
.sh-panel { background: var(--white-color); border-radius: 20px; padding: 35px; box-shadow: 0px 10px 30px rgba(2, 33, 23, 0.08); margin-bottom: 30px; }
@media (max-width: 575px) { .sh-panel { padding: 22px 16px; } }
.sh-panel .cart_table { margin-bottom: 0; width: 100%; }
.cart_table .num { direction: ltr; unicode-bidi: isolate; color: var(--title-color); font-weight: 700; white-space: nowrap; }

/* قائمة الحساب الجانبية (على نمط widget_categories) */
.widget_categories.sh-account-nav a.active { color: var(--theme-color); border-bottom-style: solid; border-bottom-color: var(--theme-color); }

/* نافذة إلغاء الاشتراك: القالب يجعل محتوى النوافذ شفافًا (مصمم لنوافذ الصور)، فنعيد خلفية بيضاء لهذه النافذة */
.sh-modal .modal-dialog { max-width: 520px; }
.sh-modal .modal-dialog .modal-content { background: var(--white-color); border-radius: 20px; }
.sh-modal .btn-close { width: 32px; height: 32px; background: var(--smoke-color2) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/11px no-repeat; }

/* تظليل صورة الواجهة من جهة النص (اليمين) ليبقى النص الأبيض مقروءًا فوق الصور الحقيقية */
.hero-1 .hero-thumb1-1 .thumb { position: relative; }
.hero-1 .hero-thumb1-1 .thumb::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to left, rgba(7, 38, 20, .88) 0%, rgba(7, 38, 20, .6) 40%, rgba(7, 38, 20, 0) 72%);
}
@media (max-width: 991px) {
    .hero-1 .hero-thumb1-1 .thumb::after { background: rgba(7, 38, 20, .62); }
}

/* إطار صورة السلايدر (الحافة الصفراء المنحنية) معكوس ليكون في جهة اليمين:
   ملفا القناع hero_thumb_mask1_1/1_2 معكوسان أفقيًا، وهنا نعكس إزاحة القناع أيضًا */
.hero-1 .hero-thumb1-1 { -webkit-mask-position: -7px 0; mask-position: -7px 0; }
@media (max-width: 991px) {
    .hero-1 .hero-thumb1-1 { -webkit-mask-position: -12px 0; mask-position: -12px 0; }
}

/* بطاقات الخدمات والوثائق: طول موحّد في كل صف، وأيقونات بحجم واحد، والزر في أسفل البطاقة */
.service-card { height: 100%; display: flex; flex-direction: column; align-items: center; }
.service-card .box-icon { width: 104px; height: 104px; display: grid; place-items: center; flex: none; }
.service-card .box-icon img { max-width: 72px; max-height: 72px; }
.service-card .box-text { margin-bottom: 24px; }
.service-card .th-btn { margin-top: auto; }

/* نموذج التبرع في الرئيسية: rtlcss لا يعكس inset، فنمد الخلفية البيضاء نحو الصورة (يمينًا) كما في القالب */
@media (min-width: 1200px) {
    .donation-form:before { inset: 0 -266px 0 0; }
}

/* أزرار الفلترة (المعدات / معاينة الحالات): النص أسود في الحالة النشطة وعند المرور */
.filter-menu .th-btn,
.filter-menu .th-btn:hover, .filter-menu .th-btn:focus, .filter-menu .th-btn.active { color: var(--title-color); }

/* ---------- الشاشات الصغيرة ---------- */
/* سطر الوصف تحت اسم الجمعية: يلتف بدل أن يُقص، ويُخفى في هيدر الموبايل ليبقى زر القائمة في نفس السطر */
@media (max-width: 767px) {
    .sh-logo-text small { white-space: normal; }
    .th-header .sh-logo-text small { display: none; }
    .footer-wrapper .sh-logo-text b { white-space: normal; }
}
@media (max-width: 400px) {
    .th-header .sh-logo img { width: 46px; height: 46px; }
    .th-header .sh-logo-text b { font-size: 16px; }
}
/* الشاشات المتوسطة (لابتوب/تابلت أفقي): نخفي سطر الوصف في الهيدر حتى لا تنزل الأزرار أو اختيار اللغة لسطر جديد */
@media (max-width: 1399px) {
    .th-header .sh-logo-text small { display: none; }
}
/* نقاط الزينة أسفل صورة السلايدر تتداخل مع عناوين الشريط السفلي في الشاشات المتوسطة */
@media (max-width: 1299px) {
    .hero-1 .hero-inner .hero-bg-shape1-2 { display: none; }
}
/* زر «تبرع الآن» أساسي للجمعية: القالب يخفيه بين 992 و1299px، فنُظهره بحجم أصغر ونخفي زر القائمة الجانبية بدلًا منه */
@media (min-width: 992px) and (max-width: 1299px) {
    .header-layout1 .header-button .th-btn,
    .header-default .header-button .th-btn { display: inline-flex; padding: 14px 18px; min-width: 0; min-height: 46px; }
    .th-header .header-button .sideMenuInfo { display: none !important; }
    .th-header .main-menu > ul > li { margin: 0 9px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .th-header .sh-logo img { width: 50px; height: 50px; }
    .th-header .sh-logo-text b { font-size: 17px; }
    .th-header .main-menu > ul > li { margin: 0 6px; }
    .th-header .main-menu > ul > li > a { font-size: 15px; }
    .header-default .header-button { gap: 8px; }
}

/* رابط «حسابي» في القائمة العلوية (مطلوب في ملف المتطلبات): أيقونة + كلمة، وأيقونة فقط في الشاشات المتوسطة لضيق المساحة */
.th-header .sh-account-btn { width: auto; min-width: 46px; padding: 0 18px; gap: 8px; align-items: center; justify-content: center; border-radius: 99px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.header-layout1 .sh-account-btn { color: var(--white-color); }
.header-default .sh-account-btn { color: var(--title-color); }
.th-header .sh-account-btn:hover { color: var(--white-color); }
@media (max-width: 1299px) {
    .th-header .sh-account-btn { padding: 0; width: 46px; }
    .th-header .sh-account-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}