/* Custom Constructor.io autocomplete overrides for GameStop */
/* Autocomplete Results Container */
.cio-form {
    margin-bottom: 0;
}

[id^="cio-autocomplete-"][id$="-input"] {
    height: 40px;
    
    &:focus::placeholder {
        color: transparent;
    }

    &:focus-visible {
        outline: 0 none;
    }
}

.cio-autocomplete .cio-clear-btn {
    right: 0;
    font-size: 1.25rem;
    border: 0 none;
}

.cio-submit-btn {
    display: none;
}

.cio-autocomplete .cio-close {
    top: 15px;
}

.cio-autocomplete .cio-results {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    border: 0 none;
    margin-top: 0;
    padding: 16px 16px 36px 16px !important;
    background-color: #f7f7f7;
    max-width: 100vw;
    flex-direction: column;
    &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.80);
        z-index: 999;
    }
}

/* Tablet and up */
@media screen and (min-width: 947px) {
    .cio-autocomplete .cio-results {
        top: 107px;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        justify-content: center;
        column-gap: 32px;
    }

    .cio-section-search-suggestions {
        border-right: 1px solid rgba(0, 0, 0, 0.07);
        padding-right: 32px;
    }
}

/* Tablet and up */
@media screen and (min-width: 1024px) {
    .cio-autocomplete .cio-results {
        top: 76px;
    }
}

/* Large desktop */
@media screen and (min-width: 1281px) {
    .cio-autocomplete .cio-results {
        top: 76px;
    }
}

/* Section Headers */
.cio-section-name {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 16px; /* 133.333% */
    letter-spacing: -0.36px;
    color: #5f5f5f;
    margin: 0 0 8px !important;
}

/* Search Suggestions Section */
.cio-autocomplete .search-suggestions .cio-section-items {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
}

@media screen and (min-width: 947px) {
    .cio-autocomplete .search-suggestions .cio-section-items {
        border-bottom: 0 none;
        min-width: 250px;
        max-width: 250px;
    }
}

.cio-autocomplete .search-suggestions .cio-item {
    background-color: transparent;
    padding: 0;
    border-bottom: 0 none;
    cursor: pointer;
    color: #5f5f5f;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    letter-spacing: -0.24px;
    text-transform: capitalize;
    border-bottom: 0 none;
}

.cio-autocomplete .search-suggestions .cio-item p { 
    margin: 0;
    font-weight: 700;
}

.cio-autocomplete .search-suggestions .cio-item p b {
    font-weight: normal !important;
}

.cio-section-search-suggestions.Search.Suggestions .cio-section-name {
    display: none;
}

.cio-section-search-suggestions.Search.Suggestions.search-suggestions {
    display: block !important;
}

.cio-section-search-suggestions.trending-searches .cio-section-items {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 230px;
    gap: 4px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scrollbar-width: thin;
    height: auto;
}

@media screen and (min-width: 947px) {
    .cio-section-search-suggestions.trending-searches .cio-section-items {
        display: flex;
        flex-direction: column;
        gap: 4.5px;
        max-width: calc(100vw - 32px);
    }
}

.cio-section-search-suggestions.trending-searches .cio-section-items > div {
    width: 230px;
    min-width: 230px;
    box-sizing: border-box;
}

.cio-autocomplete .Recent.Searches {
    max-width: calc(100vw - 32px);
}

/* Recent Searches Section */
@media screen and (min-width: 947px) {
    .cio-autocomplete .Recent.Searches {
        grid-column: 1 / span 2;
    }
}

.cio-autocomplete .Recent.Searches .cio-section-items {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-y: auto;
    padding: 0 0 8px 0;
}

.cio-autocomplete .Recent.Searches .cio-item {
    padding: 0;
    border-bottom: 0 none;
    flex: unset;
}

.cio-autocomplete .Recent.Searches .cio-recent-search-item {
    gap: 8px;
    flex-wrap: nowrap;
    padding: 8px 12px;
    width: 230px;
    flex: 1;
    background: #ffffff;
    border-radius: 8px;
    cursor: pointer;
}

/* Override base autocomplete aria-selected styling for recent searches */
.cio-autocomplete .Recent.Searches .cio-item[aria-selected='true'] {
    background-color: #ffffff;
    border-radius: 8px;
}

/* Hide "Recent Searches" section header when there are no items */
.cio-autocomplete .Recent.Searches:not(:has(.cio-item)) .cio-section-name {
    display: none;
}

/* Alternative fallback for browsers that don't support :has() */
.cio-autocomplete .Recent.Searches.cio-section-empty .cio-section-name {
    display: none;
}

.cio-autocomplete .Recent.Searches .cio-recent-search-term {
    flex: 1;
    overflow: hidden;
    color: #000 !important;
    text-overflow: ellipsis;
    font-family: "Open Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.36px;
    white-space: nowrap;
}

/* Product Results Section */
.cio-autocomplete .products {
    padding: 0;
    max-width: calc(100vw - 32px);
}

@media screen and (min-width: 947px) {
    .cio-autocomplete .products {
        max-width: 925px;
    }
}

.cio-autocomplete .products .cio-section-items {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-y: auto;
}

@media screen and (min-width: 947px) {
    .cio-autocomplete .products .cio-section-items {
        flex-wrap: wrap;
        gap: 8px;
        overflow-y: unset;
    }
}

.cio-autocomplete .products .cio-item {
    display: flex;
    align-items: center;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    min-width: 303px;
    border-radius: 8px;
}

.cio-autocomplete .products .cio-item > div {
    background: #ffffff;
    padding: 16px;
}

.cio-autocomplete .products .cio-item > a {
    gap: 8px;
}

.cio-autocomplete .products .cio-item .cio-product-name {
    font-weight: 600 !important;
    line-height: 22px;
    letter-spacing: -0.21px;
    text-transform: capitalize;
    color: #5f5f5f;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 88px;
    font-size: 16px !important;
    font-family: 'Open Sans', sans-serif;
}

.cio-autocomplete .products .cio-item:last-child {
    border-bottom: none;
}

/* Product Images */
.cio-autocomplete .products .cio-product-image {
    width: 121.065px;
    flex-shrink: 0;
    align-self: stretch;
    aspect-ratio: 121.07/116.00;
}

/* Product Info */
.cio-autocomplete .products .cio-product-info {
    flex: 1;
}

.cio-autocomplete .products .cio-product-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 1.3;
}

.cio-autocomplete .products .cio-product-price {
    color: #404040;
    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.3px;
}

/* Highlighted search terms */
.cio-autocomplete .cio-highlight {
    background-color: #fff3cd;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: bold;
}

/* Loading state */
.cio-autocomplete .cio-loading {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

/* No results state */
.cio-autocomplete .cio-no-results {
    text-align: center;
    padding: 20px;
    color: #666;
}

/* Recent Searches Section */
.cio-section-recent-searches {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.cio-section-search-suggestions.trending-searches .cio-item .cio-item {
    border-radius: 8px;
    background: white;
    padding: 8px;
}

/* Recent Searches Icons */
.cio-recent-search-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M16.5 9C16.5008 10.808 15.8485 12.5554 14.6632 13.9206C13.4778 15.2858 11.8392 16.1768 10.049 16.4297C8.25879 16.6825 6.4375 16.2802 4.92039 15.2968C3.40328 14.3133 2.29249 12.815 1.7925 11.0775C1.75934 10.9812 1.74614 10.8792 1.75368 10.7777C1.76123 10.6761 1.78937 10.5772 1.83639 10.4869C1.88342 10.3966 1.94834 10.3168 2.0272 10.2524C2.10605 10.188 2.1972 10.1403 2.29508 10.1123C2.39296 10.0842 2.49553 10.0764 2.59653 10.0893C2.69753 10.1022 2.79485 10.1355 2.88256 10.1872C2.97026 10.2389 3.04652 10.308 3.10669 10.3901C3.16685 10.4722 3.20966 10.5658 3.2325 10.665C3.60598 11.9769 4.4153 13.1223 5.52704 13.9125C6.63879 14.7028 7.98661 15.0906 9.34833 15.0121C10.71 14.9337 12.0044 14.3936 13.018 13.4809C14.0316 12.5682 14.704 11.3374 14.9244 9.99133C15.1447 8.64526 14.8998 7.26429 14.2301 6.07605C13.5604 4.88781 12.5058 3.96322 11.2402 3.45469C9.97454 2.94615 8.5734 2.88403 7.26772 3.27855C5.96205 3.67307 4.82976 4.5007 4.0575 5.625H6V7.125H1.5V2.625H3V4.5C3.94447 3.24071 5.26123 2.3105 6.76374 1.84115C8.26626 1.3718 9.87837 1.3871 11.3717 1.88488C12.865 2.38266 14.1639 3.33768 15.0843 4.61467C16.0047 5.89166 16.5 7.42588 16.5 9ZM8.25 5.25V9.3075L11.1225 12.18L12.18 11.1225L9.75 8.6925V5.25H8.25Z' fill='%23808080'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.cio-trending-search-term {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-overflow: ellipsis;
    line-height: 16px;
    letter-spacing: -0.36px;
    color: #000000;
}

.cio-trending-search-term {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-overflow: ellipsis;
    line-height: 16px;
    letter-spacing: -0.36px;
    color: #000000;
}

/* Trending Searches Icons */
.cio-trending-search-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M8.5 3V4H9.3L6.5 6.8L4.85 5.15C4.65 4.95 4.35 4.95 4.15 5.15L1.15 8.15C0.95 8.35 0.95 8.65 1.15 8.85C1.25 8.95 1.35 9 1.5 9C1.65 9 1.75 8.95 1.85 8.85L4.5 6.2L6.15 7.85C6.35 8.05 6.65 8.05 6.85 7.85L10 4.7V5.5H11V3H8.5Z' fill='%23C3C3C3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.cio-recent-search-clear-icon {
    width: 18px;
    height: 18px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M10.0618 9.00307L14.0368 5.03557C14.1781 4.89434 14.2574 4.7028 14.2574 4.50307C14.2574 4.30334 14.1781 4.1118 14.0368 3.97057C13.8956 3.82934 13.7041 3.75 13.5043 3.75C13.3046 3.75 13.1131 3.82934 12.9718 3.97057L9.00435 7.94557L5.03685 3.97057C4.89562 3.82934 4.70407 3.75 4.50435 3.75C4.30462 3.75 4.11308 3.82934 3.97185 3.97057C3.83062 4.1118 3.75128 4.30334 3.75128 4.50307C3.75128 4.7028 3.83062 4.89434 3.97185 5.03557L7.94685 9.00307L3.97185 12.9706C3.90155 13.0403 3.84576 13.1232 3.80768 13.2146C3.7696 13.306 3.75 13.4041 3.75 13.5031C3.75 13.6021 3.7696 13.7001 3.80768 13.7915C3.84576 13.8829 3.90155 13.9658 3.97185 14.0356C4.04157 14.1059 4.12452 14.1617 4.21592 14.1997C4.30731 14.2378 4.40534 14.2574 4.50435 14.2574C4.60336 14.2574 4.70139 14.2378 4.79278 14.1997C4.88418 14.1617 4.96713 14.1059 5.03685 14.0356L9.00435 10.0606L12.9718 14.0356C13.0416 14.1059 13.1245 14.1617 13.2159 14.1997C13.3073 14.2378 13.4053 14.2574 13.5043 14.2574C13.6034 14.2574 13.7014 14.2378 13.7928 14.1997C13.8842 14.1617 13.9671 14.1059 14.0368 14.0356C14.1071 13.9658 14.1629 13.8829 14.201 13.7915C14.2391 13.7001 14.2587 13.6021 14.2587 13.5031C14.2587 13.4041 14.2391 13.306 14.201 13.2146C14.1629 13.1232 14.1071 13.0403 14.0368 12.9706L10.0618 9.00307Z' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.cio-recent-search-clear-icon:hover {
    opacity: 1;
}

.darkmode .main-header-container > header > nav .menubar-wrapper span.cio-trending-search-term {
    color: #000 !important;
}

/* Reset .suggestions styles bleeding onto Constructor's .cio-section via 'Suggestions' class */
.cio-autocomplete .cio-section {
  position: static !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: none !important;
  display: block !important;
}