:root {
    --primary: #026DA7 !important;
    --secondary: #1197C7 !important;
    --light: #f8f9fa !important;
    --dark: #212529 !important;
    --error: #f72585 !important;
    --success: #4cc9f0 !important;
}
a.paylink{
    text-decoration: underline ;
}
.booking-container {
    max-width: 500px !important;
   margin: 0 0 0 auto !important;
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.booking-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    padding: 20px !important;
    text-align: center !important;
}

.booking-header h1 {
    font-size: 24px !important;
    margin-bottom: 5px !important;
}

.currency-note {
    font-size: 14px !important;
    opacity: 0.9 !important;
}

.booking-section {
    padding: 25px !important;
    border-bottom: 1px solid #eee !important;
}

.booking-section:last-child {
    border-bottom: none !important;
}

.section-title {
    font-size: 18px !important;
    margin-bottom: 15px !important;
    color: var(--primary) !important;
    display: flex !important;
    align-items: center !important;
}

.section-title svg {
    margin-right: 10px !important;
}

.form-group {
    margin-bottom: 10px !important;
}

label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #555 !important;
}

label.required:after {
    content: " *" !important;
    color: var(--error) !important;
}

select,
input {
    width: 100% !important;
    padding: 10px 10px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    transition: all 0.3s !important;
    background-color: #f9f9f9 !important;
}

select:disabled {
    opacity: 0.6 !important;
    background-color: #f0f0f0 !important;
}

select:focus,
input:focus {
    border-color: var(--primary) !important;
    outline: none !important;
    background-color: white !important;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2) !important;
}

.form-row {
    display: flex !important;
    gap: 15px !important;
}

.form-row .form-group {
    flex: 1 !important;
}

.ticket-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    border-bottom: 1px dashed #eee !important;
}

.ticket-selector:last-child {
    border-bottom: none !important;
}

.ticket-info {
    flex: 1 !important;
}

.ticket-name {
    font-weight: 600 !important;
    margin-bottom: 3px !important;
}

.ticket-price {
    font-size: 12px !important;
    color: #666 !important;
}

.ticket-cert {
    font-size: 12px !important;
    color: var(--primary) !important;
    margin-top: 3px !important;
}

.ticket-quantity {
    display: flex !important;
    align-items: center !important;
}

.quantity-btn {
    border-radius: 50% !important;
    background: #f0f0f0 !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important
;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    padding: 15px !important;
    height: 40px;
    
}
.quantity-btn:hover {
    background: #e0e0e0 !important;
}

.quantity-input {
    width: 40px !important;
    text-align: center !important;
    margin: 0 10px !important;
    padding: 5px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
}

.total-price {
    text-align: right !important;
    padding: 10px 0 !important;
        /*padding-bottom: 0px !important;*/
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--primary) !important;
}

.btn-book {
    width: 100% !important;
    padding: 10px !important;
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    margin-top: 10px !important;
}

.btn-book:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3) !important;
}

.btn-book:disabled {
    background: #cccccc !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Custom dropdown arrow */
select {
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' 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") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 15px !important;
}

.booking-complete {
    text-align: center !important;
    padding: 30px !important;
}

.booking-complete h2 {
    color: var(--primary) !important;
    margin-bottom: 15px !important;
}

.booking-complete p {
    margin-bottom: 20px !important;
    color: #555 !important;
}

.booking-complete-icon {
    font-size: 60px !important;
    color: var(--success) !important;
    margin-bottom: 20px !important;
}

.booking-form {
    display: block !important;
}

.hidden {
    display: none !important;
}

.payment-methods {
    margin-top: 15px !important;
}

.payment-option {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.payment-option:hover {
    border-color: var(--primary) !important;
}

.payment-option.selected {
    border-color: var(--primary) !important;
    background-color: rgba(67, 97, 238, 0.05) !important;
}

.payment-option input {
    width: auto !important;
    margin-right: 10px !important;
}

.payment-icon {
    width: 30px !important;
    margin-right: 10px !important;
    color: var(--primary) !important;
}

.payment-details {
    margin-top: 15px !important;
    padding: 15px !important;
    background-color: #f9f9f9 !important;
    border-radius: 8px !important;
    display:none;
}

.payment-details.active {
    display: block !important;
}

.quanti-booking{
    padding: 10px 20px 0px !important;
}
.date-selection{
     padding-bottom: 0 !important;
}
.contact-imfo{
    padding-bottom:0 !important;
}

  .container {
                    max-width: 650px;
                    margin: auto;
                    background: #fff;
                    border-radius: 15px;
                    box-shadow: 0 10px 30px rgba(0,0,0,.1);
                    overflow: hidden;
                    width: 100%;
                }
                .header {
                    padding: 25px;
                    text-align: center;
                    color: #fff;
                    background: linear-gradient(135deg, var(--primary), var(--secondary));
                }
                .header h1 {
                    font-size: 26px;
                    margin-bottom: 6px;
                }
                .sub {
                    font-size: 15px;
                    opacity: .9;
                }
                .section {
                    padding: 25px;
                    border-bottom: 1px solid #eee;
                }
                .section-title {
                    font-size: 18px;
                    margin-bottom: 15px;
                    color: var(--primary);
                    display: flex;
                    align-items: center;
                }
                .section-title svg {
                    margin-right: 10px;
                }
                .guest-row {
                    position: relative;
                    border: 1px solid #e0e0e0;
                    border-radius: 10px;
                    padding: 15px;
                    margin-bottom: 15px;
                    transition: border .2s;
                }
                .guest-row:hover {
                    border-color: var(--primary);
                }
                label {
                    display: block;
                    font-size: 14px;
                    font-weight: 600;
                    margin-bottom: 6px;
                }
                label.required:after {
                    content: " *";
                    color: var(--error);
                }
                input {
                    width: 100%;
                    padding: 11px 14px;
                    font-size: 12px;
                    border: 2px solid #e0e0e0;
                    border-radius: 8px;
                    background: #f9f9f9;
                    transition: border .2s, background .2s;
                }
                input:focus {
                    border-color: var(--primary);
                    background: #fff;
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(67,97,238,.2);
                }
                .btn {
                    display: inline-block;
                    padding: 12px 18px;
                    font-size: 15px;
                    font-weight: 600;
                    border: none;
                    border-radius: 8px;
                    cursor: pointer;
                    transition: .25s;
                }
                .btn.primary {
                    color: #fff;
                    background: linear-gradient(135deg, var(--primary), var(--secondary));
                }
                .btn.primary:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 5px 15px rgba(67,97,238,.3);
                }
                .hidden {
                    display: none;
                }
                .complete {
                    text-align: center;
                    padding: 40px;
                }
                .complete .icon {
                    font-size: 60px;
                    color: var(--success);
                    margin-bottom: 20px;
                }
                div#codOption {
    display: none !important;
}

.availability-loader {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.availability-loader::after {
  content: "";
  width: 24px; height: 24px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.hidden { display: none !important; }

.booking-container.boooking {
    margin: 0 auto !important;
}


 .date-selections .calendar-header {
            background: #f8f9fa;
            padding: 16px 20px;
            border-bottom: 1px solid #e9ecef;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background-color 0.2s;
        }

        .date-selections .calendar-header:hover {
            background: #e9ecef;
        }

        .date-selections .calendar-icon {
            width: 20px;
            height: 20px;
            color: #6c757d;
        }

        .date-selections .date-display {
            flex: 1;
        }

        .date-selections .date-label {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 2px;
        }

        .date-selections .date-value {
            font-size: 16px;
            font-weight: 500;
            color: #212529;
        }



        .date-selections .calendar-dropdown {
            /*display: none;*/
            background: white;
            border-top: 1px solid #e9ecef;
        }

        .date-selections .calendar-dropdown.active {
            display: block;
        }

        .date-selections .calendar-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #e9ecef;
        }

        .date-selections .nav-button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            border-radius: 6px;
            color: #6c757d;
            transition: all 0.2s;
        }

        .date-selections .nav-button:hover {
            background: #f8f9fa;
            color: #495057;
        }

        .date-selections .month-year {
            font-size: 18px;
            font-weight: 600;
            color: #212529;
        }

        .date-selections .calendar-grid {
            padding: 0 20px;
        }

        .date-selections .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            margin-bottom: 8px;
        }

        .date-selections .weekday {
            text-align: center;
            padding: 8px 4px;
            font-size: 12px;
            font-weight: 500;
            color: #6c757d;
        }

        .date-selections .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            margin-bottom: 20px;
        }

        .date-selections .day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.2s;
            position: relative;
        }

        .date-selections .day:hover:not(.disabled):not(.other-month) {
            background: #e3f2fd;
        }

        .date-selections .day.selected {
            background: #2196f3;
            color: white;
        }

        .date-selections .day.today {
            background: #fff3e0;
            color: #e65100;
            font-weight: 600;
        }

        .date-selections .day.disabled {
            color: #dee2e6;
            cursor: not-allowed;
        }

        .date-selections .day.other-month {
            color: #dee2e6;
            cursor: default;
        }

        .date-selections .time-selection {
            padding: 20px;
            border-top: 1px solid #e9ecef;
            background: #fafafa;
        }

        .date-selections .time-label {
            font-size: 14px;
            font-weight: 500;
            color: #495057;
            margin-bottom: 12px;
        }

        .date-selections .time-slots {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .date-selections .time-slot {
            padding: 8px 16px;
            border: 2px solid #e9ecef;
            border-radius: 20px;
            background: white;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: #495057;
            transition: all 0.2s;
        }

        .date-selections .time-slot:hover {
            border-color: #2196f3;
            color: #2196f3;
        }

        .date-selections .time-slot.selected {
            background: #2196f3;
            border-color: #2196f3;
            color: white;
        }

        .date-selections .time-slot.disabled {
            background: #f8f9fa;
            color: #dee2e6;
            cursor: not-allowed;
            border-color: #f1f3f4;
        }

        .date-selections .booking-actions {
            padding: 20px;
            border-top: 1px solid #e9ecef;
            display: flex;
            gap: 12px;
        }

        .date-selections .btn {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .date-selections .btn-primary {
            background: #2196f3;
            color: white;
        }

        .date-selections .btn-primary:hover {
            background: #1976d2;
        }

        .date-selections .btn-primary:disabled {
            background: #dee2e6;
            cursor: not-allowed;
        }

.date-selections .btn-secondary {
            background: #f8f9fa;
            color: #6c757d;
            border: 1px solid #e9ecef;
        }

        .date-selections .btn-secondary:hover {
            background: #e9ecef;
        }

        .date-selections .booking-error {
            color: #dc3545;
            font-size: 12px;
            margin-top: 8px;
            padding: 8px 12px;
            background: #f8d7da;
            border-radius: 4px;
            display: none;
        }