/* --- CSS Properties --- */
:root {
    /* B2B Font */
    --b2b-font-family: 'Avenir Next';
    --b2b-font-size-h1: 1.5rem;

    --b2b-font-weight-regular: 400;
    --b2b-font-weight-medium: 600;
    --b2b-font-weight-bold: 700;

    /* B2B Colors */
    --b2b-brand-color: var(--dxp-g-brand);
    --b2b-brand-color-contrast: var(--dxp-g-brand-contrast);
    --b2b-error-color: var(--dxp-g-destructive);
    --b2b-error-color-contrast: var(--dxp-g-destructive-contrast);
    --b2b-gray-100: #F0F0F0;
    --b2b-gray-200: #ACACAE;
    --b2b-gray-300: #909093;
    --b2b-gray-400: #56565A;
    --b2b-white: #FFFFFF;

    /* B2B Radii */
    --b2b-radius-xs: 0.25rem;
    --b2b-radius-sm: 0.5rem;
    --b2b-radius-lg: 2rem;

    /* B2B Card */
    --b2b-card-sm-padding-block: 1rem;
    --b2b-card-sm-padding-inline: 1rem;
    --b2b-card-lg-padding-block: 2rem;
    --b2b-card-lg-padding-inline: 1rem;

    /* B2B Modal */
    --b2b-modal-spacing: 2rem;

    /* Root Max Width */
    --b2b-root-max-width: var(--dxp-c-section-columns-max-width, var(--dxp-c-l-max-content-width, var(--dxp-c-max-content-width, var(--dxp-s-section-columns-max-width))));

    /* DXP Overrides */
    --dxp-c-spinner-color-foreground: var(--b2b-brand-color);
    --dxp-c-spinner-color-background: rgba(255,255,255,0.4);

    /* SLDS Overrides */
    --slds-c-input-shadow-focus: 0 0 0 2px var(--b2b-brand-color);

    /* Modals */
    --slds-c-modal-radius-border: var(--b2b-radius-lg);
    --slds-c-modal-sizing-border: 0;
    --slds-c-modal-heading-font-weight: var(--b2b-font-weight-medium);
    --slds-c-modal-header-color-background: var(--b2b-white);
    --slds-c-modal-heading-font-size: var(--b2b-font-size-h1);
    --slds-c-modal-heading-line-height: 1.4em;
    --slds-c-modal-header-spacing-block-start: var(--b2b-modal-spacing);
    --slds-c-modal-header-spacing-inline-end: var(--b2b-modal-spacing);
    --slds-c-modal-header-spacing-block-end: 0;
    --slds-c-modal-header-spacing-inline-start: var(--b2b-modal-spacing);
    --slds-c-modal-content-color-background: var(--b2b-white);
    --slds-c-modal-footer-color-background: var(--b2b-white);
    --slds-c-modal-footer-spacing-block-start: 0;
    --slds-c-modal-footer-spacing-inline-end: var(--b2b-modal-spacing);
    --slds-c-modal-footer-spacing-block-end: var(--b2b-modal-spacing);
    --slds-c-modal-footer-spacing-inline-start: var(--b2b-modal-spacing);
    --slds-c-backdrop-color-background: rgba(0, 0, 0, 0.36);
}

@media (min-width: 48rem) {
    :root {
        --b2b-font-size-h1: 2rem;
        --b2b-card-lg-padding-block: 3rem;
    }
}

/* --- Global Styles --- */

.b2b-max-width {
    margin: 0 auto;
    max-width: var(--b2b-root-max-width);
}

.b2b-card-sm {
    border: 1px solid var(--b2b-gray-100);
    border-radius: var(--b2b-radius-sm);
    color: var(--b2b-gray-400);
    padding-block: var(--b2b-card-sm-padding-block);
    padding-inline: var(--b2b-card-sm-padding-inline);
}

.b2b-card-lg {
    border: 1px solid var(--b2b-gray-100);
    border-radius: var(--b2b-radius-lg);
    box-shadow: 0 0.125rem 0.25rem 0.0625rem rgba(0,0,0,0.2);
    color: var(--b2b-gray-400);
    margin: 0 auto;
    max-width: 64rem;
    padding-block: var(--b2b-card-lg-padding-block);
    padding-inline: var(--b2b-card-lg-padding-inline);
}

/* --- Custom Overrides --- */


.b2b-lightning-input-address .slds-form-element_compound .slds-form-element__group .slds-form-element__row:first-child lightning-combobox.slds-form-element {
    padding-left: 0;
    padding-right: 0;
}
.b2b-lightning-input-address .slds-form-element_compound .slds-form-element__group .slds-form-element__row {
    align-items: start;
}
.b2b-lightning-input-address lightning-combobox.slds-form-element,
.b2b-lightning-input-address lightning-select.slds-form-element {
    margin-bottom: 0;
}

/* SLDS Tabs */
.slds-tabs_default__nav {
    --dxp-c-link-text-decoration: none;
}

/* SLDS Modals */
.slds-backdrop_open {
    backdrop-filter: blur(3px);
}

lightning-modal-base {
    lightning-modal {
        box-shadow: 0 0.125rem 0.25rem 0.0625rem rgba(0,0,0,0.2);
    }

    .slds-modal__content {
        &.slds-p-around_medium {
            padding-block-start: 0;
            padding-block-end: 0;
            padding-inline: var(--b2b-modal-spacing);
        }
    }

    .slds-modal__close {
        bottom: 0;
        right: 0;
        text-align: right;
        transform: translate(
                calc(var(--slds-c-modal-footer-spacing-inline-end) * -1),
                calc(var(--slds-c-modal-footer-spacing-inline-end) * 2));
        z-index: 1;

        .slds-button_icon {
            color: var(--b2b-gray-300);
            padding: 0.375rem;

            &:hover {
                color: var(--b2b-gray-400);
            }
        }
    }
}

.slds-modal__header {
    text-align: start;
}

.slds-modal__footer {
    lightning-button + lightning-button,
    .slds-button + .slds-button {
        margin-inline-start: 1rem;
    }
}

.slds-input[readonly] {
    font-size: var(--dxp-c-input-text-font-size, var(--dxp-s-form-element-text-font-size, var(--dxp-s-body-font-size)));
    font-weight: var(--dxp-s-form-element-text-font-weight, var(--dxp-s-body-font-weight));
}

.slds-input, .slds-textarea, .slds-combobox__input{
    padding: 10px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    color: #2d3748;
    background-color: white;
    transition: border-color 0.2s ease;
}