/* =======================================================================
   ALSAAGH - MINIMAL CUSTOM CSS
   Scope:
   01) Button1 underline design
   02) Header / Footer / Loader logo dark mode fix
   ======================================================================= */


/* =======================================================================
   01) DESIGN TOKENS
   ======================================================================= */

:root {
    /* Light mode */
    --btn1-text: #1f2933;
    --btn1-line: #7f8893;
    --btn1-hover: #56606b;

    --logo-dark-filter: brightness(0) invert(1) contrast(1.12);
}

html.dark,
body.dark,
body.color-mode-dark,
#app.color-mode-dark,
[data-theme="dark"] {
    /* Dark mode */
    --btn1-text: #f4f6f8;
    --btn1-line: #c6ccd3;
    --btn1-hover: #ffffff;
}


/* =======================================================================
   02) BUTTON1 - UNDERLINE STYLE ONLY
   ======================================================================= */
/* ==========================================================
   BUTTON1 - CENTERED UNDERLINE STYLE
   ========================================================== */

.button1 {
    position: relative !important;

    display: flex !important;
    width: fit-content !important;
    max-width: calc(100% - 24px) !important;

    margin: 0 auto 18px !important;
    padding: 8px 6px 13px !important;

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

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

    color: var(--btn1-text) !important;
    text-align: center !important;
    cursor: pointer !important;

    overflow: visible !important;
    isolation: isolate !important;

    transition: color .25s ease !important;
}

.button1 button,
.button1 a,
.button1 .s-button-element,
.button1 .s-button-btn,
.button1 .btn-section-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

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

    color: var(--btn1-text) !important;
    text-align: center !important;
}

.button1,
.button1 *,
.button1 .s-button-text,
.button1 .s-button-text span {
    color: var(--btn1-text) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    text-align: center !important;

    transition: color .25s ease !important;
}

.button1::after {
    content: "" !important;
    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    width: 74px !important;
    height: 3px !important;

    background: var(--btn1-line) !important;
    border-radius: 999px !important;

    transform: translateX(-50%) !important;

    transition:
        width .25s ease,
        background .25s ease !important;
}

.button1:hover,
.button1:hover *,
.button1:hover .s-button-text,
.button1:hover .s-button-text span {
    color: var(--btn1-hover) !important;
}

.button1:hover::after {
    width: 112px !important;
    background: var(--btn1-hover) !important;
}

/* hover */
.

/* =======================================================================
   03) DARK MODE LOGO FIX
   ======================================================================= */

/*
   المشكلة:
   اللوقو PNG أسود. في الدارك مود يختفي.
   الحل:
   نستهدف اللوقوهات فقط، وليس كل صور الموقع.
*/

/* Light mode: keep original logo */
html:not(.dark) .header-logo-wrapper img.main-logo,
body:not(.dark):not(.color-mode-dark) .header-logo-wrapper img.main-logo,
html:not(.dark) .footer_logo img.main-logo,
body:not(.dark):not(.color-mode-dark) .footer_logo img.main-logo,
html:not(.dark) #lzrd-loader img,
body:not(.dark):not(.color-mode-dark) #lzrd-loader img {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* Header logo dark mode */
html.dark .header-logo-wrapper img.main-logo,
body.dark .header-logo-wrapper img.main-logo,
body.color-mode-dark .header-logo-wrapper img.main-logo,
#app.color-mode-dark .header-logo-wrapper img.main-logo,
[data-theme="dark"] .header-logo-wrapper img.main-logo,
.dark .header-logo-wrapper img.main-logo,
.color-mode-dark .header-logo-wrapper img.main-logo {
    filter: var(--logo-dark-filter) !important;
    -webkit-filter: var(--logo-dark-filter) !important;
    opacity: 1 !important;
}

/* Footer logo dark mode */
html.dark .footer_logo img.main-logo,
body.dark .footer_logo img.main-logo,
body.color-mode-dark .footer_logo img.main-logo,
#app.color-mode-dark .footer_logo img.main-logo,
[data-theme="dark"] .footer_logo img.main-logo,
.dark .footer_logo img.main-logo,
.color-mode-dark .footer_logo img.main-logo {
    filter: var(--logo-dark-filter) !important;
    -webkit-filter: var(--logo-dark-filter) !important;
    opacity: 1 !important;
}

/* Loader logo dark mode */
html.dark #lzrd-loader img,
body.dark #lzrd-loader img,
body.color-mode-dark #lzrd-loader img,
#app.color-mode-dark #lzrd-loader img,
[data-theme="dark"] #lzrd-loader img,
.dark #lzrd-loader img,
.color-mode-dark #lzrd-loader img {
    filter: var(--logo-dark-filter) !important;
    -webkit-filter: var(--logo-dark-filter) !important;
    opacity: 1 !important;
}


/* =======================================================================
   04) LOADER BASIC STYLE
   ======================================================================= */

body:not(.lzrd-ready) {
    overflow: hidden;
}

body.lzrd-ready {
    overflow: auto;
}

#lzrd-loader {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

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

    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        opacity .55s ease,
        visibility .55s ease !important;
}

html.dark #lzrd-loader,
body.dark #lzrd-loader,
body.color-mode-dark #lzrd-loader,
#app.color-mode-dark #lzrd-loader,
[data-theme="dark"] #lzrd-loader {
    background: rgba(8, 10, 13, .92) !important;
}

#lzrd-loader.lzrd-done {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#lzrd-loader img,
#lzrd-loader .lzrd-loader-logo {
    width: 135px !important;
    max-width: 42vw !important;
    height: auto !important;
    object-fit: contain !important;

    animation: alsaaghLoaderPulse 1.8s ease-in-out infinite !important;
}

@keyframes alsaaghLoaderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .72;
    }

    50% {
        transform: scale(1.045);
        opacity: 1;
    }
}


/* =======================================================================
   05) MOBILE
   ======================================================================= */

@media (max-width: 640px) {
    .button1 {
        padding: 6px 4px 12px !important;
        margin-bottom: 14px !important;
    }

    .button1,
    .button1 *,
    .button1 .s-button-text,
    .button1 .s-button-text span {
        font-size: clamp(16px, 4.6vw, 20px) !important;
        line-height: 1.55 !important;
    }

    .button1::after {
        width: 58px !important;
        height: 2px !important;
    }

    .button1:hover::after,
    .button1:focus-within::after {
        width: 86px !important;
    }

    #lzrd-loader img,
    #lzrd-loader .lzrd-loader-logo {
        width: 112px !important;
    }
}


/* =======================================================================
   06) REDUCED MOTION
   ======================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================
   MOBILE FOOTER LOGO POSITION
   تحريك لوقو الفوتر ناحية اليسار شوية
   ========================================================== */

@media (max-width: 768px) {
    .footer_logo,
    footer .footer_logo,
    .store-footer .footer_logo {
        transform: translateX(-18px) !important;
    }
}
@media only screen and (max-width: 1024px) {
    .footer-centered .store-footer .footer_top {
        display: flex;
        flex-direction: column;
        align-items: start !important;
      

    }
  #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.footer_top.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a > img.main-logo.light-logo.h-auto.w-auto.max-w-full.object-contain{
    position: relative;
    /* transform: translateY(128px) !important; */
    /* transform: translateX(-12px) !important; */
    transform: translate(-235px, 122px) !important;
    max-width: 118px !important;
    height: auto !important;
}
  #app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner > div > div.footer_top.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > div.footer-bottom__inside-footer-top.items-center.justify-between.py-2 > salla-trust-badges{

    transform: translate(-122px, 1px) !important;
}
  
  .
}

#main-content > section.s-block.s-block--features.all.enhanced-features.anmt-scale.container > div.grid.grid-cols-3.grid-flow-row.lg\:grid-cols-.gap-4.sm\:gap-6.xl\:gap-8 > div:nth-child(3){



    text-align: center;
}