:root {
    --background-light: #f5f7fb;
    --background-dark: #e0e4eb;
    --background-hover: #d1d5db;
    --background-highlight: #e3342f;
    --background-inactive: #f0f0f0;

    --text-dark: #333;
    --text-medium: #555;
    --text-light: #888;
    --text-highlight: #fff;
    --text-inactive: #ccc;

    --box-shadow: rgba(0, 0, 0, 0.1);
}

/* General Styles */
.calendar-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    font-family: Arial, sans-serif;
}

.calendar-container, .time-selector, .count-selector {
    background-color: var(--background-light);
    padding: 20px;
    border-radius: 10px;
    color: var(--text-dark);
    box-shadow: 0 4px 8px var(--box-shadow);
}

.calendar-container {
    width: 300px;
    max-width: 90vw;
}

.calendar-header, .time-selector .header-title {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-dark);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-header .nav {
    cursor: pointer;
    font-size: 1.5em;
    color: var(--text-medium);
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    font-size: 0.9em;
}

.calendar-grid div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    color: var(--text-light);
}

.calendar-grid .day {
    background-color: var(--background-dark);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.calendar-grid .day:hover {
    background-color: var(--background-hover);
}

.calendar-grid .highlight,
.calendar-grid .day.today,
.calendar-grid .day.current {
    background-color: var(--background-highlight);
    color: var(--text-highlight);
}

/* Time Selector */
.time-selector {
    min-width: 200px;
}

.time-selector .header-title {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 15px;
}

/* Base layout for time slot part */
.time-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Larger screens: wider column layout inside .col-xl-8 */
@media (min-width: 1200px) {
    .col-xl-8 .time-slots {
        grid-template-columns: repeat(6, 1fr);
    }

    .all-day-mode.tickets {
        text-align: center;
    }

    .all-day-mode.tickets .header-title br {
        display: none;
    }

    .all-day-mode.tickets .header-title span::after {
        content: ": ";
    }

    .all-day-mode.tickets .count-selector {
        display: flex;
        justify-content: center;
    }

    .all-day-mode.tickets .count-row {
        display: flex;
        flex-direction: column;
    }

    .all-day-mode.tickets .header-title {
        padding-bottom: 0px;
    }

    .all-day-mode.tickets .count-slots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

.time-slot {
    background-color: #269d00;
    color: #fff;
    font-weight: 700;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 2px 4px var(--box-shadow);
}

.time-slot:hover {
    background-color: var(--background-highlight);
}

.time-slot.current {
    background-color: var(--background-highlight);
    color: var(--text-highlight);
}

/* Count Selector */
.count-selector {
    min-width: 200px;
}

.count-selector .header-title {
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 15px;
}

.count-slots {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
}

.count-slot {
    background-color: var(--background-dark);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    color: var(--text-dark);
    box-shadow: 0 2px 4px var(--box-shadow);
}

.count-slot:hover {
    background-color: var(--background-hover);
}

.count-slot.current {
    background-color: var(--background-highlight);
    color: var(--text-highlight);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .calendar-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .calendar-container, .time-selector {
        width: 100%;
        max-width: 100%;
    }
    .calendar-grid div.day {
        width: 40px;
        height: 40px;
    }

    /* Mobile – large clickable numbers (3×3) */
    .count-slots {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .count-slot {
        height: 60px;
        font-size: 1.2rem;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 490px) {
    .calendar-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .calendar-container {
        width: 100%;
        padding: 15px;
        max-width: 100%;
    }

    .calendar-grid {
        gap: 3px;
    }

    .calendar-grid div.day {
        width: 32px;
        height: 32px;
        font-size: 0.8em;
    }

    .time-slots {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .time-slot {
        padding: 8px;
        font-size: 0.85em;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 5px 0;
    }

    .count-slot {
        padding: 10px;
        font-size: 1rem;
    }

    .count-selector {
        padding: 15px;
    }
}

@media (max-width: 360px) {
    .time-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .time-slot {
        padding: 6px;
        font-size: 0.85rem;
    }

    .calendar-container {
        padding: 10px;
    }

    .calendar-grid div.day {
        width: 23px;
        height: 23px;
        font-size: 0.75rem;
    }

    .count-slot {
        height: 50px;
        font-size: 1rem;
    }
}

/* Year/Month */
.calendar-grid div.year,
.calendar-grid div.month,
.calendar-grid .button {
    background-color: var(--background-dark);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    color: var(--text-dark);
    box-shadow: 0 2px 4px var(--box-shadow);
}

.calendar-grid .year:hover,
.calendar-grid .month:hover,
.calendar-grid .button:hover {
    background-color: var(--background-hover);
}

.calendar-grid.years,
.calendar-grid.months,
.calendar-grid.buttons {
    display: grid;
    gap: 10px;
}

.calendar-grid .year.current,
.calendar-grid .month.current,
.calendar-grid.buttons .button {
    background-color: var(--background-highlight);
    color: var(--text-highlight);
}

.day.past-day,
.day:not(.current-month),
.months .month.disabled,
.buttons .button.disabled,
.time-slots .time-slot.disabled {
    background-color: var(--background-inactive);
    color: var(--text-inactive);
    cursor: default;
    pointer-events: none;
}

/* Utility Grids */
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-1 { grid-template-columns: repeat(1, 1fr); }

/* Sectors */
li:has(+ .sector_timeslots_part) {
    border-bottom: none;
}

.sector_timeslots_part {
    border-bottom: 1px solid rgba(0,0,0,0.125);
}

/* Legend */
.time-slot-legend-free { background: #269d00; }
.time-slot-legend-selected { background: var(--background-highlight); }
.time-slot-legend { width:18px; height:18px; display:inline-block; }

/* ------------------------------------------------------ */
/* Title + Count Slots inline (desktop ≥992px)            */
/* ------------------------------------------------------ */

@media (min-width: 992px) {
    .count-selector .count-row {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .count-selector .header-title {
        margin-bottom: 0;
        white-space: nowrap;
    }

    .count-selector .count-slots {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .count-selector .count-slot {
        min-width: 55px;
        height: 55px;
        font-size: 1.1rem;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* ------------------------------------------------------ */
/* Sticky modal footer                                    */
/* ------------------------------------------------------ */

#general_confirmation_modal .modal-dialog {
    display: flex;
    flex-direction: column;
    height: 90vh;
}

#general_confirmation_modal .modal-body {
    overflow-y: auto;
}

#general_confirmation_modal .modal-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 100;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}


.tickets-in-cart-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tickets-in-cart-header .arrow-down:after {
    font-family: 'predpredaj-icons';
    content: "\e924";
    border: 0 !important;
    vertical-align: inherit;
    color: #e6163c;
    font-weight: bold;
}

.tickets-in-cart-header .arrow-down {
    font-size: 0.85em;
    margin-top: 2px;
    transform: translateY(1px);
}

.tickets-in-cart-header .arrow-down {
    animation: bounce-down 1.4s infinite;
}

@keyframes bounce-down {
    0%, 100% { transform: translateY(1px); }
    50% { transform: translateY(4px); }
}