html, body {
    height: 100%;
    margin: 0;
}

.seat-selection-container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    /* Controls row first (auto height), map fills the rest */
    grid-template-rows: auto 1fr;
    gap: 20px;
    padding: 5px 20px;
    min-height: calc(100vh - 120px);
    width: 100%;
    max-width: 100%;
}

.seat-selection-container .border {
    border-color: var(--src-black) !important;
}

.seat-map-container {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    overflow: hidden;
    background-color: #f8f9fa;
    height: 100%;
    width: 100%;
}

.seat-map-controls {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    gap: 20px;
}

/* Three zones above the map: best-seats finder left, no-stairs centered,
   zoom right. The two flexible zones split the space the zoom buttons
   (fixed width) leave over. */
.best-seats-controls {
    flex: 1;
    text-align: left;
    align-self: center;
}

.best-seats-controls .form-check-label {
    font-weight: 500;
}

#best-seats-options {
    margin-top: 10px;
    padding: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
}

#best-seats-options .form-label {
    margin-bottom: 2px;
    font-weight: 500;
}

.seat-map-container.best-seats-mode {
    position: relative;
}

/* Withdrawn while the map is busy (body.seat-map-busy, set by the seat maps'
   busy()/idle() around the finder and the assignment that follows). */
body.seat-map-busy .seat-map-container.best-seats-mode::after { display: none; }

.seat-map-container.best-seats-mode::after {
    content: "Click on any available seat to find the best seats near it";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 123, 255, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    pointer-events: none;
}

#seat-map {
    width: 100%;
    height: 100%;
    cursor: default;
    /* Touch gestures pan the map (seat_map.js), not the page */
    touch-action: none;
}

/* is-zoomed is maintained by seat_map.js: panning only does anything
   while zoomed in, so only then does the map advertise it */
#seat-map svg.is-zoomed {
    cursor: grab;
}

/* sweep-ready is maintained by seat_map.js (staff map, Shift held): a drag
   will sweep seats into the cart instead of panning. !important so it also
   wins over the inline pointer/not-allowed/grab values the hover handlers set. */
#seat-map svg.sweep-ready {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8.5c0 2.8-3.1 5-7 5s-7-2.2-7-5 3.1-5 7-5 7 2.2 7 5zM6.5 13.2c-.6 1.8.3 3.3 1.8 4.6s3.2 2.4 3.2 4.4' stroke='%23fff' stroke-width='4.5'/%3E%3Cpath d='M16 8.5c0 2.8-3.1 5-7 5s-7-2.2-7-5 3.1-5 7-5 7 2.2 7 5zM6.5 13.2c-.6 1.8.3 3.3 1.8 4.6s3.2 2.4 3.2 4.4' stroke='%23222' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 9 9, crosshair !important;
}

/* On-map pan arrows (customer page; shown only while zoomed in) */
#pan-controls {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: grid;
    grid-template-areas:
        ".    up    ."
        "left .     right"
        ".    down  .";
    gap: 4px;
    z-index: 1000;
}

#pan-controls button {
    width: 34px;
    height: 34px;
    border: 1px solid #6c757d;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pan-controls button:hover {
    background-color: #6c757d;
    color: #fff;
}

#pan-up { grid-area: up; }
#pan-down { grid-area: down; }
#pan-left { grid-area: left; }
#pan-right { grid-area: right; }

/* One-time "how to pan" hint, styled like the best-seats banner below */
#pan-hint {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(33, 37, 41, 0.85);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1s ease;
}

#pan-hint.fade-out {
    opacity: 0;
}

#seat-map svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.right-column {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
}

.seat-legend {
    background-color: #f8f9fa;
    border-radius: 5px;
    padding: 15px;
}

.order-summary {
    background-color: #f8f9fa;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.order-summary > .btn-lg {
    font-size: 1rem;
}

/* Style for the remove link */
.remove-seat, #remove-all-seats {
    color: #dc3545;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}

.remove-seat:hover {
    text-decoration: underline;
}

#remove-all-seats:hover {
    text-decoration: underline;
}

#order-items {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    max-height: 400px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    margin-bottom: 5px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.order-total {
    margin: 15px 0;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
    text-align: right;
    font-size: 1.2em;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.legend-color {
    width: 17px;
    height: 17px;
    margin-right: 6px;
    border: 1px solid #000;
}

.legend-label {
    font-size: 1.0em;
}

.legend-note {
    width: 100%;
    text-align: left;
    padding-left: 30px; /* Align with the legend text */
    margin-bottom: 8px;
}

.seat-tooltip {
    position: absolute;
    background-color: rgba(240, 240, 240, 1);
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    pointer-events: none;
    display: none;
    min-width: 175px;
}

.seat-tooltip p {
    line-height: 1em;
    margin-bottom: 0;
}

.level-selector {
    display: flex;
    gap: 5px;
}

.zoom-controls {
    display: flex;
    gap: 10px; /* Increase gap between buttons */
}

.zoom-controls button {
    min-width: 100px; /* Wider to accommodate text */
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0 10px; /* Add horizontal padding */
}

.zoom-controls button i {
    font-size: 16px;
    margin-right: 5px; /* Space between icon and text */
}

.accessibility-controls {
    flex: 1;
    display: flex;
    margin-top: 5px;
    flex-direction: column;
}

.form-check {
    margin-bottom: 0;
}

.status-legend {
    margin-top: 0;
    padding-top: 5px;
    border-top: 1px solid #dee2e6;
}

div.bg-warning {
    background-color: #bbbbbb !important;
}

div.bg-danger {
    background-color: #F44 !important;
}

.progress {
    position: relative;
    height: 25px;
}

.progress-bar {
    color: var(--src-black) !important;
    font-weight: bold !important;
}

.container h3 {
    margin-bottom: 5px !important;
    margin-top: 5px !important;
}

.btn-outline-secondary {
    color: var(--src-black) !important;
}

.btn-outline-secondary:hover {
    color: var(--src-white) !important;
}

.center-contents {
    text-align: center;
}

@media (max-width: 900px) {
    .seat-selection-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
    }

    .seat-map-controls {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        gap: 10px;
    }

    .seat-map-container {
        grid-column: 1;
        grid-row: 2;
        height: 50vh; /* Adjust height for mobile */
    }

    .right-column {
        grid-column: 1;
        grid-row: 3;
        height: auto;
    }

    .level-selector, .zoom-controls {
        width: 100%;
        justify-content: center;
    }

    /* Finger-sized pan arrows */
    #pan-controls button {
        width: 44px;
        height: 44px;
    }

    #pan-hint {
        white-space: normal;
        text-align: center;
        max-width: 85%;
    }
}

/* SuperSaver InstaSeat dialog (seat_map.html): non-modal. The .modal
   element still spans the viewport, so it must let pointer events through
   to the seat map and only the dialog box itself catch them. The header is
   the drag handle (seat_map.js SeatMap.makeDialogDraggable). The badge sits
   beside the offer text; the oval is rotated, so give it room on the left. */
.instaseat-dialog {
    pointer-events: none;
}
/* Bootstrap already gives .modal-dialog pointer-events: none and
   .modal-content auto, so only the box itself catches the pointer. */
.instaseat-dialog .modal-content {
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
.instaseat-drag-handle {
    cursor: move;
    user-select: none;
    touch-action: none;
}
#instaSeatModal .instaseat-art {
    padding: 0 0.5rem;
}
#instaSeatModal .super-saver-container {
    margin-top: 0.25rem;
}