/* gullerim.az custom enhancements: welcome popup + mobile filter UX
   (Loaded site-wide from layouts/base.blade.php; guarded by element presence.) */

/* ---------------- Welcome popup ---------------- */
#gl-site-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(14, 49, 73, .55);
    backdrop-filter: blur(2px);
}
#gl-site-popup.gl-open { display: flex; }
#gl-site-popup .gl-popup-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
    padding: 36px 28px 30px;
    text-align: center;
    animation: glPopIn .28s ease;
}
@keyframes glPopIn {
    from { transform: translateY(12px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
#gl-site-popup .gl-popup-badge {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    background: rgba(59, 183, 126, .12);
    color: var(--color-brand, #3BB77E);
}
#gl-site-popup h3 {
    font-size: 22px;
    color: var(--color-heading, #253D4E);
    margin-bottom: 10px;
}
#gl-site-popup p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-body, #7E7E7E);
    margin-bottom: 22px;
}
#gl-site-popup .gl-popup-btn {
    display: inline-block;
    background: var(--color-brand, #3BB77E);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 11px 30px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
#gl-site-popup .gl-popup-btn:hover { background: var(--color-brand-dark, #29A56C); }
#gl-site-popup .gl-popup-close {
    position: absolute;
    top: 12px; right: 14px;
    width: 30px; height: 30px;
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #9aa4ad;
    cursor: pointer;
}
#gl-site-popup .gl-popup-close:hover { color: #253D4E; }

/* ---------------- Category filter as navigation links ---------------- */
/* Clicking a category navigates to its own page (new URL) instead of being a
   checkbox that stacks with the current category. */
.shop-product-filter-header .ps-list--categories .form-check.ps-category-item {
    padding-left: 0;
    margin-bottom: 2px;
}
.shop-product-filter-header .ps-list--categories .ps-category-item .ps-category-item {
    padding-left: 14px; /* indent sub-categories */
}
.shop-product-filter-header .ps-list--categories .ps-category-link {
    display: inline-block;
    padding: 3px 0;
    color: var(--color-body, #7E7E7E);
    text-decoration: none;
    transition: color .15s;
}
.shop-product-filter-header .ps-list--categories .ps-category-link:hover,
.shop-product-filter-header .ps-list--categories .ps-category-link.active {
    color: var(--color-brand, #3BB77E);
    font-weight: 600;
}

/* ---------------- Mobile filter collapse (full-width layout) ---------------- */
@media (max-width: 991.98px) {
    /* Make group titles tappable with a +/- indicator (collapsible groups only) */
    .shop-product-filter-header .widget-filter-item.gl-collapsible > .widget__title,
    .advanced-search-widgets .bb-product-filter-attribute-item.gl-collapsible > .bb-product-filter-title {
        cursor: pointer;
        user-select: none;
        position: relative;
        padding-right: 2rem;
    }
    .shop-product-filter-header .widget-filter-item.gl-collapsible > .widget__title::after,
    .advanced-search-widgets .bb-product-filter-attribute-item.gl-collapsible > .bb-product-filter-title::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        font-size: 1.15rem;
        line-height: 1;
        color: var(--color-brand, #3BB77E);
    }
    .shop-product-filter-header .widget-filter-item.gl-expanded > .widget__title::after,
    .advanced-search-widgets .bb-product-filter-attribute-item.gl-expanded > .bb-product-filter-title::after {
        content: "\2212"; /* minus */
    }

    /* Collapsed: hide everything under the title */
    .shop-product-filter-header .widget-filter-item.gl-collapsible:not(.gl-expanded) > *:not(.widget__title) {
        display: none !important;
    }
    .advanced-search-widgets .bb-product-filter-attribute-item.gl-collapsible:not(.gl-expanded) > .bb-product-filter-content {
        display: none !important;
    }

    /* Make the category/brand/tag lists usable on touch: kill the tiny 250px
       custom-scrollbar box (mCustomScrollbar) so the list flows and the page
       scrolls normally. Otherwise switching categories is almost impossible. */
    .shop-product-filter-header .custome-checkbox,
    .shop-product-filter-header .ps-custom-scrollbar,
    .shop-product-filter-header .mCustomScrollBox,
    .shop-product-filter-header .mCSB_container {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }
    .shop-product-filter-header .mCSB_container {
        position: static !important;
        top: auto !important;
    }
    .shop-product-filter-header .mCSB_scrollTools {
        display: none !important;
    }
    /* Bigger, easier tap targets for category checkboxes */
    .shop-product-filter-header .ps-list--categories .form-check {
        padding: 5px 0;
    }
    .shop-product-filter-header .ps-list--categories .form-check-label {
        line-height: 1.7;
    }

    /* Sticky action bar so Filter/Clear stay reachable on long lists.
       Make "Filtr" the clear primary action (full width) and put "Clear all"
       as a distinct full-width secondary button below it, so they can't be
       mis-tapped for each other on mobile. */
    .shop-product-filter-header .widget:last-child {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 12px 0 10px;
        margin-top: 6px;
        border-top: 1px solid #eef0f2;
        z-index: 2;
    }
    .shop-product-filter-header .widget:last-child .btn-default {
        display: block;
        width: 100%;
        padding: 13px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        margin: 0 0 10px 0;
    }
    .shop-product-filter-header .widget:last-child .clear_all_filter {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0 !important;
        padding: 11px;
    }
}

/* ---------------- Category "Back" (Geri dön) button ---------------- */
.gl-category-back {
    margin-bottom: 4px;
}
.gl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid var(--color-brand, #3BB77E);
    border-radius: 6px;
    color: var(--color-brand, #3BB77E);
    background: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.gl-back-link i {
    font-size: 13px;
    line-height: 1;
}
.gl-back-link:hover,
.gl-back-link:focus {
    background: var(--color-brand, #3BB77E);
    color: #fff;
}

/* ---------------- Mobile (sidebar layouts): ONLY categories on top ---------------
   The nest theme intentionally orders the product grid ABOVE the filter column on
   narrow viewports, so the sidebar (incl. "Kateqoriyalar") ends up at the very
   bottom. We want ONLY the categories reachable first — not the price/brand/tag
   filters — so gullerim-custom.js lifts just the .gl-category-filter block into
   #gl-mobile-categories above the product grid. It's a collapsible (+/-) strip. */
@media (max-width: 991.98px) {
    #gl-mobile-categories {
        background: #f7f8fa;
        border: 1px solid #eef0f2;
        border-radius: 8px;
        padding: 2px 14px;
        margin: 0 0 18px;
    }
    #gl-mobile-categories .bb-product-filter {
        margin: 0;
    }
    #gl-mobile-categories .bb-product-filter-title {
        cursor: pointer;
        user-select: none;
        position: relative;
        margin: 0;
        padding: 13px 2rem 13px 0;
    }
    #gl-mobile-categories .bb-product-filter-title::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        font-size: 1.15rem;
        line-height: 1;
        color: var(--color-brand, #3BB77E);
    }
    #gl-mobile-categories.gl-expanded .bb-product-filter-title::after {
        content: "\2212"; /* minus */
    }
    #gl-mobile-categories:not(.gl-expanded) .bb-product-filter-content {
        display: none !important;
    }
    #gl-mobile-categories .bb-product-filter-content {
        padding-bottom: 12px;
    }
}