/* ==========================================================================
   Vendors Listing — Hero Section Styles
   Full-width background slideshow, centered text, floating search card
   ========================================================================== */

/* --- CSS Variables --- */
.vl-wrapper .vl-hero-section {
    --vl-hero-bg: #0B1437;
    --vl-hero-card-bg: #ffffff;
    --vl-hero-card-radius: 16px;
    --vl-hero-btn-bg: #6C5CE7;
    --vl-hero-btn-bg-hover: #5A4BD1;
    --vl-hero-input-bg: #f8f9fb;
    --vl-hero-input-border: #e5e7eb;
    --vl-hero-text-dark: #1a1a2e;
}

/* ---------------------------------------------------------------------
   1. Hero Container
   --------------------------------------------------------------------- */
.vl-wrapper .vl-hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 520px;
    background-color: var(--vl-hero-bg) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.elementor-page .vl-wrapper .vl-hero-section,
.e-con .vl-wrapper .vl-hero-section {
    background-color: var(--vl-hero-bg) !important;
}

.vl-wrapper .vl-hero-section--has-search {
    padding-bottom: 60px !important;
    margin-bottom: 50px !important;
}

/* ---------------------------------------------------------------------
   2. Full Background Slideshow
   --------------------------------------------------------------------- */
.vl-wrapper .vl-hero-section__slideshow {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.vl-wrapper .vl-hero-section__slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transition: opacity 1.2s ease-in-out !important;
    will-change: opacity !important;
}

.vl-wrapper .vl-hero-section__slide--active {
    opacity: 1 !important;
}

/* Subtle zoom on active slide */
.vl-wrapper .vl-hero-section__slide--active {
    animation: vl-hero-zoom 8s ease-out forwards !important;
}

@keyframes vl-hero-zoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.05); }
}

/* Placeholder gradient when no images */
.vl-wrapper .vl-hero-section__slide--placeholder {
    background: linear-gradient(135deg, #0B1437 0%, #1e2a5a 40%, #6C5CE7 100%) !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------------------
   3. Dark Overlay
   --------------------------------------------------------------------- */
.vl-wrapper .vl-hero-section__overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, rgba(11,20,55,0.6) 0%, rgba(11,20,55,0.75) 60%, rgba(11,20,55,0.9) 100%) !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------------------
   4. Centered Content
   --------------------------------------------------------------------- */
.vl-wrapper .vl-hero-section__content {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 800px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 80px 24px 40px !important;
    box-sizing: border-box !important;
    animation: vl-hero-fade-up 0.8s ease-out both !important;
}

@keyframes vl-hero-fade-up {
    0%   { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Eyebrow --- */
.vl-wrapper .vl-hero-section__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 18px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.9) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    animation: vl-hero-fade-up 0.8s ease-out 0.1s both !important;
}

.vl-wrapper .vl-hero-section__eyebrow-dot {
    width: 6px !important;
    height: 6px !important;
    background: #00CEC9 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    animation: vl-pulse-dot 2s ease-in-out infinite !important;
}

@keyframes vl-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.4); }
}

/* --- Heading --- */
.vl-wrapper .vl-hero-section__heading {
    font-size: 50px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    animation: vl-hero-fade-up 0.8s ease-out 0.2s both !important;
}

.elementor-widget-container .vl-wrapper .vl-hero-section__heading,
.e-con .vl-wrapper .vl-hero-section__heading {
    color: #ffffff !important;
}

/* --- Subheading --- */
.vl-wrapper .vl-hero-section__subheading {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.75) !important;
    line-height: 1.6 !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    max-width: 600px !important;
    animation: vl-hero-fade-up 0.8s ease-out 0.3s both !important;
}

.elementor-widget-container .vl-wrapper .vl-hero-section__subheading,
.e-con .vl-wrapper .vl-hero-section__subheading {
    color: rgba(255,255,255,0.75) !important;
}

/* --- Optional CTA Button --- */
.vl-wrapper .vl-hero-section__cta-wrap {
    animation: vl-hero-fade-up 0.8s ease-out 0.4s both !important;
}

.vl-wrapper .vl-hero-section__cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(4px) !important;
}

.vl-wrapper .vl-hero-section__cta-btn:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.45) !important;
    transform: translateY(-2px) !important;
}

.vl-wrapper .vl-hero-section__cta-btn svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease !important;
}

.vl-wrapper .vl-hero-section__cta-btn:hover svg {
    transform: translateX(3px) !important;
}

.elementor-widget-container .vl-wrapper .vl-hero-section__cta-btn,
.e-con .vl-wrapper .vl-hero-section__cta-btn {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------
   5. Floating Search Card
   --------------------------------------------------------------------- */
.vl-wrapper .vl-hero-section__search-card {
    position: relative !important;
    z-index: 100 !important;
    background: var(--vl-hero-card-bg) !important;
    border-radius: var(--vl-hero-card-radius) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.06) !important;
    max-width: 900px !important;
    width: calc(100% - 48px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    /* margin-top controlled by Elementor "Space Before Search Card" control */
    padding: 32px 36px !important;
    box-sizing: border-box !important;
    animation: vl-hero-fade-up 0.8s ease-out 0.5s both !important;
}

.vl-wrapper .vl-hero-section__search-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--vl-hero-text-dark) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.elementor-widget-container .vl-wrapper .vl-hero-section__search-title,
.e-con .vl-wrapper .vl-hero-section__search-title {
    color: var(--vl-hero-text-dark) !important;
}

/* --- Search form --- */
.vl-wrapper .vl-hero-section__search-form {
    display: flex !important;
    align-items: flex-end !important;
    gap: 16px !important;
    width: 100% !important;
}

.vl-wrapper .vl-hero-section__search-field {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}

.vl-wrapper .vl-hero-section__search-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vl-wrapper .vl-hero-section__search-field input {
    width: 100% !important;
    height: 50px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    color: var(--vl-hero-text-dark) !important;
    background: var(--vl-hero-input-bg) !important;
    border: 1px solid var(--vl-hero-input-border) !important;
    border-radius: 10px !important;
    outline: none !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    box-sizing: border-box !important;
}

.vl-wrapper .vl-hero-section__search-field input::placeholder {
    color: #9ca3af !important;
}

.vl-wrapper .vl-hero-section__search-field input:focus {
    border-color: var(--vl-hero-btn-bg) !important;
    box-shadow: 0 0 0 3px rgba(108,92,231,0.15) !important;
}

.vl-wrapper .vl-hero-section__search-divider {
    width: 1px !important;
    height: 50px !important;
    background: #e5e7eb !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important;
}

/* --- Search button --- */
.vl-wrapper .vl-hero-section__search-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 50px !important;
    min-width: 150px !important;
    padding: 0 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #ffffff !important;
    background: var(--vl-hero-btn-bg) !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.vl-wrapper .vl-hero-section__search-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.vl-wrapper .vl-hero-section__search-btn:hover {
    background: var(--vl-hero-btn-bg-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(108,92,231,0.35) !important;
}

/* ---------------------------------------------------------------------
   6. AJAX Category Autocomplete Dropdown
   --------------------------------------------------------------------- */
.vl-wrapper .vl-hero-section__search-field--service,
.vl-wrapper .vl-hero-section__search-field--location {
    position: relative !important;
}

.vl-wrapper .vl-hero-search__dropdown,
.vl-wrapper .vl-hero-location__dropdown {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    margin-top: -2px !important;
}

.vl-wrapper .vl-hero-search__dropdown--open,
.vl-wrapper .vl-hero-location__dropdown--open {
    display: block !important;
}

.vl-wrapper .vl-hero-search__item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.vl-wrapper .vl-hero-search__item:last-child {
    border-bottom: none !important;
}

.vl-wrapper .vl-hero-search__item:hover {
    background: #f0f0ff !important;
}

.vl-wrapper .vl-hero-search__item-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a2e !important;
}

.vl-wrapper .vl-hero-search__item-parent {
    font-size: 12px !important;
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Grouped dropdown — parent categories + indented subcategories */
.vl-wrapper .vl-hero-search__group {
    border-bottom: 1px solid #f3f4f6 !important;
}
.vl-wrapper .vl-hero-search__group:last-child {
    border-bottom: none !important;
}

.vl-wrapper .vl-hero-search__item--parent {
    font-weight: 700 !important;
    background: #fafbfc !important;
    color: #1a1a2e !important;
}

.vl-wrapper .vl-hero-search__item--parent:hover {
    background: #f4f5f9 !important;
}

.vl-wrapper .vl-hero-search__item--child {
    padding-left: 28px !important;
    font-size: 13px !important;
    color: #636E72 !important;
    background: #ffffff !important;
}

.vl-wrapper .vl-hero-search__item-indent {
    color: #9ca3af !important;
    margin-right: 6px !important;
    font-size: 12px !important;
}

.vl-wrapper .vl-hero-search__item-count {
    margin-left: auto !important;
    font-size: 11px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    background: rgba(108, 92, 231, 0.08) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}

.vl-wrapper .vl-hero-search__no-results {
    padding: 16px !important;
    font-size: 14px !important;
    color: #9ca3af !important;
    text-align: center !important;
}

/* Scrollbar styling for dropdown */
.vl-wrapper .vl-hero-search__dropdown::-webkit-scrollbar {
    width: 6px;
}
.vl-wrapper .vl-hero-search__dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.vl-wrapper .vl-hero-search__dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

/* ---------------------------------------------------------------------
   7. Responsive — Tablet
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .vl-wrapper .vl-hero-section__content {
        padding: 64px 24px 32px !important;
    }

    .vl-wrapper .vl-hero-section__heading {
        font-size: 40px !important;
    }

    .vl-wrapper .vl-hero-section__subheading {
        font-size: 17px !important;
    }

    .vl-wrapper .vl-hero-section__search-card {
        max-width: 780px !important;
        padding: 28px 24px !important;
    }
}

/* ---------------------------------------------------------------------
   7. Responsive — Mobile
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .vl-wrapper .vl-hero-section {
        min-height: 400px;
    }

    .vl-wrapper .vl-hero-section--has-search {
        padding-bottom: 40px !important;
        margin-bottom: 40px !important;
    }

    .vl-wrapper .vl-hero-section__content {
        padding: 48px 16px 24px !important;
    }

    .vl-wrapper .vl-hero-section__eyebrow {
        font-size: 10px !important;
        padding: 5px 12px !important;
        margin-bottom: 16px !important;
    }

    .vl-wrapper .vl-hero-section__heading {
        font-size: 30px !important;
        margin-bottom: 14px !important;
    }

    .vl-wrapper .vl-hero-section__subheading {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }

    /* Search card — mobile: stacked, centered */
    .vl-wrapper .vl-hero-section__search-card {
        width: calc(100% - 24px) !important;
        padding: 24px 20px !important;
        text-align: center !important;
    }

    .vl-wrapper .vl-hero-section__search-title {
        font-size: 17px !important;
        margin-bottom: 16px !important;
        text-align: center !important;
    }

    .vl-wrapper .vl-hero-section__search-form {
        flex-direction: column !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .vl-wrapper .vl-hero-section__search-divider {
        display: none !important;
    }

    .vl-wrapper .vl-hero-section__search-field {
        width: 100% !important;
        text-align: left !important;
    }

    .vl-wrapper .vl-hero-section__search-field input {
        width: 100% !important;
    }

    .vl-wrapper .vl-hero-section__search-btn {
        width: 100% !important;
        min-width: unset !important;
        height: 50px !important;
    }

    .vl-wrapper .vl-hero-section__cta-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ---------------------------------------------------------------------
   8. Responsive — Small Mobile
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
    .vl-wrapper .vl-hero-section__content {
        padding: 36px 12px 20px !important;
    }

    .vl-wrapper .vl-hero-section__heading {
        font-size: 26px !important;
    }

    .vl-wrapper .vl-hero-section__search-card {
        padding: 20px 14px !important;
    }

    .vl-wrapper .vl-hero-section__search-field input {
        height: 46px !important;
        font-size: 14px !important;
    }

    .vl-wrapper .vl-hero-section__search-btn {
        height: 46px !important;
        font-size: 13px !important;
    }
}