/* =========================================================
   MUDKHAN ALQALA - CUSTOM CSS
   ========================================================= */


/* =========================================================
   1. زر عرض الكل
   ========================================================= */

#see-all-p {
    margin-top: 30px !important;
}


/* =========================================================
   2. تصنيفات المنيو
   ========================================================= */

/* توسيط مجموعة التصنيفات على Desktop */
@media (min-width: 768px) {
    .categories-wrap {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* توسيط النص داخل أزرار التصنيفات */
.categories-wrap .category-tab .tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    padding-left: 24px !important;
    padding-right: 24px !important;
}

.categories-wrap .category-tab .tab > span {
    margin: 0 !important;
    text-align: center !important;
}


/* =========================================================
   3. توسيط المنتجات عندما يكون عددها قليلاً
   Desktop فقط
   ========================================================= */

@media (min-width: 768px) {

    /* منتج واحد */
    .s-products-list-wrapper:has(
        > custom-salla-product-card:first-child:last-child
    ) {
        width: 25% !important;
        margin-inline: auto !important;
        grid-template-columns: 1fr !important;
    }

    /* منتجان */
    .s-products-list-wrapper:has(
        > custom-salla-product-card:nth-child(2):last-child
    ) {
        width: 50% !important;
        margin-inline: auto !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* 3 منتجات */
    .s-products-list-wrapper:has(
        > custom-salla-product-card:nth-child(3):last-child
    ) {
        width: 75% !important;
        margin-inline: auto !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   4. Custom Product Options Dropdown
   ========================================================= */


/* إخفاء Select الأصلي بصرياً فقط.
   يبقى موجوداً حتى تستمر وظائف سلة بالعمل */
salla-product-options select.menu-native-select {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    opacity: 0 !important;
    pointer-events: none !important;

    overflow: hidden !important;
}


/* الحاوية الأساسية */
.menu-custom-select {
    position: relative;
    width: 100%;
    direction: rtl;
}


/* =========================================================
   5. حقل الـ Dropdown
   ========================================================= */

.menu-custom-select__trigger {
    width: 100%;
    min-height: 44px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    background: #fff;

    border: 1px solid #d9dde5;
    border-radius: 12px;

    color: inherit;
    font: inherit;
    text-align: right;

    cursor: pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Hover */
.menu-custom-select__trigger:hover {
    border-color: var(--color-primary, #6b2d18);
}


/* عند فتح القائمة */
.menu-custom-select.is-open
.menu-custom-select__trigger {
    border-color: var(--color-primary, #6b2d18);

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--color-primary, #6b2d18) 10%,
            transparent
        );
}


/* =========================================================
   6. سهم الـ Dropdown
   ========================================================= */

.menu-custom-select__arrow {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

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

    transition: transform .2s ease;
}


.menu-custom-select__arrow svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* تدوير السهم عند الفتح */
.menu-custom-select.is-open
.menu-custom-select__arrow {
    transform: rotate(180deg);
}


/* =========================================================
   7. خيارات القائمة
   ========================================================= */

.menu-custom-select__option {
    width: 100%;
    min-height: 42px;

    padding: 8px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    background: transparent;

    border: 0;
    border-radius: 8px;

    color: inherit;
    font: inherit;
    text-align: right;

    cursor: pointer;

    transition: background-color .15s ease;
}


.menu-custom-select__option:hover {
    background: #f5f5f5;
}


/* الخيار المحدد */
.menu-custom-select__option.is-selected {
    background:
        color-mix(
            in srgb,
            var(--color-primary, #6b2d18) 8%,
            white
        );

    color: var(--color-primary, #6b2d18);

    font-weight: 600;
}


/* علامة الاختيار */
.menu-custom-select__check {
    visibility: hidden;
    font-size: 14px;
}


.menu-custom-select__option.is-selected
.menu-custom-select__check {
    visibility: visible;
}


/* الخيار المعطل */
.menu-custom-select__option:disabled {
    opacity: .45;
    cursor: not-allowed;
}


/* =========================================================
   8. DESKTOP DROPDOWN
   ========================================================= */

@media (min-width: 768px) {

    /* السماح للقائمة بالخروج من حاوية Popup */
    .main-content:has(.menu-custom-select) {
        overflow: visible !important;
    }

    .s-product-options-option,
    .s-product-options-option-content,
    .s-product-options-option-content > div {
        overflow: visible !important;
    }


    .menu-custom-select {
        position: relative !important;
        overflow: visible !important;
        z-index: 10;
    }


    /* القائمة تطفو فوق المحتوى على Desktop */
    .menu-custom-select__dropdown {
        position: absolute !important;

        top: calc(100% + 6px);
        right: 0;
        left: 0;

        width: 100%;

        display: none;

        padding: 6px;

        max-height: 240px;

        overflow-x: hidden !important;
        overflow-y: auto;

        background: #fff;

        border: 1px solid #e5e7eb;
        border-radius: 12px;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, .10);

        z-index: 99999 !important;
    }


    .menu-custom-select.is-open
    .menu-custom-select__dropdown {
        display: block;
    }


    /* القوائم القصيرة لا تحتاج Scrollbar */
    .menu-custom-select__dropdown:not(
        :has(.menu-custom-select__option:nth-child(7))
    ) {
        max-height: none !important;
        overflow-y: visible !important;
    }
}


/* =========================================================
   9. MOBILE DROPDOWN
   ========================================================= */

@media (max-width: 767px) {

    /*
       مهم:
       على الموبايل القائمة ليست Floating.
       تصبح جزءاً من الصفحة وتدفع المحتوى للأسفل.
    */

    .s-product-options-option,
    .s-product-options-option-content,
    .s-product-options-option-content > div {
        position: relative !important;
        overflow: visible !important;
        z-index: auto !important;
    }


    .menu-custom-select {
        position: relative !important;

        width: 100% !important;

        overflow: visible !important;

        /* يمنع القائمة من الظهور فوق
           زر إتمام الطلب والشريط السفلي */
        z-index: auto !important;
    }


    .menu-custom-select__trigger {
        position: relative !important;

        width: 100% !important;
        min-height: 46px !important;

        z-index: auto !important;

        touch-action: manipulation;
    }


    /*
       أهم فرق عن Desktop:
       position: static
    */
    .menu-custom-select__dropdown {
        position: static !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;

        width: 100% !important;

        margin-top: 6px !important;
        padding: 6px;

        display: none;

        max-height: 240px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #fff;

        border: 1px solid #e5e7eb;
        border-radius: 12px;

        box-shadow:
            0 6px 18px rgba(0, 0, 0, .08);

        z-index: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    .menu-custom-select.is-open
    .menu-custom-select__dropdown {
        display: block !important;
    }


    .menu-custom-select__option {
        min-height: 46px !important;
        touch-action: manipulation;
    }
}