:root {
     --primary: #1a5276;
     --primary-light: #2980b9;
     --success: #04CE78;
     --warning: #f39c12;
     --dark: #000D44;
     --border: #e8ecf0;
 }

 /* Placeholder styling */
 .form-control::placeholder {
     opacity: 0.4 !important;
 }

 .wizard-container {
     border-radius: 20px;
     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
     margin-top: 20px;
     margin-bottom: 20px;
 }

 /* Booking Section Boxes */
 .booking-section {
     background: white;
     border-radius: 16px;
     margin-bottom: 20px;
 }

 .section-header {
     margin-bottom: 20px;
     padding-bottom: 15px;
     border-bottom: 2px solid #f5f8fa;
 }

 .wizard-progress-bar {
     background: #fafbfc;
 }

 .progress-step {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #bbb;
 }

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

 .progress-step.completed {
     color: var(--success);
 }

 .step-number {
     width: 42px;
     height: 42px;
     background: #eee;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
 }

 .progress-step.active .step-number {
     background: linear-gradient(135deg, var(--primary), var(--primary-light));
     color: white;
 }

 .progress-step.completed .step-number {
     background: var(--success);
     color: white;
 }

 .progress-divider {
     width: 100px;
     height: 3px;
     background: #eee;
 }

 .section-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--dark);
     margin-bottom: 5px;
 }

 .section-num {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     background: linear-gradient(135deg, var(--primary), var(--primary-light));
     color: white;
     border-radius: 50%;
     font-size: 14px;
     margin-right: 10px;
 }

 .section-desc {
     font-size: 14px;
     margin: 0;
 }

 .tab-btn {
     border: 2px solid var(--border);
     background: white;
     padding: 10px 18px;
     border-radius: 25px;
     font-weight: 600;
     font-size: 13px;
     color: #666;
     cursor: pointer;
     transition: all 0.2s;
     position: relative;
 }

 .tab-btn .tab-label {
     margin-right: 4px;
 }

 .tab-btn .tab-badge {
     display: none;
     align-items: center;
     justify-content: center;
     min-width: 20px;
     height: 20px;
     padding: 0 6px;
     background: #e0e0e0;
     color: #999;
     border-radius: 10px;
     font-size: 11px;
     font-weight: 700;
     margin-left: 6px;
     transition: all 0.2s;
 }

 .tab-btn .tab-badge.active {
     display: inline-flex;
     background: #04CE78;
     color: white;
 }

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

 .tab-btn.active {
     background: linear-gradient(135deg, var(--primary), var(--primary-light));
     color: white;
     border-color: transparent;
 }

 .tab-btn.active .tab-badge {
     background: rgba(255, 255, 255, 0.3);
     color: white;
 }

 .tab-btn.active .tab-badge.active {
     background: rgba(255, 255, 255, 0.9);
     color: var(--primary);
 }

 .scan-card {
     cursor: pointer;
     display: block;
 }

 .scan-card input {
     display: none;
 }

 .card-content {
     border: 2px solid var(--border);
     padding: 16px 12px;
     border-radius: 12px;
     text-align: center;
     transition: all 0.3s ease;
     background: white;
     min-height: 130px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
     position: relative;
 }

 .card-content .check-icon {
     position: absolute;
     top: 8px;
     left: 8px;
     font-size: 20px;
     color: var(--primary);
     opacity: 0;
     transform: scale(0.5);
     transition: all 0.3s ease;
     z-index: 5;
 }

 .scan-card input:checked+.card-content .check-icon {
     opacity: 1;
     transform: scale(1);
 }

 .info-tooltip-icon {
     position: absolute;
     top: 6px;
     right: 6px;
     color: #00aeef;
     font-size: 14px;
     cursor: pointer;
     z-index: 10;
     transition: all 0.2s;
     background: rgba(0, 174, 239, 0.1);
     width: 24px;
     height: 24px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .info-tooltip-icon:hover {
     color: #0082a0;
     background: rgba(0, 174, 239, 0.2);
     transform: scale(1.1);
 }

 /* Custom Tooltip Styling for Scan Info */
 .tooltip.scan-info-tooltip .tooltip-inner {
     max-width: 280px;
     padding: 12px 16px;
     font-size: 13px;
     line-height: 1.5;
     text-align: left;
     background: #fff;
     color: #333;
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
     border: 1px solid #e8ecf0;
 }

 .tooltip.scan-info-tooltip .tooltip-arrow::before {
     border-top-color: #fff;
 }

 .tooltip.scan-info-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
     border-bottom-color: #fff;
 }

 .tooltip.scan-info-tooltip.bs-tooltip-end .tooltip-arrow::before {
     border-right-color: #fff;
 }


 .scan-card:hover .card-content {
     border-color: var(--primary);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(26, 82, 118, 0.15);
 }

 .scan-card input:checked+.card-content {
     border-color: var(--primary);
     background: linear-gradient(135deg, rgba(26, 82, 118, 0.05), rgba(26, 82, 118, 0.02));
     box-shadow: 0 4px 12px rgba(26, 82, 118, 0.15);
 }

 .scan-name {
     display: block;
     font-weight: 700;
     font-size: 14px;
     color: var(--dark);
     line-height: 1.3;
 }

 .scan-info {
     display: none;
 }

 .price-badge {
     background: #00aeef;
     color: white;
     padding: 5px 12px;
     border-radius: 15px;
     font-weight: 600;
     font-size: 13px;
     display: inline-block;
 }

 .btn-add-scan {
     background: transparent;
     border: 2px dashed #ccc;
     color: #666;
     padding: 12px 24px;
     border-radius: 25px;
     font-weight: 600;
     cursor: pointer;
 }

 .btn-add-scan:hover {
     border-color: var(--primary);
     color: var(--primary);
 }

 .form-control {
     height: 48px;
     border: 2px solid var(--border);
     border-radius: 10px;
     font-size: 15px;
     color: #0082a0;
 }

 .form-control:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
 }

 .form-control.is-invalid {
     border-color: var(--danger) !important;
     background-image: none;
 }

 .invalid-feedback {
     display: none;
     color: var(--danger);
     font-size: 12px;
     margin-top: 5px;
     font-weight: 500;
 }

 .form-control.is-invalid+.invalid-feedback {
     display: block;
 }

 /* Metronic Calendar */
 #calendar-slots {
     background: #ffffff;
     border-radius: 8px;
     border: 1px solid #eff2f5;
     box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
     overflow: hidden;
 }

 .fc {
     font-family: inherit;
 }

 /* Remove default padding/margin */


 /* Toolbar Styling */
 .fc .fc-toolbar {
     padding: 1.5rem 2rem;
     background: #f9fafb;
     border-bottom: 1px solid #eff2f5;
     margin-bottom: 0 !important;
 }

 .fc .fc-toolbar-title {
     font-size: 1.35rem;
     font-weight: 600;
     color: #181C32;
     letter-spacing: -0.01em;
 }

 .fc .fc-button {
     background: #ffffff;
     border: 1px solid #e4e6ef;
     color: #7e8299;
     font-weight: 500;
     text-transform: capitalize;
     padding: 0.5rem 1rem;
     font-size: 0.95rem;
     transition: all 0.15s ease;
     box-shadow: none;
 }

 .fc .fc-button:hover:not(:disabled) {
     background: #f9fafb;
     border-color: var(--primary);
     color: var(--primary);
 }

 .fc .fc-button:focus {
     box-shadow: none !important;
 }

 .fc .fc-button-active,
 .fc .fc-button-active:hover {
     background: var(--primary) !important;
     border-color: var(--primary) !important;
     color: #ffffff !important;
 }

 .fc .fc-button-group {
     border-radius: 6px;
     overflow: hidden;
 }

 /* Today button */
 .fc .fc-today-button {
     border-radius: 6px;
     margin-right: 0.5rem;
 }

 /* Time grid styling */
 .fc .fc-timegrid-slot {
     height: 100px;
     border-bottom: 1px solid #f5f8fa;
 }

 .fc .fc-timegrid-event {
     min-height: 90px !important;
 }

 .fc .fc-timegrid-slot-label {
     color: #a1a5b7;
     font-size: 0.85rem;
     font-weight: 500;
 }

 .fc .fc-col-header-cell {
     padding: 0.75rem 0.5rem;
     background: #ffffff;
     border-color: #eff2f5;
 }

 .fc .fc-col-header-cell-cushion {
     color: #5e6278;
     font-weight: 600;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .fc .fc-scrollgrid {
     border-color: #eff2f5 !important;
 }

 .fc td,
 .fc th {
     border-color: #eff2f5;
 }

 /* Event styling */
 .fc-event {
     cursor: pointer;
     border-radius: 0px !important;
     font-size: 1.1rem;
     font-weight: 600;
     padding: 10px 12px;
     margin: 0px 0px !important;
     border-width: 0 !important;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     transition: all 0.2s ease;
     display: flex !important;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

 .fc-event:hover {
     transform: translateY(-1px);
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
 }

 .fc-event-title {
     white-space: normal;
     line-height: 1.5;
     font-size: 1rem;
 }

 .fc-event-time {
     font-size: 0.95rem;
     font-weight: 700;
     margin-bottom: 4px;
 }

 /* Event Colors - Unified scheme: Blue Standard, Gray Booked, Green Selected */
 .fc-event.event-available {
     background: #ffffff !important;
     color: #2563eb !important;
     border: 1px solid #3b82f6 !important;
 }

 .fc-event.event-available:hover {
     background: rgba(59, 130, 246, 0.1) !important;
     border-color: #2563eb !important;
     color: #1d4ed8 !important;
 }

 .fc-event.event-booked {
     background: #f3f4f6 !important;
     color: #9ca3af !important;
     cursor: not-allowed !important;
     box-shadow: none !important;
     border: 1px solid #d1d5db !important;
 }

 .fc-event.event-booked:hover {
     transform: none;
     background: #f3f4f6 !important;
 }

 .fc-event.event-selected,
 .fc-event.event-lowfare.event-selected,
 .fc-event.event-available.event-selected,
 .fc-event.event-highfare.event-selected {
     background: #0082a0;
     color: #ffffff !important;
     border: 3px solid #0082a0 !important;
     box-shadow: none !important;
     transform: scale(1);
     z-index: 10 !important;
     margin: 0 !important;
     animation: pulse-selected 1.5s ease-in-out infinite;
 }

 .fc-event.event-selected .fc-event-main,
 .fc-event.event-selected .fc-event-main .fc-event-main-frame .fc-event-time,
 .fc-event.event-selected .fc-event-main .fc-event-main-frame .fc-event-title-container .fc-event-title,
 .fc-v-event.event-selected .fc-event-main {
     color: #ffffff !important;
 }

 @keyframes pulse-selected {

     0%,
     100% {
         box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5);
     }

     50% {
         box-shadow: 0 4px 24px rgba(16, 185, 129, 0.8);
     }
 }

 /* Navigation */
 .fc .fc-daygrid-day-number,
 .fc .fc-daygrid-day-top {
     color: #5e6278;
     font-weight: 500;
 }

 .fc .fc-day-today {
     background: rgba(62, 151, 255, 0.05) !important;
 }

 /* Remove bottom padding */
 .fc .fc-view-harness-active {
     padding-bottom: 0 !important;
 }

 .selected-slot-display {
     background: rgba(4, 206, 120, 0.1);
     border: 2px solid var(--success);
     padding: 15px 20px;
     border-radius: 12px;
     text-align: center;
 }

 .order-summary {
     background: linear-gradient(135deg, #f8f9ff, #fff);
     border: 2px solid var(--border);
     border-radius: 16px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }

 .wizard-step {
     padding: 30px 25px !important;
 }

 .scan-block {
     background: #fafbfc;
     border: 1px solid #e8ecf0;
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 15px;
 }

 /* Payment */
 .payment-summary-card {
     background: white;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }

 .summary-header {
     background: linear-gradient(135deg, var(--primary), var(--primary-light));
     color: white;
     padding: 20px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .summary-body {
     padding: 20px;
 }

 .summary-row {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     border-bottom: 1px solid var(--border);
 }

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

 .summary-row .label {
     color: #666;
 }

 .summary-row .value {
     font-weight: 600;
     color: var(--dark);
 }

 .total-row {
     padding-top: 15px;
     margin-top: 10px;
     border-top: 2px solid var(--border);
 }

 .total-row .amount {
     font-size: 24px;
     color: var(--primary);
 }

 .payment-method-card {
     cursor: pointer;
     display: block;
 }

 .payment-method-card input {
     display: none;
 }

 .method-content {
     border: 2px solid var(--border);
     padding: 25px 20px;
     border-radius: 16px;
     text-align: center;
     transition: all 0.2s;
     background: white;
 }

 .payment-method-card:hover .method-content {
     border-color: var(--primary);
 }

 .payment-method-card input:checked+.method-content {
     border-color: var(--primary);
     background: rgba(26, 82, 118, 0.02);
     box-shadow: 0 4px 15px rgba(26, 82, 118, 0.12);
 }

 .method-icon {
     margin-bottom: 12px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .method-name {
     display: block;
     font-weight: 700;
     font-size: 16px;
     color: var(--dark);
     margin-bottom: 4px;
 }

 .method-desc {
     display: block;
     font-size: 12px;
     color: #888;
 }

 .stripe-card-form {
     background: #fafbfc;
     padding: 25px;
     border-radius: 12px;
     border: 1px solid var(--border);
 }

 .btn-paypal-checkout {
     background: #ffc439;
     color: #003087;
     border: none;
     padding: 15px 40px;
     border-radius: 25px;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
 }

 .offline-notice {
     display: flex;
     gap: 15px;
     align-items: flex-start;
     background: #e8f6ff;
     padding: 20px;
     border-radius: 12px;
     text-align: left;
 }

 .offline-notice i {
     font-size: 24px;
     color: var(--primary);
 }

 .offline-notice p {
     margin: 5px 0 0;
     color: #666;
     font-size: 14px;
 }

 .trust-badges {
     display: flex;
     gap: 25px;
     justify-content: center;
 }

 .trust-badges span {
     font-size: 12px;
     color: #888;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .trust-badges i {
     color: var(--success);
 }

 .btn-confirm {
     background: linear-gradient(135deg, var(--success), #27ae60);
     padding: 15px 35px;
 }

 .fc-direction-ltr .fc-timegrid-col-events {
     margin: 0 !important;
 }

 @media (max-width: 768px) {
     .step-label {
         display: none;
     }

     .fc .fc-toolbar {
         flex-direction: column;
         gap: 10px;
     }
 }

 .fc-v-event .fc-event-main {
     color: #999 !important;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
     padding: 8px;
 }


 .fc .fc-scrollgrid,
 .fc .fc-scrollgrid table {
     margin: 0 !important;
 }

 /* ========================================
    Slot Legend Badges (Unified)
    ======================================== */
 .slot-legend {
     margin-top: 10px;
 }

 .legend-badge {
     font-size: 13px;
     font-weight: 600;
     padding: 8px 14px;
     border-radius: 20px;
     display: inline-flex;
     align-items: center;
 }

 .legend-badge i {
     font-size: 8px;
 }

 .legend-lowfare {
     background: rgba(16, 185, 129, 0.1);
     color: #059669;
     border: 1px solid #10b981;
 }

 .legend-standard {
     background: rgba(59, 130, 246, 0.1);
     color: #2563eb;
     border: 1px solid #3b82f6;
 }

 .legend-premium {
     background: rgba(239, 68, 68, 0.1);
     color: #dc2626;
     border: 1px solid #ef4444;
 }

 .legend-booked {
     background: rgba(156, 163, 175, 0.2);
     color: #6b7280;
     border: 1px solid #9ca3af;
 }

 /* ========================================
    Calendar Event Slot Colors (Unified)
    ======================================== */

 /* Low Fare - GREEN */
 .fc-event.event-lowfare {
     background: rgba(16, 185, 129, 0.15) !important;
     border: 1px solid #10b981 !important;
     border-radius: 6px !important;
 }

 .fc-v-event.event-lowfare .fc-event-main {
     color: #059669 !important;
 }

 /* Standard (Available) - WHITE with BLUE border */
 .fc-event.event-available {
     background: #ffffff !important;
     border: 1px solid #3b82f6 !important;
     /* border-radius: 6px !important; */
 }

 .fc-v-event.event-available .fc-event-main {
     color: #2563eb !important;
 }

 /* Premium (High Demand / Outside Hours) - RED */
 .fc-event.event-highfare {
     border: 1px solid red !important;
     /* border-radius: 6px !important; */
     background: #fff;
 }

 .fc-v-event.event-highfare .fc-event-main {
     color: #dc2626 !important;
 }

 /* ========================================
   Treatwell-Style Checkout Styles
   ======================================== */

 /* Payment Option Cards */
 .payment-option-card {
     display: block;
     cursor: pointer;
 }

 .payment-option-card input {
     display: none;
 }

 .payment-option-card .option-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px 20px;
     border: 2px solid #e4e6ef;
     border-radius: 12px;
     background: #fff;
     transition: all 0.2s ease;
 }

 .payment-option-card:hover .option-content {
     border-color: var(--primary);
 }

 .payment-option-card input:checked+.option-content {
     border-color: var(--primary);
     background: rgba(26, 82, 118, 0.02);
     box-shadow: 0 2px 8px rgba(26, 82, 118, 0.1);
 }

 .payment-option-card .option-left {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .payment-option-card .option-radio {
     width: 20px;
     height: 20px;
     border: 2px solid #d1d5db;
     border-radius: 50%;
     position: relative;
     transition: all 0.2s;
 }

 .payment-option-card input:checked+.option-content .option-radio {
     border-color: var(--primary);
     background: var(--primary);
 }

 .payment-option-card input:checked+.option-content .option-radio::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 8px;
     height: 8px;
     background: #fff;
     border-radius: 50%;
 }

 .payment-option-card .option-text {
     display: flex;
     flex-direction: column;
 }

 .payment-option-card .option-title {
     font-weight: 600;
     color: #1a1a2e;
     font-size: 15px;
 }

 .payment-option-card .option-desc {
     font-size: 13px;
 }

 .payment-option-card .option-icons {
     display: flex;
     gap: 8px;
     align-items: center;
 }

 .payment-option-card .option-icons img {
     object-fit: contain;
     width: 35px;
 }

 /* Card Details Form */
 .card-details-form {
     background: #fff;
     border: 1px solid #e4e6ef;
     border-radius: 12px;
     padding: 20px;
 }

 /* Promo Code Accordion */
 .promo-code-accordion {
     border: 1px solid #e4e6ef;
     border-radius: 12px;
     overflow: hidden;
 }

 .promo-toggle-btn {
     width: 100%;
     padding: 16px 20px;
     background: #fff;
     border: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: 600;
     font-size: 15px;
     color: #1a1a2e;
     cursor: pointer;
     transition: all 0.2s;
 }

 .promo-toggle-btn:hover {
     background: #f9fafb;
 }

 .promo-toggle-btn i {
     transition: transform 0.3s;
 }

 .promo-toggle-btn[aria-expanded="true"] i {
     transform: rotate(180deg);
 }

 .promo-code-content {
     padding: 0 20px 20px 20px;
 }

 /* Checkout Summary Card */
 .checkout-summary-card {
     background: #fff;
     border-radius: 16px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
     overflow: hidden;
 }

 .checkout-summary-card .summary-progress-bar {
     height: 6px;
     background: linear-gradient(90deg,
             #009ef7 0%,
             #009ef7 33%,
             #50cd89 33%,
             #50cd89 66%,
             #f1416c 66%,
             #f1416c 100%);
 }

 .checkout-summary-card .summary-icon {
     width: 48px;
     height: 48px;
     background: rgba(26, 82, 118, 0.1);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 20px;
 }

 .checkout-summary-card .display-time {
     font-size: 2rem;
     line-height: 1;
 }

 /* Scan Items in Checkout */
 .checkout-scan-item {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     padding: 8px 0;
 }

 .checkout-scan-item .scan-name {
     font-weight: 500;
     color: #1a1a2e;
     margin-bottom: 2px;
 }

 .checkout-scan-item .scan-meta {
     font-size: 13px;
     color: #7e8299;
 }

 .checkout-scan-item .scan-price {
     text-align: right;
 }

 .checkout-scan-item .original-price {
     text-decoration: line-through;
     color: #a1a5b7;
     font-size: 13px;
 }

 .checkout-scan-item .final-price {
     font-weight: 600;
     color: #1a1a2e;
 }

 /* Pay Now Button */
 .checkout-summary-card .btn-primary {
     background: linear-gradient(135deg, var(--primary), var(--primary-light));
     border: none;
     border-radius: 8px;
     font-size: 16px;
     transition: all 0.2s;
 }

 .checkout-summary-card .btn-primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(26, 82, 118, 0.3);
 }

 /* Checkout Section */
 .checkout-section {
     margin-bottom: 24px;
 }

 /* PayPal Button */
 .btn-paypal-checkout {
     background: #ffc439;
     color: #003087;
     border: none;
     padding: 15px 40px;
     border-radius: 25px;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.2s;
 }

 .btn-paypal-checkout:hover {
     background: #f0b429;
     transform: translateY(-1px);
 }

 /* Mobile Responsive */
 @media (max-width: 991px) {
     .checkout-summary-card {
         position: static !important;
         margin-top: 30px;
     }

     .checkout-summary-card .display-time {
         font-size: 1.5rem;
     }
 }

 /* ========================================
   Step 2: Slot Grid Styles
   ======================================== */
 .slots-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
     gap: 10px;
     margin-top: 20px;
     background: #f8fafc;
     padding: 1rem;
     border-radius: 16px;
 }

 .slot-item {
     padding: 14px 10px;
     border: 2px solid #e8ecf0;
     border-radius: 10px;
     background: white;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-align: center;
     font-size: 14px;
     font-weight: 600;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .slot-item:hover:not(:disabled) {
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 }

 .slot-time {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 4px;
 }

 .slot-price {
     font-size: 12px;
     font-weight: 600;
     color: #666;
 }

 /* Slot Tier Colors */
 .slot-lowfare {
     border-color: #04CE78;
     background: #f0fdf7;
 }

 .slot-lowfare:hover:not(:disabled) {
     background: #d1fae5;
     border-color: #059669;
 }

 .slot-standard {
     border-color: #2980b9;
     background: #eff6ff;
 }

 .slot-standard:hover:not(:disabled) {
     background: #dbeafe;
     border-color: #1a5276;
 }

 .slot-premium {
     border-color: #f39c12;
     background: #fff7ed;
 }

 .slot-premium:hover:not(:disabled) {
     background: #ffedd5;
     border-color: #ea580c;
 }

 .slot-booked {
     background: #f3f4f6;
     border-color: #d1d5db;
     color: #9ca3af;
     cursor: not-allowed;
 }

 .slot-selected {
     border-width: 3px;
     border-color: var(--primary) !important;
     background: var(--primary) !important;
     color: white !important;
 }

 .slot-selected .slot-price {
     color: white;
 }

 /* Slot Legend */
 .slot-legend {
     margin-bottom: 20px;
 }

 .legend-badge {
     display: inline-flex;
     align-items: center;
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 13px;
     font-weight: 600;
 }

 .legend-badge i {
     font-size: 10px;
 }

 .legend-lowfare {
     background: #f0fdf7;
     color: #059669;
 }

 .legend-standard {
     background: #eff6ff;
     color: #1a5276;
 }

 .legend-premium {
     background: #fff7ed;
     color: #ea580c;
 }

 .legend-booked {
     background: #f3f4f6;
     color: #9ca3af;
 }

 /* Mobile Responsive Slot Grid */
 @media (max-width: 1200px) {
     .slots-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 @media (max-width: 768px) {
     .slots-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 8px;
     }

     .slot-item {
         padding: 10px 6px;
         font-size: 13px;
     }

     .slot-time {
         font-size: 13px;
     }

     .slot-price {
         font-size: 11px;
     }
 }

 @media (max-width: 480px) {
     .slots-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* ========================================
   Step 3: Form Subsections
   ======================================== */
 .form-subsection {
     background: #f9fafb;
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 20px;
 }

 .form-subsection h6 {
     font-size: 16px;
     font-weight: 700;
     color: var(--dark);
     margin-bottom: 15px;
 }

 /* ========================================
   Step 4: Signature Canvas Styles
   ======================================== */
 .signature-pad-container {
     position: relative;
     background: white;
     border: 2px solid #e8ecf0;
     border-radius: 8px;
     padding: 8px;
 }

 .signature-canvas {
     width: 100%;
     border-radius: 6px;
     border: 1px dashed #d1d5db;
     cursor: crosshair;
     touch-action: none;
 }

 .signature-canvas:active {
     cursor: crosshair;
 }

 /* Consent Policies */
 .consent-policies .form-check {
     padding: 12px 15px;
     background: #f9fafb;
     border-radius: 8px;
     border: 2px solid transparent;
     transition: all 0.2s ease;
     margin-bottom: 8px !important;
 }

 .consent-policies .form-check:hover {
     background: #eff6ff;
     border-color: var(--primary-light);
 }

 .consent-policies .form-check-input:checked~.form-check-label {
     color: var(--primary);
     font-weight: 600;
 }

 .consent-policies .form-check-input {
     width: 20px;
     height: 20px;
     margin-top: 3px;
     flex-shrink: 0;
 }

 .consent-policies .form-check-label {
     display: flex;
     align-items: flex-start;
     padding-left: 0;
     cursor: pointer;
     user-select: none;
     line-height: 1.5;
 }

 .consent-policies .form-check-label::before {
     position: static !important;
     margin-right: 12px;
     margin-top: 3px;
     flex-shrink: 0;
 }

 /* Button Styles */
 .th-btn.btn-secondary {
     background: #6c757d;
     color: white;
     border-color: #6c757d;
 }

 .th-btn.btn-secondary:hover {
     background: #5c636a;
     border-color: #565e64;
 }

 /* ========================================
   Progress Bar Updates for 5 Steps
   ======================================== */
 @media (max-width: 768px) {
     .progress-divider {
         width: 40px;
     }

     .step-label {
         display: none;
     }

     .step-number {
         width: 36px;
         height: 36px;
         font-size: 14px;
     }
 }

 @media (max-width: 480px) {
     .wizard-progress-bar {
         gap: 8px !important;
     }

     .progress-divider {
         width: 20px;
     }

     .step-number {
         width: 32px;
         height: 32px;
         font-size: 12px;
     }
 }

 /* ========================================
   Utility Classes
   ======================================== */
 .text-xs {
     font-size: 0.75rem;
 }

 .border-danger {
     border-color: #dc3545 !important;
 }

 .error-message {
     display: block;
     margin-top: 4px;
 }

 /* ========================================
   Slots Grid - Uniform Style with Price
   ======================================== */
 .slots-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 12px;
 }

 @media (max-width: 992px) {
     .slots-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 @media (max-width: 576px) {
     .slots-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .slot-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 16px 12px;
     border: 2px solid #1a5276;
     border-radius: 8px;
     background: #f0f7ff;
     cursor: pointer;
     transition: all 0.2s ease;
     min-height: 80px;
 }

 .slot-item:hover {
     background: #e0efff;
     border-color: #0082a0;
 }

 .slot-item.slot-selected {
     background: #0082a0;
     border-color: #0082a0;
     color: #fff;
 }

 .slot-item .slot-time {
     font-size: 1.1rem;
     font-weight: 600;
     color: #1a5276;
 }

 .slot-item.slot-selected .slot-time {
     color: #fff;
 }

 .slot-item .slot-price {
     font-size: 0.85rem;
     color: #2563eb;
     margin-top: 4px;
 }

 .slot-item.slot-selected .slot-price {
     color: rgba(255, 255, 255, 0.9);
 }

 /* Low Fare Slot Styling */
 .slot-item.slot-lowfare {
     border-color: #28a745;
     background: linear-gradient(135deg, #f0fff4 0%, #e8f8ed 100%);
     position: relative;
 }

 .slot-item.slot-lowfare:hover {
     background: linear-gradient(135deg, #e0f7e9 0%, #d4f1de 100%);
     border-color: #28a745;
     box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
 }

 .slot-item.slot-lowfare .slot-time,
 .slot-item.slot-lowfare .slot-price {
     color: #28a745;
 }

 .slot-item.slot-lowfare.slot-selected {
     background: #28a745;
     border-color: #28a745;
 }

 .slot-item.slot-lowfare.slot-selected .slot-time,
 .slot-item.slot-lowfare.slot-selected .slot-price {
     color: white;
 }

 .low-fare-indicator {
     position: absolute;
     top: 4px;
     right: 4px;
     color: #28a745;
     font-size: 0.7rem;
 }

 .slot-item.slot-selected .low-fare-indicator {
     color: rgba(255, 255, 255, 0.9);
 }

 /* ========================================
   Appointment Summary Card - Redesigned
   ======================================== */
 .appointment-summary-card {
     background: #fff;
     border-radius: 16px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     overflow: hidden;
 }

 .appointment-summary-card .summary-header-row {
     padding: 20px 24px;
     border-bottom: 1px solid #e8ecf0;
 }

 .appointment-summary-card .summary-body-content {
     padding: 20px 24px;
 }

 .appointment-summary-card .summary-info-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 0;
 }

 .appointment-summary-card .info-label {
     color: #7e8299;
     font-size: 15px;
 }

 .appointment-summary-card .info-value {
     font-weight: 500;
     color: #1a1a2e;
     font-size: 15px;
 }

 .appointment-summary-card .summary-total-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 0;
 }

 .appointment-summary-card .total-label {
     font-weight: 700;
     font-size: 16px;
     color: #1a1a2e;
 }

 .appointment-summary-card .total-value {
     font-weight: 700;
     font-size: 1.5rem;
     color: #0082a0;
 }

 /* ========================================
   Week-Based Navigation Styles
   ======================================== */

 /* Week Navigation Controls */
 .week-nav-buttons {
     display: flex;
     gap: 8px;
 }

 #btn-prev-weeks,
 #btn-next-weeks {
     padding: 8px 16px;
     font-size: 0.875rem;
     font-weight: 600;
     border-radius: 8px;
     transition: all 0.2s ease;
 }

 #btn-prev-weeks:disabled,
 #btn-next-weeks:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }

 #btn-back-to-weeks,
 #btn-back-to-days {
     padding: 8px 16px;
     font-size: 0.875rem;
     font-weight: 600;
     border-radius: 8px;
     transition: all 0.2s ease;
     border: 2px solid #e8ecf0;
 }

 #btn-back-to-weeks:hover,
 #btn-back-to-days:hover {
     background: #f8fafc;
     border-color: #cbd5e1;
 }

 /* Week Grid */
 .weeks-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 12px;
     margin-bottom: 1.5rem;
 }

 .week-card {
     border: 2px solid #e8ecf0;
     border-radius: 16px;
     padding: 1.25rem;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     background: white;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .week-card:hover:not(.disabled) {
     border-color: #00aeef;
     box-shadow: 0 8px 20px rgba(0, 174, 239, 0.12);
     transform: translateY(-4px);
 }

 .week-card.disabled {
     opacity: 0.4;
     cursor: not-allowed;
     background: #f8f9fa;
 }

 .week-number {
     font-size: 0.875rem;
     font-weight: 700;
     color: #00aeef;
     margin-bottom: 0.5rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .week-dates {
     font-size: 0.8125rem;
     color: #64748b;
     margin-bottom: 0.875rem;
     font-weight: 500;
 }

 .week-price {
     font-size: 1.25rem;
     font-weight: 700;
     color: #1a1a2e;
     margin-top: 0.5rem;
 }

 /* Low Fare Week Styling */
 .week-card.low-fare {
     border-color: #28a745;
     background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
     position: relative;
     box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
 }

 .week-card.low-fare:hover:not(.disabled) {
     border-color: #28a745;
     box-shadow: 0 8px 20px rgba(40, 167, 69, 0.2);
 }

 .week-card.low-fare .week-price {
     color: #28a745;
     font-weight: 700;
 }

 .low-fare-badge {
     position: absolute;
     top: 8px;
     right: 8px;
     background: linear-gradient(135deg, #28a745, #20c997);
     color: white;
     font-size: 0.625rem;
     padding: 4px 8px;
     border-radius: 12px;
     font-weight: 700;
     text-transform: uppercase;
     display: flex;
     align-items: center;
     gap: 3px;
     box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
 }

 .low-fare-badge i {
     font-size: 0.65rem;
 }

 /* Days Grid */
 .days-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 10px;
     margin-bottom: 1.5rem;
     background: #f8fafc;
     padding: 1rem;
     border-radius: 16px;
 }

 .day-card {
     border: 2px solid #e8ecf0;
     border-radius: 12px;
     padding: 0.875rem 0.5rem;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     background: white;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 .day-card:hover:not(.disabled) {
     border-color: #00aeef;
     background-color: rgba(0, 174, 239, 0.05);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 174, 239, 0.12);
 }

 .day-card.disabled {
     opacity: 0.3;
     cursor: not-allowed;
     background: #f1f5f9;
 }

 .day-name {
     font-size: 0.6875rem;
     color: #64748b;
     text-transform: uppercase;
     margin-bottom: 0.375rem;
     letter-spacing: 0.5px;
     font-weight: 600;
 }

 .day-date {
     font-size: 1.75rem;
     font-weight: 700;
     color: #1a1a2e;
     margin-bottom: 0.5rem;
     line-height: 1;
 }

 .day-price {
     font-size: 0.875rem;
     font-weight: 700;
     color: #00aeef;
 }

 /* Low Fare Day Styling */
 .day-card.low-fare {
     border-color: #28a745;
     background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
     position: relative;
     box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
 }

 .day-card.low-fare:hover:not(.disabled) {
     border-color: #28a745;
     background-color: rgba(40, 167, 69, 0.1);
     box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
 }

 .day-card.low-fare .day-price {
     color: #28a745;
     font-weight: 700;
 }

 .day-low-fare-badge {
     position: absolute;
     top: 4px;
     right: 4px;
     color: #28a745;
     font-size: 0.75rem;
     filter: drop-shadow(0 2px 4px rgba(40, 167, 69, 0.3));
     animation: pulse 2s infinite;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.15);
         opacity: 0.85;
     }
 }

 /* Navigation Level Container */
 .navigation-level {
     animation: fadeIn 0.3s ease-in-out;
 }

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

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

 /* Navigation Level Headers */
 #selected-week-label,
 #selected-day-label {
     font-size: 1.125rem;
     font-weight: 700;
     color: #1a1a2e;
     padding: 0.75rem 1rem;
     background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
     border-left: 4px solid #00aeef;
     border-radius: 8px;
     margin-bottom: 1.25rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 /* Mobile Responsive */
 @media (max-width: 768px) {
     .weeks-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
     }

     .week-card {
         padding: 1rem;
     }

     .week-number {
         font-size: 0.8125rem;
     }

     .week-dates {
         font-size: 0.75rem;
     }

     .week-price {
         font-size: 1.125rem;
     }

     .days-grid {
         grid-template-columns: repeat(7, 1fr);
         gap: 6px;
         padding: 0.75rem;
     }

     .day-card {
         padding: 0.625rem 0.375rem;
     }

     .day-name {
         font-size: 0.625rem;
     }

     .day-date {
         font-size: 1.375rem;
     }

     .day-price {
         font-size: 0.75rem;
     }

     .slots-grid {
         grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
         gap: 8px;
         padding: 0.75rem;
     }

     .slot-item {
         padding: 10px 6px;
         font-size: 13px;
     }
 }

 @media (max-width: 480px) {
     .weeks-grid {
         grid-template-columns: 1fr;
         gap: 8px;
     }

     .days-grid {
         gap: 4px;
         padding: 0.5rem;
     }

     .day-card {
         padding: 0.5rem 0.25rem;
     }

     .day-name {
         font-size: 0.5625rem;
     }

     .day-date {
         font-size: 1.125rem;
     }

     .day-price {
         font-size: 0.6875rem;
     }

     .slots-grid {
         grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
         gap: 6px;
     }
 }

 /* Spinner Fix */
 .spinner-border {
     display: inline-block;
     width: 2rem;
     height: 2rem;
     vertical-align: text-bottom;
     border: .25em solid currentColor;
     border-right-color: transparent;
     border-radius: 50%;
     animation: spinner-border .75s linear infinite;
 }

 @keyframes spinner-border {
     to {
         transform: rotate(360deg);
     }
 }

 .sr-only,
 .visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
 }

 /* Fix for Back to Days button when using th-btn */
 #btn-back-to-days {
     padding: 12px 24px;
     min-width: 140px;
     font-size: 14px;
     line-height: normal;
     height: auto;
 }

 #btn-back-to-days:before {
     display: none !important;
     /* Remove glare effect */
 }

 #btn-back-to-days:hover,
 #btn-back-to-days:focus,
 #btn-back-to-days:active {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 130, 160, 0.4);
     color: #ffffff !important;
     /* Force white text */
     background: linear-gradient(180deg, #0082a0 0%, #00aeef 100%) !important;
     /* Force theme gradient */
 }

 /* Step Navigation Cursor */
 .progress-step {
     cursor: pointer;
 }