/**
 * Meilisearch Fullscreen Search Styles
 *
 * @category    Zaca
 * @package     Zaca_Meili
 */

/* Fullscreen overlay with CSS reset */
.meili-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98);
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* Reset inherited styles */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    box-sizing: border-box;
}

.meili-overlay.active {
    display: flex;
}

/* Apply box-sizing to all children */
.meili-overlay *,
.meili-overlay *::before,
.meili-overlay *::after {
    box-sizing: border-box;
}

/* Reset common elements inside overlay */
.meili-overlay ul,
.meili-overlay li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.meili-overlay a {
    text-decoration: none;
    color: inherit;
}

.meili-overlay img {
    max-width: 100%;
    height: auto;
    border: none;
}

.meili-overlay button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

.meili-overlay h1,
.meili-overlay h2,
.meili-overlay h3,
.meili-overlay p {
    margin: 0;
    padding: 0;
}

/* Header with search input */
.meili-overlay .meili-header {
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    margin: 0 auto;
    width:100%
}

.meili-overlay .meili-logo {
    flex-shrink: 0;
}

.meili-overlay .meili-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.meili-overlay .meili-search-wrapper {
    flex: 1;
    /*max-width: 800px;*/
    display: flex;
    align-items: center;
    gap: 15px;
}
@media (min-width: 769px) {
    .meili-overlay .meili-search-wrapper {
        padding: 0px 12px;
    }
}

.meili-overlay .meili-search-input {
    flex: 1;
    padding: 15px 20px;
    font-size: 18px;
    border: 0px;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
    color: #333;
    font-family: inherit;
    line-height: 1.4;
    margin: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #f1f1f1;
    color: #575757;
    width: 100%;
    height: 40px;
    border-radius: 50px;
}

.meili-overlay .meili-search-input:focus {
    border-color: #333;
}

.meili-overlay .meili-close-btn {
    width: 50px;
    height: 50px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    color: #666;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meili-overlay .meili-close-btn:hover {
    background: #e0e0e0;
    color: #333;
}

/* Results container */
.meili-overlay .meili-results-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.meili-overlay .meili-results-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Results info */
.meili-overlay .meili-results-info {
    padding: 10px 0 20px;
    color: #666;
    font-size: 14px;
}

.meili-overlay .meili-results-info strong {
    color: #333;
}

/* Product grid */
.meili-overlay .meili-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.meili-overlay .meili-product-grid .meili-product-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Product card */
.meili-overlay .meili-product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
    width: 100%;
    max-width: 100%;
    text-align: left;
    display: block;
}

.meili-overlay .meili-product-card:hover {
    border-color: #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.meili-overlay .meili-product-card .meili-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Add to collection button */
.meili-overlay .meili-add-to-collection {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 4px;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.meili-overlay .meili-add-to-collection:hover {
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.meili-overlay .meili-add-to-collection img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.meili-overlay .meili-product-image {
    width: 100%;
    aspect-ratio: 1;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.meili-overlay .meili-product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.meili-overlay .meili-product-info {
    padding: 15px;
    background: #fff;
    text-align: left;
}

.meili-overlay .meili-product-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
    margin: 0 0 10px;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    text-transform: none;
    letter-spacing: normal;
    border: none;
    background: none;
}

.meili-overlay .meili-product-price {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin: 0 0 10px;
    padding: 0;
    text-align: left;
    line-height: 1.3;
}

/* Zaca_Box::css/club.css gives .meili-club-badge a 15px left margin sized for
   a different layout; here it just needs to line up flush-left under the
   price above it, like everything else in this card. */
.meili-overlay .meili-club-badge {
    margin-left: 0;
}

/* club.css sizes the badge for a single row (~145px). Carousel cards on a phone
   are 140px wide (118px of content), so the price broke onto two lines and the
   "?" ended up on, or outside, the border. Let the badge shrink to its card:
   icon and "?" keep their size, and the discount + price block drops to two
   lines only when one row doesn't fit. Wider cards are untouched. */
.meili-overlay .meili-product-card .meili-club-badge {
    max-width: 100%;
}

.meili-overlay .meili-product-card .meili-club-badge .club-badge-info {
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 0 4px;
    min-width: 0;
}

.meili-overlay .meili-product-card .meili-club-badge .club-discount,
.meili-overlay .meili-product-card .meili-club-badge .club-final-price {
    white-space: nowrap;
}

/* Original price (crossed out when special price exists) */
.meili-overlay .meili-price-original {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    font-size: 13px;
    margin-right: 6px;
}

/* Special price */
.meili-overlay .meili-price-special {
    color: #000;
    font-weight: 700;
}

/* Add to Cart button */
.meili-overlay .meili-add-to-cart {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background: #1979c3;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meili-overlay .meili-add-to-cart:hover {
    background: #006bb4;
}

.meili-overlay .meili-add-to-cart.loading {
    background: #999;
    cursor: wait;
}

.meili-overlay .meili-add-to-cart.success {
    background: #2ecc71;
}

.meili-overlay .meili-add-to-cart:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Preorder button: same color as the regular "Add to Cart".
   Differentiation is done via the clock icon (styled globally in the theme
   via .action--preorder), so we deliberately drop the orange override here. */

/* No results */
.meili-overlay .meili-no-results {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.meili-overlay .meili-no-results-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.meili-overlay .meili-no-results-text {
    font-size: 18px;
    margin: 0;
}

.meili-overlay .meili-no-results-hint {
    font-size: 14px;
    color: #999;
    margin-top: 10px;
}

/* Loading state */
.meili-overlay .meili-loading {
    text-align: center;
    padding: 40px;
}

.meili-overlay .meili-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #eee;
    border-top-color: #333;
    border-radius: 50%;
    animation: meili-spin 0.8s linear infinite;
    margin: 0 auto 15px;
}

@keyframes meili-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Initial state - prompt to search */
.meili-overlay .meili-initial-state {
    text-align: center;
    padding: 80px 20px;
    color: #666;
}

.meili-overlay .meili-initial-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.meili-overlay .meili-initial-text {
    font-size: 20px;
    margin: 0;
    color: #333;
}

.meili-overlay .meili-initial-hint {
    font-size: 14px;
    color: #999;
    margin-top: 10px;
}

/* Load more button */
.meili-overlay .meili-load-more {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 30px auto 0;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.meili-overlay .meili-load-more:hover {
    background: #e0e0e0;
}

/* Highlighted Products Carousel */
.meili-overlay .meili-highlighted {
    padding: 40px 0;
}

.meili-overlay .meili-highlighted-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 30px;
    text-align: center;
}

.meili-overlay .meili-highlighted .meili-initial-hint {
    text-align: center;
    margin-top: 30px;
}

.meili-overlay .meili-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.meili-overlay .meili-carousel-track {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.meili-overlay .meili-carousel-track::-webkit-scrollbar {
    display: none;
}

.meili-overlay .meili-carousel-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 10px 5px;
    width: max-content;
}

.meili-overlay .meili-carousel-list .meili-product-card {
    flex: 0 0 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    width: 200px !important;
}

.meili-overlay .meili-carousel-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.meili-overlay .meili-carousel-nav span {
    font-size: 28px;
    line-height: 1;
    color: #333;
}

.meili-overlay .meili-carousel-nav:hover:not(.disabled) {
    background: #e0e0e0;
}

.meili-overlay .meili-carousel-nav.disabled {
    opacity: 0.3;
    cursor: default;
}

/* Responsive */
@media (max-width: 768px) {
    .meili-overlay .meili-header {
        padding: 15px;
        gap: 12px;
    }

    .meili-overlay .meili-logo img {
        height: 30px;
    }

    .meili-overlay .meili-search-input {
        padding: 12px 15px;
        font-size: 16px;
    }

    .meili-overlay .meili-close-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .meili-overlay .meili-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .meili-overlay .meili-product-info {
        padding: 10px;
    }

    .meili-overlay .meili-product-name {
        font-size: 13px;
    }

    .meili-overlay .meili-product-price {
        font-size: 14px;
    }

    .meili-overlay .meili-price-original {
        font-size: 11px;
        display: block;
        margin-right: 0;
        margin-bottom: 2px;
    }

    .meili-overlay .meili-results-container {
        padding: 15px;
    }

    /* Carousel responsive */
    .meili-overlay .meili-highlighted {
        padding: 20px 0;
    }

    .meili-overlay .meili-highlighted-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .meili-overlay .meili-carousel-list {
        gap: 12px;
    }

    .meili-overlay .meili-carousel-list .meili-product-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        width: 160px !important;
    }

    .meili-overlay .meili-carousel-nav {
        width: 36px;
        height: 36px;
    }

    .meili-overlay .meili-carousel-nav span {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .meili-overlay .meili-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .meili-overlay .meili-carousel-list .meili-product-card {
        flex: 0 0 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        width: 140px !important;
    }

    .meili-overlay .meili-carousel-nav {
        width: 32px;
        height: 32px;
    }

    .meili-overlay .meili-carousel-nav span {
        font-size: 18px;
    }
}

/* Bot recommendation link */
.meili-bot-link-container {
    text-align: center;
    padding: 16px 0;
}

.meili-overlay a.meili-bot-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #1979c3;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 2px 8px #666;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.meili-overlay a.meili-bot-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px #666;
}

/* Dark overlay behind fullscreen for better focus */
body.meili-search-open {
    overflow: hidden;
}