/*
 * Личный кабинет — стили.
 * Подключается только когда включён флаг FNL_FEATURES='account'.
 * Собрано из main.css Камаза: правила кабинета и модалок, без клубной специфики.
 */
.header-mobile__account.btn {position: absolute; top: 1rem; right: 7.8rem;}
.btn_social svg {width: 100%; height: 100%; display: block;}
.btn_social-auth img {width: 60%; height: 60%; border-radius: 10rem;}
.btn_social-auth span {width: 60%; height: 60%; background: var(--main); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.2rem; color: var(--white);}
@media (min-width: 769px) {
.account {min-height: 66.8vh;}
}
.account:has(.account__box_list.active) .select {display: block;}
.account__top {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 3rem;}
@media (max-width: 768px) {
.account__top {-ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 2rem;}
}
.account__top .select[data-filter=month] {max-width: 20rem; display: none;}
@media (max-width: 768px) {
.account__top .select[data-filter=month] {max-width: unset;}
}
.account__top .select[data-filter=year] {max-width: 16rem; display: none;}
@media (max-width: 768px) {
.account__top .select[data-filter=year] {max-width: unset;}
}
.account__tabs {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 2.5rem; -moz-column-gap: 2.5rem; column-gap: 2.5rem; -ms-flex-negative: 0; flex-shrink: 0; overflow-x: auto; width: calc(100% - 52rem); margin-right: auto;}
@media (max-width: 768px) {
.account__tabs {margin-left: -1.6rem; margin-right: -1.6rem; padding-left: 1.6rem; padding-right: 1.6rem; width: calc(100% + 3.2rem);}
}
.account__title {font-size: 2.4rem; line-height: 1; font-weight: 400; color: var(--text); opacity: 0.3; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; margin-bottom: 0; cursor: pointer; min-height: 4.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; white-space: nowrap;}
.account__title.active {opacity: 1; text-shadow: 0.05rem 0.05rem 0.1rem var(--text);}
@media (min-width: 769px) {
.account__title:not(.active):hover {opacity: 0.7;}
}
.account__box_list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 3rem;}
.account__form-block {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; row-gap: 0.8rem; width: 100%; max-width: 29rem; position: relative;}
.account__form-block .select__list {background: #4c4e3c; min-height: 2rem; border: none;}
.account__form-block .select__list_city {padding-top: 3rem;}
.account__form-block .select__list_city::before {content: "Выберите населенный пункт из списка"; position: absolute; top: 0; left: 0; width: 100%; padding: 0.5rem 1.2rem; height: auto; background: var(--white); z-index: 1; font-size: 1.2rem; color: #000; opacity: 0.5;}
.account__form-block:has(.account__form-edit) input {pointer-events: none;}
.account__form-error {font-size: 1.2rem; color: red; line-height: 1.4; display: none;}
.account__form-error.active {display: block;}
.account__form-edit {font-size: 2rem; color: var(--white); cursor: pointer; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; position: absolute; opacity: 0; pointer-events: none; text-align: center; width: 100%; height: 4rem; bottom: 0; right: 0;}
.account__form-edit.active {opacity: 1; pointer-events: auto;}
@media (min-width: 769px) {
.account__form-edit:hover {color: var(--main);}
}
.account__form-input:-moz-read-only {background: var(--whiteOpacity); backdrop-filter: blur(var(--blur)); color: var(--text); -moz-user-select: none; user-select: none; pointer-events: none;}
.account__form-input:read-only {background: var(--whiteOpacity); backdrop-filter: blur(var(--blur)); color: var(--text); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none;}
.account__form-submit {height: 4rem; font-size: 1.4rem; text-transform: none; font-weight: 400; margin-top: 0.6rem; margin-top: auto; border: none;}
.account__form-cancel {height: 4rem; font-size: 1.4rem; text-transform: none; font-weight: 400; display: none; background: transparent; border: 0.1rem solid var(--text);}
.account__list {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 1rem;}
.account__list-date {margin-bottom: 0.5rem; font-size: 1.6rem; opacity: 0.7; color: var(--text);}
.account__card {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 2.5rem; -moz-column-gap: 2.5rem; column-gap: 2.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--whiteOpacity); backdrop-filter: blur(var(--blur)); border-radius: 1rem; padding: 2.5rem; border: 0.1rem solid var(--border); position: relative;}
@media (max-width: 768px) {
.account__card {-ms-flex-wrap: wrap; flex-wrap: wrap; padding: 1.5rem; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
}
.account__card-img {width: 7.5rem; height: 7.5rem; border-radius: 0.5rem; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0;}
@media (max-width: 768px) {
.account__card-img {position: absolute; bottom: 1.5rem; left: 1.5rem; width: 10rem; height: 10rem;}
}
.account__card-img img, .account__card-img svg {width: 100%; height: 100%; display: block;}
.account__card-content {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 47rem;}
@media (max-width: 768px) {
.account__card-content {min-width: unset; width: 100%;}
}
.account__card-title {font-size: 2.2rem; font-weight: 700; color: var(--text); margin-bottom: 1rem;}
.account__card-title span {width: 2.4rem; height: 2.4rem; border-radius: 10rem; overflow: hidden; position: relative; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform: translateY(0.2rem); -ms-transform: translateY(0.2rem); transform: translateY(0.2rem);}
.account__card-title span img, .account__card-title span svg {width: 90%; height: 90%; display: block; -o-object-fit: contain; object-fit: contain;}
@media (max-width: 768px) {
.account__card-title {font-size: 1.7rem; margin-bottom: 2rem; line-height: 1.4;}
}
.account__card-text {font-size: 1.4rem; color: var(--text); line-height: 1.3;}
@media (max-width: 768px) {
.account__card-text {text-align: right; width: calc(100% - 10rem); margin-left: auto;}
}
.account__card-text span {margin-left: 0.4rem;}
.account__card-result {-ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 1rem; margin-left: auto;}
@media (max-width: 768px) {
.account__card-result {margin-top: 1rem; row-gap: 0.5rem; width: calc(100% - 10rem); margin-left: auto;}
}
.account__card-status {font-size: 1.4rem; color: var(--text); line-height: 1.3; text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.6rem; -moz-column-gap: 0.6rem; column-gap: 0.6rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}
.account__card-status::before {content: ""; width: 0.7rem; height: 0.7rem; border-radius: 10rem; background: transparent;}
.account__card-status_paid::before {background: #14AE5C;}
.account__card-status_waiting::before {background: #E8B931;}
.account__card-status_end::before {background: #B3B3B3;}
.account__card-status_cancel::before {background: #ff2222;}
.account__card-status span {margin-left: 0.4rem;}
.account__card-sum {font-size: 2.4rem; font-weight: 700; color: var(--text); line-height: 1.3; text-align: right;}
.account__card-date {min-width: 7.5rem; font-size: 2rem; color: var(--text); font-weight: 700; text-align: center;}
@media (max-width: 768px) {
.account__card-date {/* display: flex; column-gap: rem(10); align-items: center; margin-bottom: rem(10); width: 100%; */ font-size: 1.8rem; position: absolute; bottom: 1.5rem; left: 1.5rem;}
}
.account__card-date span {display: block; width: 100%; padding: 0.2rem 0.5rem; font-size: 1.8rem; font-weight: 400; background: var(--whiteOpacity); border-radius: 0.6rem; margin-top: 0.5rem;}
@media (max-width: 768px) {
.account__card-date span {font-size: 1.6rem;}
}
.account__card-stadium {font-size: 1.4rem; line-height: 1.3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 0.6rem; -moz-column-gap: 0.6rem; column-gap: 0.6rem; color: var(--text);}
@media (max-width: 768px) {
.account__card-stadium {width: 100%; margin-top: -1rem;}
}
.account__card-stadium svg {width: 1.5rem; height: 1.5rem;}
.account__card-info {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 3rem; -moz-column-gap: 3rem; column-gap: 3rem; margin-right: auto; -ms-flex-negative: 0; flex-shrink: 0;}
@media (max-width: 768px) {
.account__card-info {-webkit-column-gap: 1.53rem; -moz-column-gap: 1.53rem; column-gap: 1.53rem; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 2rem; width: 100%; backdrop-filter: blur(var(--blur)); margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); padding: 1rem 1.5rem; border-top: 0.1rem solid var(--border); border-bottom: 0.1rem solid var(--border);}
}
.account__card-info-item {font-size: 1.4rem; line-height: 1.3; color: var(--text); min-width: 7rem; text-align: center;}
.account__card-info-item span {display: block; margin-top: 0.5rem; font-size: 1.8rem; font-weight: 700;}
.modal__inner_ask {min-height: 11rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.modal__inner_ask .modal__title {text-align: center; font-size: 1.6rem; line-height: 1.5; position: relative; margin-top: 1.5rem;}
.modal__inner_ask .modal__title::before {content: ""; position: absolute; width: 100%; height: 0.1rem; background: var(--border); left: 0; top: -2.5rem;}
.modal__buttons {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.modal__button {width: 15rem; height: 5rem; padding: 0 1rem;}
.modal__club {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; margin-bottom: 1.5rem;}
.modal__club-logo {width: auto; max-width: 6rem; max-height: 6rem; display: block; -ms-flex-negative: 0; flex-shrink: 0;}
.modal__club-logo svg, .modal__club-logo img {width: auto; height: auto; max-height: 6rem; display: block;}
.modal__club-name {font-size: 2.4rem; font-weight: 600; color: var(--white); line-height: 1; padding-right: 2rem;}
@media (max-width: 768px) {
.modal__club-name {font-size: 2.1rem;}
}
.modal__club-name span {font-size: 1.7rem; opacity: 0.7; display: block; margin-top: 0.5rem; margin-bottom: 0.5rem;}
.modal__fnl-logo {font-size: 1.9rem; font-weight: 600; color: var(--text); line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 1rem; margin-top: 2rem;}
.modal__fnl-logo img, .modal__fnl-logo svg {width: 14.2rem; height: 3.7rem; display: block;}
.modal__fnl-logo span {margin-right: 1.2rem; padding-right: 1.2rem; border-right: 0.1rem solid var(--border); line-height: 3.7rem; text-transform: uppercase;}
.modal__title_center {text-align: center;}
.modal__text {color: var(--text); font-size: 1.4rem; line-height: 1.4; margin-bottom: 1rem;}
.modal__text_center {text-align: center;}
.modal__error {font-size: 1.2rem; color: red; line-height: 1.4; text-align: left; margin-bottom: 0.5rem; display: none;}
.modal__error.active {display: block;}
.modal__ticket {width: 16.6rem; padding: 0 1.5rem;}
@media (max-width: 768px) {
.modal__ticket {width: 15.2rem; padding: 0 1rem;}
}
.modal__ticket img, .modal__ticket svg {width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; will-change: transform; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center;}
@media (min-width: 769px) {
.modal__ticket_kassir:hover {background: #ffc626;}
.modal__ticket_kassir:hover img, .modal__ticket_kassir:hover svg {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
.modal__ticket_afisha:hover {background: #fff501;}
.modal__ticket_afisha:hover img, .modal__ticket_afisha:hover svg {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);}
}
.modal__top-logo {width: 5rem; height: 5rem; display: block; margin: 0 auto; margin-bottom: 0rem; position: absolute; left: 1rem; top: 1rem;}
.modal__top-logo img, .modal__top-logo svg {width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain;}

/* позиция «глаза» показа пароля внутри полей кабинета — общая для всех клубов с account */
.modal__block {
    position: relative;
}

.modal__block-icon {
    position: absolute;
    top: 3.3rem;
    right: 2rem;
    cursor: pointer;
}

.js-account-form-pass .modal__block-icon {
    display: none;
}

.js-account-form-pass.edit .modal__block-icon {
    display: block;
}

.account__form-block .modal__block-icon {
    top: 3rem;
    right: 1rem;
}

.header-mobile__account.btn {
    position: absolute;
    top: 1rem;
    right: 7.8rem;
}