/* =========================================
   MADAR ALABAYA - FOOTER
   Premium Beige / Burgundy Style
   ========================================= */

.store-footer {
    background: #E4E4DC !important;
    color: #3b1720 !important;
    border-top: 1px solid #d2d1c8 !important;
}

.store-footer__inner {
    background: #E4E4DC !important;
    padding: 60px 0 30px !important;
}

/* =========================================
   FOOTER GRID
   ========================================= */

.store-footer__inner > .container {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
    gap: 55px !important;
    align-items: start !important;
}

/* =========================================
   LOGO
   ========================================= */

.store-footer__inner .lg\:col-span-2:first-child > a h3 {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
}

.store-footer__inner .lg\:col-span-2:first-child > a {
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 25px !important;
}

.store-footer__inner .lg\:col-span-2:first-child > a::before {
    content: "";
    display: block;

    width: 205px;
    height: 90px;

    background-image: url("https://cdn.files.salla.network/theme/991027387/97d644bc-2396-4a98-bf32-c308df62fa60-original.webp");

    background-size: contain;
    background-repeat: no-repeat;
  
    background-position: center;
}

/* =========================================
   HEADINGS
   ========================================= */

.store-footer__inner > .container h3 {
    color: #3b1720 !important;
    font-size: 19px !important;
    font-weight: 600 !important;

    margin: 0 0 22px !important;

    letter-spacing: .2px !important;
}

.store-footer__inner > .container > div > h3,
.store-footer__inner > .container salla-contacts h3 {
    padding-bottom: 11px !important;
}

.store-footer__inner > .container > div > h3::after,
.store-footer__inner > .container salla-contacts h3::after {
    content: "";

    display: block;

    width: 42px;
    height: 2px;

    background: #7b2b3d;

    margin-top: 10px;

    border-radius: 5px;
}

/* =========================================
   LINKS
   ========================================= */

.s-menu-footer-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
}

.s-menu-footer-item {
    color: #514b45 !important;

    font-size: 14px !important;

    text-decoration: none !important;

    display: inline-block !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}

.s-menu-footer-item:hover {
    color: #7b2b3d !important;
    transform: translateX(-5px);
}

/* =========================================
   SOCIAL ICONS
   ========================================= */

.s-social-list {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    margin: 0 0 28px !important;
    padding: 0 !important;
}

.s-social-link {
    margin: 0 !important;
    padding: 0 !important;
}

.s-social-link a {
    width: 44px !important;
    height: 44px !important;

    border: 1px solid #c7c5ba !important;
    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255,255,255,.22) !important;

    transition:
        all .3s ease !important;
}

.s-social-link a:hover {
    background: #7b2b3d !important;
    border-color: #7b2b3d !important;

    transform: translateY(-4px);

    box-shadow: 0 7px 18px rgba(59,23,32,.15);
}

.s-social-icon svg {
    width: 19px !important;
    height: 19px !important;
}

.s-social-icon svg path {
    fill: #3b1720 !important;

    transition: fill .3s ease !important;
}

.s-social-link a:hover svg path {
    fill: #ffffff !important;
}

/* =========================================
   PHONE / CONTACT
   ========================================= */

.s-contacts-item {
    display: flex !important;
    align-items: center !important;

    gap: 13px !important;

    color: #514b45 !important;

    text-decoration: none !important;

    font-size: 15px !important;

    transition: color .25s ease !important;
}

.s-contacts-item:hover {
    color: #7b2b3d !important;
}

.s-contacts-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;

    border: 1px solid #c7c5ba !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,.22) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    transition: all .3s ease !important;
}

.s-contacts-item:hover .s-contacts-icon {
    background: #7b2b3d !important;
    border-color: #7b2b3d !important;
}

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

.s-contacts-icon svg path {
    fill: #3b1720 !important;

    transition: fill .3s ease !important;
}

.s-contacts-item:hover .s-contacts-icon svg path {
    fill: #ffffff !important;
}

/* =========================================
   COMMERCIAL REGISTER
   ========================================= */

.s-trust-badges-wrapper {
    display: flex !important;
    align-items: center !important;

    gap: 13px !important;

    margin-top: 22px !important;

    padding: 14px 17px !important;

    border: 1px solid #d0cec4 !important;

    border-radius: 12px !important;

    background: rgba(255,255,255,.28) !important;

    width: fit-content !important;

    transition: all .3s ease !important;
}

.s-trust-badges-wrapper:hover {
    background: rgba(255,255,255,.45) !important;

    border-color: #bbb9af !important;

    transform: translateY(-2px);
}

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

.s-trust-badges-label {
    color: #777168 !important;

    font-size: 12px !important;

    margin: 0 0 4px !important;
}

.s-trust-badges-number {
    color: #3b1720 !important;

    font-size: 14px !important;

    font-weight: 600 !important;
}

/* =========================================
   FOOTER DESCRIPTION
   ========================================= */

.store-footer__inner .lg\:col-span-2:first-child p {
    color: #625b54 !important;

    font-size: 14px !important;

    line-height: 1.9 !important;

    max-width: 390px !important;

    margin-top: 0 !important;
}

/* =========================================
   BOTTOM LINE
   ========================================= */

.store-footer__inner::after {
    content: "مدار العباءة • أناقة تليق بكِ";

    display: block;

    text-align: center;

    color: #756e66;

    font-size: 12px;

    margin: 50px auto 0;

    padding-top: 21px;

    border-top: 1px solid #d0cec4;

    max-width: 1200px;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .store-footer__inner {
        padding: 45px 20px 25px !important;
    }

    .store-footer__inner > .container {
        display: flex !important;
        flex-direction: column !important;

        gap: 35px !important;
    }

    .store-footer__inner .lg\:col-span-2:first-child > a::before {
        width: 180px;
        height: 78px;
    }

    .store-footer__inner > .container h3 {
        font-size: 18px !important;

        margin-bottom: 19px !important;
    }

    .s-menu-footer-list {
        gap: 11px !important;
    }

    .s-social-link a {
        width: 41px !important;
        height: 41px !important;
    }

    .s-contacts-icon {
        width: 41px !important;
        height: 41px !important;
        min-width: 41px !important;
    }

    .s-trust-badges-wrapper {
        width: 100% !important;
        max-width: 330px !important;
    }

    .store-footer__inner::after {
        margin-top: 35px;
        padding-top: 18px;
    }
}