/* ==========================================================================
   VIVAIA Product Search - Frontend Styles
   ========================================================================== */

/* Placeholder fade transition */
input[data-vvps-rotating="true"]::placeholder {
    opacity: 1;
    transition: opacity 0.3s ease;
}

input[data-vvps-rotating="true"].vvps-placeholder-fade::placeholder {
    opacity: 0;
}

/* Container */
.vvps-search-container {
    position: relative;
    width: 100%;
}

/* Desktop search bar */
div.search-wrapper.vvps-search-desktop {
    width: 100%;
    max-width: 220px;
}

.vvps-search-desktop .form-control {
    width: 100%;
}

/* Mobile search elements */
.vvps-search-mobile {
    position: relative;
}

.vvps-mobile-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent !important;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 27px;
    color: #222 !important;
    line-height: 1;
}

.vvps-mobile-trigger:hover {
    opacity: 0.7;
}

/* Mobile full-screen search overlay */
.vvps-mobile-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100001;             /* Above .vvmm-toggle (100000) and .mobile-menu-wrapper (10000) */
    background: #fff;
    box-sizing: border-box;
    flex-direction: column;
    overflow: hidden;
}

.vvps-mobile-bar.vvps-mobile-bar-open {
    display: flex;
}

/* Top row: form takes full width, close button absolute top-right */
.vvps-mobile-bar > .input-wrapper {
    position: relative;              /* Needed for .btn-search absolute positioning */
    display: flex;
    align-items: center;
    padding: 12px 15px;
    padding-right: 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
    gap: 8px;
}

.vvps-mobile-bar .form-control {
    font-size: 16px !important;  /* Prevents iOS auto-zoom (requires >= 16px) */
}

/* Compensate for lost .search-wrapper.hs-simple .btn-search theme rule */
.vvps-mobile-bar .btn-search {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 43px;
    height: 100%;
    background: transparent;
    border: none;
    color: #333;
}

/* Close button: flex-ordered above the input row */
.vvps-mobile-close {
    order: -1;                   /* Move before the form in flex layout */
    align-self: flex-end;        /* Right-align the button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 22px;
    color: #666;
    line-height: 1;
    flex-shrink: 0;
}

.vvps-mobile-close:hover {
    color: #333;
}

/* Override theme .live-search-list (position: absolute; top: 100%; z-index: 1040 from _header.scss:112-121) */
.vvps-mobile-bar > .live-search-list {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0;
    box-shadow: none;
    z-index: auto;
}

/* Override theme .autocomplete-suggestions max-height: 272px (_header.scss:124) */
.vvps-mobile-bar .autocomplete-suggestions {
    max-height: none;
}

/* Body scroll lock when mobile search is open */
body.vvps-search-active {
    overflow: hidden;
}

/* Responsive: Desktop >= 992px, Mobile < 992px (matching Riode breakpoints) */
@media (min-width: 992px) {
    .vvps-search-desktop {
        display: block;
    }
    .vvps-search-mobile {
        display: none;
    }
}

@media (max-width: 991px) {
    .vvps-search-desktop {
        display: none;
    }
    .vvps-search-mobile {
        display: block;
    }
}