* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: 'Prosto One', sans-serif; font-size: 13px; line-height: 16px; letter-spacing: 0;
    color: var(--theme-text);  background-color: var(--theme-bg);
    width: 100vw; height: 100vh; max-width: 100%; min-width: var(--ws-min-width);
    overflow-x: hidden;
}

body { 
    display: flex; flex-direction: column; 
    align-items: center; justify-content: flex-start; 
    gap: 0; padding-bottom: calc( 40px + env(safe-area-inset-bottom) );
}

.main-nav {
    display: flex; flex-direction: row; 
    align-items: center; justify-content: space-between;
    width: 100%; max-width: var(--ws-max-width);
    padding-right: var(--option-padding-h); 
    gap: 50px; padding: var(--ws-padding);
    
    position: sticky; top: 0; color: var(--theme-menu-normal);
    background-color: var(--theme-nav-bg); backdrop-filter: blur(8px); z-index: 1;
}

svg { display: block; width: 100%; height: 100%; fill: currentColor; transition: var(--trans-ease); transition-property: color, fill, stroke; }

.kolhoz-h { aspect-ratio: 345 / 60; width: 100%; max-width: 345px; min-width: 250px; height: auto; overflow: visible; }
.kolhoz-sign { aspect-ratio: 1; width: 100%; max-width: 50px; height: auto; overflow: visible; display: none;}
.logo { min-width: 265px; }

.mm-items { 
    display: flex; flex-direction: row; 
    align-items: center; justify-content: space-between; 
    gap: clamp( var(--ws-section-gap-large), 2.85vw, 60px ); 
    max-width: var(--max-menu-items-width);
}

.mi-icon { width: var(--mi-icon-size); height: var(--mi-icon-size); flex: 0 0 auto; }
.mi-icon-small { width: var(--mi-icon-small-size); height: var(--mi-icon-small-size); }
.mi-icon.wheat-icon { width: 50px; height: 50px; }

.mi-account-holder { 
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; 
    gap: var(--ws-section-gap); 
}
.account-info-holder { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; font: var(--text-normal-plus); transition: var(--trans-ease); transition-property: color; }
.account-greeting, .account-nickname { white-space: nowrap; }

.mi-control-bar { 
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; 
    gap: var(--ws-section-gap); 
}

.mi-wheat-holder { 
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; 
    gap: var(--ws-section-gap); transition: var(--trans-ease); transition-property: color;
}
.wheat-text-holder { display: flex; flex-direction: column; align-items: flex-end; justify-content: end; gap: 0; }
.wheat-amount { font: var(--text-wheat-amount); }
.wheat-label { font: var(--text-wheat-label); }
.wheat-icon svg, .option .wheat-icon svg { fill: var(--theme-wheat); }

button { 
    font: var(--text-button); outline: none;
    transition: var(--trans-ease); transition-property: var(--trans-props-default); 
    color: currentColor; background-color: var(--color-transparent); 
    border: 1px solid currentColor; border-radius: var(--btn-small-br); 
    cursor: pointer;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: var(--btn-small-gap); padding: var(--btn-small-padding-v) var(--btn-small-padding-h);
}
.button-icon { width: var(--btn-icon-size-small); height: var(--btn-icon-size-small); }

.mi-icon-button { cursor: pointer; border-radius: var(--btn-small-br); transition: var(--trans-ease); transition-property: background-color; will-change: background-color; }
.button-icon svg, .mi-icon-button svg { transition: var(--trans-ease); transition-property: fill; will-change: fill; fill: currentColor; }

.mi-reserve-holder { color: var(--theme-reserve-text); }
.mi-reserve-holder button { color: var(--theme-reserve-text); border-color: var(--theme-reserve-border); background-color: var(--theme-reserve-bg); }

#btnLightMode { display: none; }
#btnDarkMode { display: flex; }
.dark-mode #btnLightMode { display: flex; }
.dark-mode #btnDarkMode { display: none; }
#btnMobileMenu { display: none; }

.account-avatar-holder.account-avatar-short { display: none; position: relative; }
.account-nickname-short { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; 
    display: flex; flex-direction: row; align-items: center; justify-content: center; 
    text-transform: uppercase; 
    font: var(--text-normal-plus); 
    padding-top: 2px; 
}


.options { display: flex; width: 100%; max-width: var(--ws-max-width); flex-wrap: wrap; gap: var(--ws-section-gap-large); flex-direction: column; max-height: 750px; padding: 0 var(--ws-padding) var(--ws-padding);}
.option { 
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    flex: 1 1 calc( (100% - var(--ws-section-gap-large)*2) / 3 ); cursor: pointer;
    width: 100%; max-width: calc( (100% - var(--ws-section-gap-large)*2) / 3 ); min-width: 200px;
    transition: var(--trans-ease); transition-property: color, border-color, background-color; 
    color: var(--theme-option-text); background-color: var(--theme-option-bg); border: 1px solid var(--theme-option-border);
    padding: var(--option-padding-v) var(--option-padding-h); 
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.option-icon { width: var(--option-icon-size); height: var(--option-icon-size); }
.option-icon-small { width: var(--option-icon-size-small); height: var(--option-icon-size-small); }
.option-name { font: var(--option-name-text); padding: var(--option-padding-v) var(--option-padding-h); }
.option-column { 
    display: flex; flex-direction: column; flex: 1 1 auto;
    align-items: flex-start; justify-content: space-between; gap: var(--ws-section-gap); 
    height: 100%; 
}
.option-column + .option-column { align-items: flex-end; }
.option-hint { font: var(--option-hint-text); padding: var(--option-padding-v) var(--option-padding-h); }
.option-hint .wheat-amount { font: var(--text-currency); }
.option-wheat .option-hint { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 5px; }
.option.simple { flex-direction: column-reverse; align-items: flex-start; }
.option.simple .option-column:first-child { justify-content: flex-end;  }
.option.simple .option-column:last-child { align-self: flex-end; }
.option.simple .option-column { transition: var(--trans-ease); transition-property: transform; will-change: transform; transform: translateY(0); }

.option svg { transition: var(--trans-ease); transition-property: fill; will-change: fill; fill: var(--theme-option-text); }

.option-link-holder { padding-bottom: var(--option-padding-v); }
.option-column:first-child .option-link-holder { padding-left: var(--option-padding-h); }
.hint-link { 
    font: var(--text-small-link); cursor: pointer; width: fit-content;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px;
}
.hint-link-icon { width: var(--hint-icon-size); height: var(--hint-icon-size); display: inline-block; flex: 0 0 var(--hint-icon-size); }
.hint-link-icon svg { fill: var(--theme-option-info-bg); }
.hint-link-text { 
    transition: var(--trans-ease); transition-property: color, text-decoration-color; will-change: color, text-decoration-color; 
    text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 2px; 
    color: var(--theme-option-text); text-align: end;
}
.upcoming-paid .hint-link-text { color: var(--theme-paid-hint-text); }
.upcoming-paid .hint-link-icon svg { fill: var(--theme-paid-hint-icon); }
.upcoming-reserved .hint-link-text { color: var(--theme-reserved-hint-text); }
.upcoming-reserved .hint-link-icon svg { fill: var(--theme-reserved-hint-icon); }


#rank-gradient stop:first-child { stop-color: var(--color-white); }
#rank-gradient stop:last-child  { stop-color: var(--color-grey-04); }
.dark-mode #rank-gradient stop:first-child { stop-color: var(--color-black-02); }
.dark-mode #rank-gradient stop:last-child  { stop-color: var(--color-grey-00); }

.rank-badge { position: relative; }
.rank { aspect-ratio: 220 / 230; width: 100%; height: fit-content; position: absolute; bottom: 0; left: 0; z-index: 1; }
.rank img { width: 100%; height: auto; display: block; }
.shining { max-width: var(--max-rank-badge-width); }
.option.status { background-color: var(--theme-option-rank-bg); border-color: var(--theme-option-rank-border); }
.option.no-hover { cursor: default; }

.billiard-hall { 
    background: url(/img/gallery-bg.jpg) center center no-repeat; background-color: var(--theme-option-accident-bg); background-size: cover; 
    color: var(--theme-option-text-video); position: relative; flex-direction: column; 
    flex: 1 1 calc((100% - var(--ws-section-gap-large) * 2) / 3 * 2 + var(--ws-section-gap-large));
}
.billiard-hall .option-column { z-index: 1; flex: 1 1 50%; width: 100%; align-items: flex-start; justify-content: flex-end; }
.option-column.thumbs { flex-direction: row; align-items: flex-start; gap: var(--ws-section-gap); padding-top: var(--option-padding-h); padding-right: var(--option-padding-h); }
.option-column.thumbs .gallery-thumb { border-radius: var(--btn-small-br); border: 1px solid var(--color-white-40); overflow: hidden; transition: var(--trans-func); transition-property: transform, opacity; opacity: 0; }
.option-column.thumbs .gallery-thumb:nth-child(1) { transform: translateY(30px); }
.option-column.thumbs .gallery-thumb:nth-child(2) { transform: translateY(30px); transition-delay: 0.1s; }
.option-column.thumbs .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.billiard-hall:before { width: 100%; height: 100%; content: ''; position: absolute; top: 0; left: 0; z-index: 0; background-color: var(--color-black-00); opacity: 0; transition: var(--trans-ease); transition-property: opacity; }

.video-archive { background: center center no-repeat; background-color: var(--theme-option-accident-bg); background-size: cover; color: var(--theme-option-text-video); position: relative; }
.video-archive:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: var(--color-black-00); opacity: 0.35; z-index: 1; pointer-events: none; }
.dark-mode .video-archive:before { opacity: 0.6; }
.video-archive svg { fill: var(--theme-option-text-video); }
.video-archive .hint-link-text { color: var(--theme-option-text-video); }
.video-archive .option-column { z-index: 5; }
.video-archive .option-column:first-of-type { flex: 1 1 100%; }
.video-archive .option-column .option-link-holder { max-width: 150px; }
.video-archive-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: 0; pointer-events: none;
}
video.video-archive-bg { display: none; }
div.video-archive-bg { display: block; z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: url(/img/video-archive.jpg) center center no-repeat; background-size: cover; }

.payments { 
    background: url(/img/payments-bg.jpg) center center no-repeat; background-color: var(--theme-option-accident-bg); background-size: cover; 
    color: var(--theme-option-text-video); position: relative; justify-content: space-between; cursor: default; 
    max-height: fit-content; flex: 0 0 fit-content; gap: var(--ws-section-gap-large);
}
.payments .option-column { flex-direction: row; align-items: center; justify-content: center; gap: var(--ws-section-gap-large); }
.payments .option-column:first-child { justify-content: flex-start; padding-left: var(--option-padding-h); }
.payments .option-column:last-child { justify-content: flex-end; padding-right: calc( var(--option-padding-h) / 2 ); }



.upcoming-badge { 
    width: 100%; max-width: calc( var(--ws-max-width) - var(--ws-padding)*2 ); 
    margin-bottom: var(--ws-section-gap-large); margin-top: 2px;
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    background-color: var(--theme-paid-bg); color: var(--theme-paid-btn-text);
    transition: var(--trans-ease); transition-property: var(--trans-props-default);
    position: relative; overflow: visible; padding: var(--ws-padding); gap: var(--ws-section-gap-large);
}
.upcoming-badge .r-panel { 
    display: flex; flex-direction: column; flex: 1 1 57%;
    justify-content: space-between; height: 100%; gap: var(--ws-section-gap-large);
    padding: var(--ws-section-gap); padding-left: 0;
}
.upcoming-badge .reserve-info { 
    height: 100%; gap: var(--ws-section-gap-large);
    display: flex; flex-direction: column; flex: 1 1 43%;
    align-items: flex-start; justify-content: space-between; 
    padding: var(--ws-section-gap) 0 var(--ws-section-gap) var(--ws-padding); 
}
.upcoming-badge .control-bar {
    display: flex; flex-direction: row; gap: var(--ws-section-gap); align-items: center; justify-content: center;
    padding: 0; align-self: flex-start; 
}
.upcoming-badge .control-bar .sign { position: absolute; top: var(--ws-padding); height: calc(100% - var(--ws-padding)*2); aspect-ratio: 1; width: auto; color: var(--theme-paid-sign); right: var(--ws-padding); display: none;}
.upcoming-reserved .control-bar .sign { color: var(--theme-reserved-sign); }
.badge-status { 
    position: absolute; top: -2px; right: calc( var(--ws-padding) );
    background-color: var(--color-ball-yellow-03); color: var(--color-black-00); 
    font: var(--text-badge); text-transform: uppercase; padding: 9px 15px 7px; box-shadow: 0 2px 0 var(--color-black-02-30); 
}
.badge-status.badge-reserved { background-color: var(--color-ball-red-03); color: var(--theme-reserved-badge-color); background-color: var(--theme-reserved-badge-bg); }
.upcoming-badge button { --btn-icon-size-small: 45px; --btn-small-padding-v: 3px; padding: var(--btn-small-padding-v) var(--btn-small-padding-h); padding-left: calc( var(--btn-small-padding-h) - 9px ); gap: 8px; }
.upcoming-badge button { color: var(--theme-paid-btn-text); border-color: var(--theme-paid-btn-border); background-color: var(--theme-paid-btn-bg); font: var(--text-button); }
.upcoming-badge button.solid { color: var(--theme-paid-btn-text-solid);  }
.upcoming-badge button .button-text { text-align: start; }

.reserve-when { color: var(--theme-paid-btn-text-solid); font: var(--text-large); margin-top: -6px; display: flex; gap: var(--ws-section-gap); flex-direction: column; padding-top: 5px; }
.reserve-when .reserve-length { line-height: 22px; }
.reserve-when .reserve-time { font: var(--text-large-plus); line-height: 26px; }
.reserve-details { display: flex; flex-direction: column; gap: var(--ws-section-gap-large); height: 100%; justify-content: space-between; }
.reserve-options { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: calc( var(--ws-section-gap-large) * 2 ); }
.reserve-options-hint { font: var(--text-small-label); max-width: 260px; }
.reserve-start { font: var(--text-normal-plus); padding: var(--ws-section-gap-large) 0 0; }

.info-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ws-section-gap);  }
.hall-info { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: calc( var(--ws-section-gap-large) * 2 ); color: var(--theme-paid-btn-text-solid); padding-left: 5px; }
.hall-address { 
    display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 8px;
    font: var(--text-large); margin-top: -12px;
}
.hall-address-icon { width: 50px; height: 50px; }
.hall-address-text { padding-top: 8px; }
.reserve-price-holder { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ws-section-gap); }
.reserve-price { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; color: var(--theme-paid-btn-text-solid); }
.reserve-price-hint { color: var(--theme-paid-btn-text); font: var(--text-normal); }
.reserve-amount { font: var(--text-xl); }
.reserve-currency { font: var(--text-currency); }
.additional-info { padding: var(--ws-section-gap) 20px var(--ws-section-gap) 58px; font: var(--text-normal); color: var(--theme-paid-btn-text); }

.upcoming-reserved { background-color: var(--theme-reserved-bg); color: var(--theme-reserved-text); }
.upcoming-reserved .reserve-when { color: var(--theme-reserved-text-solid); }
.upcoming-reserved button { color: var(--theme-reserved-btn-text); border-color: var(--theme-reserved-btn-border); background-color: var(--theme-reserved-btn-bg); }
.upcoming-reserved button.solid { color: var(--theme-reserved-btn-text-solid); }
.upcoming-reserved .reserve-price { color: var(--theme-reserved-btn-text-solid); }

.payment-info { display: flex; flex-direction: row; align-items: center; gap: calc( var(--ws-section-gap-large) + var(--ws-section-gap) ); }
.reserve-deadline { font: var(--text-normal); max-width: 500px; padding: var(--ws-section-gap) 0 var(--ws-section-gap); }
.upcoming-reserved .pay-button { font: var(--text-normal-plus); text-transform: uppercase; padding: 11px 20px 9px; color: var(--theme-reserved-pay-text); border-color: var(--theme-reserved-pay-border); background-color: var(--theme-reserved-pay-bg); }

.iconic-link { display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; cursor: pointer; }
.iconic-link .iconic-link-text { 
    transition: var(--trans-ease); transition-property: color, text-decoration-color; will-change: color, text-decoration-color; 
    text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 2px; color: currentColor; }
.iconic-link .iconic-link-icon { width: var(--hint-icon-size); height: var(--hint-icon-size); display: inline-block; flex: 0 0 var(--hint-icon-size); max-width: 0; opacity: 0;
    transition: var(--trans-ease); transition-property: max-width, opacity; will-change: max-width, opacity; }
.iconic-link.outlined svg { fill: none; stroke: currentColor; }

.control-bar-hint { 
    width: 20px; height: 20px; position: absolute; pointer-events: none;
    right: var(--ws-padding); bottom: calc( 53px + var(--ws-padding)*2 ); transform: translateY(50%); opacity: 0; 
    transition: var(--trans-ease); transition-property: opacity; will-change: opacity; 
}
.control-bar-hint.shown { opacity: 1; }
.control-bar-hint svg { fill: none; stroke: currentColor; transition: var(--trans-ease); transition-property: stroke; will-change: stroke; }



@media (hover: hover) and (pointer: fine) {
    .mi-reserve-holder button:hover { color: var(--theme-reserve-text-hover); border-color: var(--theme-reserve-border-hover); background-color: var(--theme-reserve-bg-hover); }
    .mi-icon-button:hover { color: var(--theme-menu-hover); background-color: var(--theme-menu-bg-hover); }
    .option:not(.no-hover):hover { color: var(--theme-option-text-hover); background-color: var(--theme-option-bg-hover); border-color: var(--theme-option-border-hover); }
    .option:not(.no-hover):hover svg { fill: var(--theme-option-text-hover); }
    .option .hint-link:hover { color: var(--theme-option-info-hover); }
    .option .hint-link:hover .hint-link-icon svg { fill: var(--theme-option-info-bg-hover); } 
    .option:not(.no-hover):hover .hint-link-text { color: var(--theme-option-text-hover); }
    .option .hint-link:hover .hint-link-text { color: var(--theme-option-info-bg-hover); }
    .billiard-hall:hover:before { opacity: 0.5; }
    .billiard-hall:hover .option-column.thumbs .gallery-thumb { transform: translateY(0); opacity: 1; }
    .option:hover .wheat-icon svg { fill: var(--theme-wheat); }

    .option.simple:hover .option-column:first-child { transform: translateY(-10px); }
    .option.simple:hover .option-column:last-child { transform: translateY(10px); }

    video.video-archive-bg { display: block; }
    div.video-archive-bg { display: none; }

    .upcoming-badge button:hover { color: var(--theme-paid-btn-text-hover); border-color: var(--theme-paid-btn-border-hover); }
    .upcoming-badge button:hover.solid { color: var(--theme-paid-btn-text-solid-hover); background-color: var(--theme-paid-btn-bg-solid-hover); }
    .upcoming-reserved button:hover { color: var(--theme-reserved-btn-text-hover); border-color: var(--theme-reserved-btn-border-hover); }
    .upcoming-reserved button.solid:hover { border-color: var(--theme-reserved-btn-border-solid-hover); }
    .upcoming-reserved .pay-button:hover { color: var(--theme-reserved-pay-text-hover); border-color: var(--theme-reserved-pay-border-hover); background-color: var(--theme-reserved-pay-bg-hover); }

    .upcoming-paid .hint-link:hover .hint-link-text { color: var(--theme-paid-hint-text-hover); }
    .upcoming-paid .hint-link:hover .hint-link-icon svg { fill: var(--theme-paid-hint-icon-hover); }
    .upcoming-reserved .hint-link:hover .hint-link-text { color: var(--theme-reserved-hint-text-hover); }
    .upcoming-reserved .hint-link:hover .hint-link-icon svg { fill: var(--theme-reserved-hint-icon-hover); }

    .iconic-link:hover { color: var(--theme-paid-link-hover); }
    .iconic-link:hover .iconic-link-icon { max-width: var(--hint-icon-size); opacity: 1; }
}