/* Trigger Button */
.tb-trigger-btn {
    width: 100%;
    margin-top: 20px;
    padding: 15px 20px;
    font-size: 1.1em;
    font-weight: bold;
    background: #d35400;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.tb-trigger-btn:hover {
    background: #e67e22;
}

/* Modal Structure */
.tb-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    /* Max z-index to avoid stacking context issues */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;

    /* Important: Break out of stacking contexts if appended to body */
    transform: none !important;
    perspective: none !important;
    filter: none !important;

    pointer-events: none;
    transition: opacity 0.3s ease;
}

.tb-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.tb-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.tb-modal-container {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    animation: tbSlideUp 0.3s forwards;
}

@keyframes tbSlideUp {
    to {
        transform: translateY(0);
    }
}

/* Modal Header */
.tb-modal-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tb-modal-header h3 {
    margin: 0;
    font-size: 1.25em;
    color: #333;
}

.tb-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    color: #777;
    cursor: pointer;
    padding: 0;
}

.tb-modal-close:hover {
    color: #000;
}

/* Modal Body */
.tb-modal-body {
    padding: 20px;
    overflow-y: auto;
    /* Custom scrollbar for webkit */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

.tb-modal-body::-webkit-scrollbar {
    width: 8px;
}

.tb-modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.tb-modal-body::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* Reuse existing booking form styles inside modal */
.tb-booking-box.tb-modern-layout {
    box-shadow: none;
    /* Remove shadow inside modal */
    border: none;
    margin: 0;
    max-width: 100%;
}

/* Wizard Layout Structure */
.tb-wizard-layout {
    width: 900px;
    /* Wider for 2 cols */
    max-width: 95vw;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    max-height: 90vh;
}

.tb-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    z-index: 100;
    color: #555;
    transition: color 0.2s;
}

.tb-modal-close:hover {
    color: #000;
}

.tb-wizard-body {
    display: flex;
    height: 100%;
}

.tb-wizard-content {
    flex: 2;
    /* 66% width */
    padding: 30px;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.tb-wizard-sidebar {
    flex: 1;
    /* 33% width */
    background: #f0fdf9;
    /* Light green tint matching design */
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Step Tabs */
.tb-step-tabs {
    display: flex;
    border-bottom: 2px solid #e1e1e1;
    margin-bottom: 25px;
}

.tb-step-tab {
    padding-bottom: 10px;
    margin-right: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #aaa;
    position: relative;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tb-step-tab.active {
    color: #10b981;
    /* Green */
    border-bottom: 2px solid #10b981;
    margin-bottom: -2px;
    /* Overlap border */
}

/* Step Views */
.tb-step-view {
    display: none;
}

.tb-step-view.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step 1: Inline Calendar (Flatpickr) */
.tb-inline-calendar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#tb-inline-datepicker {
    /* Flatpickr container styles */
}

/* Custom Flatpickr Styles to match theme */
.flatpickr-calendar {
    box-shadow: none !important;
    border: 1px solid #eee !important;
    background: #fff;
    font-family: inherit;
    width: 100% !important;
    /* attempt responsive */
    max-width: 400px;
}

.flatpickr-day.tb-date-available {
    background: #e8f8f5;
    border-color: #e8f8f5;
    color: #27ae60;
    font-weight: bold;
}

.flatpickr-day.tb-date-available:hover {
    background: #d4efdf;
    border-color: #d4efdf;
}

.flatpickr-day.tb-date-blocked {
    background: #fadbd8;
    border-color: #fadbd8;
    color: #c0392b;
    text-decoration: line-through;
    cursor: not-allowed;
    opacity: 0.6;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

.flatpickr-weekday {
    color: #333;
    font-weight: bold;
}

.flatpickr-months .flatpickr-month {
    color: #333;
    fill: #333;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: bold;
}

/* Step Footer Buttons */
.tb-step-footer {
    display: flex;
    justify-content: center;
    /* Centered for step 1 */
    margin-top: 20px;
}

.step-2-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tb-btn-primary {
    background-color: #e69138;
    /* Orange from design */
    color: white;
    padding: 12px 30px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    transition: background 0.3s;
}

.tb-btn-primary:hover {
    background-color: #d35400;
}

.tb-btn-primary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.tb-btn-link {
    background: none;
    border: none;
    color: #da8c34;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

/* Sidebar Styles */
.tb-sidebar-header h5 {
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.tb-sidebar-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
    line-height: 1.4;
}

.tb-summary-item {
    font-size: 13px;
    margin-bottom: 15px;
    color: #374151;
}

.tb-summary-item .lbl {
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
    color: #6b7280;
}

.tb-package-tag {
    display: inline-block;
    background: #10b981;
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.tb-summary-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 20px 0;
}

.tb-summary-total-row {
    font-size: 18px;
    font-weight: 800;
    color: #000;
    display: flex;
    justify-content: space-between;
}

/* Mobile Responsiveness for Wizard */
@media (max-width: 768px) {
    .tb-wizard-body {
        flex-direction: column;
    }

    .tb-wizard-sidebar {
        order: -1;
        /* Sidebar on top? or bottom? Design usually bottom on mobile or condensed */
        padding: 20px;
    }

    .tb-wizard-content {
        padding: 20px;
    }
}

/* Existing Styles (Minified/Condensed for reference, ensuring compatibility) */
.tb-booking-header {
    background: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.tb-date-selection {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.tb-date-selection label {
    font-weight: 600;
    color: #333;
    margin: 0;
    white-space: nowrap;
}

.tb-date-input-wrap {
    flex: 1;
    max-width: 300px;
}

.tb-date-picker {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.tb-check-btn {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    background: #2271b1;
    color: #fff;
    border: none;
}

.tb-check-btn:hover {
    background: #135e96;
}

.tb-check-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.tb-tickets-container {
    padding: 20px;
}

.tb-tickets-header {
    display: flex;
    font-weight: 700;
    color: #555;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.5px;
}

/* Main Ticket Body List */
.tb-tickets-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Group Wrapper */
.tb-ticket-group {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.tb-ticket-group:last-child {
    border-bottom: none;
}

/* Row Layout */
.tb-ticket-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

/* Columns */
.col-type {
    flex: 2;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.col-price {
    flex: 1;
    text-align: center;
}

.col-avail {
    flex: 1;
    text-align: center;
}

.col-qty {
    flex: 1;
    text-align: right;
    min-width: 120px;
}

/* Typography & Components */
.tb-ticket-name {
    display: block;
    font-weight: 600;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 4px;
}

.tb-ticket-name i {
    margin-right: 6px;
    color: #666;
}

.tb-ticket-desc {
    display: block;
    font-size: 0.9em;
    color: #777;
    margin-bottom: 8px;
}

.tb-price-val {
    font-weight: 700;
    color: #222;
    font-size: 1.1em;
}

/* Availability Bar */
.tb-avail-bar {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    margin-top: 5px;
    width: 80%;
    margin: 5px auto 0;
    overflow: hidden;
}

.tb-avail-bar span {
    display: block;
    height: 100%;
    background: #10b981;
}

.tb-avail-count {
    font-size: 0.85em;
    color: #10b981;
    font-weight: 600;
}

.tb-avail-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #d1fae5;
    color: #065f46;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

/* Quantity Control */
.tb-qty-ctrl {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.qty-btn {
    border: none;
    background: #f3f4f6;
    color: #333;
    width: 32px;
    height: 36px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1;
}

.qty-btn:hover {
    background: #e5e7eb;
}

.tb-ticket-qty {
    width: 50px;
    text-align: center;
    border: none;
    height: 36px;
    font-weight: 600;
    -moz-appearance: textfield;
}

.tb-ticket-qty::-webkit-outer-spin-button,
.tb-ticket-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Group Pricing Toggle */
.tb-toggle-pricing {
    transition: color 0.2s;
}

.tb-toggle-pricing:hover {
    color: #a04000 !important;
}

/* Pricing Details Row */
.tb-pricing-details {
    /* Styles inline in PHP used for base, but we can refine here */
    border-radius: 0 0 4px 4px;
    margin-top: -5px;
    /* Pull it up slightly visually */
}

.tb-gp-rules-row {
    margin-top: 5px !important;
}

.tb-gp-rules-row li {
    background: #fff;
    border: 1px solid #fcebb6;
    padding: 3px 8px;
    border-radius: 3px;
    color: #b45309;
}

.tb-booking-footer {
    background: #f8f9fa;
    padding: 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.tb-total-section {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
}

#tb-total-price {
    color: #2271b1;
    font-weight: 800;
}

.tb-submit-btn {
    font-size: 1.1em;
    padding: 12px 30px;
    background: #d35400;
    color: white;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.tb-submit-btn:hover {
    background: #e67e22;
}

.tb-error,
.tb-success {
    padding: 10px 15px;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 10px;
    text-align: right;
    font-weight: 500;
}

.tb-error {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.tb-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.tb-discount-notice {
    font-size: 0.9em;
    color: #047857;
    margin-top: 4px;
    font-style: italic;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .tb-modal-container {
        width: 95%;
        max-height: 95vh;
    }

    .tb-booking-header {
        flex-direction: column;
        align-items: stretch;
    }

    .tb-date-selection {
        flex-direction: column;
        align-items: stretch;
    }

    .tb-date-input-wrap {
        max-width: none;
    }

    .tb-tickets-header {
        display: none;
    }

    .tb-ticket-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        background: #fcfcfc;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-bottom: 15px;
        position: relative;
    }

    .col-type {
        width: 100%;
        margin-bottom: 10px;
    }

    .col-price {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .col-avail {
        width: 100%;
        margin-bottom: 15px;
        text-align: left;
    }

    .col-qty {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

/* Datepicker Availability Styles */
.tb-date-available a.ui-state-default {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #10b981 !important;
}

.tb-date-available a.ui-state-active,
.tb-date-available a.ui-state-hover {
    background: #10b981 !important;
    color: #fff !important;
}

.tb-date-blocked span.ui-state-default,
.tb-date-blocked a.ui-state-default {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    opacity: 0.6;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Fix jQuery UI z-index to be above modal */
#ui-datepicker-div {
    z-index: 2147483647 !important;
}