/* GlobeEasy Alibaba-Style Filters - LUXE NAVY GLASSY DESIGN V10.2 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

.ge-filter-container {
    --ge-navy: #0a192f !important;
    --ge-dark-blue: #112240 !important;
    --ge-accent: #64ffda !important;
    --ge-text-light: #e6f1ff !important;
    --ge-text-dim: #8892b0 !important;
    --ge-glass-white: rgba(255, 255, 255, 0.05) !important;
    --ge-glass-blue: rgba(10, 25, 47, 0.85) !important;
    --ge-radius-lg: 20px !important;
    --ge-radius-sm: 10px !important;
    --ge-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    font-family: 'Inter', sans-serif !important;
    color: var(--ge-text-light) !important;
    all: initial;
    display: block !important;
    box-sizing: border-box !important;
}

.ge-filter-container *,
.ge-filter-container *:before,
.ge-filter-container *:after {
    box-sizing: border-box !important;
    font-family: inherit !important;
}

/* --- STATIC TOGGLE (In-place of shortcode on mobile/tablet) --- */
.ge-static-toggle-wrap {
    display: none !important;
    /* Hidden on PC */
    margin-bottom: 25px !important;
}

.ge-static-toggle {
    width: 100% !important;
    background: linear-gradient(135deg, #0a192f, #112240) !important;
    border: 2px solid var(--ge-accent) !important;
    border-radius: 12px !important;
    padding: 15px 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    cursor: pointer !important;
    transition: var(--ge-transition) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.ge-static-toggle:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 35px rgba(100, 255, 218, 0.1) !important;
}

.ge-static-toggle-icon img {
    width: 25px !important;
    height: 25px !important;
}

.ge-static-toggle-text {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* --- SIDEBAR PANEL (NAVY GLASS) --- */
.ge-filter-container .ge-sidebar-block {
    display: block !important;
    background: var(--ge-glass-blue) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--ge-radius-lg) !important;
    padding: 30px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    margin-bottom: 30px !important;
}

.ge-filter-container .ge-filters-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
}

.ge-filter-container .ge-filters-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
}

.ge-filter-container .ge-filter-close-header {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    transition: var(--ge-transition) !important;
}

.ge-filter-container .ge-filter-close-header:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: rotate(90deg) !important;
}

.ge-filter-container .ge-filter-group {
    margin-bottom: 28px !important;
}

.ge-filter-container .ge-filter-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--ge-text-dim) !important;
    margin-bottom: 12px !important;
}

/* --- LUXE CHIPS --- */
.ge-filter-container .ge-options-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.ge-filter-container .ge-chip {
    cursor: pointer !important;
}

.ge-filter-container .ge-chip input {
    display: none !important;
}

.ge-filter-container .ge-chip span {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    color: var(--ge-text-light) !important;
    transition: var(--ge-transition) !important;
}

.ge-filter-container .ge-chip:hover span {
    background: rgba(255, 255, 255, 0.1) !important;
}

.ge-filter-container .ge-chip input:checked+span {
    background: linear-gradient(135deg, #233554, #112240) !important;
    color: #ffffff !important;
    border-color: var(--ge-accent) !important;
    box-shadow: 0 5px 15px rgba(100, 255, 218, 0.15) !important;
    font-weight: 600 !important;
}

/* --- INPUTS & SELECTS (LUXE) --- */
.ge-filter-container .ge-modern-input,
.ge-filter-container .ge-modern-select,
.ge-filter-container select {
    width: 100% !important;
    padding: 12px 18px !important;
    /* Slightly reduced vertical padding */
    height: 48px !important;
    /* Fixed height for consistency */
    line-height: 24px !important;
    /* Ensure clear text path */
    border-radius: var(--ge-radius-sm) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: var(--ge-dark-blue) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    outline: none !important;
    transition: var(--ge-transition) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    vertical-align: middle !important;
}

/* Placeholder Fix (Make them fully visible) */
.ge-filter-container .ge-modern-input::placeholder {
    color: rgba(230, 241, 255, 0.5) !important;
    opacity: 1 !important;
}

.ge-filter-container .ge-modern-select option,
.ge-filter-container select option {
    background: var(--ge-dark-blue) !important;
    color: #ffffff !important;
    padding: 10px !important;
}

.ge-filter-container .ge-modern-input:focus {
    border-color: var(--ge-accent) !important;
    box-shadow: 0 0 0 4px rgba(100, 255, 218, 0.1) !important;
}

.ge-filter-container .ge-country-select {
    position: relative !important;
}

.ge-filter-container .ge-dropdown-arrow {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--ge-text-dim) !important;
    font-size: 12px !important;
    pointer-events: none !important;
}

.ge-filter-container .ge-country-list {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    background: var(--ge-dark-blue) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: var(--ge-radius-sm) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 100000 !important;
    display: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
}

.ge-filter-container .ge-country-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    gap: 12px !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: var(--ge-transition) !important;
}

.ge-filter-container .ge-country-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    padding-left: 25px !important;
}

.ge-filter-container .ge-country-flag {
    width: 20px !important;
    height: auto !important;
    border-radius: 2px !important;
}

/* --- MOBILE LUXE OVERLAY --- */
@media (max-width: 992px) {
    .ge-static-toggle-wrap {
        display: block !important;
    }

    .ge-filter-container .ge-sidebar-block {
        display: none !important;
        /* Hidden on PC-position on mobile */
    }

    .ge-filter-container .ge-filters-bar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: -110% !important;
        width: 100% !important;
        height: 100vh !important;
        background: var(--ge-navy) !important;
        z-index: 2000000 !important;
        /* Extreme z-index to stay above everything */
        transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
        margin: 0 !important;
        padding-top: 40px !important;
        border: none !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        display: block !important;
    }

    .ge-filters-wrap.ge-open .ge-filters-bar {
        right: 0 !important;
    }

    .ge-filter-container .ge-filter-close-header {
        display: flex !important;
    }

    .ge-filters-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 1000000 !important;
        display: none;
    }
}

/* --- ACTIONS (GLASSY BUTTONS) --- */
.ge-filter-container .ge-filter-actions {
    display: flex !important;
    gap: 15px !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ge-filter-container .ge-btn {
    flex: 1 !important;
    padding: 15px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: var(--ge-transition) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ge-filter-container .ge-btn-apply {
    background: linear-gradient(135deg, #1d4ed8, #001f3f) !important;
    color: #ffffff !important;
    border-color: var(--ge-accent) !important;
}

.ge-filter-container .ge-btn-reset {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--ge-text-light) !important;
}

/* --- SUPPRESS EXTERNAL WIDGETS (Zoho, Trade AI, etc.) --- */
body.ge-hide-external-widgets #tradeAIIcon,
body.ge-hide-external-widgets #zsiq_float,
body.ge-hide-external-widgets .zsiq-float,
body.ge-hide-external-widgets #zoho-salesiq,
body.ge-hide-external-widgets .zoho-salesiq-widget,
body.ge-hide-external-widgets #wp-ai-copilot,
body.ge-hide-external-widgets .ai-widget-container,
body.ge-hide-external-widgets .floating-widget {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}



/* Definitive override for country search items */
.ge-filter-container .ge-country-list .ge-country-item.ge-hidden {
    display: none !important;
}

/* --- VENDOR DASHBOARD COUNTRY PICKER FIX --- */
.ge-vendor-country-picker-wrap {
    position: relative !important;
}

.ge-vendor-country-list {
    position: absolute !important;
    z-index: 99999 !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 5px !important;
    background: #fff !important;
    border: 2px solid #002244 !important;
    border-radius: 8px !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

.ge-vendor-country-list .ge-v-search {
    width: 100% !important;
    border: 1px solid #ddd !important;
    padding: 10px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    outline: none !important;
}

.ge-vendor-country-list .ge-v-search:focus {
    border-color: #002244 !important;
    box-shadow: 0 0 0 2px rgba(0, 34, 68, 0.1) !important;
}

.ge-vendor-country-list .ge-v-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.ge-vendor-country-list .ge-v-item:hover {
    background: #f0f9ff !important;
}

/* ================================== */
/* COLLAPSIBLE FILTER BAR             */
/* Show More / Show Less Functionality */
/* ================================== */

/* Collapsed filters container */
.ge-collapsed-filters {
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
}

.ge-collapsed-filters.ge-expanded {
    display: block !important;
    max-height: 5000px !important;
    /* Large enough to show all fields */
    opacity: 1;
}

/* Show More/Less Toggle Button */
.ge-collapse-toggle-wrap {
    margin: 20px 0 25px 0 !important;
    text-align: center !important;
}

.ge-collapse-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.1), rgba(100, 255, 218, 0.05)) !important;
    border: 2px solid var(--ge-accent, #64ffda) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Inter', sans-serif !important;
}

.ge-collapse-toggle:hover {
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.2), rgba(100, 255, 218, 0.1)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(100, 255, 218, 0.2) !important;
}

.ge-collapse-toggle .ge-toggle-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.ge-collapse-toggle .ge-toggle-count {
    color: var(--ge-accent, #64ffda) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.ge-collapse-toggle .ge-toggle-icon {
    color: var(--ge-accent, #64ffda) !important;
    font-size: 12px !important;
    transition: transform 0.3s ease !important;
}

.ge-collapse-toggle[data-expanded="true"] .ge-toggle-icon {
    transform: rotate(180deg) !important;
}

/* Mobile Responsive - Collapsible */
@media (max-width: 768px) {
    .ge-collapse-toggle {
        width: 100% !important;
        padding: 16px 20px !important;
    }

    .ge-collapse-toggle .ge-toggle-text {
        font-size: 13px !important;
    }
}

/* Tablet Responsive */
@media (max-width: 992px) {
    .ge-collapse-toggle-wrap {
        margin: 15px 0 20px 0 !important;
    }

    .ge-collapsed-filters.ge-expanded {
        max-height: 8000px !important;
        /* Even more space for mobile scroll */
    }
}

/* ================================== */
/* PREMIUM CUSTOM DROPDOWN (LUXE)     */
/* ================================== */

.ge-premium-dropdown-wrap {
    position: relative !important;
    width: 100% !important;
    font-family: 'Inter', sans-serif !important;
}

/* The box that shows selections */
.ge-premium-selected-box {
    width: 100% !important;
    min-height: 48px !important;
    padding: 8px 45px 8px 15px !important;
    background: #fff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

/* Frontend (Buyer) version styling */
.ge-filter-container .ge-premium-selected-box {
    background: var(--ge-dark-blue) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.ge-premium-selected-box:hover {
    border-color: #002244 !important;
}

.ge-filter-container .ge-premium-selected-box:hover {
    border-color: var(--ge-accent) !important;
}

.ge-premium-selected-box:after {
    content: '▼' !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: #64748b !important;
    transition: transform 0.3s ease !important;
}

.ge-premium-dropdown-wrap.ge-open .ge-premium-selected-box:after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Placeholder text when nothing selected */
.ge-premium-placeholder {
    color: #94a3b8 !important;
    font-size: 14px !important;
    user-select: none !important;
}

.ge-filter-container .ge-premium-placeholder {
    color: rgba(230, 241, 255, 0.5) !important;
}

/* Chips inside the selected box */
.ge-premium-chip {
    background: #f1f5f9 !important;
    color: #002244 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.ge-filter-container .ge-premium-chip {
    background: rgba(100, 255, 218, 0.1) !important;
    color: var(--ge-accent) !important;
    border: 1px solid rgba(100, 255, 218, 0.2) !important;
}

/* The Dropdown List */
.ge-premium-list {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border: 2px solid #002244 !important;
    border-radius: 12px !important;
    z-index: 99999 !important;
    display: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
}

.ge-filter-container .ge-premium-list {
    background: var(--ge-dark-blue) !important;
    border: 1px solid var(--ge-accent) !important;
    backdrop-filter: blur(20px) !important;
}

/* Search bar in dropdown */
.ge-premium-search-wrap {
    padding: 12px !important;
    border-bottom: 1px solid #eef2f6 !important;
}

.ge-filter-container .ge-premium-search-wrap {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ge-premium-search {
    width: 100% !important;
    height: 38px !important;
    padding: 0 15px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    outline: none !important;
}

.ge-filter-container .ge-premium-search {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Items in the list */
.ge-premium-items-scroll {
    max-height: 250px !important;
    overflow-y: auto !important;
    padding: 5px 0 !important;
}

.ge-premium-item {
    padding: 10px 15px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s !important;
}

.ge-filter-container .ge-premium-item {
    color: var(--ge-text-light) !important;
}

.ge-premium-item:hover {
    background: #f8fafc !important;
    color: #002244 !important;
}

.ge-filter-container .ge-premium-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--ge-accent) !important;
}

.ge-premium-item.ge-selected {
    background: #f0f9ff !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
}

.ge-filter-container .ge-premium-item.ge-selected {
    background: rgba(100, 255, 218, 0.1) !important;
    color: var(--ge-accent) !important;
}

/* Scrollbar styling */
.ge-premium-items-scroll::-webkit-scrollbar {
    width: 6px !important;
}

.ge-premium-items-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 10px !important;
}

.ge-filter-container .ge-premium-items-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
}