/*PCB-2260 - Global Search Box */
.searchBoxInput-host .search-bar {
    position: relative;
    overflow: visible !important;
}

/* hide common search term*/
.searchBoxInput-host [data-automation="searchSuggestionItem"][title="commonsearchterm"] {
    display: none !important;
}

.searchBoxInput-host .search-suggestions.force-hide {
    display: none !important;
}

.searchBoxInput-host {
    --dxp-s-form-element-color-border-focus: #007735 !important;
    --slds-g-color-error-base-40: #007735 !important;
    --slds-c-input-color-border-focus: #007735 !important;
    --sds-c-input-color-border-focus: #007735 !important;
}

/* Suggestion Icons */

/* Arrow head using existing SVG */
.searchBoxInput-host:has(input:placeholder-shown)
commerce-search-suggestions .result-item-start svg.suggestions-result-start {
    display: block !important;
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    border-top: 3.5px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 6px solid #6f6f6f;
    left: -7px;
    top: 11px;
    overflow: visible;
    transform: rotate(-45deg);
}

/* Hide original search SVG content */
.searchBoxInput-host:has(input:placeholder-shown)
commerce-search-suggestions .result-item-start svg.suggestions-result-start use {
    display: none !important;
}

/* Icon container */
.searchBoxInput-host:has(input:placeholder-shown)
commerce-search-suggestions .result-item-start {
    width: 32px;
    min-width: 32px;
    height: 32px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none !important;
}

/* Search suggestion full result text */
commerce-search-suggestions [data-automation="searchSuggestionItem"] .result {
    color: #121212;
    margin-left: 0 !important;
}

/* Non-matching / remaining part should be light */
commerce-search-suggestions [data-automation="searchSuggestionItem"] .result .match-highlight {
    color: #121212 !important;
    font-weight: 400 !important;
}

/* Matching searched input text should be dark */
commerce-search-suggestions [data-automation="searchSuggestionItem"] .result span:not(.match-highlight) {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* ============================= */
/* Suggestion row hover */
/* ============================= */

commerce-search-suggestions [data-automation="searchSuggestionItem"] {
    display: flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    cursor: pointer;
    padding: 10px 10px 10px 10px !important;
    box-sizing: border-box;
}

/* Hover and keyboard focus */
commerce-search-suggestions [data-automation="searchSuggestionItem"]:hover,
commerce-search-suggestions [data-automation="searchSuggestionItem"]:focus,
commerce-search-suggestions [data-automation="searchSuggestionItem"]:focus-visible {
    background-color: #F1FFF7 !important;
}

/* =================================== */
/* Recent Search & Suggestions Section */
/* =================================== */

/* Position search icon consistently */
commerce-search-suggestions [data-automation="searchSuggestionItem"] .result-item-start {
    width: 24px !important;
    min-width: 24px !important;
    margin-right: 16px !important;
    margin-left: -5px !important;
}

/* Remove space after Suggestions title */
commerce-search-suggestions .results-title {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove top padding from suggestions container */
commerce-search-suggestions .search-suggestions-container.suggestions {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Suggestion header alignment*/
commerce-search-suggestions .suggestions-header{
    padding-left : 9px !important;
    margin-left: 0 !important;
    font-family: 'Poetsen One';
    font-size: large;
    color: #000000 !important;
}

/* Recent Search Clock Icon */

commerce-search-suggestions [data-automation="searchSuggestionsResultEnd"] {
    display: none !important;
    visibility: hidden !important;
}

/* Remove empty right-side container space */
commerce-search-suggestions [data-automation="searchSuggestionItem"] .result-item-end {
    display: none !important;
}

/* Remove last line: "Afficher tous les résultats..." */
commerce-search-suggestions [data-automation="searchSuggestionsAllResults"],
commerce-search-suggestions .category-end {
    display: none !important;
    visibility: hidden !important;
}

commerce-search-suggestions .suggestions-result-start{
    fill: #6f6f6f !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
}

/* Clock circle with left gap */
.searchBoxInput-host:has(input:placeholder-shown)
commerce-search-suggestions
.result-item-start::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 2px solid #6f6f6f;
    border-left-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    left: 6px;
    top: 4px;
    transform: rotate(10deg);
}

/* Clock hands */
.searchBoxInput-host:has(input:placeholder-shown)
commerce-search-suggestions
.result-item-start::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-left: 2px solid #6f6f6f;
    border-bottom: 2px solid #6f6f6f;
    left: 12px;
    top: 10px;   
    transform: rotate(270deg);
    box-sizing: border-box;
}

/* Input text alignment */
.searchBoxInput-host input[data-automation="searchInput"] {
    min-height: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 16px !important;
    line-height: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
}

/* Search icon adjustments */
.searchBoxInput-host .search-input-container > svg.slds-input__icon { 
    margin-right: 12px !important;
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    margin-top: 1px !important;
    margin-left: 10px !important;
}

 /** Search Input Focus **/
.searchBoxInput-host .search-input-container.slds-input:focus-within {
    border: 2px solid #007735 !important;
    box-shadow: none !important;
    outline: none !important;
}

.searchBoxInput-host .search-input-container:focus-within > svg.slds-input__icon {
    fill: #007735 !important;
}

.searchBoxInput-host input[data-automation="searchInput"]::placeholder {
    font-weight: 300 !important;
}

/* Replace Effacer with clickable X icon */
.searchBoxInput-host button[data-automation="clearButton"] {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;

    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    overflow: visible !important;

    z-index: 20 !important;
    pointer-events: auto !important;
}

/* X icon lines */
.searchBoxInput-host button[data-automation="clearButton"]::before,
.searchBoxInput-host button[data-automation="clearButton"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 2px;
    background: #454545;
    border-radius: 4px;
    transform-origin: center;

    /* Important: pseudo lines should not block button click */
    pointer-events: none !important;
}

.searchBoxInput-host button[data-automation="clearButton"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.searchBoxInput-host button[data-automation="clearButton"]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.searchBoxInput-host .mobile-search-panel-close {
    display: none !important;
}

/* Give input text space before the X icon */
.searchBoxInput-host.is-mobile-search-open input[data-automation="searchInput"] {
    padding-right: 48px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Keep clear X inside input on the right */
.searchBoxInput-host.is-mobile-search-open button[data-automation="clearButton"] {
    right: 10px !important;
    z-index: 20 !important;
}

/* Desktop only - custom suggestion dropdown */
@media only screen and (min-width: 48em) {
    .searchBoxInput-host .search-suggestions {
        position: absolute !important;
        top: 120% !important;
        z-index: 9999;
        background: #fff !important;
        box-shadow: 0 6px 26px rgba(0,0,0,0.16);
        border-radius: 8px;
        max-width: 640px;
        left: 50% !important;
        transform: translateX(-50%);
        width: 100%;
    }
}

/* Search Panel - Mobile */

@media only screen and (max-width: 47.9375em) {

    .search .searchBoxInput-host {
        --show-icon: none !important;
        --show-input: flex !important;
    }
    
    .searchBoxInput-host .search-icon{
         display:none;
    }
    
    /* Resolved iPhone zoomin behaviour*/
    .searchBoxInput-host input,
    .searchBoxInput-host .slds-input,
    .searchBoxInput-host .search-input-container,
    .searchBoxInput-host .search-input-container input {
        font-size: 16px !important;
    }

    /* Prevent background/page scroll when mobile search panel is open */
    html.mobile-search-panel-open,
    body.mobile-search-panel-open {
        overflow: hidden !important;
        height: 100% !important;
        touch-action: none;
    }

    /* Mobile search panel */
    .searchBoxInput-host.is-mobile-search-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
        background: #ffffff !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    /* Hide scrollbar inside panel */
    .searchBoxInput-host.is-mobile-search-open {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .searchBoxInput-host.is-mobile-search-open::-webkit-scrollbar {
        display: none;
    }

    /* Leave space on right side for Annuler */
    .searchBoxInput-host.is-mobile-search-open .search-bar {
        width: calc(100% - 70px) !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Suggestions inside panel */
    .searchBoxInput-host.is-mobile-search-open .search-suggestions {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        padding: 10px 0 0 0 !important;
    }

    /* Hide panel close button by default */
    .searchBoxInput-host .mobile-search-panel-close {
        display: none;
    }

    /* Show Annuler button only when panel is open */
    .searchBoxInput-host.is-mobile-search-open .mobile-search-panel-close {
        display: block !important;
        position: absolute !important;
        top: 18px !important;
        right: 16px !important;

        width: 76px !important;
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;

        color: #2b0015 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        font-family: inherit !important;
        text-align: right !important;

        cursor: pointer !important;
        z-index: 100000 !important;
    }
}