/* زر واتساب رسمي */
.whatsapp-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: .3s;
}






/* ===== واجهة الأيقونات الرئيسية لفنكسيا – كروت صغيرة 3 في الصف ===== */

.fx-icons-wrapper {
    max-width: 1200px;
    margin: 14px auto 22px;
    padding: 0 10px 6px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.fx-icons-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #111827;
    text-align: right;
}

/* شبكة الأيقونات */
.fx-icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* ثلاث صور أفقي على الجوال */
    gap: 8px;
}

/* على الشاشات الأوسع زِد الأعمدة */
@media (min-width: 768px) {
    .fx-icons-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* كرت الأيقونة */
.fx-icon-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #111827;
    display: block;
    box-shadow: 0 8px 18px rgba(15,23,42,0.10);
    transition: transform .18s ease, box-shadow .18s ease, border .18s ease;

    opacity: 0;
    transform: translateY(14px);
}

/* أنيميشن الدخول */
.fx-icon-card.fx-animate {
    animation: fx-fade-up .45s ease-out forwards;
}

@keyframes fx-fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* الهوفر (للدسكتوب) */
.fx-icon-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(15,23,42,0.20);
    border: 1px solid #ffcc33;
}

/* مربع الصورة */
.fx-icon-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%; /* يخليها مربعة وصغيرة */
    overflow: hidden;
    background: #001b3a;
}

.fx-icon-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* العنوان تحت الكرت */
.fx-icon-label {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 4px 6px;
    text-align: center;
    line-height: 1.3;
}

/* موبايل ضبط المسافات */
@media (max-width: 600px) {
    .fx-icons-wrapper {
        margin: 10px 4px 18px;
        padding: 0 4px 4px;
    }
    .fx-icon-label {
        font-size: 11px;
    }
}




/* ===== شركاء النجاح - شعارات كبيرة بخلفية شفافة ===== */

.fx-partners-wrapper {
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 8px 6px 4px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.fx-partners-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #111827;
    text-align: right;
}

/* السلايدر */
.fx-partners-slider {
    overflow: hidden;
    position: relative;
}

/* الشريط */
.fx-partners-track {
    display: flex;
    align-items: center;
    gap: 22px; /* مهم: نفس القيمة في الـ JS لما ننقل العنصر */
    will-change: transform;
}

/* كل شعار */
.fx-partner-card {
    flex: 0 0 auto;

    width: 210px;
    height: 110px;

    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;

    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    transition: transform .15s ease;
}

.fx-partner-card:hover {
    transform: scale(1.03);
}

/* صورة الشعار */
.fx-partner-img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fx-partner-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent !important;
}

/* الجوال */
@media (max-width: 600px) {
    .fx-partner-card {
        width: 180px;
        height: 90px;
    }
    .fx-partners-track {
        gap: 18px;
    }
}





/* ===== خلفية كاملة للمتجر بتدرّج لوني هادئ ===== */

body, html {
    background: linear-gradient(
        to top,
        #CBD5E1 0%,   /* تحت */
        #E2E8F0 50%,  /* وسط */
        #F8FAFC 100%  /* فوق */
    ) !important;

    background-attachment: fixed !important; /* يخلي التدرج ثابت مع التمرير */
}





/* ===== لون موحد للهيدر ===== */

header,
.site-header,
.header,
.header-section,
.header-wrapper,
.header-container,
.main-header,
.top-header,
.navbar,
.navigation,
.nav-container,
.store-header {
    background-color: #0F172A !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== لون موحد للفوتر ===== */

footer,
.site-footer,
.footer,
.footer-section,
.footer-wrapper,
.footer-container,
#footer,
.page-section-footer,
.section-footer,
.store-footer {
    background-color: #0F172A !important;
    border: none !important;
    box-shadow: none !important;
}

/* ===== الحاويات داخل الفوتر (سبب ظهور الحواف) ===== */

footer div,
.site-footer div,
.footer div,
.footer-wrapper div,
.section-footer div,
.page-section-footer div,
.store-footer div,
#footer div {
    background-color: transparent !important; /* يمنع خلفية مختلفة */
    border: none !important;
}

/* ===== إزالة أي حواف داخلية ملونة ===== */
footer *,
#footer *,
.site-footer *,
.footer *,
.footer-wrapper * {
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* ===== نصوص الفوتر ===== */
footer *,
#footer * {
    color: #ffffff !important;
}

/* ===== SVG Icons ===== */
footer svg path,
#footer svg path {
    fill: #ffffff !important;
}








/* شاشة تحميل شعار Fannexia */
.fnx-page-loader {
  position: fixed;
  inset: 0;
  background: #050816; /* لون داكن */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.fnx-page-loader-inner {
  text-align: center;
}

.fnx-page-loader-logo {
  width: 140px;
  max-width: 45vw;
  animation: fnx-logo-pop 1.4s ease-in-out infinite;
}

.fnx-page-loader-dot {
  margin-top: 14px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff6a3d;
  opacity: 0.9;
  animation: fnx-dot-pulse 1.3s ease-in-out infinite;
}

/* عند الإخفاء */
.fnx-page-loader.fnx-page-loader-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* أنيميشن الشعار */
@keyframes fnx-logo-pop {
  0%   { transform: scale(0.96); opacity: 0.8; }
  50%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(0.96); opacity: 0.8; }
}

/* أنيميشن النقطة */
@keyframes fnx-dot-pulse {
  0%   { transform: scale(0.7); opacity: 0.4; }
  50%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0.4; }
}









/* ===== قسم ليش تختار فنكسيا – أسفل المتجر قبل الفوتر ===== */

.fx-why-wrapper {
    width: 100%;
    margin: 32px auto 0;
    padding: 0 16px 32px;
    box-sizing: border-box;
    direction: rtl;
    font-family: inherit;
}

.fx-why-inner {
    max-width: 1180px;
    margin: 0 auto;
    background: linear-gradient(135deg, #f9fafb, #eef2ff);
    border-radius: 24px;
    padding: 22px 20px 24px;
    box-shadow: 0 14px 32px rgba(15,23,42,0.08);
}

/* العنوان والوصف */
.fx-why-header {
    text-align: right;
    margin-bottom: 18px;
}

.fx-why-header h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 6px;
    color: #0f172a;
}

.fx-why-header p {
    font-size: 14px;
    margin: 0;
    color: #4b5563;
}

/* شبكة الكروت */
.fx-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fx-why-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px 14px 18px;
    box-shadow: 0 8px 18px rgba(15,23,42,0.06);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fx-why-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(15,23,42,0.15);
}

/* الأيقونة */
.fx-why-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.fx-why-icon span {
    font-size: 22px;
    color: #facc15;
}

/* العناوين والنصوص داخل الكرت */
.fx-why-card h3 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #111827;
}

.fx-why-card p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    color: #4b5563;
}

/* موبايل وتابلت */
@media (max-width: 900px) {
    .fx-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .fx-why-inner {
        padding: 16px 12px 18px;
        border-radius: 18px;
    }
    .fx-why-grid {
        grid-template-columns: 1fr;
    }
}