/**
 * Microsite APS picker modal (#modal-overlay / #modal-list) and recents accent theming.
 * Accent = --ms-button when set (Lime T05), else --ms-primary (Harbor/Beacon/Forge).
 */

#modal-list,
.listing-recents,
.recent-search-row {
    --aps-picker-accent: var(--ms-button, var(--ms-primary, var(--aps-teal, #14b8a6)));
}

/* Base picker rows (all storefronts; microsite overrides below) */
#modal-list button.aps-picker-modal-row {
    background-color: #fff;
}

#modal-list button.aps-picker-modal-row--selected {
    background-color: color-mix(in srgb, var(--aps-picker-accent) 14%, #ffffff);
}

#modal-list button.aps-picker-modal-row:hover,
#modal-list button.aps-picker-modal-row:focus-visible {
    background-color: color-mix(in srgb, var(--aps-picker-accent) 8%, #ffffff);
    outline: none;
}

#modal-list .aps-picker-modal-check {
    color: var(--aps-picker-accent);
}

/* Legacy YMM modal header — center search icon in accent square */
body[class*="ms-"] #modal-overlay .w-10.h-10.bg-teal-500,
body[class*="ms-"] #modal-overlay .bg-teal-500.rounded-xl {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    padding: 0 !important;
    line-height: 1 !important;
}

body[class*="ms-"] #modal-overlay .bg-teal-500 .fa-search {
    font-size: 0.875rem !important;
    line-height: 1 !important;
    width: 1em;
    height: 1em;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Part-type / YMM list rows (JS: .aps-picker-modal-row) */
body[class*="ms-"] #modal-list button.aps-picker-modal-row {
    background-color: #fff !important;
    background-image: none !important;
}

body[class*="ms-"] #modal-list button.aps-picker-modal-row--selected {
    background-color: color-mix(in srgb, var(--aps-picker-accent) 14%, #ffffff) !important;
}

body[class*="ms-"] #modal-list button.aps-picker-modal-row:hover,
body[class*="ms-"] #modal-list button.aps-picker-modal-row:focus-visible {
    background-color: color-mix(in srgb, var(--aps-picker-accent) 8%, #ffffff) !important;
    outline: none;
}

body[class*="ms-"] #modal-list button.aps-picker-modal-row--selected:hover,
body[class*="ms-"] #modal-list button.aps-picker-modal-row--selected:focus-visible {
    background-color: color-mix(in srgb, var(--aps-picker-accent) 18%, #ffffff) !important;
}

body[class*="ms-"] #modal-list button.aps-picker-modal-row:hover .group-hover\:text-teal-700,
body[class*="ms-"] #modal-list button.aps-picker-modal-row:focus-visible .group-hover\:text-teal-700 {
    color: var(--ms-ink, #374151) !important;
}

body[class*="ms-"] #modal-list .aps-picker-modal-check,
body[class*="ms-"] #modal-list .fa-check-circle.aps-picker-modal-check {
    color: var(--aps-picker-accent) !important;
}

body[class*="ms-"] #modal-list .text-teal-600 {
    color: var(--aps-picker-accent) !important;
}

body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) #modal-list mark,
body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) #modal-list .bg-teal-200 {
    background: color-mix(in srgb, var(--aps-picker-accent) 22%, #ffffff) !important;
    color: inherit;
}

/* Listing recents bar */
body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents {
    color: var(--aps-picker-accent);
}

body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-searches-label,
body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-search-item,
body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-search-item a {
    color: var(--aps-picker-accent) !important;
}

body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-searches-label__icon {
    color: var(--aps-picker-accent);
    stroke: currentColor;
}

body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-search-item::before {
    color: var(--aps-picker-accent);
}

body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-search-item:hover,
body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-search-item:hover a,
body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .listing-recents .last-search-item:hover::before {
    color: color-mix(in srgb, var(--aps-picker-accent) 78%, #000) !important;
}

/* Template 05 Lime — recents are black (not neon accent) */
body.ms-lime .listing-recents,
body.ms-lime-listing .listing-recents,
body.ms-lime .listing-recents .last-searches-label,
body.ms-lime-listing .listing-recents .last-searches-label,
body.ms-lime .listing-recents .last-searches-label__icon,
body.ms-lime-listing .listing-recents .last-searches-label__icon,
body.ms-lime .listing-recents .last-search-item,
body.ms-lime-listing .listing-recents .last-search-item,
body.ms-lime .listing-recents .last-search-item a,
body.ms-lime-listing .listing-recents .last-search-item a,
body.ms-lime .listing-recents .last-search-item::before,
body.ms-lime-listing .listing-recents .last-search-item::before,
body.ms-lime .listing-recents .last-search-item i,
body.ms-lime-listing .listing-recents .last-search-item i,
body.ms-lime .listing-recents svg,
body.ms-lime-listing .listing-recents svg {
    color: #0A0A0A !important;
    -webkit-text-fill-color: #0A0A0A !important;
    stroke: currentColor !important;
    fill: none;
}

body.ms-lime .listing-recents .remove-search-btn-horizontal,
body.ms-lime-listing .listing-recents .remove-search-btn-horizontal,
body.ms-lime .listing-recents .remove-search-btn-horizontal i,
body.ms-lime-listing .listing-recents .remove-search-btn-horizontal i {
    color: #e05a5a !important;
    -webkit-text-fill-color: #e05a5a !important;
}

/* Homepage recent searches */
.recent-search-row__icon {
    color: var(--aps-picker-accent, var(--aps-teal, #00FFB5));
    flex-shrink: 0;
    text-align: center;
}

body[class*="ms-"]:not(.ms-lime):not(.ms-lime-listing) .recent-search-row__icon {
    color: var(--aps-picker-accent) !important;
}

body.ms-lime .recent-search-row__icon,
body.ms-lime .recent-search-row,
body.ms-lime .recent-search-row a,
body.ms-lime #recent-searches-section h4 {
    color: #0A0A0A !important;
    -webkit-text-fill-color: #0A0A0A !important;
}

.recent-search-row--mobile-drawer .recent-search-row__icon {
    color: var(--aps-picker-accent, #00a88a);
}

body.ms-lime .recent-search-row--mobile-drawer .recent-search-row__icon {
    color: #0A0A0A !important;
}

/* Template 05 — modal match highlight (beat Tailwind bg-teal-200) */
html body.ms-lime #modal-list mark,
html body.ms-lime #modal-list mark.bg-teal-200,
html body.ms-lime #modal-list mark.text-teal-900,
html body.ms-lime-listing #modal-list mark,
html body.ms-lime-listing #modal-list mark.bg-teal-200,
html body.ms-lime-listing #modal-list mark.text-teal-900 {
    background-color: #E5E7EB !important;
    background-image: none !important;
    color: #0A0A0A !important;
    -webkit-text-fill-color: #0A0A0A !important;
}

/* Template 05 — in-field modal search icon (no distorted FA box) */
html body.ms-lime #modal-overlay .relative > i.fa-search,
html body.ms-lime #modal-overlay .relative > i.fas.fa-search,
html body.ms-lime-listing #modal-overlay .relative > i.fa-search,
html body.ms-lime-listing #modal-overlay .relative > i.fas.fa-search {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: block !important;
    color: #9CA3AF !important;
    -webkit-text-fill-color: #9CA3AF !important;
    pointer-events: none !important;
}