.user-area-legacy { display: none; }

.user-area-overview,
.user-area-orders,
.user-area-modal { font-family: 'Commissioner', Arial, sans-serif; }

.user-area-overview {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(304px, 1fr);
    align-items: start;
    gap: 20px;
    margin: 12px 0 32px;
}
.user-area-overview:not(.user-area-overview_partner) { align-items: stretch; }

.user-area-card {
    box-sizing: border-box;
    min-height: 0;
    padding: 32px;
    border: 1px solid #ededed;
    border-radius: 8px;
    background: #fff;
    color: #282828;
}

.user-area-card h2 {
    margin: 0;
    color: #282828;
    font: 600 20px/1.4 'Commissioner', Arial, sans-serif;
}

.user-area-profile { display: flex; flex-direction: column; gap: 20px; }
.user-area-profile__details { display: flex; gap: 20px; }
.user-area-profile__details p { margin: 0; }
.user-area-profile__contacts { flex: none; }
.user-area-overview:not(.user-area-overview_partner) .user-area-profile__contacts { flex: 0 0 272px; }
.user-area-profile__contacts p { display: grid; grid-template-columns: 67px minmax(0, 1fr); gap: 12px; }
.user-area-profile__contacts p + p { margin-top: 4px; }
.user-area-profile__address { display: grid; grid-template-columns: 119px minmax(0, 1fr); gap: 12px; }
.user-area-profile__details span,
.user-area-bonuses dt,
.user-area-partner-card dt,
.user-area-partner-card > p { color: #707070; font: 500 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-profile__details strong { color: #282828; font: 500 16px/1.4 'Commissioner', Arial, sans-serif; }

.user-area-profile__actions,
.user-area-popup__actions { display: flex; align-items: center; gap: 12px; }
.user-area-profile__actions { flex-wrap: wrap; margin-top: 4px; }

.user-area-button {
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    color: #282828;
    font: 600 14px/1.4 'Commissioner', Arial, sans-serif;
    cursor: pointer;
}
.user-area-button:hover { box-shadow: none; }
.user-area-button_primary,
.user-area-button_primary:hover { padding-right: 32px; padding-left: 32px; border-color: #e43a2d; background: #e43a2d; color: #fff; }
.user-area-button_cancel { border-color: transparent; color: #8f8f8f; }
.user-area-profile__logout { display: inline-block; width: max-content; color: #e43a2d; font: 600 14px/1.4 'Commissioner', Arial, sans-serif; text-decoration: none; border-bottom: 1px solid #e43a2d; }
.user-area-profile__actions > * { flex: 0 0 auto; white-space: nowrap; }

.user-area-bonuses { display: flex; flex-direction: column; }
.user-area-bonuses__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-area-link { padding: 4px 0; border: 0; border-bottom: 1px solid #e43a2d; background: transparent; color: #e43a2d; font: 600 14px/1.4 'Commissioner', Arial, sans-serif; text-decoration: none; cursor: pointer; }
.user-area-bonuses dl { display: flex; flex: 1; flex-direction: column; justify-content: space-between; margin: 16px 0 0; }
.user-area-bonuses dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.user-area-bonuses dt { margin: 0; }
.user-area-bonuses dd { margin: 0; color: #282828; font: 500 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-bonuses .user-area-bonuses__discount { color: #e43a2d; font-size: 32px; font-weight: 600; }

.user-area-overview_partner { grid-template-columns: minmax(460px, 1.8fr) minmax(280px, 1fr) minmax(360px, 1.25fr); }
.user-area-overview_partner .user-area-card { min-height: 0; height: auto; align-self: stretch; }
.user-area-overview_partner .user-area-profile__details { flex-direction: column; gap: 8px; }
.user-area-overview_partner .user-area-profile__address { flex: none; }
.user-area-overview_partner .user-area-bonuses { gap: 20px; }
.user-area-overview_partner .user-area-bonuses dl { flex: none; gap: 8px; margin: 0; }
.user-area-overview_partner .user-area-bonuses__heading { display: contents; }
.user-area-overview_partner .user-area-bonuses__heading h2 { order: 1; }
.user-area-overview_partner .user-area-bonuses dl { order: 2; }
.user-area-overview_partner .user-area-bonuses__heading .user-area-link { order: 3; align-self: flex-start; margin-top: 0; }

.user-area-partner-card { display: flex; flex-direction: column; gap: 0; }
.user-area-partner-card__top { display: flex; justify-content: space-between; gap: 20px; }
.user-area-partner-card__top > div { width: 179px; }
.user-area-partner-card__top img { width: 120px; height: 120px; object-fit: contain; }
.user-area-partner-card dl { display: grid; gap: 8px; margin: 20px 0 0; }
.user-area-partner-card dl > div { display: flex; justify-content: space-between; gap: 8px; }
.user-area-partner-card dt,
.user-area-partner-card dd { margin: 0; white-space: nowrap; }
.user-area-partner-card dd { color: #282828; font: 500 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-partner-card > p { margin: 0; }
.user-area-partner-card > a { color: #4888d4; font: 500 16px/1.4 'Commissioner', Arial, sans-serif; overflow-wrap: anywhere; text-decoration: none; }

.user-area-popup { box-sizing: border-box; width: min(600px, calc(100vw - 32px)); max-width: 600px; padding: 32px; border-radius: 8px; font-family: 'Commissioner', Arial, sans-serif; }
.user-area-popup .product-badge-popup__title { margin: 0 0 20px; color: #282828; font: 600 20px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-popup__logout { display: block; width: max-content; margin: 0 0 20px auto; color: #e43a2d; font: 600 14px/1.4 'Commissioner', Arial, sans-serif; text-decoration: none; border-bottom: 1px solid #e43a2d; }
.user-area-popup__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.user-area-popup__fields_single { grid-template-columns: 1fr; }
.user-area-popup__fields label { display: block; color: #282828; font: 400 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-popup__field_full { grid-column: 1 / -1; }
.user-area-popup__fields input,
.user-area-popup__fields textarea { display: block; width: 100%; box-sizing: border-box; min-height: 48px; margin-top: 4px; padding: 12px; border: 1px solid #b5b5b5; border-radius: 4px; background: #fff; color: #282828; font: 400 16px/1.4 'Commissioner', Arial, sans-serif; resize: vertical; }
.user-area-popup__error { display: block; margin-top: 5px; color: #e43a2d; font-size: 12px; }
.user-area-popup__actions { justify-content: flex-end; margin-top: 20px; }
.user-area-popup__actions .user-area-link { margin-right: auto; }
.user-area-popup_bonuses { max-width: 484px; }

.user-area-orders { margin: 40px 0; }
.user-area-orders > h2 { margin: 0 0 20px; color: #282828; font: 600 28px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-orders__tabs { display: flex; align-items: end; margin: 0 0 20px;  }
.user-area-orders__tab { min-height: 46px; padding: 0 20px; border: 0; border-bottom: 2px solid transparent; background: transparent;  font: 400 16px/1.4 'Commissioner', Arial, sans-serif; cursor: pointer; }
.user-area-orders__tab.user-area-orders__tab_active {
    font-weight: 600;
}
.user-area-orders__tab_active { border-bottom-color: #e43a2d; color: #282828; }
.user-area-orders__panel_hidden { display: none; }
.user-area-orders_tabs + .user-area-orders_partner { display: contents; }
.user-area-orders_tabs + .user-area-orders_partner > h2 { display: none; }
.user-area-orders__list { overflow: hidden; border: 1px solid #ededed; border-radius: 8px; background: #fff; }
.user-area-order + .user-area-order { border-top: 1px solid #ededed; }
.user-area-order__summary { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 40px; min-height: 98px; box-sizing: border-box; padding: 12px 48px 12px 20px; list-style: none; cursor: pointer; }
.user-area-order__summary::-webkit-details-marker { display: none; }
.user-area-order__summary::marker { content: ''; }
.user-area-order__summary::after { content: ''; position: absolute; top: 18px; right: 20px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 6L8 10.5L12.5 6' stroke='%23E43A2D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat; transform-origin: 50% 50%; transition: transform .2s ease; }
.user-area-order[open] .user-area-order__summary::after { transform: rotate(180deg); }
.user-area-order__main > span:first-child {
    color: #8f8f8f;
}
.user-area-order-item__price>span {
    font-weight: 500;
}
.user-area-order__main { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; min-width: 0; color: #707070; font: 500 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-order__main > span:first-child strong { color: #e43a2d; font-size: 20px; }
.user-area-order__main small { display: flex; flex-basis: 100%; gap: 20px; color: #8f8f8f; font-size: 16px; }
.user-area-order__main small b { color: #282828; font-weight: 500; }
.user-area-order__status { font-size: 14px; }
.user-area-order__status_0, .user-area-order__status_1, .user-area-order__status_2, .user-area-order__status_3, .user-area-order__status_7, .user-area-order__status_8 { color: #4888d4; }
.user-area-order__status_4, .user-area-order__status_9 { color: #329359; }
.user-area-order__status_5, .user-area-order__status_6 { color: #e43a2d; }
.user-area-order__total { min-width: 300px; text-align: right; color: #282828; font: 500 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-order__total > div { white-space: nowrap; }
.user-area-order__total > div > span { margin-right: 32px; }
.user-area-order__total > div > strong { color: #e43a2d; font-size: 20px; }
.user-area-order__total small { display: block; margin-top: 4px; color: #8f8f8f; font-size: 14px; }
.user-area-order__items { padding: 0 20px 12px; border-top: 0; }
.user-area-order__address { margin: 0; padding: 12px 0 0; color: #707070; font-size: 14px; }
.user-area-order-item { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 12px 0; }
.user-area-order-item + .user-area-order-item { border-top: 0; }
.user-area-order-item img { display: block; width: 60px; height: 70px; object-fit: contain; }
.user-area-order-item__description { display: grid; gap: 8px; color: #707070; font-size: 14px; }
.user-area-order-item__description small { color: #8f8f8f; font-size: 14px; }
.user-area-order-item__description a { color: #282828; font-size: 16px; font-weight: 600; text-decoration: none; }
.user-area-order-item__description a:hover { color: #e43a2d; text-decoration: underline; }
.user-area-order-item__price { display: flex; align-items: center; gap: 32px; color: #282828; font-size: 16px; white-space: nowrap; }
.user-area-order-item__price strong { font-size: 16px; }
.user-area-orders__empty { margin: 0; padding: 24px 32px; color: #707070; font-size: 14px; }

@media (max-width: 900px) {
    .user-area-overview,
    .user-area-overview_partner { grid-template-columns: 1fr 1fr; }
    .user-area-overview_partner .user-area-partner-card { grid-column: 1 / -1; }
    .user-area-overview_partner .user-area-profile__details { flex-direction: row; gap: 20px; }
}

@media (max-width: 700px) {
    .user-area-overview:not(.user-area-overview_partner) { align-items: start; }
    .user-area-overview,
    .user-area-overview_partner { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; gap: 20px; margin: 20px 0 32px; }
    .user-area-card,
    .user-area-overview_partner .user-area-card { min-width: 0; max-width: 100%; min-height: 0; padding: 24px; }
    .user-area-overview_partner .user-area-partner-card { grid-column: auto; }
    .user-area-profile__details,
    .user-area-overview_partner .user-area-profile__details { flex-direction: column; gap: 20px; }
    .user-area-profile__contacts,
    .user-area-overview:not(.user-area-overview_partner) .user-area-profile__contacts { flex-basis: auto; }
    .user-area-profile__address { display: flex; flex-direction: column; gap: 8px; }
    .user-area-profile__actions { align-items: stretch; flex-direction: column; }
    .user-area-button_primary { padding-right: 16px; padding-left: 16px; }
    .user-area-bonuses__heading,
    .user-area-overview_partner .user-area-bonuses__heading { display: flex; justify-content: flex-start; gap: 16px; }
    .user-area-bonuses dl { gap: 8px; }
    .user-area-overview_partner .user-area-partner-card { padding: 32px; gap: 20px; }
    .user-area-partner-card__top,
    .user-area-partner-card__meta { display: contents; }
    .user-area-partner-card h2 { order: 1; }
    .user-area-partner-card__top img { order: 2; width: 176px; height: 176px; }
    .user-area-partner-card dl { order: 3; width: 100%; margin: 0; }
    .user-area-partner-card > p { order: 4; }
    .user-area-partner-card > a { order: 5; }
    .user-area-partner-card__top { align-items: flex-start; }
    .user-area-orders { margin: 32px 0; }
    .user-area-orders > h2 { margin-bottom: 20px; font-size: 28px; }
    .user-area-orders__tabs { margin-bottom: 16px; overflow-x: auto; }
    .user-area-orders__tab { min-height: 42px; padding: 0 12px; font-size: 14px; white-space: nowrap; }
    .user-area-orders__list { overflow: visible; border: 0; border-radius: 0; }
    .user-area-order { border-bottom: 1px solid #ededed; }
    .user-area-order + .user-area-order { border-top: 0; }
    .user-area-order__summary { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 12px 0; }
    .user-area-order__summary::after { top: 16px; right: auto; left: 8px; transform: none; }
    .user-area-order[open] .user-area-order__summary::after { transform: rotate(180deg); }
    .user-area-order__main,
    .user-area-order__total { grid-column: 2; }
    .user-area-order__main small { display: grid; gap: 8px; }
    .user-area-order__total { min-width: 0; margin-top: 12px; text-align: left; }
    .user-area-order__items { padding: 0 0 12px 46px; }
    .user-area-order-item { grid-template-columns: minmax(0, 1fr) 45px; column-gap: 20px; row-gap: 12px; }
    .user-area-order-item img { grid-column: 2; grid-row: 1; width: 45px; height: 53px; }
    .user-area-order-item__description { grid-column: 1; grid-row: 1; }
    .user-area-order-item__description a { font-size: 14px; }
    .user-area-order-item__price { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 8px; white-space: nowrap; }
    .user-area-popup { width: min(100%, 600px); padding: 24px; }
    .user-area-popup__fields { grid-template-columns: 1fr; }
    .user-area-popup__field_full { grid-column: auto; }
    .user-area-popup__actions { align-items: stretch; flex-wrap: wrap; }
    .user-area-popup__actions .user-area-link { width: 100%; margin-right: 0; border-bottom: 0; text-decoration: underline; text-decoration-color: #e43a2d; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

.user-area-auth {
    max-width: 600px;
    margin: 52px auto 80px;
    color: #282828;
    font-family: 'Commissioner', Arial, sans-serif;
}

.user-area-auth__card { padding: 32px; border: 1px solid #dcdcdc; background: #fff; }
.user-area-auth__title { margin: 0 0 15px; color: #282828; font: 400 22px/1.4 'Commissioner', Arial, sans-serif; text-align: center; }
.user-area-auth__form { display: grid; gap: 16px; }
.user-area-auth__field { display: grid; gap: 4px; color: #282828; font: 400 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-auth__field input { box-sizing: border-box; width: 100%; min-height: 50px; padding: 12px; border: 1px solid #b5b5b5; border-radius: 4px; background: #fff; color: #282828; font: 400 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-auth__field input:focus { border-color: #b5b5b5; outline: none; }
.user-area-auth__separator { margin: -7px 0; color: #707070; font-size: 14px; line-height: 1; text-align: center; }
.user-area-auth__captcha { overflow: hidden; max-width: 100%; }
.user-area-auth__submit { width: 100%; min-height: 50px; font-size: 16px; }
.user-area-auth__alert { margin: 0 0 20px; padding: 12px 16px; border-radius: 4px; background: #fff0ef; color: #b42318; font-size: 14px; line-height: 1.4; }
.user-area-auth__footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed; text-align: center; }
.user-area-auth__footer a { color: #282828; font: 600 16px/1.4 'Commissioner', Arial, sans-serif; text-decoration: none; }
.user-area-auth__footer p { margin: 20px 0 2px; color: #282828; font: 400 14px/1.4 'Commissioner', Arial, sans-serif; }

@media (any-hover: hover) {
    .user-area-auth__submit:hover { border-color: #c7281c; background: #c7281c; }
}

.user-area-register .user-area-auth__field em { margin-left: 2px; color: #e43a2d; font-style: normal; }
.user-area-register__error { color: #e43a2d; font-size: 12px; }
.user-area-register__type { margin: 0; padding: 0; border: 0; }
.user-area-register__type legend { margin-bottom: 4px; padding: 0; color: #282828; font: 400 16px/1.4 'Commissioner', Arial, sans-serif; }
.user-area-register__type-options { display: flex; flex-direction: column; gap: 12px; }
.user-area-register__type-options label { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #282828; font: 400 14px/1.4 'Commissioner', Arial, sans-serif; cursor: pointer; }
.user-area-register__type-options input { position: absolute; opacity: 0; }
.user-area-register__type-options span { display: inline-flex; align-items: center; gap: 8px; }
.user-area-register__type-options span::before { width: 20px; height: 20px; box-sizing: border-box; border: 1px solid #b5b5b5; border-radius: 50%; background: #fff; content: ''; }
.user-area-register__type-options input:checked + span::before { border: 6px solid #e43a2d; }
.user-area-register__consent { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 8px; color: #282828; font: 400 14px/1.4 'Commissioner', Arial, sans-serif; cursor: pointer; }
.user-area-register__consent input { position: absolute; opacity: 0; }
.user-area-register__checkbox { display: block; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid #b5b5b5; border-radius: 2px; background: #fff; }
.user-area-register__consent input:checked + .user-area-register__checkbox { border-color: #e43a2d; background: #e43a2d url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.2L5.7 10L11 4.5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat; }
.user-area-register__consent a { color: #282828; text-decoration: underline; text-underline-offset: 2px; }
.user-area-register__note { color: #707070; font-size: 12px; line-height: 1.4; }
.user-area-register__note p { margin: 0; }
.user-area-register__note p + p { margin-top: 4px; }
.user-area-register__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.user-area-register__wait { color: #707070; font-size: 14px; text-align: center; }

@media (max-width: 600px) {
    .user-area-auth { max-width: none; margin: 32px 0 40px; }
    .user-area-auth__card { padding: 24px 16px; border-right: 0; border-left: 0; border-radius: 0; }
    .user-area-auth__title { margin-bottom: 15px; font-size: 18px; }
    .user-area-auth__footer { padding-top: 20px; }
    .user-area-auth__footer a { font-size: 14px; }
    .user-area-auth__footer p { margin-top: 20px; font-size: 12px; }
    .user-area-auth__captcha { height: 70px; margin-bottom: -8px; transform: scale(.9); transform-origin: left top; }
}
