body {
    background-color: #222222;
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 20px;
}
.header img {
    width: 40px;
    height: 40px;
}
.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-right {
    display: flex;
    gap: 10px;
}
.nav-left button, .nav-left select, .nav-right button, .nav-right select {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}
.nav-left select {
    padding: 10px 10px 10px 15px; /* Уменьшен правый padding, увеличен левый */
    text-align: left;
    appearance: none;
    background-image: url('/img/dropdown-arrow.png');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 12px;
    width: 150px;
    direction: ltr;
}
.nav-left .price-list {
    background-color: #fce982;
    color: #000;
    font-weight: bold;
}
.nav-left .time {
    background-color: transparent;
    font-size: 18px;
}
.price-sections {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: flex-start;
    max-width: 1200px;
}
.price-section {
    background-color: #fff;
    color: #000;
    padding: 15px;
    border-radius: 5px;
    width: 200px;
    text-align: left;
    flex: 0 0 auto;
}
.price-section h2 {
    font-size: 18px;
    margin: 0 0 10px;
    color: #000;
}
.price-section p {
    margin: 5px 0;
    font-size: 14px;
}
.price-section .highlight {
    font-weight: bold;
}
.calculator-container {
    margin-top: 30px;
    background-color: #333;
    padding: 20px;
    border-radius: 5px;
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 20px;
}
.calculator-column, .cashier-column, .count-money-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.calculator, .count-money {
    text-align: left;
}
.calculator h2, .cashier h2, .count-money h2 {
    background-color: #fce982;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    font-size: 24px;
    margin-bottom: 20px;
}
.calculator-buttons {
    display: flex;
    gap: 20px;
}
.calculator-buttons button {
    background-color: #fff;
    color: #000;
    border: none;
    padding: 20px;
    font-size: 18px;
    border-radius: 5px;
    width: 100px;
    cursor: pointer;
}
.calculator-buttons button.active {
    background-color: #fce982;
}
.calculator-buttons .tv-vip {
    background-color: #ccc;
}
.calculator-buttons .tv-vip.active {
    background-color: #fce982;
}
.calculator-times {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.calculator-times input {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 20px 10px;
    border-radius: 5px;
    font-size: 24px;
    width: 120px;
    text-align: center;
}
.time-duration-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.time-duration-buttons button {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
.calculator-price {
    margin-top: 10px;
    font-size: 14px;
}
.cashier {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cashier-total {
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
}
.compartment {
    flex: 1;
    background-color: #444;
    padding: 10px;
    border-radius: 5px;
}
.compartment h3 {
    margin: 0 0 10px;
    font-size: 16px;
}
.compartment p {
    margin: 0 0 10px;
    font-size: 14px;
}
.compartment-input {
    display: flex;
    gap: 10px;
}
.compartment-input input {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 5px;
    border-radius: 5px;
    width: 80px;
}
.compartment-input button {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}
.count-money input {
    width: 100%;
    background-color: #555;
    color: #fff;
    border: none;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.count-money-total {
    display: flex;
    gap: 10px;
}
.count-money-total button {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}
.shift-details {
    margin-top: 20px;
}
.shift-details p {
    margin: 5px 0;
}
.shift-details input {
    width: 100%;
    background-color: #555;
    color: #fff;
    border: none;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
}
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #333;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 5px;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.modal-content h2 {
    margin-top: 0;
}
.modal-content input, .modal-content select {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 5px;
    border-radius: 5px;
    margin: 5px 0;
}
.modal-content button {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 5px 0;
}
.price-edit-section {
    margin-bottom: 20px;
}
.price-edit-section h3 {
    margin: 10px 0;
}
.price-input {
    display: flex;
    gap: 10px;
    margin: 5px 0;
}

/* --- Стили для раздела BONUS (Обновленные) --- */
.bonus-section {
    padding: 20px;
    border-radius: 5px;
    margin-top: 30px;
    width: 100%;
    max-width: 1240px; /* Kept same as .calculator-container */
    background-color: #333;
    color: #fff;
    box-sizing: border-box;
}

.bonus-header {
    background-color: #fce982;
    color: #000;
    padding: 10px;
    border-radius: 5px;
    font-size: 24px;
    margin: -35px 0 0 0;
    text-align: left; /* Align BONUS heading to the left */
}

.bonus-label { /* Метка "Выбери причину" */
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff; /* Белый текст */
}

.bonus-reason-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px; /* Больше отступ после кнопок причин */
}

.bonus-reason-buttons button {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.bonus-reason-buttons button.active {
    background-color: #fce982;
    color: #000;
    font-weight: bold;
}

/* Общий контейнер для динамического содержимого */
.bonus-dynamic-content {
    border-top: 1px solid #555; /* Разделитель */
    padding-top: 20px;
}

/* Стили для групп ввода (метка + поле) */
.bonus-input-group {
    display: flex;
    flex-direction: column;
    flex: 1; /* Позволяет полям ввода расти */
    min-width: 200px; /* Минимальная ширина */
    margin-bottom: 15px; /* Отступ снизу для группы */
}

.bonus-input-group label {
    margin-bottom: 5px;
    font-size: 12px;
    color: #ccc;
}

.bonus-input-group input[type="text"],
.bonus-input-group input[type="number"] {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

.bonus-input-group input[type="tel"] {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    width: 150px; /* Decreased width of the phone number input field */
    box-sizing: border-box;
}


/* Контейнер для контента конкретной причины */
.bonus-reason-content {
    /* Скрыт по умолчанию в HTML, показывается через JS */
}

/* Flex-контейнер внутри контента причины для размещения элементов в строку */
.bonus-main-content {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Разрешаем перенос */
    margin-bottom: 15px;
}

/* Стили для Лототрона */
.bonus-prizes {
    display: flex;
    flex-direction: column;
    flex: 2;
    min-width: 250px;
}
.bonus-prizes label { margin-bottom: 5px; font-size: 12px; color: #ccc; }
.bonus-prize-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.bonus-prize-buttons button { background-color: #666; color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.bonus-prize-buttons button.active { background-color: #fce982; color: #000; font-weight: bold; }

.bonus-cyberwater-flavors { margin-top: 15px; padding-top: 15px; border-top: 1px solid #555; }
.bonus-cyberwater-flavors label { display: block; margin-bottom: 10px; font-size: 14px; color: #fff; } /* <<< Белый цвет для метки Вкуса */
.bonus-flavor-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.bonus-flavor-buttons button { background-color: #666; color: #fff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.bonus-flavor-buttons button.active { background-color: #fce982; color: #000; font-weight: bold; }

/* Стили для Пакетов */
.bonus-paket-selection, .bonus-zona-selection { display: flex; flex-direction: column; flex: 1; min-width: 150px; }
.bonus-paket-selection label, .bonus-zona-selection label { margin-bottom: 5px; font-size: 12px; color: #ccc; }
.bonus-paket-buttons, .bonus-zona-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.bonus-paket-buttons button, .bonus-zona-buttons button { background-color: #666; color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; flex: 1; text-align: center;}
.bonus-paket-buttons button.active, .bonus-zona-buttons button.active { background-color: #fce982; color: #000; font-weight: bold; }

/* Стили для Пополнения */
.bonus-popol-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.bonus-popol-buttons button { background-color: #666; color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; flex-grow: 1; }
.bonus-popol-buttons button.active { background-color: #fce982; color: #000; font-weight: bold; }

/* Стили для Компенсации */
.bonus-kompen-reason-selection { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
.bonus-kompen-reason-selection label { margin-bottom: 5px; font-size: 12px; color: #ccc; }
.bonus-kompen-reason-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.bonus-kompen-reason-buttons button { background-color: #666; color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.bonus-kompen-reason-buttons button.active { background-color: #fce982; color: #000; font-weight: bold; }


/* Общие стили */
.bonus-save-button {
    background-color: #fff; color: #000; border: none; padding: 10px 25px;
    border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold;
    display: inline-block;
}

/* Убираем стрелочки у input type number */
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; }