/*
 * BR-22 / BR-8 - BioLegend site styles (single stylesheet, loaded from the Experience Builder Head Markup).
 * Base rules carried over from the Revvity Head Markup, kept in the SAME ORDER so the cascade is unchanged.
 * Load order in Head Markup: SLDS/dxp links -> theme2.css -> styles.css -> bl-styles.css
 * BioLegend-only opt-in (class="bl-field") combobox rules are at the end of this file.
 */

/* ===== Fonts (paths relative to /css/ inside ECOM_BL_Static_Resource) ===== */
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../HankenGroteskFonts/HankenGrotesk-Light.woff2') format('woff2'),
         url('../HankenGroteskFonts/HankenGrotesk-Light.woff') format('woff');
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../HankenGroteskFonts/HankenGrotesk-Regular.woff2') format('woff2'),
         url('../HankenGroteskFonts/HankenGrotesk-Regular.woff') format('woff');
    font-style: normal;
    font-weight: 400;
}
/* BR-8 - real 500/600/700 faces so headings/buttons are not synthetic-bold */
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../HankenGroteskFonts/HankenGrotesk-Medium.woff2') format('woff2'),
         url('../HankenGroteskFonts/HankenGrotesk-Medium.woff') format('woff');
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../HankenGroteskFonts/HankenGrotesk-SemiBold.woff2') format('woff2'),
         url('../HankenGroteskFonts/HankenGrotesk-SemiBold.woff') format('woff');
    font-style: normal;
    font-weight: 600;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('../HankenGroteskFonts/HankenGrotesk-Bold.woff2') format('woff2'),
         url('../HankenGroteskFonts/HankenGrotesk-Bold.woff') format('woff');
    font-style: normal;
    font-weight: 700;
}

body,
html,
.siteforceStarterBody,
.communityApp {
    font-family: 'Hanken Grotesk' !important;
}

:root {
    --dxp-g-root-font-family: 'Hanken Grotesk', Salesforce Sans;
    --dxp-s-body-font-family: 'Hanken Grotesk', Salesforce Sans;
    --dxp-g-heading-font-family: 'Hanken Grotesk', Salesforce Sans;
    --slds-c-input-shadow: none;
}

/* ===== Inputs ===== */
.slds-input {
    height: 56px !important;
    color: #000000 !important;
    border: 1px solid #E3E3E3 !important;
}
.slds-input:focus,
.slds-input:hover,
.slds-input:active {
    border-color: #7F03B0 !important;
    box-shadow: none;
}

svg.slds-button__icon.slds-button__icon_large {
    fill: black;
}

.slds-radio {
    width: 20px;
    height: 20px;
    border-color: #7F03B0;
}
input[type=checkbox], input[type=radio] {
    height: 17px;
    width: 20px;
}
input[type=checkbox] {
    width: 20px;
    height: 20px;
}

.slds-file-selector__dropzone {
    padding: 0.125rem;
    border: none;
    border-radius: 0.25rem;
}

.slds-form-element__help, .slds-form-element__helper {
    line-height: 20px;
    font-size: 14px;
}

.component-wrapper-spacer {
    margin-bottom: 0px !important;
}

.slds-combobox__input.slds-has-focus, .slds-combobox__input:focus {
    border-color: #7F03B0 !important;
    box-shadow: none;
}

.slds-input.slds-input_counter {
    border-color: #E3E3E3;
}
.slds-input.slds-input_counter:hover {
    border-color: #000000;
}

.slds-listbox__option .slds-truncate {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
}

span.slds-file-selector__button.slds-button.slds-button_neutral {
    color: #7F03B0;
    background-color: white;
    border-radius: 40px;
    border: 2px solid #7F03B0;
    font-family: Hanken Grotesk;
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
    height: 48px;
}
span.slds-file-selector__button.slds-button.slds-button_neutral:hover {
    color: #ffffff;
    background-color: #7F03B0;
}

/* ===== Lightning Web Components (LWC) - BR-8 ===== */
lightning-input,
lightning-combobox,
lightning-textarea,
lightning-lookup-address {
    color: #000000;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    --lwc-fontSizeMedium: 18px;
    --lwc-fontSize3: 18px;
    --lwc-fontWeightRegular: 500;
    --lwc-colorTextDefault: #000000;
    --slds-c-input-text-color: #000000;
    --slds-c-input-text-color-placeholder: #525252;
    --slds-c-input-font-size: 18px;
    --slds-c-input-color-border: #E3E3E3;
    --slds-c-input-color-border-focus: #7F03B0;
    --slds-c-input-radius-border: 4px;
    --slds-c-input-spacing-vertical: 16px;
    --slds-c-input-spacing-horizontal-start: 16px;
    --slds-c-input-spacing-horizontal-end: 16px;
    --slds-c-input-shadow: none;
    --slds-c-combobox-color-border: #E3E3E3;
    --slds-c-combobox-color-border-focus: #7F03B0;
    --slds-c-combobox-radius-border: 4px;
    --slds-c-combobox-shadow: none;
    --slds-c-input-text-color-focus: #000000;
}

/* Field box - shared by every BL input, combobox, textarea and address lookup */
lightning-input .slds-input,
lightning-textarea .slds-textarea,
lightning-combobox .slds-combobox__input,
lightning-lookup-address .slds-combobox__input {
    color: #000000 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 24px;
    letter-spacing: 0;
    text-transform: none;
    min-height: 56px !important;
    padding: 16px;
    border: 1px solid #E3E3E3 !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
}

/* Selected-value text only - must not get its own box inside the field */
lightning-combobox .slds-combobox__input .slds-truncate {
    color: #000000 !important;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 500;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

lightning-input .slds-input:hover,
lightning-input .slds-input:focus,
lightning-input .slds-input:active,
lightning-textarea .slds-textarea:hover,
lightning-textarea .slds-textarea:focus,
lightning-combobox .slds-combobox__input:hover,
lightning-combobox .slds-combobox__input:focus,
lightning-combobox .slds-combobox__input[aria-expanded='true'],
lightning-combobox .slds-has-focus .slds-combobox__input,
lightning-lookup-address .slds-combobox__input:focus {
    border-color: #7F03B0 !important;
    box-shadow: none !important;
    outline: none;
}

/* Error state - kept after hover/focus so red wins */
lightning-input.slds-has-error .slds-input,
lightning-input .slds-has-error .slds-input,
lightning-textarea.slds-has-error .slds-textarea,
lightning-textarea .slds-has-error .slds-textarea,
lightning-combobox.slds-has-error .slds-combobox__input,
lightning-combobox .slds-has-error .slds-combobox__input {
    border-color: #DC0101 !important;
    box-shadow: none !important;
}

lightning-input .slds-form-element__help,
lightning-textarea .slds-form-element__help,
lightning-combobox .slds-form-element__help {
    display: block;
    margin-top: 4px;
    padding: 0;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #DC0101 !important;
}

/* Browser autofill keeps the white box and black text */
lightning-input .slds-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #000000 !important;
}

lightning-input .slds-input::placeholder,
lightning-textarea .slds-textarea::placeholder,
lightning-combobox .slds-combobox__input::placeholder {
    color: #525252;
    font-weight: 400;
}

lightning-combobox .slds-combobox__input {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 48px;
    text-align: left;
}

lightning-combobox .slds-combobox__control {
    display: flex;
    align-items: center;
}

lightning-combobox .slds-button__icon {
    color: #000000;
    flex-shrink: 0;
}

lightning-combobox .slds-button__icon svg {
    stroke: #000000;
    fill: none;
    width: 24px;
    height: 24px;
}

lightning-combobox .slds-combobox__input[disabled] {
    background-color: #f3f3f3;
    color: #525252;
}

.slds-combobox__input {
    height: 56px;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
}
.slds-textarea:focus {
    border-color: #7F03B0 !important;
    box-shadow: none;
}
.slds-c-radio-color-border {
    border-color: #E3E3E3 !important;
}
.slds-c-radio-color-border-checked {
    border-color: #5A027D !important;
}
.slds-c-radio-mark-color-foreground {
    color: green !important;
}

.slds-form-element__label {
    font-size: 18px !important;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
    color: #525252;
}
.register_section .select-field .slds-combobox__input-value {
    font-size: 16px;
}

/* ===== Links ===== */
a, a:link:not(.slds-button,.slds-dropdown__item>a), a:visited:not(.slds-button,.slds-dropdown__item>a) {
    color: #7F03B0;
}
a:hover:not(.slds-button,.slds-dropdown__item>a) {
    color: #5A027D;
}

/* ===== Checkbox / radio ===== */
.slds-checkbox {
    --checkbox-color-background-checked: #7F03B0;
}
.inputlabel .slds-form-element__label {
    padding-top: 5px !important;
    color: #525252 !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}
.slds-checkbox [type=checkbox]:checked~.slds-checkbox_faux::after {
    border-color: white;
}
.slds-radio input[type="radio"]:checked + .slds-radio__label .slds-radio_faux {
    width: 20px;
    height: 20px;
    padding: 2px 0;
    margin: 16px;
    border: 3px solid #5A027D;
}
.slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux::after {
    background-color: #5A027D;
}
.slds-radio [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after {
    background-color: #5A027D;
}
.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux {
    border-color: #5A027D;
    background-color: #5A027D;
}
.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux::after {
    border-color: white;
}
.slds-radio .slds-radio_faux {
    width: 20px;
    height: 20px;
    border: 1px solid #525252;
    background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
                linear-gradient(0deg, #525252, #525252);
}

.slds-input_faux {
    line-height: 3.5rem;
}

/* ===== Progress bar / pagination ===== */
.slds-progress__marker {
    background-color: white;
    border: 1px solid black;
}
.slds-progress__item.slds-is-active .slds-progress__marker {
    background: #FFEB0F;
    border: 1px solid black;
}
.slds-progress-bar__value {
    display: block;
    background: black;
    height: 50%;
}
.slds-progress-bar {
    background-color: black;
}
.slds-progress-bar_x-small {
    height: 0.065rem;
}
.pagination .slds-icon {
    fill: #000000;
}
/* NOTE: relies on LWR synthetic scoping attribute; fragile - better moved into ecom_orderHistoryList.css */
.slds-input_faux:not(.slds-combobox__input-value)[c-ecom_orderHistoryList_ecom_orderHistoryList] {
    color: white;
    background: #7F03B0;
}
a:active, a:hover {
    color: #5A027D;
    text-decoration: none;
    text-shadow: none;
    background-color: white;
}
.slds-checkbox_standalone [type=checkbox] {
    width: 20px;
    height: 20px;
    margin: 0;
    clip: auto;
    opacity: 0;
}
.slds-required {
    float: right;
    padding-left: 2px;
    color: #1C1C1C;
}
.slds-form-element {
    margin-bottom: 0px !important;
}

/* ===== Custom label classes ===== */
.ecom-input-label-18 .slds-form-element__label {
    color: #000000;
    font-family: Hanken Grotesk;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.ecom-input-label-16 .slds-form-element__label {
    color: #000000;
    font-family: Hanken Grotesk;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

/* ===== Custom checkbox (profile page) ===== */
.ecom-custom-checkbox .slds-checkbox [type=checkbox]:checked~.slds-checkbox_faux:after {
    display: block;
    content: "";
    height: 7px;
    width: 12px;
    position: absolute;
    top: 41%;
    left: 75%;
    transform: translate3d(-86%,-50%,0) rotate(-48deg);
    border-bottom: 2px solid white;
    border-left: 2px white;
}
.ecom-custom-checkbox .slds-form-element .slds-checkbox [type=checkbox]+.slds-checkbox_faux,
.slds-form-element .slds-checkbox [type=checkbox]~.slds-checkbox_faux,
.slds-checkbox_standalone [type=checkbox],
.slds-checkbox .slds-checkbox_faux {
    height: 20px;
    width: 20px;
}
.ecom-custom-chxbox-padding .slds-form-element .slds-checkbox [type=checkbox]+.slds-checkbox__label .slds-checkbox_faux {
    margin-right: 10px !important;
}
.ecom-custom-checkbox .slds-form-element_horizontal .slds-form-element__control {
    padding: 0px;
}

.slds-spinner:after, .slds-spinner:before,
.slds-spinner__dot-a:after, .slds-spinner__dot-a:before,
.slds-spinner__dot-b:after, .slds-spinner__dot-b:before {
    background: #6b149d !important;
}

.orderConfirmationPage {
    background-color: #FFEB0F !important;
}

/* ===== Quick Order changes start ===== */
.slds-input-has-icon .slds-input__icon:not(button) {
    pointer-events: none;
    display: none;
}
.slds-input-has-icon--left-right .slds-input, .slds-input-has-icon--left-right .slds-input--bare, .slds-input-has-icon--left-right .slds-input_bare, .slds-input-has-icon--left-right .slds-input_faux,
.slds-input-has-icon_left-right .slds-input, .slds-input-has-icon_left-right .slds-input--bare, .slds-input-has-icon_left-right .slds-input_bare, .slds-input-has-icon_left-right .slds-input_faux {
    --slds-c-input-spacing-horizontal-start: 1rem;
    --slds-c-input-spacing-horizontal-end: 2rem;
}
.slds-input__icon-group_right .slds-input__icon--right, .slds-input__icon-group_right .slds-input__icon_right {
    right: .5rem;
    display: none;
}
.slds-listbox--vertical .slds-listbox__option--entity, .slds-listbox--vertical .slds-listbox__option_entity,
.slds-listbox_vertical .slds-listbox__option--entity, .slds-listbox_vertical .slds-listbox__option_entity {
    padding: .25rem .75rem;
    font-size: 14px;
}
.slds-listbox--vertical .slds-listbox__option.slds-has-focus, .slds-listbox--vertical .slds-listbox__option:focus, .slds-listbox--vertical .slds-listbox__option:hover,
.slds-listbox_vertical .slds-listbox__option.slds-has-focus, .slds-listbox_vertical .slds-listbox__option:focus, .slds-listbox_vertical .slds-listbox__option:hover {
    color: #7F04B0;
    background-color: white;
    font-size: 14px;
    box-shadow: none;
}
.slds-dropdown-trigger--click.slds-is-open .slds-dropdown, .slds-dropdown-trigger_click.slds-is-open .slds-dropdown {
    display: block;
    visibility: visible;
    opacity: 1;
    padding: 3px 0px;
}
/* ===== Quick Order changes end ===== */

/* RWPS-600 */
.slds-input_faux {
    padding-top: 11px;
}
.slds-button:focus:not(:focus-visible),
.slds-checkbox [type='checkbox']:focus:not(:focus-visible) + .slds-checkbox__label .slds-checkbox_faux {
    box-shadow: inherit;
}

/* ===== BioLegend-only: lightning-combobox (opt-in class="bl-field") - BR-8 ===== */
lightning-combobox.bl-field .slds-combobox__form-element,
lightning-combobox.bl-field .slds-input-has-icon {
    position: relative !important;
}

/* Fixed 56px faux button with right padding reserved for the chevron */
lightning-combobox.bl-field .slds-input_faux,
lightning-combobox.bl-field button.slds-combobox__input,
lightning-combobox.bl-field input.slds-combobox__input {
    height: 56px !important;
    line-height: 54px !important;
    padding: 0 56px 0 16px !important;
    text-align: left !important;
}

/* Chevron - re-show the icon hidden by the Quick Order .slds-input__icon rule above; body prefix out-ranks it */
body lightning-combobox.bl-field .slds-input-has-icon .slds-input__icon,
body lightning-combobox.bl-field .slds-input__icon_right,
body lightning-combobox.bl-field lightning-icon.slds-input__icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    pointer-events: none !important;
    /* BioLegend chevron (stroke icon) replaces the filled SLDS utility:down glyph */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.5 9L11.5962 16.0962C11.648 16.1513 11.7105 16.1953 11.78 16.2254C11.8494 16.2555 11.9243 16.271 12 16.271C12.0757 16.271 12.1506 16.2555 12.22 16.2254C12.2895 16.1953 12.352 16.1513 12.4038 16.0962L19.5 9' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px 24px no-repeat !important;
}

body lightning-combobox.bl-field .slds-input__icon svg,
body lightning-combobox.bl-field .slds-input__icon .slds-icon {
    display: none !important;
}

/* Dropdown list */
lightning-combobox.bl-field .slds-dropdown {
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    margin-top: 4px !important;
    padding: 4px 0 !important;
}

lightning-combobox.bl-field .slds-listbox__option,
lightning-combobox.bl-field .slds-listbox__option .slds-truncate,
lightning-combobox.bl-field .slds-listbox__option-text {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

lightning-combobox.bl-field .slds-listbox__option:hover,
lightning-combobox.bl-field .slds-listbox__option.slds-has-focus,
lightning-combobox.bl-field .slds-listbox__option[aria-selected="true"],
lightning-combobox.bl-field .slds-listbox__option.slds-is-selected {
    background-color: #F3F3F3 !important;
    box-shadow: none !important;
}

lightning-combobox.bl-field .slds-listbox__option .slds-icon,
lightning-combobox.bl-field .slds-listbox__option .slds-listbox__icon-selected {
    fill: #000000 !important;
    color: #000000 !important;
}