/* ========================================
 * Hello Elementor Theme Compatibility
 * Prevents Hello Elementor's global button reset from affecting Typesense
 * ======================================== */

/* Fix search box input - Hello Elementor adds black border */
.typesense-wordpress-wrapper .ais-SearchBox-input {
    border: none !important;
    border-radius: 3px !important;
    background-color: rgba(65, 66, 71, 0.06) !important;
    color: rgba(33, 36, 61, 0.8) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix header search box input - restore original styling */
.typesense-wordpress-wrapper .header .ais-SearchBox .ais-SearchBox-input {
    background-color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 48px rgba(0, 0, 0, 0.2) !important;
}

/* Hide search submit button functionality but keep icon visible - this is instant search */
.typesense-wordpress-wrapper .ais-SearchBox-submit {
    pointer-events: none !important;
    cursor: default !important;
    background: transparent !important;
    border: none !important;
    opacity: 0.5 !important;
    visibility: visible !important;
    display: flex !important;
}

/* Fix category badges - Hello Elementor makes them inherit button styles */
.typesense-wordpress-wrapper .category-badge {
    /* Restore original Typesense styling */
    color: #21243d !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 4px !important;
    height: 31px !important;
    padding: 0 0.75rem !important;
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix active category badge styling */
.typesense-wordpress-wrapper .category-badge.category-badge--active,
.typesense-wordpress-wrapper .category-badge--active {
    color: #fff !important;
    background: linear-gradient(135deg, #e2a400 0%, #d19800 100%) !important;
    border-color: #d19800 !important;
    font-weight: 600 !important;
}

/* Fix category badges toggle button - restore original styling */
.typesense-wordpress-wrapper .category-badges-toggle {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px dashed rgba(255, 255, 255, 0.6) !important;
    border-radius: 4px !important;
    height: 31px !important;
    padding: 0 0.75rem !important;
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}

/* Fix show more button - Hello Elementor theme styling */
.typesense-wordpress-wrapper .ais-RefinementList-showMore,
.typesense-wordpress-wrapper .ais-HierarchicalMenu-showMore {
    color: #697386 !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid #c4c8d8 !important;
    border-radius: 4px !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    padding: 0.3rem 0.8rem !important;
    font-size: 0.8rem !important;
    font-family: 'IBM Plex Sans Arabic', sans-serif !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    text-align: center !important;
    outline: none !important;
}

.typesense-wordpress-wrapper .ais-RefinementList-showMore:hover,
.typesense-wordpress-wrapper .ais-HierarchicalMenu-showMore:hover {
    background: #f8f9fb !important;
    border-color: #9ca4b8 !important;
    color: #697386 !important;
}

.typesense-wordpress-wrapper .ais-RefinementList-showMore:focus,
.typesense-wordpress-wrapper .ais-HierarchicalMenu-showMore:focus {
    border-color: #e2a400 !important;
    outline: none !important;
}

/* Fix pagination links - Hello Elementor makes them red */
.typesense-wordpress-wrapper .ais-Pagination-link {
    color: #414247 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.typesense-wordpress-wrapper .ais-Pagination-link:hover {
    color: #414247 !important;
    text-decoration: none !important;
}

.typesense-wordpress-wrapper .ais-Pagination-item--selected .ais-Pagination-link {
    color: #fff !important;
}

.typesense-wordpress-wrapper .ais-Pagination-item {
    background-color: rgba(65, 66, 71, 0.08) !important;
    border-radius: 4px !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: #414247 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.typesense-wordpress-wrapper .ais-Pagination-item--selected {
    background-color: #e2a400 !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)) !important;
    font-weight: 700 !important;
}

/* Fix pagination arrows for RTL Arabic - correct orientation */
.typesense-wordpress-wrapper .ais-Pagination-item--previousPage,
.typesense-wordpress-wrapper .ais-Pagination-item--nextPage {
    transform: none !important; /* Remove the scaleX(-1) flip for correct RTL orientation */
}

/* Fix pagination previous button spacing from page 1 */
.typesense-wordpress-wrapper .ais-Pagination-item--previousPage {
    margin-right: 12px !important; /* Add gutter between previous and number 1 */
}

/* Fix SortBy and HitsPerPage dropdown arrow alignment for RTL Arabic */
.typesense-wordpress-wrapper .ais-SortBy,
.typesense-wordpress-wrapper .ais-HitsPerPage {
    position: relative !important;
}

.typesense-wordpress-wrapper .ais-SortBy:after,
.typesense-wordpress-wrapper .ais-HitsPerPage:after {
    position: absolute !important;
    left: 8px !important; /* Position arrow on the left for RTL */
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.typesense-wordpress-wrapper .ais-SortBy-select,
.typesense-wordpress-wrapper .ais-HitsPerPage-select {
    padding-left: 24px !important; /* Add padding for the arrow on the left */
    padding-right: 8px !important;
}