/* Additions for the Laravel app on top of the template's compiled main.css. */

/* The heading font Buyan has Cyrillic and plain Latin only: accented letters (á, ñ, ł…), ¿ ¡ « » — € of the
   translated site come from Bebas Neue (OFL), which has the same proportions. Only the missing characters. */
@font-face {
    font-family: Buyan;
    font-weight: 700;
    font-display: swap;
    size-adjust: 103%;
    src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
    unicode-range: U+A1-AC, U+AE-C3, U+C5-C6, U+C8-D5, U+D7-DB, U+DD-E3, U+E5-E6, U+E8-F5, U+F7-FB, U+FD-FF, U+2010-201B, U+201E-203A, U+20AC, U+2122;
}

@font-face {
    font-family: Buyan;
    font-weight: 700;
    font-display: swap;
    size-adjust: 103%;
    src: url("../fonts/bebas-neue-latin-ext.woff2") format("woff2");
    unicode-range: U+100-11D, U+120-12F, U+132-15D, U+160-24F;
}

/* Chinese (fonts in fonts-zh.css): ideographs fill the whole line height, unlike Latin capitals, so the
   tight 85% line height of the big titles makes lines touch. */
html:lang(zh) .section_title,
html:lang(zh) .hero .hero_row .hero_content h1 {
    line-height: 1.1;
    letter-spacing: 0.03em;
}

/* Theme colours (set from admin «Внешний вид»): defaults match the template. */
:root {
    --cg-accent: #A777FF;
    --cg-button: #FCED27;
    --cg-success: #00E5A0;
    --cg-danger: #FF5970;
}

/* Inline SVG icons carry template colours as attributes; CSS overrides presentation attributes. */
[fill="#A777FF" i] { fill: var(--cg-accent); }
[stroke="#A777FF" i] { stroke: var(--cg-accent); }
[stop-color="#A777FF" i] { stop-color: var(--cg-accent); }
[fill="#FCED27" i] { fill: var(--cg-button); }
[stroke="#FCED27" i] { stroke: var(--cg-button); }
[stop-color="#FCED27" i] { stop-color: var(--cg-button); }
[fill="#00E5A0" i] { fill: var(--cg-success); }
[fill="#FF5970" i] { fill: var(--cg-danger); }

/*
 * Catalog city / district picker (x-filter-select). Mirrors the template's booking-form
 * dropdowns (.club .right_item .custom_select / .select_options) so all site selects look alike.
 */
.catalog .row .filter_item .cg_select {
    position: relative;
    margin-bottom: 16px;
}

.catalog .row .filter_item .cg_select .cg_select_current {
    position: relative;
    z-index: 2;
    height: 44px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 10px;
    background: rgba(255, 255, 255, 0.11);
    border: 0;
    border-radius: 0;
    outline: none;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 15px;
    font-weight: 400;
    line-height: 134%;
    text-align: left;
    cursor: pointer;
}

.catalog .row .filter_item .cg_select .cg_select_current:focus-visible {
    box-shadow: inset 0 0 0 1px var(--cg-accent);
}

.cg_select .cg_select_current span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cg_select .cg_select_current .cg_select_placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.cg_select .cg_select_current svg {
    flex-shrink: 0;
}

.cg_select.open .cg_select_current svg {
    transform: rotate(180deg);
}

.cg_select .cg_select_dropdown {
    position: absolute;
    top: calc(100% - 5px);
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    padding-top: 10px;
    background: #24202d;
    z-index: 10;
}

.cg_select.open .cg_select_dropdown {
    display: flex;
}

.cg_select .cg_select_group {
    padding: 10px 15px 4px;
    color: rgba(255, 255, 255, 0.33);
    font-family: TacticSans-Med;
    font-size: 12px;
    line-height: 134%;
    text-transform: uppercase;
}

.cg_select .cg_select_option {
    min-height: 42px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    padding: 8px 15px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
}

.cg_select .cg_select_option:hover,
.cg_select .cg_select_option:focus-visible {
    background: rgba(167, 119, 255, 0.15);
    outline: none;
}

.cg_select .cg_select_option.active {
    background: rgba(167, 119, 255, 0.2);
    color: var(--cg-accent);
}

/* =========================================================
   Owner cabinet additions
   ========================================================= */

.cabinet_flash.error {
    border-color: var(--cg-danger);
    background: rgba(255, 77, 77, 0.08);
    color: var(--cg-danger);
}

.billing_section > .cabinet_flash {
    margin: 0 0 18px;
}

.cabinet_flash {
    margin: 18px 0 0;
    padding: 14px 18px;
    border: 1px solid var(--cg-success);
    background: rgba(0, 229, 160, 0.1);
    color: var(--cg-success);
    font-family: TacticSans-Med;
    font-size: 14px;
    line-height: 134%;
}

.cabinet_empty {
    padding: 28px 0;
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 14px;
    line-height: 150%;
}

.cabinet_empty a {
    color: var(--cg-accent);
    text-decoration: underline;
}

.cabinet_muted {
    color: rgba(255, 255, 255, 0.3);
}

.cabinet .item_up_number.trend_down span {
    color: var(--cg-danger) !important;
}

/* club status next to the club name in "Мои клубы" */
.club_status_badge {
    display: inline-flex;
    align-items: center;
    height: 26px;
    margin-left: 12px;
    padding: 0 12px;
    border-radius: 26px;
    font-family: TacticSans-Med;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}

.club_status_badge.pending {
    border: 1px solid #534E07;
    background: rgba(252, 237, 39, 0.08);
    color: var(--cg-button);
}

.club_status_badge.rejected {
    border: 1px solid var(--cg-danger);
    background: rgba(255, 89, 112, 0.13);
    color: var(--cg-danger);
}

/* overview seat map: one block per club, switched by .place_name */
.cabinet .right_place .seat_map {
    display: none;
}

.cabinet .right_place .seat_map.active {
    display: block;
}

.cabinet .right_place .seat_map .how_much_number {
    margin-top: 16px;
}

/* clickable PCs in "Мои клубы" */
.cabinet .pc_link {
    display: block;
    border-radius: 7px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cabinet .pc_link:hover,
.cabinet .pc_link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--cg-accent);
    outline: none;
}

.cabinet .date_numbers .cabinet_empty {
    grid-column: 1 / -1;
    padding: 6px 0;
}

/* booking actions (complete / cancel) */
.booking_actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking_actions form {
    margin: 0;
}

.booking_actions button {
    cursor: pointer;
}

.booking_actions_mobile {
    gap: 10px;
    margin-top: 12px;
}

.booking_actions_mobile form {
    flex: 1;
}

.cabinet .booking_actions_mobile .delete_btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    font-family: TacticSans-Med;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* «Завершить» — like the active status, «Отменить» — like the cancelled one */
.cabinet .booking_actions_mobile form:first-child .delete_btn {
    border: 1px solid var(--cg-success);
    background: rgba(0, 229, 160, 0.1);
    color: var(--cg-success);
}

.cabinet .booking_actions_mobile form:last-child .delete_btn {
    border: 1px solid var(--cg-danger);
    background: rgba(255, 89, 112, 0.1);
    color: var(--cg-danger);
}

/* the template hides section titles in settings on phones; with two forms they are needed */
@media (max-width: 966px) {
    .cabinet .little_sections .data_section.settings .little_section_title {
        display: block;
        margin: 6px 0 14px;
    }

    .cabinet .verifacation_time .password_form {
        margin-top: 34px;
    }
}

/* review already reported */
.cabinet .little_sections .data_section.game_club_comment .response_row .fair_btn.fair_btn_sent {
    opacity: 0.55;
    cursor: default;
}

/* hints under fields */
.input_hint {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    line-height: 1.3;
}

/* template modal select reused inside cabinet page forms (verification) */
.cabinet .data_section .item_select {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.register_modal.adding_pc .item_select > span {
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 14px;
}

/* In page forms the select sits in a .row next to .item_inputs: same width, label and field look. */
.cabinet .little_sections .data_section.verifacation_time .row .item_select {
    width: calc(50% - 7px);
    gap: 4px;
}

.cabinet .little_sections .data_section.verifacation_time .item_select > span {
    color: rgba(255, 255, 255, 0.41);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 134%;
}

@media (max-width: 966px) {
    .cabinet .little_sections .data_section.verifacation_time .row .item_select {
        width: 100%;
    }
}

.cabinet .data_section .item_select .select_zona {
    position: relative;
    width: 100%;
    height: 42px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    border: 2px solid #2C2C39;
    background: #1A1A28;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 15px;
    cursor: pointer;
}

.cabinet .data_section .item_select .select_zona svg {
    transition: 0.3s;
}

.cabinet .data_section .item_select .select_zona.open svg {
    transform: rotate(180deg);
}

.cabinet .data_section .item_select .zona_dropdown {
    display: none;
    position: absolute;
    z-index: 10;
    top: calc(100% + 5px);
    left: -2px;
    right: -2px;
    max-height: 260px;
    overflow-y: auto;
    padding: 5px;
    border-radius: 6px;
    border: 2px solid #2C2C39;
    background: #1A1A28;
}

.cabinet .data_section .item_select .select_zona.open .zona_dropdown,
.register_modal.adding_pc .item_select .select_zona.open .zona_dropdown {
    display: block;
}

.cabinet .data_section .item_select .zona_option {
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.cabinet .data_section .item_select .zona_option:hover {
    background: #2C2C39;
}

.register_modal.adding_pc .item_select .zona_dropdown {
    max-height: 240px;
    overflow-y: auto;
}

.cabinet .verifacation_time .password_form {
    margin-top: 40px;
}

/* Cabinet form buttons («Сохранить», «Сменить пароль», «Пройти проверку»): same look as the site's
   purple buttons (catalog «Применить фильтр»); the template rule leaves <button> at its browser size. */
.cabinet .little_sections .data_section.verifacation_time .checking_btn {
    width: auto;
    min-width: 240px;
    height: 47px;
    padding: 0 40px;
    border: none;
    border-radius: 1px;
    background: var(--cg-accent);
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 15px;
    line-height: 87%;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cabinet .little_sections .data_section.verifacation_time .checking_btn:hover {
    background: #5E4096;
}

.cabinet .little_sections .data_section.verifacation_time .checking_btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 966px) {
    .cabinet .little_sections .data_section.verifacation_time .checking_btn {
        width: 100%;
        min-width: 0;
    }
}

/* Cabinet modals (zone / PC / complaint): the template only caps max-width, so the box
   shrank to its content and the 3-column fields became ~100px wide. */
.register_modal.adding_pc {
    width: calc(100% - 32px);
    flex-wrap: wrap;
    align-content: flex-start;
}

/* the delete form goes under the main form, not next to it */
.register_modal.adding_pc > .modal_content {
    flex: 0 0 100%;
}

.register_modal.adding_pc .modal_content .row .item_select {
    width: calc(33.3333333333% - 5px);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.register_modal.adding_pc .modal_content .row .item_select > span {
    color: rgba(255, 255, 255, 0.41);
    font-size: 13px;
    line-height: 134%;
}

.register_modal.adding_pc .modal_content .first_row .item_select {
    width: calc(50% - 9px);
}

.register_modal.adding_pc .item_select .select_zona {
    width: 100%;
    cursor: pointer;
}

.register_modal.adding_pc .item_select .selected_zona {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    font-size: 15px;
}

.register_modal.adding_pc .modal_content .half_row {
    justify-content: flex-start;
    gap: 7px;
}

.register_modal.adding_pc .modal_content .half_row > [data-create-only] {
    width: calc(33.3333333333% - 5px);
}

.register_modal.adding_pc .modal_content .half_row > [data-create-only] .item_inputs {
    width: 100%;
}

@media (max-width: 966px) {
    .register_modal.adding_pc {
        width: 100%;
    }

    .register_modal.adding_pc .modal_content .row .item_select,
    .register_modal.adding_pc .modal_content .first_row .item_select,
    .register_modal.adding_pc .modal_content .half_row > [data-create-only] {
        width: 100%;
    }
}

/* Zone modal is a single column in the template; the type select and the "create PCs" field follow it */
.register_modal.add_new_zone_pc .modal_content .row .item_select {
    width: 100%;
}

.register_modal.add_new_zone_pc .modal_content .row.half_row {
    gap: 10px;
    justify-content: space-between;
}

.register_modal.add_new_zone_pc .modal_content .half_row > [data-create-only] {
    width: calc(50% - 5px);
}

@media (max-width: 966px) {
    .register_modal.add_new_zone_pc .modal_content .half_row > [data-create-only] {
        width: 100%;
    }
}

/* "Удалить" under zone / PC modals (the template hides .cancel_btn on desktop) */
.register_modal .modal_delete {
    margin-top: 0;
    padding-top: 0;
}

.register_modal.adding_pc .modal_content .delete_record_btn,
.register_modal .modal_delete .delete_record_btn {
    display: flex;
    width: 100%;
    margin-top: 8px;
    background: rgba(255, 89, 112, 0.1);
    border: 1px solid var(--cg-danger) !important;
    color: var(--cg-danger) !important;
    cursor: pointer;
}

/* seat map club switcher: keep names on one line */
.cabinet .right_place .data_place {
    flex-wrap: wrap;
    gap: 8px 18px;
}

.cabinet .right_place .data_place .place_name {
    white-space: nowrap;
}

/* «Offline / Ремонт» is red in the template; nothing offline is good news */
.cabinet .item_statistics .stat_item .item_bottom .item_up_number.all_ok span {
    color: var(--cg-success) !important;
}

/* Content pages (/page/{slug}) */
.content_page {
    position: relative;
    padding: 150px 0 80px;
}

.content_page .section_title {
    margin: 20px 0 40px;
}

.page_content {
    max-width: 820px;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.page_content h2,
.page_content h3 {
    margin: 32px 0 12px;
    color: #fff;
    line-height: 1.3;
}

.page_content p,
.page_content ul,
.page_content ol,
.page_content blockquote {
    margin-bottom: 16px;
}

.page_content ul li {
    list-style: disc;
    margin-left: 20px;
}

.page_content ol li {
    list-style: decimal;
    margin-left: 20px;
}

.page_content a {
    color: var(--cg-accent);
    text-decoration: underline;
}

.page_content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.page_content blockquote {
    padding-left: 16px;
    border-left: 3px solid var(--cg-accent);
}

/* =========================================================
   Cabinet «Оплата» (paid placement)
   ========================================================= */

.cabinet .billing_section {
    margin-top: 37px;
    margin-bottom: 120px;
}

.cabinet .billing_section .mobile_title {
    display: none;
}

.billing_club {
    margin-bottom: 28px;
    padding: 30px 36px 34px;
    border: 2px solid #2C2C39;
    border-radius: 7px;
    background: #13131E;
}

.billing_club_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.billing_club_head .item_title {
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 18px;
    line-height: 134%;
}

.billing_club_note {
    margin-top: 6px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 150%;
}

.placement_badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 26px;
    font-family: TacticSans-Med;
    font-size: 12px;
    white-space: nowrap;
}

.placement_badge.active {
    border: 1px solid var(--cg-success);
    background: rgba(0, 229, 160, 0.13);
    color: var(--cg-success);
}

.placement_badge.grace {
    border: 1px solid #534E07;
    background: rgba(252, 237, 39, 0.08);
    color: var(--cg-button);
}

.placement_badge.expired,
.placement_badge.none {
    border: 1px solid var(--cg-danger);
    background: rgba(255, 89, 112, 0.13);
    color: var(--cg-danger);
}

.billing_pending {
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid #534E07;
    border-radius: 4px;
    background: rgba(252, 237, 39, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 150%;
}

.billing_pending a {
    margin-left: 6px;
    color: var(--cg-button);
    text-decoration: underline;
}

.plan_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.plan_card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    border: 2px solid #2C2C39;
    border-radius: 7px;
    background: #1A1A28;
}

.plan_card.featured {
    border-color: var(--cg-accent);
    box-shadow: 0 0 0 1px rgba(167, 119, 255, 0.25), 0 12px 32px rgba(103, 58, 183, 0.18);
}

.plan_badge {
    position: absolute;
    top: -12px;
    left: 22px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--cg-accent);
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plan_name {
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 16px;
}

.plan_price {
    margin-top: 12px;
    color: var(--cg-accent);
    font-family: TacticSansExd-Bld, TacticSans-Med;
    font-size: 30px;
    line-height: 1.1;
}

.plan_price span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-family: TacticSans-Med;
    font-size: 13px;
}

/* Paid clubs: plans are folded under "Продлить размещение". */
.plan_toggle > summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    border: 2px solid var(--cg-accent);
    border-radius: 1px;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    transition: background 0.3s ease;
}

.plan_toggle > summary::-webkit-details-marker {
    display: none;
}

.plan_toggle > summary::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.plan_toggle[open] > summary::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.plan_toggle > summary:hover {
    background: rgba(167, 119, 255, 0.15);
}

.plan_toggle[open] > summary {
    margin-bottom: 26px;
}

.plan_monthly {
    margin-top: 4px;
    color: var(--cg-success);
    font-family: TacticSans-Med;
    font-size: 12px;
}

.plan_description {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 150%;
}

.plan_features {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.plan_features li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.8);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 140%;
}

.plan_features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--cg-accent);
}

.plan_button {
    margin-top: auto;
    height: 46px;
    border: none;
    border-radius: 1px;
    background: var(--cg-accent);
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.plan_features + .plan_button,
.plan_description + .plan_button,
.plan_monthly + .plan_button,
.plan_price + .plan_button {
    margin-top: 22px;
}

.plan_button:hover {
    background: #5E4096;
}

.plan_card.featured .plan_button {
    background: var(--cg-button);
    color: #13131E;
}

.plan_card.featured .plan_button:hover {
    background: #e6d61d;
}

.billing_invoices {
    margin-top: 40px;
}

.billing_invoices .little_section_title,
.billing_help .little_section_title {
    margin-bottom: 16px;
}

.invoice_table .club_table_row {
    grid-template-columns: 1.3fr 1.2fr 1.2fr 0.7fr 1fr 1fr;
}

.invoice_table .club_table_row > div:first-child {
    flex-direction: column;
    align-items: flex-start;
}

.invoice_table .club_table_status {
    white-space: nowrap;
}

.invoice_date {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.invoice_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.invoice_actions form {
    margin: 0;
}

.invoice_link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cg-accent);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.invoice_link.danger {
    color: var(--cg-danger);
}

.club_table_status.pending {
    border: 1px solid #534E07;
    background: rgba(252, 237, 39, 0.08);
    color: var(--cg-button);
}

.billing_help {
    margin-top: 40px;
    padding: 24px 28px;
    border: 2px solid #2C2C39;
    border-radius: 7px;
    background: #13131E;
}

.billing_help p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 160%;
}

.cabinet .billing_required .item_name {
    color: var(--cg-danger) !important;
}

@media (max-width: 966px) {
    .cabinet .billing_section {
        margin-top: 24px;
    }

    .cabinet .billing_section .mobile_title {
        display: flex;
        margin-bottom: 17px;
        color: #fff;
        font-family: TacticSans-Med;
        font-size: 20px;
    }

    .billing_club {
        padding: 22px 18px;
    }

    .billing_club_head {
        flex-direction: column;
    }

    /* main.css hides .club_table on mobile (bookings have their own cards); invoices reuse it as cards. */
    .invoice_table {
        display: block;
    }

    .invoice_table .club_table_row {
        grid-template-columns: 1fr auto;
        gap: 10px 14px;
        margin-bottom: 10px;
        padding: 16px;
        border: 1px solid #2C2C39;
        border-radius: 7px;
        background: #1A1A28;
    }

    .invoice_table .club_table_row > div {
        font-size: 14px;
    }

    .invoice_table .club_table_head {
        display: none;
    }
}

/* Error pages (404, 403, 419, 429, 500) */
.error_page {
    min-height: 70vh;
}

.error_code {
    font-family: Buyan, TacticSansExd-Bld, sans-serif;
    font-size: clamp(90px, 18vw, 180px);
    line-height: 1;
    color: var(--cg-accent);
    opacity: 0.9;
}

.error_page .section_title {
    margin: 10px 0 18px;
}

.error_page .section_description,
.maintenance_page .section_description {
    max-width: 560px;
}

.error_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.maintenance_page .error_actions {
    justify-content: center;
}

.error_actions .yellow_btn {
    min-width: 180px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Maintenance page */
.maintenance_page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
}

.maintenance_page .site_logo {
    display: inline-block;
    margin-bottom: 24px;
}

.maintenance_page .section_description {
    max-width: 520px;
    margin: 0 auto;
}

.input_error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.3;
    color: #ff6b6b;
}

.what_you + .input_error {
    margin: -8px 0 12px;
    text-align: center;
}

.item_star img.star_empty {
    opacity: 0.25;
}

.catalog_empty {
    padding: 40px 0;
    text-align: center;
}

.reg_log_btns .logout_form {
    display: contents;
}

.reg_log_btns button.yellow_btn {
    border: 0;
    cursor: pointer;
    font: inherit;
}


.custom_checkbox input:disabled + .checkbox_icon,
.custom_checkbox input:disabled ~ .checkbox_text {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Club page: booking button is a phone link until online booking exists */
.club_right a.yellow_btn.booking_call {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.club_right .yellow_btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* Club page: amenity line icons */
.club .comfort_row li {
    gap: 9px;
}

.club .comfort_row .amenity_icon {
    flex: 0 0 18px;
    color: var(--cg-accent);
}

/* Club page booking form: every field stays on one line */
.club .row .right_item .select_time .custom_select {
    gap: 12px;
}

.club .row .right_item .select_time .custom_select span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.club .row .right_item .select_time .custom_select svg {
    flex: 0 0 auto;
}

.club .row .right_item .select_time .select_options .select_option {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

.club .row .right_item .select_time .select_options .select_option small {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 130%;
}

.club .row .right_item .select_time .select_options .select_option.active small {
    color: rgba(167, 119, 255, 0.75);
}

.club .row .right_item .select_time .select_options .select_option {
    flex-shrink: 0;
    height: auto;
    min-height: 42px;
    padding: 9px 15px;
}

.club .row .right_item .select_time .select_options .select_option small {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =========================================================
   Player account (/account)
   ========================================================= */
.account .data_section {
    flex-direction: column;
}

.account_top {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.account_balance,
.account_topup,
.account_topups {
    padding: 26px 28px;
    border: 2px solid #2C2C39;
    border-radius: 7px;
    background: #1A1A28;
}

.account_balance {
    position: relative;
    overflow: hidden;
    border-color: var(--cg-accent);
    background: linear-gradient(120deg, rgba(167, 119, 255, 0.18), rgba(26, 26, 40, 0.9) 60%);
}

.account_balance_label {
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 14px;
}

.account_balance_value {
    margin-top: 6px;
    color: #fff;
    font-family: TacticSansExd-Bld, TacticSans-Med;
    font-size: 40px;
    line-height: 1.1;
}

.account_balance_note,
.account_hint {
    margin-top: 10px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 150%;
}

.account_balance_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 20px;
}

.account_balance_actions .yellow_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    height: 46px;
    padding: 0 24px;
    text-decoration: none;
}

.account_link_btn {
    color: var(--cg-accent);
    font-family: TacticSans-Med;
    font-size: 14px;
    text-decoration: underline;
}

.account .item_statistics.account_stats {
    margin: 0;
}

.account_section_title {
    margin: 34px 0 14px;
}

/* bookings */
.account_booking,
.account_topup_item,
.account_transaction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 16px 20px;
    border: 1px solid #2C2C39;
    border-radius: 7px;
    background: #1A1A28;
}

.account_booking + .account_booking,
.account_topup_item + .account_topup_item,
.account_transaction + .account_transaction {
    margin-top: 8px;
}

.account_booking_club {
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 16px;
    text-decoration: none;
}

.account_booking_club:hover {
    color: var(--cg-accent);
}

.account_booking_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-family: TacticSans-Med;
    font-size: 13px;
}

.account_booking_side,
.account_topup_side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
}

.account_booking_side form {
    margin: 0;
}

.account_booking_price {
    color: var(--cg-success);
    font-family: TacticSans-Med;
    font-size: 15px;
    white-space: nowrap;
}

.account_orders .action_time {
    margin-bottom: 16px;
}

/* balance */
.account_wallet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.account_topup .little_section_title {
    margin: 22px 0 12px;
}

.account_topup_row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.account_topup_row .item_inputs {
    flex: 1 1 auto;
    margin: 0;
}

.account_topup_row .yellow_btn {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 22px;
    border: none;
    cursor: pointer;
}

.account_quick_amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.account_quick_amounts .action_btn {
    cursor: pointer;
}

.account_topups .little_section_title {
    margin-bottom: 14px;
}

.account_topups .account_topup_item {
    background: rgba(255, 255, 255, 0.03);
}

.account_topup_number,
.account_transaction_type {
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 15px;
}

.account_transaction_side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.account_amount {
    font-family: TacticSans-Med;
    font-size: 16px;
}

.account_amount.plus {
    color: var(--cg-success);
}

.account_amount.minus {
    color: #fff;
}

.account_transactions + nav,
.account_transactions + .pagination {
    margin-top: 16px;
}

/* reviews */
.account_review_prompts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
}

.account_review_prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px dashed rgba(167, 119, 255, 0.5);
    border-radius: 7px;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 14px;
}

.account_review_prompt .action_btn {
    cursor: pointer;
    white-space: nowrap;
}

.account_review {
    padding: 18px 20px;
    border: 1px solid #2C2C39;
    border-radius: 7px;
    background: #1A1A28;
}

.account_review + .account_review {
    margin-top: 8px;
}

.account_review_head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.account_review_body {
    margin: 10px 0 12px;
    color: rgba(255, 255, 255, 0.8);
    font-family: TacticSans-Med;
    font-size: 14px;
    line-height: 150%;
    white-space: pre-line;
}

.review_stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.review_stars input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.review_stars label {
    cursor: pointer;
}

.review_stars svg {
    fill: rgba(255, 255, 255, 0.15);
    transition: fill 0.15s ease;
}

.review_stars input:checked ~ label svg,
.review_stars label:hover svg,
.review_stars label:hover ~ label svg {
    fill: var(--cg-button);
}

.review_stars input:focus-visible + label {
    outline: 2px solid var(--cg-accent);
    outline-offset: 2px;
}

/* visited clubs */
.account_club_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.account_club {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #2C2C39;
    border-radius: 7px;
    background: #1A1A28;
}

.account_club_img img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.account_club_body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 18px;
}

.account_club_body .invoice_actions {
    margin-top: 6px;
}

/* booking form errors on the club page */
.booking_error {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--cg-danger);
    background: rgba(255, 77, 77, 0.08);
    color: var(--cg-danger);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 145%;
}

.booking_error a,
.club_right .cancel a {
    color: var(--cg-button);
    text-decoration: underline;
}

.club_right button.yellow_btn {
    border: none;
    cursor: pointer;
}

@media (max-width: 966px) {
    .account_wallet {
        grid-template-columns: 1fr;
    }

    .account_balance,
    .account_topup,
    .account_topups {
        padding: 20px 18px;
    }

    .account_balance_value {
        font-size: 32px;
    }

    .account_booking,
    .account_topup_item {
        flex-direction: column;
        align-items: flex-start;
    }

    .account_booking_side,
    .account_topup_side {
        justify-content: flex-start;
    }

    .account_topup_row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Account: top-up field and quick amounts, styled like the cabinet forms */
.account_topup .item_inputs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account_topup .item_inputs label {
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 13px;
}

.account_topup .item_inputs input {
    height: 50px;
    padding: 0 17px;
    border: 2px solid #2C2C39;
    border-radius: 6px;
    outline: none;
    background: #13131E;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 18px;
}

.account_topup .item_inputs input:focus {
    border-color: var(--cg-accent);
}

.account_quick_amounts .action_btn {
    height: 34px;
    padding: 0 18px;
    border: none;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 13px;
    transition: background 0.3s ease;
}

.account_quick_amounts .action_btn:hover {
    background: var(--cg-accent);
}

.account_review_prompt .action_btn {
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 1px;
    background: var(--cg-accent);
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 13px;
}

.account .little_sections .data_section .mobile_title {
    display: none;
}

@media (max-width: 966px) {
    .account .little_sections .data_section .mobile_title {
        display: flex;
        margin-bottom: 17px;
        color: #fff;
        font-family: TacticSans-Med;
        font-size: 20px;
    }
}

.account_review_prompts {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* =========================================================
   Unified dropdowns — every select on the site looks like the
   home page search (.hero .select_wrap): #323351 field, chevron,
   bordered list opening 5px below with a soft shadow.
   ========================================================= */

/* field */
.catalog .row .filter_item .cg_select .cg_select_current,
.catalog .clubs_info .filter_select_rate .filter_select_current,
.club .row .right_item .select_time .custom_select,
.register_modal.adding_pc .item_select .select_zona,
.cabinet .data_section .item_select .select_zona {
    position: relative;
    height: 57px;
    padding: 0 44px 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 2px;
    background: #323351;
    backdrop-filter: blur(20px);
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.catalog .row .filter_item .cg_select .cg_select_current:hover,
.catalog .clubs_info .filter_select_rate .filter_select_current:hover,
.club .row .right_item .select_time .custom_select:hover,
.register_modal.adding_pc .item_select .select_zona:hover,
.cabinet .data_section .item_select .select_zona:hover,
.catalog .row .filter_item .cg_select.open .cg_select_current,
.catalog .clubs_info .filter_select_rate.open .filter_select_current,
.club .row .right_item .select_time.open .custom_select,
.register_modal.adding_pc .item_select .select_zona.open,
.cabinet .data_section .item_select .select_zona.open {
    border-color: rgba(167, 119, 255, 0.5);
}

.catalog .clubs_info .filter_select_rate .filter_select_current span,
.club .row .right_item .select_time .custom_select span,
.cg_select .cg_select_current span,
.select_zona .selected_zona {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cg_select .cg_select_current .cg_select_placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* chevron */
.cg_arrow {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cg_select.open .cg_arrow,
.filter_select_rate.open .cg_arrow,
.select_time.open .custom_select .cg_arrow,
.select_zona.open .cg_arrow {
    transform: rotate(180deg);
}

/* list */
.catalog .row .filter_item .cg_select .cg_select_dropdown,
.catalog .clubs_info .filter_select_rate .filter_select_dropdown,
.club .row .right_item .select_time .select_options,
.register_modal.adding_pc .item_select .zona_dropdown,
.cabinet .data_section .item_select .zona_dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: auto;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    padding: 7px 0;
    border: 1px solid rgba(167, 119, 255, 0.5);
    border-radius: 2px;
    background: #323351;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 119, 255, 0.5) transparent;
}

.catalog .clubs_info .filter_select_rate .filter_select_dropdown {
    left: auto;
    right: 0;
    width: 100%;
    min-width: 230px;
}

/* option */
.catalog .row .filter_item .cg_select .cg_select_option,
.cg_select .cg_select_option,
.catalog .clubs_info .filter_select_rate .filter_select_option,
.club .row .right_item .select_time .select_options .select_option,
.register_modal.adding_pc .item_select .zona_option,
.cabinet .data_section .item_select .zona_option {
    min-height: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cg_select .cg_select_option:hover,
.cg_select .cg_select_option:focus-visible,
.catalog .clubs_info .filter_select_rate .filter_select_option:hover,
.club .row .right_item .select_time .select_options .select_option:hover,
.register_modal.adding_pc .item_select .zona_option:hover,
.cabinet .data_section .item_select .zona_option:hover {
    background: rgba(167, 119, 255, 0.18);
}

.cg_select .cg_select_option.active,
.catalog .clubs_info .filter_select_rate .filter_select_option.active,
.club .row .right_item .select_time .select_options .select_option.active,
.register_modal.adding_pc .item_select .zona_option.active,
.cabinet .data_section .item_select .zona_option.active {
    background: rgba(167, 119, 255, 0.18);
    color: var(--cg-accent);
}

.cg_select .cg_select_group {
    padding: 12px 20px 4px;
    color: #8688B0;
}

/* sort sits in the results header: a compact width, same look */
.catalog .clubs_info .filter_select_rate {
    min-width: 230px;
}

/* in cabinet forms and modals the field matches the neighbouring inputs' height */
.register_modal.adding_pc .item_select .select_zona,
.cabinet .data_section .item_select .select_zona {
    height: 47px;
}

@media (max-width: 966px) {
    .catalog .row .filter_item .cg_select .cg_select_current,
    .catalog .clubs_info .filter_select_rate .filter_select_current,
    .club .row .right_item .select_time .custom_select {
        height: 53px;
    }

    .catalog .clubs_info .filter_select_rate {
        min-width: 0;
        width: 100%;
    }
}

/* booking card is narrow: two selects share a row */
.club .row .right_item .select_time .custom_select {
    padding: 0 36px 0 14px;
}

.club .row .right_item .select_time .custom_select span {
    font-size: 15px;
}

.club .row .right_item .select_time .select_options .select_option {
    padding: 12px 14px;
}

/* =========================================================
   Fields: square corners like the home page search, no native
   number spinners — numbers use the site stepper (− value +)
   ========================================================= */
.cabinet input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.cabinet textarea,
.register_modal input:not([type="checkbox"]):not([type="radio"]),
.register_modal textarea,
.catalog .search_item .item_input,
.club_right input:not([type="hidden"]) {
    border-radius: 2px !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.cg_stepper {
    display: flex;
    align-items: stretch;
    height: 57px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 2px;
    background: #323351;
    transition: border-color 0.2s ease;
}

.cg_stepper:focus-within,
.cg_stepper:hover {
    border-color: rgba(167, 119, 255, 0.5);
}

.cg_stepper .cg_stepper_btn {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.04);
    color: #8688B0;
    font-family: TacticSans-Med;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    user-select: none;
}

.cg_stepper .cg_stepper_btn:hover {
    background: rgba(167, 119, 255, 0.18);
    color: #fff;
}

.cg_stepper .cg_stepper_btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.account_topup .cg_stepper input,
.cg_stepper input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0 6px 0 16px;
    border: 0 !important;
    background: transparent;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 20px;
    text-align: center;
    outline: none;
}

.cg_stepper .cg_stepper_unit {
    display: flex;
    align-items: center;
    padding-right: 14px;
    color: #8688B0;
    font-family: TacticSans-Med;
    font-size: 14px;
}

.account_topup_row .yellow_btn {
    height: 57px;
}

@media (max-width: 966px) {
    .cg_stepper,
    .account_topup_row .yellow_btn {
        height: 53px;
    }
}

.account_topup_row {
    flex-direction: column;
    align-items: stretch;
}

.account_topup_row .yellow_btn {
    width: 100%;
}

/* Open select lifts above the next form blocks (file upload boxes etc.) */
.select_zona.open,
.cg_select.open,
.select_time.open,
.filter_select_rate.open {
    z-index: 60;
}

.select_zona.open,
.cg_select.open,
.select_time.open {
    position: relative;
}

/* Site scrollbar inside dropdown lists: thin accent thumb, no arrow buttons */
.zona_dropdown::-webkit-scrollbar,
.cg_select_dropdown::-webkit-scrollbar,
.select_options::-webkit-scrollbar,
.filter_select_dropdown::-webkit-scrollbar {
    width: 6px;
}

.zona_dropdown::-webkit-scrollbar-track,
.cg_select_dropdown::-webkit-scrollbar-track,
.select_options::-webkit-scrollbar-track,
.filter_select_dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.zona_dropdown::-webkit-scrollbar-thumb,
.cg_select_dropdown::-webkit-scrollbar-thumb,
.select_options::-webkit-scrollbar-thumb,
.filter_select_dropdown::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(167, 119, 255, 0.55);
}

.zona_dropdown::-webkit-scrollbar-button,
.cg_select_dropdown::-webkit-scrollbar-button,
.select_options::-webkit-scrollbar-button,
.filter_select_dropdown::-webkit-scrollbar-button {
    display: none;
    height: 0;
}

/* Long lists (opening hours) show ~6 rows, field and list share the exact width */
.register_modal.adding_pc .item_select .zona_dropdown,
.cabinet .data_section .item_select .zona_dropdown {
    left: -1px;
    right: -1px;
    width: auto;
    max-height: 264px;
}

/* Application form: even gaps between rows (the template spaced rows 5–6 for a different layout) */
.cabinet .little_sections .data_section.verifacation_time .row:nth-child(5),
.cabinet .little_sections .data_section.verifacation_time .row:nth-child(6) {
    margin-bottom: 20px;
}

/* Selects in cabinet forms and modals are exactly as tall as the inputs next to them */
.register_modal.adding_pc .item_select .select_zona,
.cabinet .data_section .item_select .select_zona {
    height: 42px;
}

@media (max-width: 966px) {
    .cabinet .little_sections .data_section.verifacation_time .row:nth-child(5),
    .cabinet .little_sections .data_section.verifacation_time .row:nth-child(6) {
        margin-bottom: 10px;
    }

    .register_modal.adding_pc .item_select .select_zona,
    .cabinet .data_section .item_select .select_zona {
        height: 47px;
    }
}

/* Chrome ignores ::-webkit-scrollbar styles while scrollbar-color is set — let the custom ones apply */
.zona_dropdown,
.cg_select_dropdown,
.select_options,
.filter_select_dropdown {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
}

@supports not selector(::-webkit-scrollbar) {
    .zona_dropdown,
    .cg_select_dropdown,
    .select_options,
    .filter_select_dropdown {
        scrollbar-width: thin !important;
        scrollbar-color: rgba(167, 119, 255, 0.55) transparent !important;
    }
}

/* Modals: dim the page behind (the template opened them over a fully bright page) */
.register_modal.active {
    box-shadow: 0 0 0 100vmax rgba(6, 4, 12, 0.72), 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Catalog filter search: same field as the selects above it */
.catalog .row .filter_item .search_item:not(.cg_select) .item_input {
    display: flex;
    align-items: stretch;
    height: 57px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 2px;
    background: #323351;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.catalog .row .filter_item .search_item:not(.cg_select) .item_input:hover,
.catalog .row .filter_item .search_item:not(.cg_select) .item_input:focus-within {
    border-color: rgba(167, 119, 255, 0.5);
}

.catalog .row .filter_item .search_item:not(.cg_select) .item_input input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 12px 0 20px;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 16px;
    outline: none;
}

.catalog .row .filter_item .search_item:not(.cg_select) .item_input input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.catalog .row .filter_item .search_item .item_input .search_button {
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s ease;
}

.catalog .row .filter_item .search_item .item_input .search_button:hover {
    background: rgba(167, 119, 255, 0.18);
}

.catalog .row .filter_item .search_item .item_input .search_button svg rect {
    display: none;
}

@media (max-width: 966px) {
    .catalog .row .filter_item .search_item:not(.cg_select) .item_input {
        height: 53px;
    }
}

/* Footer wordmark (inline SVG text, follows the site name) */
footer .item_logo .footer_wordmark {
    display: block;
    width: 100%;
    height: auto;
}

.catalog .row .filter_item .search_item .item_input .search_button {
    width: 52px;
    height: auto;
    align-self: stretch;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Pagination never runs off a phone screen */
ul.counter {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
}

@media (max-width: 966px) {
    ul.counter {
        column-gap: 6px;
    }
}

@media (max-width: 966px) {
    /* 1fr alone grows to the widest child's min-content (the stepper field) and pushed the card off-screen */
    .account_wallet {
        grid-template-columns: minmax(0, 1fr);
    }

    .account_topup,
    .account_topups,
    .account_balance {
        min-width: 0;
    }
}

/* Mobile menu close button */
.mobile_menu_close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #A777FF;
    cursor: pointer;
}

@media (max-width: 966px) {
    .mobile_menu_close {
        display: flex;
    }
}

/* =========================================================
   Design rule: no rounded corners anywhere on the site.
   Only true circles stay round: avatars and legend dots.
   ========================================================= */
*,
*::before,
*::after,
::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

.comments .comment_item .item_profile .item_img,
.comments .comment_item .item_profile .item_img img,
.response .item_response .item_profile .item_profile_img,
.response .item_response .item_profile .item_profile_img img,
.cabinet .response_row .item_response .item_profile .item_profile_img,
.cabinet .response_row .item_response .item_profile .item_profile_img img,
.cabinet .info_row .right_place .how_much_number li .circle,
.hero .avatars img,
.hero .users img {
    border-radius: 50% !important;
}

/* Sign in with Google / Facebook / X */
.social_login {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.social_login_divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    color: rgba(255, 255, 255, 0.4);
    font-family: TacticSans-Med;
    font-size: 12px;
    text-transform: uppercase;
}

.social_login_divider::before,
.social_login_divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.social_login_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 47px;
    border: 1px solid rgba(255, 255, 255, 0);
    background: #323351;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.social_login_btn:hover {
    border-color: rgba(167, 119, 255, 0.5);
    background: #3a3b5e;
}

.social_login_btn svg {
    flex: 0 0 18px;
}

/* Sign in / sign up modals grow with their content (social buttons), stay centred and scroll inside if needed */
.register_modal.sign_in,
.register_modal.sign_up {
    height: fit-content;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.register_modal.sign_in .modal_content,
.register_modal.sign_up .modal_content {
    padding-bottom: 28px;
}

.register_modal .item_action_btns .social_login {
    margin-top: 6px;
}

.geoip_credit {
    margin-left: 10px;
    opacity: 0.55;
    font-size: 0.85em;
}

/* Home search: a long "City, Country" stays on one line */
.hero .hero_actions .form_info .item_select .select_time span {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.hero .hero_actions .form_info .item_select .select_time {
    padding-right: 34px;
}

/* Home search: the city is typed, not picked from a list */
.hero .hero_actions .form_info .item_select .hero_place {
    padding-right: 12px;
    cursor: text;
    transition: border-color .2s;
}

.hero .hero_actions .form_info .item_select .hero_place:focus-within {
    border-color: var(--cg-accent);
}

.hero .hero_actions .form_info .item_select .hero_place input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #FFF;
    font: inherit;
    font-size: 17px;
    font-weight: 400;
}

.hero .hero_actions .form_info .item_select .hero_place_list a.active {
    background: rgba(167, 119, 255, 0.18);
}

.hero .hero_actions .form_info .item_select .hero_place input::placeholder {
    color: #8688B0;
    opacity: 1;
}

/* =========================================================
   Club photo gallery + full-screen viewer
   ========================================================= */
.club_gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 210px;
    gap: 8px;
}

.club_gallery_wrap {
    position: relative;
    margin: 18px 0 48px;
}

.club_gallery_item {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #1A1A28;
    cursor: zoom-in;
}

.club_gallery_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.3s ease;
}

.club_gallery_item:hover img {
    transform: scale(1.04);
    filter: brightness(1.08);
}

.club_gallery_item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(167, 119, 255, 0);
    transition: border-color 0.2s ease;
    pointer-events: none;
}

.club_gallery_item:hover::after,
.club_gallery_item:focus-visible::after {
    border-color: rgba(167, 119, 255, 0.7);
}

.club_gallery_item.main {
    grid-column: span 2;
    grid-row: span 2;
}

/* fewer photos: the tiles grow so the block stays a clean rectangle */
.club_gallery[data-count="1"] .club_gallery_item.main { grid-column: span 4; }
.club_gallery[data-count="2"] .club_gallery_item:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.club_gallery[data-count="3"] .club_gallery_item:nth-child(n+2) { grid-column: span 2; }
.club_gallery[data-count="4"] .club_gallery_item:nth-child(2) { grid-column: span 2; }

/* more than five photos: a sideways-scrolling mosaic (big photo, then columns of two) */
.club_gallery.scrollable {
    grid-template-columns: none;
    grid-template-rows: repeat(2, 210px);
    grid-auto-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 24px) / 4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.club_gallery.scrollable::-webkit-scrollbar {
    display: none;
}

.club_gallery.scrollable .club_gallery_item {
    scroll-snap-align: start;
}

/* an odd tile left over at the end fills its whole column */
.club_gallery.scrollable .club_gallery_item:last-child:nth-child(even) {
    grid-row: span 2;
}

.club_gallery_arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 1px solid rgba(167, 119, 255, 0.5);
    background: rgba(19, 19, 30, 0.82);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.club_gallery_arrow:hover {
    background: #A777FF;
    border-color: #A777FF;
}

.club_gallery_arrow[hidden] {
    display: none;
}

.club_gallery_arrow.prev { left: 12px; }
.club_gallery_arrow.next { right: 12px; }

@media (max-width: 966px) {
    .club_gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 130px;
        gap: 6px;
    }

    .club_gallery_wrap {
        margin-bottom: 34px;
    }

    /* phones: the big photo plus a peek of the next column invites a swipe */
    .club_gallery.scrollable {
        grid-template-columns: none;
        grid-template-rows: repeat(2, 130px);
        grid-auto-columns: 42%;
    }

    .club_gallery_arrow {
        display: none;
    }

    .club_gallery .club_gallery_item.main,
    .club_gallery[data-count="1"] .club_gallery_item.main {
        grid-column: span 2;
        grid-row: span 2;
    }

    .club_gallery[data-count="2"] .club_gallery_item:nth-child(2),
    .club_gallery[data-count="3"] .club_gallery_item:nth-child(n+2),
    .club_gallery[data-count="4"] .club_gallery_item:nth-child(2) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .club_gallery[data-count="2"] .club_gallery_item:nth-child(2),
    .club_gallery[data-count="4"] .club_gallery_item:nth-child(4) {
        grid-column: span 2;
    }
}

/* viewer */
.gallery_viewer {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    flex-direction: column;
    background: #08060e;
}

.gallery_viewer.active {
    display: flex;
}

.gallery_viewer_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-family: TacticSans-Med;
    font-size: 14px;
}

.gallery_viewer_stage {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 76px;
    touch-action: pan-y;
}

.gallery_viewer_stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

.gallery_viewer_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(50, 51, 81, 0.85);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.gallery_viewer_btn:hover {
    border-color: rgba(167, 119, 255, 0.7);
    background: rgba(167, 119, 255, 0.3);
}

.gallery_viewer_prev,
.gallery_viewer_next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.gallery_viewer_prev { left: 16px; }
.gallery_viewer_next { right: 16px; }

.gallery_viewer_thumbs {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 14px 20px 20px;
    overflow-x: auto;
}

.gallery_viewer_thumbs button {
    flex: 0 0 72px;
    height: 50px;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.gallery_viewer_thumbs button.active {
    border-color: var(--cg-accent);
    opacity: 1;
}

.gallery_viewer_thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 966px) {
    .gallery_viewer_stage { padding: 0 8px; }
    .gallery_viewer_prev, .gallery_viewer_next { display: none; }
    .gallery_viewer_thumbs button { flex-basis: 56px; height: 40px; }
}

/* =========================================================
   Location picker (header location → modal): 1 country, 2 city
   ========================================================= */
.location_header[data-city-open] {
    cursor: pointer;
}

.register_modal.city_modal {
    max-width: 500px;
}

/* desktop: as tall as its content, centred (the template stretches modals to a fixed height) */
@media (min-width: 967px) {
    .register_modal.city_modal {
        height: fit-content;
        max-height: calc(100vh - 32px);
    }
}

.city_modal .modal_content.loc {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
}

.loc_head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.loc_icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(167, 119, 255, 0.14);
    color: #A777FF;
}

.loc_head_text {
    min-width: 0;
}

.loc_title {
    color: #fff;
    font-family: TacticSansExd-Bld, TacticSans-Med;
    font-size: 22px;
    line-height: 1.15;
    text-transform: uppercase;
}

.loc_current {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.55);
    font-family: TacticSans-Med;
    font-size: 14px;
    line-height: 1.45;
}

.loc_current b {
    color: #fff;
    font-weight: 400;
}

.loc_source {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    white-space: nowrap;
}

.loc_steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
}

.loc_step {
    transition: opacity 0.2s ease;
}

.loc_step.is-disabled {
    opacity: 0.4;
}

.loc_step_label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-family: TacticSans-Med;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.loc_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #A777FF;
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
}

.loc_step.is-disabled .loc_num {
    background: rgba(255, 255, 255, 0.15);
}

.loc_select {
    position: relative;
}

.loc_select.open {
    z-index: 5;
}

.loc_select_btn {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 54px;
    padding: 0 44px 0 18px;
    border: 1px solid transparent;
    background: #323351;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.loc_select_btn:hover:not(:disabled),
.loc_select.open .loc_select_btn,
.loc_select_btn:focus-visible {
    border-color: #A777FF;
    outline: none;
}

.loc_select_btn:disabled {
    cursor: not-allowed;
}

.loc_select.open .cg_arrow {
    transform: rotate(180deg);
}

.loc_select_value {
    overflow: hidden;
    font-family: TacticSans-Med;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.loc_select_value.is-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.loc_dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    display: none;
    width: 100%;
    max-height: 264px;
    overflow-y: auto;
    padding: 6px 0;
    border: 1px solid rgba(167, 119, 255, 0.5);
    background: #323351;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 119, 255, 0.5) transparent;
}

.loc_select.open .loc_dropdown {
    display: block;
}

.loc_option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: TacticSans-Med;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.loc_option small {
    flex: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}

.loc_option:hover,
.loc_option:focus-visible {
    background: rgba(167, 119, 255, 0.18);
    outline: none;
}

.loc_option.active {
    color: #A777FF;
}

.loc_option.active small {
    color: rgba(167, 119, 255, 0.75);
}

.city_modal .loc_apply {
    width: 100%;
    height: 54px;
    margin-top: 26px;
    border: 0;
    cursor: pointer;
}

.city_modal .loc_apply:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.loc_auto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    margin-top: 16px;
    padding: 4px;
    border: 0;
    background: none;
    color: #A777FF;
    font-family: TacticSans-Med;
    font-size: 14px;
    cursor: pointer;
}

.loc_auto:hover {
    color: #fff;
}

@media (max-width: 600px) {
    .loc_title {
        font-size: 19px;
    }

    .loc_icon {
        width: 44px;
        height: 44px;
    }
}

/* =========================================================
   Catalog map: marker popup with links to the club
   ========================================================= */
.catalog_map .leaflet-popup-content-wrapper {
    border: 1px solid rgba(167, 119, 255, 0.5);
    background: #1E1E2E;
    color: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.catalog_map .leaflet-popup-tip {
    background: #1E1E2E;
}

.catalog_map .leaflet-popup-content {
    margin: 14px 16px;
}

.catalog_map .leaflet-popup-close-button {
    color: rgba(255, 255, 255, 0.6) !important;
}

.map_popup {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: TacticSans-Med;
}

.map_popup_title {
    padding-right: 14px;
    color: #fff !important;
    font-family: TacticSansExd-Bld, TacticSans-Med;
    font-size: 14px;
    text-transform: uppercase;
}

.map_popup_address,
.map_popup_meta {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.4;
}

.map_popup_actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.map_popup_actions a {
    flex: 1;
    padding: 8px 6px;
    font-size: 12px;
    text-align: center;
}

.map_popup_more {
    border: 1px solid rgba(167, 119, 255, 0.6);
    color: #fff !important;
}

.map_popup_book {
    background: #A777FF;
    color: #fff !important;
}

.map_popup_actions a:hover {
    opacity: 0.85;
}

/* links to the booking form (catalog cards, map popups) stop below the fixed header */
#booking {
    scroll-margin-top: 100px;
}

/* =========================================================
   LOGO ROBOT: the middle letter of the logo (components/logo-robot)
   Angular helmet in the colour of its letters, dark visor with glowing
   eye slits and a scanning beam, antenna "Y" with lit tips.
   ========================================================= */
.logo_robot {
    display: inline-block;
    width: 0.69em;
    height: 0.8em;
    margin: 0 0.04em;
    vertical-align: -0.02em;
    overflow: visible;
}

.logo_robot_visor {
    fill: #0C0C16;
}

.logo_robot_eye {
    fill: #FFFFFF;
    filter: drop-shadow(0 0 0.9px #FFFFFF) drop-shadow(0 0 1.6px var(--cg-accent, #A777FF));
    transform-box: fill-box;
    transform-origin: center;
    animation: logo_robot_blink 6s infinite;
}

.logo_robot_scan {
    opacity: 0;
    animation: logo_robot_scan 6s infinite;
}

.logo_robot_tip,
.logo_robot_node {
    fill: #FFFFFF;
    filter: drop-shadow(0 0 1px var(--cg-accent, #A777FF));
    transition: fill 0.2s ease, filter 0.2s ease;
}

.logo_robot_vent {
    fill: #FFFFFF;
    opacity: 0.4;
}

a:hover .logo_robot_tip,
a:hover .logo_robot_node,
a:focus-visible .logo_robot_tip {
    fill: #F5E50B;
    filter: drop-shadow(0 0 2px #F5E50B);
}

a:hover .logo_robot_vent {
    opacity: 0.85;
}

@keyframes logo_robot_blink {
    0%, 93%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.12); }
}

/* the beam sweeps the visor once every few seconds */
@keyframes logo_robot_scan {
    0%, 55% { opacity: 0; transform: translateX(0); }
    58% { opacity: 1; }
    80% { opacity: 1; transform: translateX(21px); }
    83%, 100% { opacity: 0; transform: translateX(21px); }
}

@media (prefers-reduced-motion: reduce) {
    .logo_robot_eye,
    .logo_robot_scan {
        animation: none;
    }
}

/* =========================================================
   POPULAR CLUBS: empty states (no clubs in the visitor's city / in a tab)
   ========================================================= */
.popular_empty {
    position: relative;
    z-index: 2;
    margin-top: 24px;
}

.popular_empty_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.popular_empty_btns .yellow_btn {
    min-width: 180px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.popular_empty_btns .popular_empty_outline {
    background: transparent;
    color: var(--cg-accent, #A777FF);
    border: 1px solid var(--cg-accent, #A777FF);
}

.popular_tab_empty {
    display: flex;
    align-items: center;
    min-height: 120px;
}

/* =========================================================
   Owner cabinet: support tickets (tab «Поддержка»)
   ========================================================= */

/* Eight cabinet tabs fit the container on a desktop. */
@media (min-width: 967px) {
    .cabinet .tabs {
        gap: 0 4px;
    }

    .cabinet .tabs .tab_index {
        padding: 0 10px;
        font-size: 14px;
    }
}

.tab_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    background: var(--cg-danger);
    color: #FFF;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
}

.cabinet .support_section {
    margin: 36px 0 120px;
    font-family: TacticSans-Med;
}

.cabinet .support_section .mobile_title {
    display: none;
}

/* Shared panel and form fields (also used by the partner sign-in page). */
.support_panel,
.ticket_main,
.ticket_side,
.support_history {
    border: 1px solid #2C2C39;
    background: #13131E;
}

.support_panel {
    padding: 28px 32px 32px;
}

.support_panel .item_title {
    color: #FFF;
    font-size: 20px;
    line-height: 130%;
}

.support_panel .item_description {
    margin: 6px 0 24px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    line-height: 155%;
}

.support_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.support_row > .item_select {
    min-width: 0;
}

.support_field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.support_field label,
.support_row .item_select > span,
.ticket_reply_label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.support_field input,
.support_field textarea,
.ticket_reply textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #2C2C39;
    outline: none;
    background: #0F0F18;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 14px;
    line-height: 150%;
    transition: border-color .2s, background .2s;
}

.support_field textarea,
.ticket_reply textarea {
    min-height: 110px;
    resize: vertical;
}

.support_field input:focus,
.support_field textarea:focus,
.ticket_reply textarea:focus {
    border-color: var(--cg-accent);
    background: #12121D;
}

.support_field input::placeholder,
.support_field textarea::placeholder,
.ticket_reply textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.support_field .file_upload_inner {
    height: 120px;
}

.support_submit {
    height: 46px;
    padding: 0 30px;
    border: 0;
    background: var(--cg-accent);
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 14px;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: opacity .2s;
}

.support_submit:hover {
    opacity: .85;
}

/* Status badges */
.support_status {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid currentColor;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.support_status_lg {
    padding: 7px 12px;
    font-size: 12px;
}

.support_status.new { color: #FF7A8A; background: rgba(255, 89, 112, 0.08); }
.support_status.accepted { color: #6EC1FF; background: rgba(110, 193, 255, 0.08); }
.support_status.reviewing { color: var(--cg-button); background: rgba(252, 237, 39, 0.06); }
.support_status.in-progress { color: var(--cg-accent); background: rgba(167, 119, 255, 0.1); }
.support_status.done { color: var(--cg-success); background: rgba(0, 229, 160, 0.08); }

/* List page: the new-request form and the history side by side */
.support_layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.support_history {
    padding: 22px 22px 14px;
}

.support_history_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    color: #FFF;
    font-size: 16px;
}

.support_history_count {
    min-width: 26px;
    padding: 3px 8px;
    border: 1px solid #2C2C39;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-align: center;
}

.support_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
    padding: 14px 16px 14px 18px;
    border: 1px solid #23232F;
    background: #0F0F18;
    color: #FFF;
    text-decoration: none;
    transition: border-color .2s, background .2s;
}

.support_card::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 3px;
    background: #2C2C39;
}

.support_card.status_new::before { background: #FF7A8A; }
.support_card.status_accepted::before { background: #6EC1FF; }
.support_card.status_reviewing::before { background: var(--cg-button); }
.support_card.status_in-progress::before { background: var(--cg-accent); }
.support_card.status_done::before { background: var(--cg-success); }

.support_card:hover {
    border-color: rgba(167, 119, 255, 0.5);
    background: #14141F;
}

.support_card_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.support_card_number,
.support_card_meta {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.support_card_subject {
    overflow: hidden;
    font-size: 15px;
    line-height: 135%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.support_card_news {
    align-self: flex-start;
    margin-top: 2px;
    color: var(--cg-danger);
    font-size: 12px;
}

.support_card_news::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50% !important;
    background: var(--cg-danger);
    vertical-align: 1px;
}

.support_history_empty {
    padding: 18px 0 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    line-height: 155%;
}

/* Ticket page: the conversation and a side card with the status and its steps */
.support_back {
    display: inline-flex;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
}

.support_back:hover {
    color: var(--cg-accent);
}

.ticket_view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 24px;
    align-items: start;
}

.ticket_main {
    padding: 26px 30px 28px;
}

.ticket_head {
    padding-bottom: 20px;
    border-bottom: 1px solid #23232F;
}

.ticket_number {
    color: var(--cg-accent);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.ticket_subject {
    margin: 6px 0 0;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 22px;
    font-weight: 400;
    line-height: 130%;
    word-break: break-word;
}

.ticket_thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
}

.ticket_message,
.ticket_event {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
}

.ticket_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    background: #2C2C39;
    color: #FFF;
    font-size: 14px;
}

.ticket_message.from_support .ticket_avatar {
    background: var(--cg-accent);
}

.ticket_bubble {
    max-width: 640px;
    padding: 12px 16px 14px;
    border: 1px solid #2C2C39;
    background: #1A1A28;
}

.ticket_message.from_support .ticket_bubble {
    border-color: rgba(167, 119, 255, 0.35);
    background: rgba(167, 119, 255, 0.07);
}

.ticket_author {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 6px;
}

.ticket_author strong {
    color: #FFF;
    font-size: 13px;
    font-weight: 400;
}

.ticket_time {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}

.ticket_body {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 160%;
    word-break: break-word;
}

.ticket_event {
    align-items: start;
}

.ticket_event_icon {
    justify-self: center;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50% !important;
    background: #2C2C39;
}

.ticket_event_icon.new { background: #FF7A8A; }
.ticket_event_icon.accepted { background: #6EC1FF; }
.ticket_event_icon.reviewing { background: var(--cg-button); }
.ticket_event_icon.in-progress { background: var(--cg-accent); }
.ticket_event_icon.done { background: var(--cg-success); }

.ticket_event_text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.ticket_event_note {
    flex-basis: 100%;
    max-width: 640px;
    padding: 8px 12px;
    border-left: 2px solid var(--cg-accent);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 150%;
}

.ticket_reply {
    padding-top: 22px;
    border-top: 1px solid #23232F;
}

.ticket_reply_label {
    display: block;
    margin-bottom: 8px;
}

.ticket_reply_actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.ticket_closed {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 229, 160, 0.3);
    background: rgba(0, 229, 160, 0.05);
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    line-height: 150%;
}

.ticket_closed a {
    color: var(--cg-accent);
}

.ticket_closed_icon {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50% !important;
    background: var(--cg-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0405' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.ticket_side {
    position: sticky;
    top: 90px;
    padding: 22px 22px 18px;
}

.ticket_side_block + .ticket_steps,
.ticket_steps + .ticket_details,
.ticket_details + .ticket_side_block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #23232F;
}

.ticket_side_label {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.ticket_steps {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.ticket_steps li {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}

.ticket_steps li:last-child {
    padding-bottom: 0;
}

/* The line between the dots */
.ticket_steps li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 0;
    left: 6px;
    width: 2px;
    background: #2C2C39;
}

.ticket_steps li.done:not(:last-child)::before {
    background: var(--cg-accent);
}

.ticket_step_dot {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border: 2px solid #2C2C39;
    border-radius: 50% !important;
    background: #13131E;
}

.ticket_steps li.done,
.ticket_steps li.current {
    color: #FFF;
}

.ticket_steps li.done .ticket_step_dot {
    border-color: var(--cg-accent);
    background: var(--cg-accent);
}

.ticket_steps li.current .ticket_step_dot {
    border-color: var(--cg-accent);
    box-shadow: 0 0 0 4px rgba(167, 119, 255, 0.22);
}

.ticket_steps.is_done li .ticket_step_dot {
    border-color: var(--cg-success);
    background: var(--cg-success);
}

.ticket_steps.is_done li:not(:last-child)::before {
    background: var(--cg-success);
}

.ticket_step_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket_details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.ticket_details div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ticket_details dt {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.ticket_details dd {
    margin: 0;
    color: #FFF;
    font-size: 13px;
    text-align: right;
    word-break: break-word;
}

/* Files in the conversation */
.support_files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.support_file_image {
    display: block;
    width: 120px;
    height: 90px;
    overflow: hidden;
    border: 1px solid rgba(167, 119, 255, 0.35);
    background: #0D0D16;
}

.support_file_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s;
}

.support_file_image:hover img {
    transform: scale(1.04);
}

.support_file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid #2C2C39;
    background: #0F0F18;
    color: #FFF;
    font-size: 13px;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color .2s;
}

.support_file:hover {
    border-color: var(--cg-accent);
}

.support_file_icon {
    flex: none;
    color: var(--cg-accent);
}

@media (max-width: 966px) {
    .cabinet .support_section {
        margin: 24px 0 90px;
    }

    .cabinet .support_section .mobile_title {
        display: block;
        margin-bottom: 20px;
        color: #FFF;
        font-size: 20px;
    }

    .support_layout,
    .ticket_view {
        grid-template-columns: 1fr;
    }

    /* On a phone the status card comes first. */
    .ticket_side {
        position: static;
        order: -1;
    }

    .support_panel,
    .ticket_main {
        padding: 20px 16px 22px;
    }

    .support_row {
        grid-template-columns: 1fr;
    }

    .ticket_message,
    .ticket_event {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .ticket_avatar {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* =========================================================
   Partner site (partners.plynx.pro): header, sign-in / registration, footer
   ========================================================= */
header.partner_header {
    background: rgba(13, 4, 5, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

header.partner_header .row .header_actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.partner_header_user {
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 14px;
    text-decoration: none;
}

.partner_header_logout {
    margin: 0;
}

.partner_header_logout button {
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: none;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 13px;
    cursor: pointer;
}

.partner_header_logout button:hover {
    border-color: var(--cg-accent);
}

/* The picture covers the right part of the screen; the form (left) and the caption (right) live in the site
   container, so their edges line up with the logo and the language switch at every width. */
.partner_auth {
    position: relative;
    display: flex;
    min-height: 100vh;
    overflow: hidden;
    font-family: TacticSans-Med;
}

.partner_auth_inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 48px;
    padding-top: 120px;
    padding-bottom: 64px;
}

.partner_auth_form_side {
    display: flex;
    align-items: center;
    flex: 0 1 460px;
    min-width: 0;
}

.partner_auth_panel {
    width: 100%;
}

.partner_auth_badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 10px;
    border: 1px solid rgba(167, 119, 255, 0.5);
    color: var(--cg-accent);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.partner_auth_title {
    margin: 0 0 12px;
    color: #FFF;
    font-family: Buyan;
    font-size: 56px;
    font-weight: 700;
    line-height: 0.95;
    text-transform: uppercase;
}

.partner_auth_lead {
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    line-height: 150%;
}

.partner_auth .support_field {
    max-width: none;
}

.partner_auth .support_field input {
    height: 50px;
    background: #13131E;
}

.partner_auth_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.partner_auth_remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 22px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    cursor: pointer;
}

.partner_auth_remember input {
    accent-color: var(--cg-accent);
}

.partner_auth_submit {
    width: 100%;
    height: 54px;
    border: 0;
    background: var(--cg-button);
    color: #000;
    font-family: TacticSans-Med;
    font-size: 16px;
    cursor: pointer;
    transition: opacity .2s;
}

.partner_auth_submit:hover {
    opacity: .88;
}

.partner_auth_links {
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.partner_auth_links a,
.partner_hint a {
    color: var(--cg-accent);
}

.partner_auth_visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    background: #0D0405;
}

.partner_auth_visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

/* The picture melts into the dark form side and the footer below. */
.partner_auth_visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #0D0405 0%, rgba(13, 4, 5, 0.55) 22%, rgba(13, 4, 5, 0) 48%),
        linear-gradient(0deg, #0D0405 0%, rgba(13, 4, 5, 0.65) 22%, rgba(13, 4, 5, 0) 50%);
}

.partner_hint {
    margin: 4px 0 14px;
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 140%;
    text-align: center;
}

/* Partner footer: one quiet line — copyright, documents, contacts, the public site. */
.partner_footer {
    flex: none;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #0A0A12;
    font-family: TacticSans-Med;
    font-size: 12px;
}

.partner_footer_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
}

.partner_footer_copy {
    color: rgba(255, 255, 255, 0.35);
}

.partner_footer_links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.partner_footer_links a,
.partner_footer_site {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color .2s;
}

.partner_footer_links a:hover,
.partner_footer_site:hover {
    color: var(--cg-accent);
}

/* The sign-in page fits one screen: the page column is the window height and the form area takes what the
   footer leaves (a very low window still scrolls rather than cutting the form). */
.wrapper:has(> .partner_auth) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.partner_auth {
    flex: 1 0 auto;
    min-height: 0;
}

.partner_auth_inner {
    padding-top: 92px;
    padding-bottom: 36px;
}

@media (min-width: 967px) and (max-height: 820px) {
    .partner_auth_inner {
        padding-top: 80px;
        padding-bottom: 24px;
    }

    .partner_auth_badge {
        margin-bottom: 12px;
    }

    .partner_auth_title {
        font-size: 44px;
    }

    .partner_auth_lead {
        margin-bottom: 18px;
        font-size: 14px;
    }

    .partner_auth .support_field {
        margin-bottom: 12px;
    }

    .partner_auth .support_field input {
        height: 44px;
    }

    .partner_auth_submit {
        height: 48px;
    }
}

@media (max-width: 966px) {
    .partner_header_user {
        display: none;
    }

    /* On a phone only the form: the picture would push it off the screen. */
    .partner_auth_visual {
        display: none;
    }

    .partner_auth_inner {
        flex-direction: column;
        padding-top: 88px;
        padding-bottom: 28px;
    }

    .partner_auth_form_side {
        flex-basis: auto;
    }

    .partner_auth_title {
        font-size: 36px;
    }

    .partner_auth_lead {
        margin-bottom: 20px;
    }

    .partner_auth .support_field {
        margin-bottom: 12px;
    }

    .partner_auth_pair {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .partner_footer_row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Owner cabinet: link to the club page on the public site */
.club_preview_link {
    display: inline-block;
    margin-top: 6px;
    color: var(--cg-accent);
    font-family: TacticSans-Med;
    font-size: 13px;
    text-decoration: none;
}

.club_preview_link:hover {
    text-decoration: underline;
}

/* Home hero picture (assets/img/hero_bg.webp): the full window width with the person kept on the right,
   the left side dimmed under the title and the search. */
.hero .hero_bg {
    left: 0;
    width: 100%;
    transform: none;
}

.hero .hero_bg img {
    width: 100%;
    object-position: 72% top;
}

.hero .hero_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(13, 4, 5, 0.9) 0%, rgba(13, 4, 5, 0.62) 34%, rgba(13, 4, 5, 0) 64%),
        linear-gradient(0deg, #0D0405 0%, rgba(13, 4, 5, 0) 28%);
}

@media (max-width: 966px) {
    .hero .hero_bg img.mobile_bg_hero {
        object-position: 72% 15%;
    }

    .hero .hero_bg::after {
        background: linear-gradient(0deg, #0D0405 0%, rgba(13, 4, 5, 0.6) 45%, rgba(13, 4, 5, 0.2) 100%);
    }
}

/* =========================================================
   Player account: status and cashback (pages/account/partials/cashback)
   ========================================================= */
.cashback_card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: 28px;
    margin: 28px 0 8px;
    padding: 26px 28px;
    border: 1px solid #2C2C39;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--level-color) 14%, transparent) 0%, transparent 55%),
        #13131E;
    font-family: TacticSans-Med;
}

.cashback_label {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    letter-spacing: 0.03em;
}

.cashback_level {
    color: var(--level-color);
    font-family: Buyan;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.cashback_percent {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.cashback_percent strong {
    color: #FFF;
    font-size: 22px;
    font-weight: 400;
}

.cashback_note {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 150%;
}

.cashback_note strong {
    color: var(--cg-success);
    font-weight: 400;
}

.cashback_next {
    text-transform: uppercase;
}

.cashback_bar_row + .cashback_bar_row {
    margin-top: 14px;
}

.cashback_bar_head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
}

.cashback_bar_head span:last-child {
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.cashback_bar {
    height: 6px;
    background: #23232F;
}

.cashback_bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--cg-accent), var(--level-color));
    transition: width .4s;
}

.cashback_top_note {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

.cashback_ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
}

.cashback_step {
    padding: 5px 10px;
    border: 1px solid #2C2C39;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.cashback_step span {
    color: var(--step-color);
}

.cashback_step.current {
    border-color: var(--step-color);
    background: color-mix(in srgb, var(--step-color) 12%, transparent);
    color: #FFF;
}

@media (max-width: 966px) {
    .cashback_card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 20px 16px;
    }

    .cashback_level {
        font-size: 36px;
    }
}

.club_right .booking_cashback {
    color: var(--cg-success);
}

/* =========================================================
   Player account: review modal (pages/account/review-modal) — compact, one column
   ========================================================= */
.register_modal.adding_pc.review_modal {
    max-width: 560px;
    height: fit-content;
    max-height: calc(100vh - 32px);
    padding: 32px 36px 28px;
}

.register_modal.adding_pc.review_modal .modal_content .modal_title {
    padding-right: 32px;
    font-size: 20px;
}

.register_modal.adding_pc.review_modal .modal_content .modal_description {
    margin: 8px 0 24px;
    line-height: 150%;
}

.register_modal.adding_pc.review_modal .modal_content .row {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.register_modal.adding_pc.review_modal .modal_content .row .item_inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.review_modal .item_inputs > label {
    color: rgba(255, 255, 255, 0.5);
    font-family: TacticSans-Med;
    font-size: 13px;
}

.review_modal .review_stars {
    align-self: flex-start;
    gap: 6px;
}

.review_modal .review_stars svg {
    width: 32px;
    height: 32px;
}

.review_modal textarea {
    width: 100%;
    min-height: 140px;
    padding: 12px 16px;
    border: 1px solid #2C2C39;
    outline: none;
    background: #0F0F18;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 14px;
    line-height: 155%;
    resize: vertical;
    transition: border-color .2s;
}

.review_modal textarea:focus {
    border-color: var(--cg-accent);
}

.review_modal textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.review_hint {
    color: rgba(255, 255, 255, 0.35);
    font-family: TacticSans-Med;
    font-size: 12px;
}

.review_actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 12px;
}

.register_modal.adding_pc.review_modal .modal_content .review_actions .check_btn,
.register_modal.adding_pc.review_modal .modal_content .review_actions .cancel_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0;
}

@media (max-width: 966px) {
    .register_modal.adding_pc.review_modal {
        height: 100%;
        max-height: 100%;
        padding: 80px 20px 32px;
    }
}

/* Owner ticket reply: a compact file picker next to the send button */
.ticket_reply_actions {
    align-items: center;
    gap: 12px;
}

.ticket_reply_actions .file_upload_compact {
    flex: 1 1 auto;
    min-width: 0;
}

.file_upload_compact .file_upload_inner {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    height: 46px !important;
    padding: 0 14px;
}

.file_upload_compact .file_upload_icon {
    width: 18px;
    height: 18px;
}

.file_upload_compact .file_upload_title {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file_upload_compact .file_upload_description {
    margin-left: auto;
    font-size: 11px;
    white-space: nowrap;
}

@media (max-width: 966px) {
    .ticket_reply_actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================
   Player account: withdrawals (button by the balance, modal, payout details)
   ========================================================= */
.withdraw_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 14px;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}

.withdraw_btn:hover {
    border-color: var(--cg-accent);
    color: var(--cg-accent);
}

.account_balance_line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

.account_balance_line .withdraw_btn {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

.withdraw_summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.withdraw_summary > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #2C2C39;
    background: #0F0F18;
}

.withdraw_summary span,
.withdraw_details > span {
    color: rgba(255, 255, 255, 0.45);
    font-family: TacticSans-Med;
    font-size: 12px;
}

.withdraw_summary strong {
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 18px;
    font-weight: 400;
}

.withdraw_details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border-left: 2px solid var(--cg-accent);
    background: rgba(167, 119, 255, 0.06);
}

.withdraw_details > div {
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 14px;
    line-height: 150%;
    word-break: break-word;
}

.withdraw_notice {
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(252, 237, 39, 0.35);
    background: rgba(252, 237, 39, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 155%;
}

.withdraw_notice a {
    display: inline-block;
    margin-top: 6px;
    color: var(--cg-accent);
}

.withdraw_error {
    margin: -8px 0 18px;
    color: var(--cg-danger);
    font-family: TacticSans-Med;
    font-size: 13px;
}

.withdraw_modal .check_btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.withdraw_modal .cg_stepper {
    max-width: 260px;
}

/* Settings: payout details, given once */
.payout_block {
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.payout_saved,
.payout_hint,
.payout_form textarea,
.payout_confirm,
.payout_form > .input_error {
    margin-right: 0;
    margin-left: 0;
}

.payout_saved {
    max-width: 640px;
    padding: 14px 16px;
    border: 1px solid #2C2C39;
    background: #1A1A28;
}

.payout_saved_text {
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 15px;
    line-height: 150%;
    word-break: break-word;
}

.payout_saved_note,
.payout_hint {
    color: rgba(255, 255, 255, 0.45);
    font-family: TacticSans-Med;
    font-size: 12px;
    line-height: 155%;
}

.payout_saved_note {
    margin-top: 8px;
}

.payout_hint {
    max-width: 640px;
    margin-bottom: 10px;
}

.payout_form textarea {
    display: block;
    width: 100%;
    max-width: 760px;
    padding: 12px 16px;
    border: 2px solid #2C2C39;
    outline: none;
    background: #1A1A28;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 15px;
    line-height: 150%;
    resize: vertical;
}

.payout_form textarea:focus {
    border-color: var(--cg-accent);
}

.payout_confirm {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    cursor: pointer;
}

.payout_confirm input {
    margin-top: 2px;
    accent-color: var(--cg-accent);
}

@media (max-width: 966px) {
    .payout_saved,
    .payout_hint,
    .payout_form textarea,
    .payout_confirm,
    .payout_form > .input_error {
        margin-left: 0;
        margin-right: 0;
    }

    .payout_form textarea {
        width: 100%;
    }
}

/* Compact cabinet modals (review, complaint, withdrawal): fixed text areas, inputs in one column */
.review_modal textarea {
    height: 140px;
    min-height: 0;
    resize: none;
}

.register_modal.adding_pc.fair_modal .modal_content .row .item_inputs input[type="email"] {
    height: 44px;
    padding: 0 16px;
    border: 1px solid #2C2C39;
    background: #0F0F18;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 14px;
}

.register_modal.adding_pc.fair_modal .modal_content .row .item_inputs input[type="email"]:focus {
    border-color: var(--cg-accent);
    outline: none;
}

.fair_modal .file_upload_compact {
    width: 100%;
}

/* The stepper keeps its own look inside cabinet modals (their generic input styles would box it) */
.register_modal.adding_pc .modal_content .row .item_inputs .cg_stepper input {
    height: auto;
    padding: 0 6px 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* A compact file picker is one line high wherever it is (the template gives .file_upload a fixed height) */
.file_upload.file_upload_compact {
    height: auto !important;
    min-height: 0 !important;
}

/* Complaint modal: as tall as its content, a fixed text area */
.register_modal.adding_pc.review_modal.fair_modal {
    height: fit-content;
    max-height: calc(100vh - 32px);
}

.register_modal.adding_pc.fair_modal .modal_content .row .item_inputs textarea {
    height: 130px;
    min-height: 0;
    max-height: 130px;
    resize: none;
}

@media (max-width: 966px) {
    .register_modal.adding_pc.review_modal.fair_modal {
        height: 100%;
        max-height: 100%;
    }
}

/* =========================================================
   Owner cabinet: club edit page (pages/cabinet/club-edit)
   ========================================================= */
.club_edit_btn {
    white-space: nowrap;
}

.cabinet.club_edit .old_page {
    margin-bottom: 18px;
}

.club_edit_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
    margin: 20px 0 120px;
    font-family: TacticSans-Med;
}

.club_edit_main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.club_edit_main .support_panel .item_title {
    margin-bottom: 18px;
}

.club_edit_textarea {
    height: 150px;
    resize: none;
}

.club_edit_hint {
    margin: -6px 0 16px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    line-height: 150%;
}

.club_edit_subtitle {
    margin: 22px 0 10px;
    color: #FFF;
    font-size: 15px;
}

.club_edit_check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    cursor: pointer;
}

.club_edit_check input[type="checkbox"],
.club_edit_amenity input,
.club_edit_photo input {
    accent-color: var(--cg-accent);
}

.club_edit_checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
}

.club_edit_hours.is_hidden {
    display: none;
}

.club_edit_specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.club_edit_spec {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.club_edit_spec_num {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    text-align: center;
}

.club_edit_spec input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #2C2C39;
    outline: none;
    background: #0F0F18;
    color: #FFF;
    font-family: TacticSans-Med;
    font-size: 13px;
}

.club_edit_spec input:focus {
    border-color: var(--cg-accent);
}

.club_edit_amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.club_edit_amenity input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.club_edit_amenity span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #2C2C39;
    background: #0F0F18;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.club_edit_amenity span svg {
    color: rgba(255, 255, 255, 0.35);
}

.club_edit_amenity input:checked + span {
    border-color: var(--cg-accent);
    background: rgba(167, 119, 255, 0.12);
    color: #FFF;
}

.club_edit_amenity input:checked + span svg {
    color: var(--cg-accent);
}

.club_edit_amenity input:focus-visible + span {
    outline: 2px solid var(--cg-accent);
    outline-offset: 2px;
}

.club_edit_photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.club_edit_photo {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #2C2C39;
    background: #0D0D16;
}

.club_edit_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.club_edit_photo label {
    position: absolute;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(13, 4, 5, 0.78);
    color: #FFF;
    font-size: 11px;
    cursor: pointer;
}

.club_edit_photo_cover {
    top: 6px;
}

.club_edit_photo_delete {
    bottom: 6px;
}

.club_edit_photo:has(.club_edit_photo_cover input:checked) {
    border-color: var(--cg-accent);
}

.club_edit_photo:has(.club_edit_photo_delete input:checked) img {
    opacity: .3;
}

.club_edit_side {
    position: sticky;
    top: 90px;
}

.club_edit_side_name {
    margin-bottom: 8px;
    color: #FFF;
    font-size: 18px;
    word-break: break-word;
}

.club_edit_side_note {
    margin: 14px 0 18px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 155%;
}

.club_edit_save {
    width: 100%;
    background: var(--cg-button);
    color: #000;
}

.club_edit_side_link {
    display: block;
    margin-top: 12px;
    color: var(--cg-accent);
    font-size: 13px;
    text-decoration: none;
}

@media (max-width: 966px) {
    .club_edit_layout {
        grid-template-columns: 1fr;
        margin-top: 12px;
    }

    .club_edit_side {
        position: static;
    }

    .club_edit_specs {
        grid-template-columns: 1fr;
    }
}

.club_edit_side .club_status_badge {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid currentColor;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.club_edit_side .club_status_badge.verified {
    color: var(--cg-success);
    background: rgba(0, 229, 160, 0.08);
}

/* Owner cabinet, «Мои клубы»: the club header — name with the page link, buttons sized to their text */
.club_head_title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.club_head_title .club_preview_link {
    margin-top: 0;
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    max-width: none;
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: TacticSans-Med;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    transition: background .2s, border-color .2s, color .2s, opacity .2s;
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns > a::before,
.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns > a::after {
    display: none;
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns .club_edit_btn {
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: #FFF;
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns .club_edit_btn:hover {
    border-color: var(--cg-accent);
    color: var(--cg-accent);
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns .add_zone_btn {
    background: rgba(255, 255, 255, 0.14);
    color: #FFF;
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns .add_zone_btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns .add_pc_btn {
    background: var(--cg-accent);
    color: #FFF;
}

.cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns .add_pc_btn:hover {
    opacity: .88;
}

@media (max-width: 966px) {
    .cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns {
        justify-content: flex-start;
        width: 100%;
    }

    .cabinet .little_sections .data_section.game_clubs .section_actions .actions_btns > a {
        flex: 1 1 auto;
        padding: 0 12px;
    }
}