/**
 * Booking Flow Styles
 * Modern, conversion-focused design for the booking process
 */

/* ==========================================================================
   Progress Steps - Premium Design
   ========================================================================== */

.booking-progress {
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.booking-progress-inner {
    display: flex;
    justify-content: space-between;
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.booking-progress-inner::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: #e5e7eb;
    z-index: 0;
}

.booking-progress-inner::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 40px;
    height: 3px;
    background: var(--gradient-primary);
    z-index: 1;
    transition: width var(--transition-slow);
}

/* Progress step states - width controlled by data attributes on .booking-progress */
.booking-progress[data-step="1"] .booking-progress-inner::after { width: 0%; }

/* 3-step progress widths (with addons: Book > Add-ons > Review & Pay) */
.booking-progress[data-step="2"][data-total-steps="3"] .booking-progress-inner::after { width: 50%; }
.booking-progress[data-step="3"][data-total-steps="3"] .booking-progress-inner::after { width: calc(100% - 80px); }

/* 2-step progress widths (no addons: Book > Review & Pay) */
.booking-progress[data-step="2"][data-total-steps="2"] .booking-progress-inner::after { width: calc(100% - 80px); }

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.progress-step-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: #ffffff;
    border: 3px solid var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-lg);
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.progress-step.active .progress-step-icon {
    background: var(--gradient-primary);
    border-color: var(--color-primary-dark);
    color: #ffffff;
    box-shadow: var(--shadow-colored);
    transform: scale(1.1);
}

.progress-step.completed .progress-step-icon {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.progress-step-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    transition: color var(--transition-base);
}

.progress-step.active .progress-step-label {
    color: var(--color-primary-dark);
    font-weight: 600;
}

.progress-step.completed .progress-step-label {
    color: #10b981;
}

/* Breadcrumb product name truncation */
.booking-page-container .breadcrumb-item:nth-child(3) a {
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

/* ==========================================================================
   Ticket Selection Container
   ========================================================================== */

.ticket-selection-container {
    background: #ffffff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ticket-selection-header {
    background: var(--gradient-primary);
    padding: var(--space-6) var(--space-8);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-selection-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: var(--text-2xl);
    font-weight: 700;
}

.ticket-selection-subheader {
    opacity: 0.9;
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

.ticket-selection-body {
    padding: var(--space-8);
}

.ticket-selection-footer {
    padding: var(--space-5) var(--space-8);
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
}

/* Product Info Banner */
.product-info-banner {
    background: linear-gradient(135deg, var(--color-primary-lightest) 0%, #f8fafc 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    border-left: 4px solid var(--color-primary);
}

.product-info-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #374151;
    margin: 0 0 var(--space-1);
}

.product-info-type {
    color: var(--color-primary-dark);
    font-size: var(--text-sm);
    font-weight: 500;
    margin: 0;
}

.product-info-description {
    color: #6b7280;
    font-size: var(--text-sm);
    margin: var(--space-3) 0 0;
}

/* ==========================================================================
   Pickup Point Selection
   ========================================================================== */

.pickup-point-section {
}

.pickup-point-label {
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
    margin: 0;
}

.pickup-point-label i {
    margin-right: var(--space-2);
}

.pickup-point-select {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    background: #ffffff;
    color: #9ca3af;
    cursor: pointer;
    transition: all var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-5) center;
    padding-right: var(--space-10);
}

.pickup-point-select:not([value=""]):valid {
    color: #374151;
}

.pickup-point-select:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.pickup-point-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(172, 136, 232, 0.2);
}

/* ==========================================================================
   Admin Customer Selection (Drawer)
   ========================================================================== */

.drawer-customer-section {
}

.drawer-customer-search-wrap {
    position: relative;
    margin-bottom: var(--space-2);
}

.drawer-customer-search {
    width: 100%;
    padding: var(--space-4) var(--space-5) var(--space-4) var(--space-10);
    font-size: var(--text-base);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    color: #6b7280;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.drawer-customer-search:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(172, 136, 232, 0.2);
    color: #374151;
}

.drawer-customer-search-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: var(--text-sm);
    pointer-events: none;
}

.drawer-customer-select {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-base);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    color: #6b7280;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-5) center;
    padding-right: var(--space-10);
    max-height: 200px;
}

.drawer-customer-select:not([value=""]):valid {
    color: #374151;
}

.drawer-customer-select:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.drawer-customer-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(172, 136, 232, 0.2);
}

.drawer-customer-select option {
    padding: var(--space-2);
}

.drawer-customer-select option[hidden] {
    display: none;
}

/* ==========================================================================
   Ticket Variant Cards
   ========================================================================== */

.ticket-variants {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ticket-variant-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    transition: all var(--transition-base);
}

.ticket-variant-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.ticket-variant-card.has-quantity {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}

.ticket-variant-info {
    flex: 1;
    min-width: 0;
}

.ticket-variant-name {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #374151;
    margin: 0 0 var(--space-1);
}

.ticket-variant-description {
    font-size: var(--text-sm);
    color: #6b7280;
    margin: 0;
}

.ticket-variant-price {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #374151;
    margin-right: var(--space-6);
    white-space: nowrap;
}

/* ==========================================================================
   Modern Quantity Selector
   ========================================================================== */

.quantity-selector-modern {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: #f9fafb;
    border-radius: var(--radius-full);
    padding: var(--space-1);
}

.qty-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: none;
    background: #ffffff;
    color: #6b7280;
    font-size: var(--text-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.qty-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: #ffffff;
    transform: scale(1.1);
}

.qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qty-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.qty-value {
    min-width: 48px;
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 700;
    color: #374151;
}

.qty-input-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Pax Breakdown (per_unit mode)
   ========================================================================== */

.pax-breakdown-section {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #f8f9fa;
    border-radius: var(--radius-lg);
    border: 1px solid #e9ecef;
}

.pax-breakdown-header {
    font-size: var(--text-xs);
    color: #6b7280;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
}

.pax-unit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid #e9ecef;
}

.pax-unit-row:last-child {
    border-bottom: none;
}

.pax-unit-label {
    font-size: var(--text-sm);
    color: #374151;
    font-weight: 500;
}

.pax-unit-selector {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pax-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #374151;
    transition: all var(--transition-base);
}

.pax-btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pax-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pax-unit-value {
    font-size: var(--text-sm);
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    color: #374151;
}

/* ==========================================================================
   Order Summary Sidebar
   ========================================================================== */

.order-summary-card {
    background: #ffffff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    position: sticky;
    top: var(--space-5);
}

.order-summary-header {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    padding: var(--space-5);
    color: #ffffff;
}

.order-summary-header h3 {
    margin: 0;
    color: #ffffff;
    font-size: var(--text-lg);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.order-summary-body {
    padding: var(--space-5);
}

.order-product-info {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid #e5e7eb;
}

.order-product-title {
    font-weight: 600;
    color: #374151;
    margin: 0 0 var(--space-1);
}

.order-product-type {
    font-size: var(--text-sm);
    color: #6b7280;
    margin: 0;
}

.order-items {
    margin-bottom: var(--space-4);
    min-height: 60px;
}

.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.order-item-name {
    color: #4b5563;
}

.order-item-price {
    font-weight: 600;
    color: #374151;
}

.order-empty {
    text-align: center;
    padding: var(--space-4);
    color: #9ca3af;
    font-size: var(--text-sm);
}

.order-empty i {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
    display: block;
}

.order-total-section {
    background: linear-gradient(135deg, var(--color-primary-lightest) 0%, #f8fafc 100%);
    margin: 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1);
    padding: var(--space-5);
}

.order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-total-label {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #374151;
}

.order-total-amount {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #374151;
}

.drawer-points-earn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background: #e8f5e9;
    border-radius: 6px;
    font-size: 13px;
    color: #2e7d32;
}

.drawer-points-earn > i {
    color: #4caf50;
    font-size: 14px;
    flex-shrink: 0;
}

.drawer-points-earn > span {
    font-weight: 600;
}

.points-info-icon {
    margin-left: auto;
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.points-info-icon > i {
    color: #2e7d32;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.points-info-icon:hover > i,
.points-info-icon:focus > i {
    opacity: 1;
}

.points-info-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 260px;
    padding: 12px 14px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 100;
    pointer-events: none;
}

.points-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 4px;
    border: 6px solid transparent;
    border-top-color: #fff;
}

.points-info-icon:hover .points-info-tooltip,
.points-info-icon:focus .points-info-tooltip {
    display: block;
}

/* ==========================================================================
   Action Buttons
   ========================================================================== */

.booking-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6) var(--space-8);
    border-top: 1px solid #e5e7eb;
}

.ticket-selection-body .booking-actions {
    padding-left: 0;
    padding-right: 0;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    color: #4b5563;
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-back:hover {
    border-color: #9ca3af;
    color: #374151;
    transform: translateX(-4px);
    text-decoration: none;
}

.btn-continue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-lg);
    color: #ffffff;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-colored);
}

.btn-continue:hover:not(:disabled) {
    transform: translateY(-2px) translateX(4px);
    box-shadow: var(--shadow-xl);
}

.btn-continue:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-continue i {
    transition: transform var(--transition-base);
}

.btn-continue:hover:not(:disabled) i {
    transform: translateX(4px);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 991px) {
    .order-summary-card {
        position: static;
        margin-top: var(--space-6);
    }

    .ticket-selection-header,
    .ticket-selection-body,
    .ticket-selection-footer,
    .booking-actions {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .booking-review-row {
        display: flex;
        flex-direction: column;
    }

    .booking-review-row > .col-lg-4 {
        order: -1;
        margin-bottom: var(--space-6);
    }

    .booking-review-row > .col-lg-4 .order-summary-card {
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .booking-progress {
        padding: var(--space-4);
        margin-bottom: var(--space-6);
    }

    .booking-progress-inner::before,
    .booking-progress-inner::after {
        top: 18px;
        left: 20px;
        right: 20px;
    }

    .progress-step-icon {
        width: 36px;
        height: 36px;
        font-size: var(--text-sm);
    }

    .progress-step-label {
        display: none;
    }

    .ticket-variant-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: var(--space-4);
        padding: var(--space-4);
    }

    .ticket-variant-price {
        margin-right: 0;
        font-size: var(--text-lg);
    }

    .quantity-selector-modern {
        justify-content: center;
    }

    .booking-actions {
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .pickup-point-select {
        width: 100%;
    }

    .product-info-banner {
        padding: var(--space-4);
    }
}

/* Mobile sticky CTA for booking */
.mobile-booking-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: var(--space-3) var(--space-4);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

@media (max-width: 991px) {
    .mobile-booking-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .mobile-cta-price {
        display: flex;
        flex-direction: column;
    }

    .mobile-cta-label {
        font-size: var(--text-xs);
        color: #6b7280;
        text-transform: uppercase;
        font-weight: 500;
    }

    .mobile-cta-amount {
        font-size: var(--text-xl);
        font-weight: 700;
        color: #374151;
    }

    .mobile-cta-btn {
        flex: 1;
        max-width: 180px;
    }

    /* Add padding at bottom for mobile CTA */
    .booking-page-container {
        padding-bottom: 80px;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ticket-variant-card {
    animation: fadeIn var(--transition-base) ease-out;
}

.ticket-variant-card:nth-child(1) { animation-delay: 0ms; }
.ticket-variant-card:nth-child(2) { animation-delay: 50ms; }
.ticket-variant-card:nth-child(3) { animation-delay: 100ms; }
.ticket-variant-card:nth-child(4) { animation-delay: 150ms; }
.ticket-variant-card:nth-child(5) { animation-delay: 200ms; }

/* ==========================================================================
   Capacity Indicator (date-first booking flow)
   ========================================================================== */

.capacity-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.capacity-text {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #166534;
    white-space: nowrap;
}

.capacity-bar {
    flex: 1;
    height: 8px;
    background: #e5e7eb;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.capacity-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.capacity-bar-fill.full {
    background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

/* ==========================================================================
   Date Input Trigger (opens calendar modal)
   ========================================================================== */

.date-input-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
    font-size: var(--text-base);
    color: #9ca3af;
}

.date-input-trigger:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.date-input-trigger.has-value {
    border-color: #6B7280;
    color: #374151;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.04) 0%, #ffffff 100%);
}

.date-input-trigger > .fa-calendar-alt {
    color: var(--color-primary);
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.date-input-trigger .date-input-arrow {
    margin-left: auto;
    color: #9ca3af;
    font-size: var(--text-sm);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.date-input-trigger:hover .date-input-arrow {
    transform: translateX(3px);
}

#date-input-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   Calendar Modal
   ========================================================================== */

.calendar-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: modalOverlayFadeIn 200ms ease;
}

.calendar-modal {
    background: #ffffff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

.calendar-modal-header h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: #374151;
}

.calendar-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.calendar-modal-close:hover {
    background: #e5e7eb;
    color: #374151;
}

.calendar-modal-body {
    padding: 0;
}

/* Remove calendar's own shadow/margin when inside modal */
.calendar-modal .booking-calendar {
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 0;
}

/* Timeslot container inside modal gets padding */
.calendar-modal #timeslot-container {
    padding: 0 var(--space-5) var(--space-5);
}

@keyframes modalOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Calendar Modal Responsive - Mobile */
@media (max-width: 480px) {
    .calendar-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .calendar-modal {
        max-width: 100%;
        max-height: 95vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .calendar-modal-header {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
}

/* ==========================================================================
   Calendar Date Selection - Premium Design
   ========================================================================== */

.booking-calendar {
    background: #ffffff;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    margin-bottom: var(--space-5);
}

/* Gradient Header */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    background: var(--gradient-primary);
    position: relative;
}

.calendar-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Glass Nav Buttons */
.calendar-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    z-index: 1;
    font-size: 12px;
}

.calendar-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.calendar-nav-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.calendar-nav-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.calendar-month-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #ffffff;
    position: relative;
    z-index: 1;
    letter-spacing: -0.01em;
}

/* Calendar Body */
.calendar-body {
    padding: var(--space-5) var(--space-6);
}

/* Weekday Headers */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0 var(--space-5);
    padding-top: var(--space-4);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: var(--space-2);
}

.calendar-weekday {
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-1) 0;
}

/* Day Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: var(--space-3) var(--space-5) var(--space-4);
}

/* Day Cells */
.calendar-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    transition: all var(--transition-base);
    min-height: 58px;
    gap: 2px;
}

.calendar-day .day-number {
    font-size: var(--text-base);
    font-weight: 500;
    color: #6b7280;
    line-height: 1;
    transition: all var(--transition-base);
    z-index: 1;
}

/* Other Month - Faded */
.calendar-day.other-month {
    opacity: 0.25;
}

.calendar-day.other-month .day-number {
    color: #9ca3af;
}

/* Unavailable - Grayed */
.calendar-day.unavailable .day-number {
    color: #d1d5db;
}

.calendar-day.unavailable {
    background: #fafafa;
}

/* Insufficient Capacity - Amber/warning */
.calendar-day.insufficient-capacity {
    background: #fef3c7;
    border: 1px solid #fbbf24;
    cursor: not-allowed;
}

.calendar-day.insufficient-capacity .day-number {
    color: #92400e;
    font-weight: 600;
}

.calendar-day.insufficient-capacity:hover {
    transform: none;
    box-shadow: none;
}

.calendar-day .day-insufficient {
    font-size: 8px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    background: #f59e0b;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 3px;
    z-index: 1;
}

/* Today Indicator */
.calendar-day.today {
    border: 2px dashed var(--color-primary-light);
}

.calendar-day.today .day-number {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.calendar-day.today::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    z-index: 1;
}

/* Available Days */
.calendar-day.available {
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: var(--shadow-sm);
}

.calendar-day.available .day-number {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.calendar-day.available:hover {
    border-color: var(--color-primary-light);
    background: var(--color-primary-lightest);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.calendar-day.available:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Selected Day */
.calendar-day.selected {
    border: 2px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(172, 136, 232, 0.18) 0%, rgba(172, 136, 232, 0.06) 100%);
    box-shadow: var(--shadow-colored);
    transform: translateY(-2px);
}

.calendar-day.selected .day-number {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: #ffffff;
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--text-sm);
}

.calendar-day.today.selected {
    border-style: solid;
}

.calendar-day.today.selected::after {
    display: none;
}

/* Availability Badge - Absolute positioned */
.calendar-day .day-availability {
    font-size: 8px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
    background: #10b981;
    padding: 1px 5px;
    border-radius: var(--radius-full);
    position: absolute;
    bottom: 3px;
    z-index: 1;
}

/* Price Adjustment Badge */
.calendar-day .day-adjustment {
    font-size: 7px;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1;
    white-space: nowrap;
    background: var(--color-primary-lightest);
    padding: 1px 4px;
    border-radius: var(--radius-full);
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 1;
}

/* Day Cell Staggered Animation */
@keyframes calendarDayFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.calendar-day.cal-animate {
    animation: calendarDayFadeIn 250ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Selected Date Info Strip */
.calendar-selected-info {
    margin: 0 var(--space-5) var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: rgba(107, 114, 128, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(107, 114, 128, 0.15);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    animation: calInfoSlideIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes calInfoSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cal-info-date {
    font-size: var(--text-base);
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
}

.cal-info-date i {
    width: 30px;
    height: 30px;
    background: var(--gradient-primary);
    color: #ffffff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    margin-right: var(--space-3);
    flex-shrink: 0;
}

.cal-info-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cal-info-availability {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.cal-info-adjustment {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, var(--color-primary-lightest) 0%, var(--color-primary-light) 100%);
    color: var(--color-primary-darker);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Calendar Responsive - Tablet */
@media (max-width: 768px) {
    .calendar-header {
        padding: var(--space-3) var(--space-4);
    }

    .calendar-weekdays {
        padding: 0 var(--space-4);
        padding-top: var(--space-3);
        padding-bottom: var(--space-2);
    }

    .calendar-grid {
        padding: var(--space-2) var(--space-4) var(--space-3);
    }

    .calendar-day {
        min-height: 54px;
    }

    .calendar-day .day-availability,
    .calendar-day .day-adjustment,
    .calendar-day .day-insufficient {
        display: none;
    }

    .calendar-selected-info {
        margin: 0 var(--space-4) var(--space-3);
    }

    .timeslot-grid {
        grid-template-columns: 1fr;
    }
}

/* Calendar Responsive - Mobile */
@media (max-width: 480px) {
    .calendar-header {
        padding: var(--space-2) var(--space-3);
    }

    .calendar-nav-btn {
        width: 34px;
        height: 34px;
        font-size: 11px;
    }

    .calendar-month-title {
        font-size: var(--text-base);
    }

    .calendar-weekdays {
        padding: 0 var(--space-3);
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
        gap: 3px;
    }

    .calendar-weekday {
        font-size: 10px;
    }

    .calendar-grid {
        padding: var(--space-2) var(--space-3) var(--space-3);
        gap: 3px;
    }

    .calendar-day {
        min-height: 46px;
        border-radius: var(--radius-md);
    }

    .calendar-day .day-number {
        font-size: var(--text-sm);
    }

    .calendar-day.selected .day-number {
        width: 24px;
        height: 24px;
        font-size: var(--text-xs);
    }

    .calendar-selected-info {
        margin: 0 var(--space-3) var(--space-3);
        padding: var(--space-3) var(--space-4);
        flex-direction: column;
        align-items: flex-start;
    }

    .cal-info-date {
        font-size: var(--text-sm);
    }

    .cal-info-date i {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
}

/* ==========================================================================
   Timeslot Selection
   ========================================================================== */

.timeslot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.timeslot-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    cursor: pointer;
    transition: all var(--transition-base);
}

.timeslot-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.timeslot-card.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, #ffffff 100%);
    box-shadow: 0 10px 30px -5px rgba(59, 130, 246, 0.2);
}

.timeslot-card.insufficient-capacity {
    opacity: 0.6;
    cursor: not-allowed;
    background: #fef3c7;
    border-color: #fbbf24;
}

.timeslot-card.insufficient-capacity:hover {
    border-color: #fbbf24;
    box-shadow: none;
    transform: none;
}

.timeslot-name {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #374151;
    margin-bottom: var(--space-1);
}

.timeslot-time {
    font-size: var(--text-sm);
    color: #6b7280;
    margin-bottom: var(--space-3);
}

.timeslot-availability {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: #10b981;
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

.timeslot-availability.insufficient {
    background: #f59e0b;
}

.timeslot-adjustment {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-left: var(--space-2);
}

/* Timeslot Card Staggered Animation */
@keyframes timeslotFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeslot-card.timeslot-animate {
    animation: timeslotFadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Date Select Label (reused for timeslot mode heading) */
.date-select-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #374151;
    margin-bottom: var(--space-2);
}

/* No Dates Warning */
.no-dates-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin: 0 24px;
    text-align: center;
}

.no-dates-warning i {
    font-size: var(--text-3xl);
    color: #f59e0b;
    margin-bottom: var(--space-3);
}

.no-dates-warning p {
    color: #92400e;
    margin: 0;
}

/* Selected Date Info in Summary */
.order-selected-date {
    padding: var(--space-3) 0;
}

.order-selected-date-label {
    font-size: var(--text-xs);
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.order-selected-date-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #374151;
}

.order-price-adjustment {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: #6b7280;
    margin-top: var(--space-2);
}

/* ==========================================================================
   Add-ons Page
   ========================================================================== */

.addon-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}

.addon-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.addon-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
}

.addon-card.has-quantity {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
    box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.2);
}

.addon-card-body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.addon-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.addon-card-name {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.addon-required-badge {
    padding: var(--space-1) var(--space-2);
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.addon-card-description {
    font-size: var(--text-sm);
    color: #6b7280;
    margin: 0 0 var(--space-4);
    flex: 1;
}

.addon-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-4);
    border-top: 1px solid #e5e7eb;
    margin-top: auto;
}

.addon-card-price {
    font-size: var(--text-lg);
    font-weight: 700;
    color: #374151;
}

.addon-card-price-type {
    font-size: var(--text-xs);
    font-weight: 500;
    color: #6b7280;
    display: block;
    margin-top: var(--space-1);
}

/* No Addons Info Box */
.no-addons-info {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 2px solid #3b82f6;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
}

.no-addons-info i {
    font-size: var(--text-3xl);
    color: #3b82f6;
    margin-bottom: var(--space-3);
}

.no-addons-info p {
    color: #1e40af;
    margin: 0;
}

/* Order Summary - Addons Section */
.order-section-label {
    font-size: var(--text-xs);
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: var(--space-2);
}

.order-addons-section {
    padding: var(--space-3) 0;
    border-top: 1px dashed #e5e7eb;
}

.order-subtotal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.order-subtotal-row span:first-child {
    color: #6b7280;
}

.order-subtotal-row span:last-child {
    font-weight: 600;
    color: #374151;
}

/* Addon animation */
.addon-card {
    animation: fadeIn var(--transition-base) ease-out;
}

.addon-card:nth-child(1) { animation-delay: 0ms; }
.addon-card:nth-child(2) { animation-delay: 50ms; }
.addon-card:nth-child(3) { animation-delay: 100ms; }
.addon-card:nth-child(4) { animation-delay: 150ms; }
.addon-card:nth-child(5) { animation-delay: 200ms; }
.addon-card:nth-child(6) { animation-delay: 250ms; }

/* Mobile responsive for addon cards */
@media (max-width: 768px) {
    .addon-cards {
        grid-template-columns: 1fr;
    }

    .addon-card-footer {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
        text-align: center;
    }

    .addon-card-footer .quantity-selector-modern {
        justify-content: center;
    }
}

/* ==========================================================================
   Review Page - Contact Form
   ========================================================================== */

/* Form Layout */
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: var(--space-4);
    }

    .form-row:last-child {
        margin-bottom: 0;
    }
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-group:last-child {
    margin-bottom: 0;
}

/* Modern Form Labels */
.form-label-modern {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: #374151;
    margin-bottom: var(--space-2);
}

.form-label-modern .required-star {
    color: #ef4444;
    margin-left: 2px;
}

/* Modern Form Inputs */
.form-input-modern {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    background: #ffffff;
    color: #374151;
    transition: all var(--transition-base);
    font-family: inherit;
}

.form-input-modern:hover {
    border-color: #d1d5db;
}

.form-input-modern:focus {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
}

.form-input-modern::placeholder {
    color: #9ca3af;
}

.form-input-modern.is-invalid {
    border-color: #ef4444;
}

.form-input-modern.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Select dropdown styling */
select.form-input-modern {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 1 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 1 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
    cursor: pointer;
}

/* intl-tel-input overrides to match form styling */
.iti {
    width: 100%;
}

.iti .iti__tel-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    background: #ffffff;
    color: #374151;
    transition: all var(--transition-base);
    font-family: inherit;
}

.iti .iti__tel-input:hover {
    border-color: #d1d5db;
}

.iti .iti__tel-input:focus {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
}

.iti .iti__tel-input.is-invalid {
    border-color: #ef4444;
}

.iti .iti__tel-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.contact-detail-value {
    font-size: var(--text-base);
    color: #1f2937;
    padding: var(--space-3) 0;
    margin: 0;
}

.btn-edit-contact {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: #7c3aed;
    text-decoration: none;
    cursor: pointer;
}

.btn-edit-contact:hover {
    color: #6d28d9;
    text-decoration: underline;
}

.form-textarea-modern {
    min-height: 100px;
    resize: vertical;
}

.form-error {
    color: #ef4444;
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

/* Contact Info Banner */
.contact-info-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #3b82f6;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.contact-info-banner i {
    color: #3b82f6;
    font-size: var(--text-lg);
    margin-top: 2px;
    flex-shrink: 0;
}

.contact-info-banner p {
    color: #1e40af;
    font-size: var(--text-sm);
    margin: 0;
}

/* Terms Section */
.terms-section {
    background: #f9fafb;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-top: var(--space-6);
}

.terms-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}

.terms-header:hover {
    color: #374151;
}

.terms-header i {
    transition: transform var(--transition-base);
    font-size: var(--text-xs);
}

.terms-header.expanded i {
    transform: rotate(180deg);
}

.terms-content {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid #e5e7eb;
    font-size: var(--text-sm);
    color: #6b7280;
    line-height: 1.6;
}

.terms-content p {
    margin: 0 0 var(--space-2);
}

.terms-content ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.terms-content li {
    margin-bottom: var(--space-1);
}

/* Open Dated Badge */
.open-dated-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
}

/* Pickup Point Display in Order Summary */
.order-pickup-point {
    padding: var(--space-3) 0;
    border-top: 1px solid #e5e7eb;
}

.order-pickup-point-label {
    font-size: var(--text-xs);
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.order-pickup-point-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #374151;
}

/* ==========================================================================
   Terms Agreement Checkbox
   ========================================================================== */

.terms-agreement {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid #e5e7eb;
}

.terms-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: #374151;
}

.terms-checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.terms-checkbox-custom {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: var(--radius-sm);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    margin-top: 2px;
}

.terms-checkbox-label:hover .terms-checkbox-custom {
    border-color: var(--color-primary-light);
}

.terms-checkbox-label input:checked + .terms-checkbox-custom {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
}

.terms-checkbox-label input:checked + .terms-checkbox-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffffff;
    font-size: 12px;
}

.terms-checkbox-label input:focus + .terms-checkbox-custom {
    box-shadow: 0 0 0 3px rgba(172, 136, 232, 0.2);
}

.terms-checkbox-text {
    line-height: 1.5;
}

.terms-checkbox-text a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

.terms-checkbox-text a:hover {
    color: var(--color-primary-dark);
}

/* Validation state */
.terms-agreement.is-invalid .terms-checkbox-custom {
    border-color: #ef4444;
}

.terms-agreement .form-error {
    margin-top: var(--space-2);
    margin-left: 32px;
}

.payment-section-divider {
    border-top: 2px solid #e5e7eb;
    margin: var(--space-5) 0;
}

/* HitPay Payment Gateway Card */
.hitpay-payment-card {
    background: #f3f0f9;
    border: 1px solid #e5e0f0;
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-top: var(--space-5);
}

.hitpay-payment-header h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: #374151;
    margin: 0 0 var(--space-4);
}

.hitpay-payment-icons {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.hitpay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 22px;
    color: #ffffff;
    padding: 0 var(--space-2);
}

.hitpay-icon-paynow {
    background: #7B2D8E;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.3px;
}

.hitpay-icon-visa {
    background: #1A1F71;
}

.hitpay-icon-mastercard {
    background: #FF5F00;
}

.hitpay-icon-amex {
    background: #006FCF;
}

.hitpay-payment-privacy {
    padding: var(--space-5) 0;
    border-top: 1px solid #ddd6ec;
}

.hitpay-payment-privacy p {
    font-size: var(--text-sm);
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.hitpay-payment-privacy a {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.hitpay-payment-privacy a:hover {
    color: var(--color-primary-darker);
}

.hitpay-payment-terms {
    padding: var(--space-4) 0;
    border-top: 1px solid #ddd6ec;
    margin-bottom: var(--space-5);
}

.hitpay-terms-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    color: #374151;
}

.hitpay-terms-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.hitpay-terms-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: var(--radius-sm);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    margin-top: 2px;
}

.hitpay-terms-label:hover .hitpay-terms-checkbox {
    border-color: var(--color-primary-light);
}

.hitpay-terms-label input:checked + .hitpay-terms-checkbox {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
}

.hitpay-terms-label input:checked + .hitpay-terms-checkbox::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffffff;
    font-size: 12px;
}

.hitpay-terms-label input:focus + .hitpay-terms-checkbox {
    box-shadow: 0 0 0 3px rgba(172, 136, 232, 0.2);
}

.hitpay-terms-text {
    line-height: 1.5;
}

.hitpay-terms-text a {
    color: var(--color-primary-dark);
    text-decoration: underline;
    font-weight: 500;
}

.hitpay-terms-text a:hover {
    color: var(--color-primary-darker);
}

.hitpay-payment-terms.is-invalid .hitpay-terms-checkbox {
    border-color: #ef4444;
}

.hitpay-payment-terms .form-error {
    margin-top: var(--space-2);
    margin-left: 32px;
}

.hitpay-payment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Counter Payment Method (Admin) */
.counter-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.counter-payment-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid #ddd6ec;
    cursor: pointer;
    transition: background var(--transition-base);
    margin: 0;
}

.counter-payment-option:last-child {
    border-bottom: none;
}

.counter-payment-option:hover {
    background: #f9fafb;
}

.counter-payment-option input[type="radio"] {
    accent-color: var(--color-primary, #0d6efd);
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
}

.counter-payment-label {
    font-size: var(--text-base);
    color: #374151;
}

.btn-pay {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: var(--radius-lg);
    color: #ffffff;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
    text-decoration: none;
}

.btn-pay:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: #ffffff;
}

.btn-pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================================
   Confirmation Page
   ========================================================================== */

.confirmation-success {
    text-align: center;
    padding: var(--space-6) 0 var(--space-8);
}

.success-checkmark {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    animation: scaleIn 0.5s ease-out;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}

.success-checkmark i {
    font-size: 48px;
    color: #ffffff;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.confirmation-success h1 {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: #374151;
    margin: 0 0 var(--space-2);
}

.confirmation-success p {
    font-size: var(--text-base);
    color: #6b7280;
    margin: 0;
}

.confirmation-number-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    color: #ffffff;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-colored);
}

.confirmation-label {
    display: block;
    font-size: var(--text-sm);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.confirmation-code {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.confirmation-save-note {
    display: block;
    font-size: var(--text-xs);
    opacity: 0.8;
    margin-top: var(--space-2);
}

/* Booking Details Card */
.booking-details-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.booking-details-header {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #ffffff;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.booking-details-header i {
    font-size: var(--text-lg);
    opacity: 0.9;
}

.booking-details-header h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.booking-details-body {
    padding: var(--space-5);
}

.booking-detail-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 768px) {
    .booking-detail-row {
        grid-template-columns: 1fr;
    }
}

.booking-detail-item {
    margin-bottom: var(--space-3);
}

.booking-detail-label {
    display: block;
    font-size: var(--text-xs);
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.booking-detail-value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #374151;
}

.booking-detail-sub {
    font-size: var(--text-xs);
    color: #6b7280;
    font-weight: 400;
}

.booking-status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: capitalize;
}

.booking-items-section {
    padding-top: var(--space-4);
    border-top: 1px solid #e5e7eb;
}

.booking-items-label {
    font-size: var(--text-xs);
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.booking-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.booking-item-name {
    color: #374151;
}

.booking-item-price {
    font-weight: 600;
    color: #374151;
}

.booking-total-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 2px solid #e5e7eb;
}

.booking-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.booking-total-label {
    font-size: var(--text-lg);
    font-weight: 600;
    color: #374151;
}

.booking-total-amount {
    font-size: var(--text-xl);
    font-weight: 700;
    color: #10b981;
}

/* Contact Details Card */
.contact-details-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.contact-details-body {
    padding: var(--space-5);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Traveler Info Banner */
.traveler-info-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 2px solid #3b82f6;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.traveler-info-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.traveler-info-icon i {
    font-size: 20px;
    color: #ffffff;
}

.traveler-info-content h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 var(--space-2);
}

.traveler-info-content p {
    font-size: var(--text-sm);
    color: #3b82f6;
    margin: 0 0 var(--space-3);
}

.traveler-info-banner.traveler-info-complete {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4caf50;
}
.traveler-info-banner.traveler-info-complete .traveler-info-icon {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
}
.traveler-info-banner.traveler-info-complete .traveler-info-content h4 {
    color: #2e7d32;
}
.traveler-info-banner.traveler-info-complete .traveler-info-content p {
    color: #388e3c;
}

.traveler-detail-card {
    padding-top: var(--space-3);
}
.traveler-detail-card.section-divider {
    border-top: 1px solid #e5e7eb;
    margin-top: var(--space-3);
}
.traveler-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.btn-add-travelers {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: #ffffff;
    color: #3b82f6;
    border: 2px solid #3b82f6;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.btn-add-travelers:hover {
    background: #3b82f6;
    color: #ffffff;
}

/* Next Steps Card */
.next-steps-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.next-steps-header {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #ffffff;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.next-steps-header i {
    font-size: var(--text-lg);
    opacity: 0.9;
}

.next-steps-header h3 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
}

.next-steps-body {
    padding: var(--space-6);
}

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

@media (max-width: 768px) {
    .next-steps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.next-step-item {
    text-align: center;
}

.next-step-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(107, 114, 128, 0.2) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
}

.next-step-icon i {
    font-size: 24px;
    color: #6B7280;
}

.next-step-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #374151;
    margin: 0 0 var(--space-2);
}

.next-step-desc {
    font-size: var(--text-xs);
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Confirmation Actions */
.confirmation-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-8);
}

.confirmation-actions-right {
    display: flex;
    gap: var(--space-3);
}

.confirmation-actions .btn-back,
.confirmation-actions .btn-print,
.confirmation-actions .btn-continue {
    padding: var(--space-2) var(--space-4);
}

.confirmation-actions .btn-continue {
    box-shadow: none;
}

.btn-print {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: #ffffff;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-print:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
}

@media print {
    .booking-progress,
    .confirmation-actions,
    .traveler-info-banner,
    nav,
    footer,
    .breadcrumb {
        display: none !important;
    }

    .booking-page-container {
        padding: 0 !important;
    }

    .ticket-selection-container {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
}

/* ==========================================================================
   Checkout/Payment Page
   ========================================================================== */

/* Test Mode Banner */
.payment-test-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.payment-test-banner i {
    color: #d97706;
    font-size: var(--text-xl);
    margin-top: 2px;
    flex-shrink: 0;
}

.payment-test-banner strong {
    color: #92400e;
    display: block;
    margin-bottom: var(--space-1);
}

.payment-test-banner p {
    color: #a16207;
    font-size: var(--text-sm);
    margin: 0;
}

/* Payment Methods Grid */
.payment-methods-section {
    margin-bottom: var(--space-6);
}

.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-3);
}

@media (max-width: 768px) {
    .payment-methods-grid {
        grid-template-columns: 1fr;
    }
}

.payment-method-modern {
    position: relative;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    background: #ffffff;
}

.payment-method-modern:hover {
    border-color: #d1d5db;
    transform: translateY(-2px);
}

.payment-method-modern.active {
    border-color: #3b82f6;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(59, 130, 246, 0.1) 100%);
    box-shadow: 0 10px 30px -5px rgba(59, 130, 246, 0.2);
}

.payment-method-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-3);
    transition: all var(--transition-base);
}

.payment-method-modern.active .payment-method-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.payment-method-icon i {
    font-size: 24px;
    color: #6b7280;
    transition: color var(--transition-base);
}

.payment-method-modern.active .payment-method-icon i {
    color: #ffffff;
}

.payment-method-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: #374151;
    display: block;
}

.payment-method-check {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition-base);
}

.payment-method-modern.active .payment-method-check {
    opacity: 1;
    transform: scale(1);
}

.payment-method-check i {
    color: #ffffff;
    font-size: 12px;
}

/* Card Form Section */
.card-form-section {
    background: #f9fafb;
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.card-input-wrapper {
    position: relative;
}

.card-input-wrapper i {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.card-input-wrapper .form-input-modern {
    padding-left: calc(var(--space-4) + 24px + var(--space-2));
}

.form-hint {
    display: block;
    font-size: var(--text-xs);
    color: #9ca3af;
    margin-top: var(--space-1);
}

/* Contact Summary in Checkout */
.checkout-contact-summary {
    background: #f9fafb;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.checkout-contact-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: #6b7280;
    margin-bottom: var(--space-3);
}

.checkout-contact-header i {
    color: var(--color-primary);
}

.checkout-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .checkout-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
}

.checkout-contact-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.checkout-contact-label {
    font-size: var(--text-xs);
    color: #9ca3af;
    text-transform: uppercase;
}

.checkout-contact-value {
    font-size: var(--text-sm);
    font-weight: 500;
    color: #374151;
}

/* Terms Reminder */
.checkout-terms-reminder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: #065f46;
}

.checkout-terms-reminder i {
    color: #10b981;
    font-size: var(--text-lg);
    flex-shrink: 0;
}

.checkout-terms-reminder a {
    color: #047857;
    text-decoration: underline;
}

/* Checkout Button */
.btn-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: var(--text-sm);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
    text-decoration: none;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: #ffffff;
}

.btn-checkout:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Security Badges */
.security-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-5);
    padding: var(--space-4);
}

.security-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: #6b7280;
}

.security-badge i {
    color: #10b981;
    font-size: var(--text-base);
}

@media (max-width: 768px) {
    .security-badges {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
}

/* Checkout Actions */
.checkout-actions {
    border-top: 2px solid #e5e7eb;
    margin-top: var(--space-6);
    padding-top: var(--space-5);
}

/* Mobile Checkout CTA */
@media (max-width: 991px) {
    .mobile-checkout-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: var(--space-4);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .mobile-checkout-cta .mobile-cta-price {
        display: flex;
        flex-direction: column;
    }

    .mobile-checkout-cta .mobile-cta-label {
        font-size: var(--text-xs);
        color: #6b7280;
    }

    .mobile-checkout-cta .mobile-cta-amount {
        font-size: var(--text-lg);
        font-weight: 700;
        color: #374151;
    }

    .mobile-checkout-cta .btn-checkout {
        flex: 1;
        max-width: 200px;
    }

    .mobile-checkout-cta .btn-pay {
        flex: 1;
        max-width: 200px;
    }
}

@media (min-width: 992px) {
    .mobile-checkout-cta {
        display: none;
    }
}

/* ==========================================================================
   Shared Utility Classes (extracted from inline styles)
   ========================================================================== */

/* Star rating colors */
.star-active {
    color: #f5a623;
}

.star-inactive {
    color: #ddd;
}

/* Star rating sizes */
.star-sm {
    font-size: 0.9rem;
}

.star-rating-icon {
    font-size: 2rem;
    cursor: pointer;
    color: #ddd;
    transition: color 0.2s;
}

/* Review average rating text */
.review-avg-rating-text {
    font-size: 1rem;
    color: #f5a623;
}

/* Review stars large display */
.review-stars-large {
    font-size: 1.5rem;
}

/* Hero content z-index layer */
.hero-content-layer {
    z-index: 2;
}

/* Points discount row (green text) */
.points-discount-row {
    color: #4caf50;
}

/* Points earned banner */
.points-earned-banner {
    background: #e8f5e9;
}

.points-earned-banner .star-active {
    color: #f5a623;
}

.text-earned-green {
    color: #2e7d32;
}

/* Points earning preview banner */
.points-earn-banner {
    background: #e8f5e9;
    border-color: #4caf50;
}

.points-earn-banner > i {
    color: #4caf50;
}

.points-earn-banner > p {
    color: #2e7d32;
}


/* Admin review backgrounds */
.bg-review-content {
    background: #f8f9fa;
}

.bg-review-content-zh {
    background: #f0f7ff;
}

.bg-admin-notes {
    background: #fff3cd;
}

/* Login modal close button */
.login-modal-close {
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* Login method button (email, etc.) */
.login-method-btn {
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    color: #333;
    position: relative;
}

/* Login method button icon */
.login-method-icon {
    position: absolute;
    left: 16px;
    color: var(--color-primary);
}

/* Password visibility toggle */
.input-toggle-btn {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* Verification code input */
.verify-code-field {
    font-size: 16px;
    letter-spacing: 4px;
    font-weight: 600;
}