/* CSS for Portal Checkout Tickets */
.room-map-viewport {
    overflow: auto !important;
    max-height: 80vh !important;
}

/* Responsive Table for Mobile */
@media (max-width: 767.98px) {
    .table-responsive {
        border: 0;
    }
    .table-responsive table,
    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        display: block;
    }
    .table-responsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    .table-responsive tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        background: #fff;
        padding: 0.5rem;
    }
    .table-responsive td {
        border: none;
        position: relative;
        padding-left: 50% !important;
        text-align: right;
        min-height: 2.5rem;
    }
    .table-responsive td:before {
        content: attr(data-label);
        position: absolute;
        left: 0.75rem;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #6c757d;
    }
    .table-responsive td[data-label]:before {
        content: attr(data-label);
    }
    /* Special handling for ticket name if it should take full width */
    .table-responsive td:first-child,
    .table-responsive td[data-is-single] {
        text-align: left !important;
        padding-left: 0.75rem !important;
    }
    .table-responsive td:first-child {
        border-bottom: 1px solid #eee;
        margin-bottom: 0.5rem;
    }
    .table-responsive td:first-child:before {
        display: none;
    }
    .table-responsive td[data-is-single]:before {
        position: static;
        display: block;
        width: 100%;
        margin-bottom: 0.25rem;
    }

    /* Ensure select is readable on mobile */
    .table-responsive .form-select.ticket-quantity {
        display: inline-block;
        width: auto;
        min-width: 80px;
        background-color: #fff !important;
        color: #333 !important;
        border: 1px solid #ced4da !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
        padding-right: 2.25rem;
    }

    /* Dark mode adjustments for mobile cards */
    html[data-color-theme="dark"] .table-responsive tr {
        background: #252b31;
        border-color: rgba(255, 255, 255, 0.1);
    }
    html[data-color-theme="dark"] .table-responsive td:before {
        color: #adb5bd;
    }
    html[data-color-theme="dark"] .table-responsive .form-select.ticket-quantity {
        background-color: #1a1d21 !important;
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}