html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100vh; /* лучше min-height, а не height */
font-family: 'Arial', sans-serif;
background-blend-mode: multiply;
background-image: url("../img/bg.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #f1f1f1;
text-align: center;
}
/* чтобы не суммировать 100vh несколько раз */
.main-container {
min-height: 100vh; /* или 100%, а height вообще убрать */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* картинку не делаем строго 100vh */
#main img {
width: 100%;
max-width: 900px;
max-height: 80vh; /* чтобы осталось место под логотип/кнопки */
height: auto;
border: 2px solid #f1f1f1;
border-radius: 10px;
}
.reserved-seat {
background-color: #dc3545 !important; /* Красный */
color: #fff !important;
opacity: 0.6;
cursor: not-allowed !important;
pointer-events: none; /* Дополнительно блокирует события */
}
.logo-el {
margin-top: 50px;
max-width: 150px;
}
h1 {
margin-top: 20px;
color: #f1f1f1;
}
#main {
margin: 20px;
}
#main img {
width: 100%;
max-width: 900px;
height: 100vh;
border: 2px solid #f1f1f1;
border-radius: 10px;
}
.main-button {
font-weight: 800px;
margin: 10px;
padding: 15px 30px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #6C5CE7;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
width: 500px;
margin-top: 40px;
}
.main-button:hover {
background-color: #6c5ce773;
}
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.popup-content {
background-color: #333;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 800px;
border-radius: 10px;
}
.wide-popup-content {
max-width: 1200px;
}
.zoomable-container {
position: relative;
overflow: hidden;
width: 100%;
max-width: 700px;
height: auto;
margin: 0 auto;
}
.zoomable {
transition: transform 0.3s ease, left 0.3s ease, top 0.3s ease;
transform-origin: center center;
position: relative;
width: 100%;
height: auto;
}
img {
border-radius: 20px;
}
.zoom-buttons {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
}
.zoom-button {
margin: 5px;
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
.popup-image {
width: 100%;
height: auto;
border: 2px solid #f1f1f1;
border-radius: 10px;
margin-bottom: 20px;
}
.popup-button,
.reserve-button,
.back-button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
@media (hover: hover) {
.popup-button:hover,
.reserve-button:hover,
.back-button:hover {
background-color: #0056b3;
}
.zoom-button:hover {
background-color: #0056b3;
}
}
.reserve-button {
background-color: #28a745;
}
.reserve-button:hover {
background-color: #218838;
}
.back-button {
background-color: #dc3545;
}
.back-button:hover {
background-color: #c82333;
}
.reserved-seat {
background-color: #ff0000;
color: white;
cursor: not-allowed;
}
.popup-text {
color: #f1f1f1;
}
.ticket-input {
padding: 10px;
font-size: 16px;
border-radius: 5px;
outline: none;
border: none;
width: calc(100% - 22px);
margin-bottom: 20px;
}
/* Улучшенные стили для кнопок рядов и мест по секторам с повышенной специфичностью и приятными цветами */
.popup-button.sector-vip-button:hover:not(.selected-seat):not(.reserved-seat) {
background-color: #2D65A4 !important; /* Темнее золотой на hover */
}
.popup-button.sector-a-button:hover:not(.selected-seat):not(.reserved-seat) {
background-color: #E6821F !important; /* Темнее зеленый на hover */
}
.popup-button.sector-b-button:hover:not(.selected-seat):not(.reserved-seat) {
background-color: #009B39 !important; /* Темнее оранжевый на hover */
}
.popup-button.sector-c-button:hover:not(.selected-seat):not(.reserved-seat) {
background-color: #DB0002 !important; /* Темнее синий на hover */
}
@media screen and (max-width: 990px) {
body{
padding-bottom: 50px;
}
}
@media screen and (max-width: 483px) {
.mbm{
margin-top: 10px;
}
.main-button{
width: 100%;
}
}
/* === Фирменные цвета секторов === */
:root {
--vip: #2D65A4; /* Синий */
--a: #E6821F; /* Оранжевый */
--b: #009B39; /* Зелёный */
--c: #DB0002; /* Красный */
--action: #6C5CE7; /* Фиолетовая кнопка "Забронировать" */
--action-hover: #5849C5;
--cancel: #6C757D; /* Серая кнопка "Назад" */
--cancel-hover: #565E64;
--reserved-bg: #8b1d2a;
--reserved-border: #ff4757;
--selected-outline: #f1f1f1;
}
/* === Кнопки действий (функциональные) === */
.reserve-button {
background-color: var(--action) !important;
color: #fff !important;
}
.reserve-button:hover {
background-color: var(--action-hover) !important;
}
.back-button {
background-color: var(--cancel) !important;
color: #fff !important;
}
.back-button:hover {
background-color: var(--cancel-hover) !important;
}
/* === СЕКТОРНЫЕ кнопки: ровные цвета, без hover === */
.popup-button.sector-vip-button {
background-color: var(--vip) !important;
color: #fff !important;
}
.popup-button.sector-a-button {
background-color: var(--a) !important;
color: #fff !important;
}
.popup-button.sector-b-button {
background-color: var(--b) !important;
color: #fff !important;
}
.popup-button.sector-c-button {
background-color: var(--c) !important;
color: #fff !important;
}
/* Убираем hover-эффекты у секторных кнопок */
.popup-button.sector-vip-button:hover,
.popup-button.sector-a-button:hover,
.popup-button.sector-b-button:hover,
.popup-button.sector-c-button:hover {
background-color: inherit !important;
filter: none !important;
transform: none !important;
box-shadow: none !important;
cursor: pointer;
}
/* === Выбранные места: без бордера, цвет как у "Забронировать" === */
.popup-button.selected-seat {
background-color: var(--action) !important; /* тот же, что у .reserve-button */
color: #fff !important;
outline: none !important;
box-shadow: none !important;
}
/* === Занятые места === */
.reserved-seat {
position: relative;
color: #fff !important;
background: repeating-linear-gradient(
-45deg,
var(--reserved-bg) 0 8px,
#b31f30 8px 16px
) !important;
border: 2px solid var(--reserved-border) !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.reserved-seat::after {
content: "🔒";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
/* === У выбранных мест полностью отключаем hover === */
.popup-button.selected-seat:hover {
background-color: var(--action) !important; /* сохраняем тот же цвет */
color: #fff !important;
filter: none !important;
transform: none !important;
box-shadow: none !important;
cursor: pointer;
}
.floors{
display: flex;
gap: 50px;
justify-content: center;
}
.floors .zoomable-container{
margin: 0;
}
@media screen and (max-width: 1100px){
.floors{
flex-direction: column;
}
}
.old-price {
text-decoration: line-through;
opacity: 0.6;
margin-left: 8px;
font-size: 0.9em;
}
.sold-out-row {
background-color: #555 !important;
color: #aaa !important;
cursor: not-allowed !important;
opacity: 0.6;
text-decoration: line-through;
font-style: italic;
}
.sold-out-row:hover {
background-color: #444 !important;
}