/*
 * BR-22 - BioLegend site base styles (moved out of the Experience Builder Head Markup <style> blocks).
 * Rules are kept in the SAME ORDER as the original Head Markup so the cascade is unchanged.
 * Load order in Head Markup: SLDS/dxp links -> theme2.css -> styles.css -> bl-base.css -> bl-styles.css
 * bl-styles.css (opt-in .bl-field overrides) must stay LAST so it wins over these rules.
 * Removed as dead code: empty rules, '.span.slds-file-selector__button' typo rule (matches nothing),
 * ssrc_ECOM_Theme .ttf @font-face (superseded by the woff2 faces below), commented-out media query.
 */

/* ===== 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;
}
.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;
}

.slds-combobox__input {
    height: 56px;
    border: 1px solid #525252;
    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;
}