/* Block styles of user area */
.block-system-menu-blockuser-profile-tabs {
    background-color: var(--zm-bg-surface);
    color: var(--zm-surface-text-color);
    padding: 2rem;
    padding-block-end: 1.5rem;
    border-radius: 0.9375rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 2px solid var(--zm-surface-bg-variant-stronger);
}

.block-system-menu-blockuser-profile-tabs + .block-system-main-block {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.block-system-main-block {
    background-color: var(--zm-bg-surface);
    color: var(--zm-surface-text-color);
    padding: 2rem;
    border-radius: 0.9375rem;
}

@media (max-width: 767px) {
    .block-system-menu-blocknavigation-user-links {
        padding-block-end: 0;
        border: none;
    }
}

/* User profile tab */
.user-profile-welcome,
.user-order-summary {
    background-color: var(--zm-surface-bg-variant);
    padding: 1rem 2rem;
    border-radius: 10px;
    margin-block: 1rem;
    overflow: hidden;
}

.user-profile-welcome h2,
.user-order-summary h3 {
    background-color: var(--zm-surface-bg-variant-stronger);
    padding: 1rem 2rem;
    margin: -1rem -2rem 1rem -2rem;
}

.user-profile-welcome ul,
.user-order-summary ul {
    line-height: 1.5;
    padding-inline-start: 0.875rem;
    margin: 0;
}

@media (max-width: 767px) {
    .user-profile-welcome,
    .user-order-summary {
        padding: 1rem 1rem;
    }

    .user-profile-welcome h2,
    .user-order-summary h3 {
        background-color: var(--zm-surface-bg-variant-stronger);
        padding: 1rem 1rem;
        margin: -1rem -1rem 1rem -1rem;
    }
}

/* Order details tab */
:is(.field--name-mail, .order-information) .field__label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 4px;
}

.order-information .field {
    margin-block: 1.5rem;
}

.field--name-order-items .field__label {
    margin-bottom: 0.5rem;
}

/* Edit profile tab */

.user-form .password-strength__meter,
.user-form .password-strength__indicator {
    border-radius: 3px;
}

.user-form .password-strength__meter {
    height: 6px;
}

.user-form .password-strength__indicator.is-weak {
    background-color: red;
}

.user-form .password-strength__indicator.is-fair {
    background-color: orange;
}

.user-form .password-strength__indicator.is-good {
    background-color: green;
}

.user-form .password-strength__indicator.is-strong {
    background-color: green;
}

.user-form .password-strength__title {
    font-size: 0.8125rem;
}

.user-form .password-confirm-message {
    visibility: visible !important;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
}

.user-form #edit-language {
    margin-block-start: 1.5rem;
}

.user-form .password-suggestions {
    font-size: 0.8125rem;
}

.address-actions .button--primary {
    background-color: var(--zm-btn-secondary-inverse-bg);
    color: var(--zm-btn-secondary-inverse-color);
}

.address-actions .button--primary:is(:focus-visible, :hover) {
    background-color: var(--zm-btn-secondary-inverse-hover-bg);
    color: var(--zm-btn-secondary-inverse-hover-color);
}