/* =========================================================
   SPON FOOTER - ULTRA COMPACT VERSION
   مخصص لتصغير الفوتر جداً على الجوال + تنسيق احترافي
   ========================================================= */


/* ==============================
   إعدادات عامة
   ============================== */
.footer-middle.footer-container,
.footer-bottom,
.store-footer,
footer.store-footer {
    position: relative !important;
}

.footer-middle.footer-container {
    overflow: hidden !important;
}


/* ==============================
   خط ضوء برتقالي متحرك أعلى الفوتر
   يعمل على الجوال + اللابتوب
   ============================== */
.footer-middle.footer-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: -28%;
    width: 28%;
    height: 1px;
    z-index: 20;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 122, 0, 0.06) 12%,
        rgba(255, 122, 0, 0.28) 28%,
        rgba(255, 122, 0, 0.60) 42%,
        #ff7a00 52%,
        #ffc078 57%,
        #ff7a00 63%,
        rgba(255, 122, 0, 0.35) 78%,
        transparent 100%
    );

    box-shadow:
        0 0 2px rgba(255, 122, 0, 0.95),
        0 0 5px rgba(255, 122, 0, 0.50),
        0 0 9px rgba(255, 122, 0, 0.18);

    animation: sponFooterTopLight 2.8s cubic-bezier(.45, 0, .25, 1) infinite;
    will-change: transform, opacity;
}

@keyframes sponFooterTopLight {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    8% {
        opacity: .55;
    }

    16% {
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    94% {
        opacity: .45;
    }

    100% {
        transform: translateX(460%);
        opacity: 0;
    }
}


/* ==============================
   لون الأيقونات برتقالي
   ============================== */
.footer-social a,
.s-contacts-item {
    color: #ff7a00 !important;
}

.footer-social svg,
.s-contacts-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.footer-social svg path,
.s-contacts-icon svg path,
.footer-social svg g,
.s-contacts-icon svg g {
    fill: currentColor !important;
    stroke: currentColor !important;
}


/* ==============================
   نسخة الجوال - تصغير قوي جداً
   ============================== */
@media (max-width: 767px) {

    /* جسم الفوتر */
    .footer-middle.footer-container {
        padding: 8px 10px 6px !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .footer-bottom {
        padding: 6px 8px !important;
        gap: 6px !important;
    }

    /* اللوجو */
    .footer-profile {
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .logo-footer {
        justify-content: center !important;
        margin: 0 !important;
    }

    .logo-footer img {
        height: 1.9rem !important;
        width: auto !important;
    }

    /* إخفاء الوصف الطويل لتوفير مساحة */
    .footer-description,
    .footer-profile > p {
        display: none !important;
    }

    /* السوشيال */
    .footer-social {
        margin: 2px 0 0 !important;
    }

    .footer-social ul,
    .footer-social .social-links,
    .footer-social .s-social-list {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-social li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .footer-social svg {
        width: 17px !important;
        height: 17px !important;
    }

    /* عناوين الأقسام */
    .footer-title,
    .s-contacts-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 2px 0 6px !important;
        text-align: center !important;
    }

    /* روابط تهمك */
    .menu-list {
        width: 100% !important;
    }

    .store-links-items {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 5px !important;
        row-gap: 6px !important;
        width: 100% !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .store-links-items a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 3px 2px !important;
        min-height: 24px !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        text-align: center !important;
        border-radius: 5px !important;
        transition:
            background-color .22s ease,
            color .22s ease,
            transform .22s ease !important;
    }

    .store-links-items a:nth-child(7) {
        grid-column: 2 / 3 !important;
        margin-top: 1px !important;
        font-weight: 600 !important;
    }

    .store-links-items a:hover,
    .store-links-items a:active {
        color: #ff7a00 !important;
        background: rgba(255, 122, 0, 0.06) !important;
        transform: translateY(-1px) !important;
    }

    /* خدمة العملاء */
    .s-contacts {
        margin: 0 !important;
    }

    .s-contacts-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .s-contacts-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 4px 3px !important;
        min-height: 26px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .s-contacts-icon {
        flex-shrink: 0 !important;
    }

    .s-contacts-icon svg {
        width: 15px !important;
        height: 15px !important;
    }

    .s-contacts-item .unicode {
        display: block !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* إخفاء أي قسم فارغ أو غير مهم على الجوال */
    salla-apps-icons,
    .footer-images {
        display: none !important;
    }

    /* السجل التجاري + الرقم الضريبي */
    .footer-vat {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 2px 0 !important;
        margin: 0 !important;
    }

    .s-trust-badges-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    .s-trust-badges-image {
        width: 30px !important;
        height: 30px !important;
    }

    .s-trust-badges-label,
    .s-trust-badges-number,
    .vat-num p,
    .vat-num span {
        font-size: 9px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .footer-vat img {
        max-width: 34px !important;
        max-height: 34px !important;
        object-fit: contain !important;
    }

    .vat-num {
        text-align: center !important;
    }

    /* شهادة منصة الأعمال */
    .sbc-certificate {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 0 !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .sbc-link {
        width: 24px !important;
        height: 24px !important;
    }

    .sbc-link img {
        padding: 2px !important;
    }

    .sbc-certificate p {
        margin: 0 !important;
        font-size: 9px !important;
    }

    /* وسائل الدفع */
    .s-payments-list {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .s-payments-list-item {
        width: 22px !important;
        height: 16px !important;
        margin: 0 !important;
        padding: 1px !important;
    }

    .s-payments-list-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* الحقوق */
    .copyrights,
    .copyrights p {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    /* الأعمدة كلها أقرب لبعض */
    .footer-middle > div,
    .footer-bottom > div {
        margin: 0 !important;
    }
}


/* ==============================
   الجوالات الصغيرة جداً
   ============================== */
@media (max-width: 390px) {

    .footer-middle.footer-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .store-links-items {
        column-gap: 4px !important;
        row-gap: 5px !important;
    }

    .store-links-items a {
        font-size: 9.2px !important;
        min-height: 22px !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .s-contacts-item,
    .s-contacts-item .unicode {
        font-size: 8.6px !important;
    }

    .footer-social svg {
        width: 16px !important;
        height: 16px !important;
    }

    .s-payments-list-item {
        width: 20px !important;
        height: 15px !important;
    }

    .footer-middle.footer-container::before {
        width: 34% !important;
        animation-duration: 2.5s !important;
    }
}


/* ==============================
   اللابتوب والكمبيوتر
   نخليه مرتب وأخف من الوضع الحالي
   ============================== */
@media (min-width: 768px) {

    .footer-middle.footer-container {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
        gap: 20px !important;
    }

    .footer-bottom {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 12px !important;
    }

    .footer-social a,
    .s-contacts-item {
        color: #ff7a00 !important;
    }

    .footer-middle.footer-container::before {
        width: 24%;
        height: 1px;
        animation-duration: 2.9s;
    }

    .store-links-items a {
        margin-bottom: 10px !important;
    }

    .s-payments-list {
        gap: 5px !important;
    }

    .s-payments-list-item {
        width: 28px !important;
        height: 20px !important;
    }
}