:root {
    --primary-color: #f69e51;
    --primary-color-hover: #fce4cf;
    --secondary-color: #333333;
    --text-color: #666666;
    --white: #ffffff;
    --light-yellow: rgba(255, 217, 61, 0.1);
    --light-blue: #fce4cf;
    --blue: #f69e51;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F6F7F9;
    --text-primary: #000;
    --text-secondary: #666666;
    --border-color: #E5E7EB;
    --card-bg: #FFFFFF;
    --accent-color: #f69e51;
    --accent-hover: #f69e51;
    --shadow-color: rgba(0, 0, 0, 0.20);
    --toggle-bg: #F6F7F9;
    --toggle-border: #E5E7EB;
    --experience-card-hover: rgba(0, 163, 255, 0.1);
    --experience-icon-bg: rgba(0, 163, 255, 0.1);
    --body-font: 'Glacial Indifference', sans-serif;
    --title-font: 'Schoolbell', cursive;
    --dark-yellow: #f69e51;
    --dark-yellow-hover: #f69e51;
}

[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1E1E1E;
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    --border-color: #444;
    --card-bg: #1E1E1E;
    --accent-color: #f69e51;
    --accent-hover: #f69e51;
    --shadow-color: rgba(255, 255, 255, 0.20);
    --toggle-bg: #1E1E1E;
    --toggle-border: #555;
    --experience-card-hover: rgba(0, 163, 255, 0.15);
    --experience-icon-bg: rgba(0, 163, 255, 0.15);
    --dark-bg: #121212;
    --dark-card-bg: #1E1E1E;
}

@font-face {
    font-family: 'Comic Handwriting';
    src: url('assets/fonts/comic-handwriting.woff2') format('woff2');
}
* {
    font-family: var(--body-font);
}
body {
    font-family: var(--body-font);
    background-color: var(--bg-primary);
}

.booking-title, .booking-details-title, .confirm-title, .date-select-title, .time-select-title,
.package-select-title, .payment-details-title {
    font-family: var(--title-font);
}
.le-primary-color {
    color: var(--primary-color);
}
.le-secondary-color {
    color: var(--secondary-color);
}
.navbar {
    transition: all 0.3s ease;backdrop-filter: blur(12px);
}

.navbar-brand {
    color: var(--text-primary) !important;
}

.navbar-brand span {
    color: var(--text-primary);
}

.navbar-brand .highlight {
    color: var(--accent-color);
}

.navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--accent-color) !important;
}

.navbar-nav .nav-link::after {
    content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;
    background-color: var(--accent-color);transform: translateX(-100%);transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
    transform: translateX(0);
}

.theme-toggle-label {
    background-color: var(--toggle-bg) !important;height: 26px;width: 50px;border: 2px solid var(--toggle-border);
}

.theme-toggle-label .fa-sun {
    font-size: 12px;
}

.theme-toggle-label .fa-moon {
    color: #A1A1AA;font-size: 12px;
}

.toggle-ball {
    background-color: var(--accent-color);top: 2px;left: 2px;height: 18px;width: 18px;transform: translateX(0);
}
.gokarting-body .toggle-ball {
    background: #EF4444;
    background: linear-gradient(90deg,rgba(239, 68, 68, 1) 0%, rgba(249, 115, 22, 1) 100%);
}

.theme-toggle-input:checked + .theme-toggle-label .toggle-ball {
    transform: translateX(24px);
}

/* Mobile Toggle Button */
.navbar-toggler {
    padding: 0.5rem;
}
.top-20.navbar-toggler {
    top: 7px;
}
.navbar-toggler:focus {
    box-shadow: none;border-color: var(--accent-color) !important;
}

.navbar-toggler-icon {
    background-image: none !important;position: relative;width: 24px;height: 2px;
    background-color: var(--text-primary);transition: background-color 0.3s ease;
}

.navbar-toggler-icon::before, .navbar-toggler-icon::after {
    content: '';position: absolute;width: 24px;height: 2px;
    background-color: var(--text-primary);transition: all 0.3s ease;left: 0;
}

.navbar-toggler-icon::before {
    top: -6px;
}

.navbar-toggler-icon::after {
    bottom: -6px;
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: var(--bg-primary);border-color: var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--bg-secondary);color: var(--accent-color);
}

/* Scrolled State */
.navbar.scrolled {
    background-color: var(--bg-primary);box-shadow: 0 5px 20px var(--shadow-color);padding: 15px 0;
}

/* Dark Mode Specific Overrides */
[data-theme="dark"] .navbar {
    background-color: var(--bg-primary) !important;box-shadow: 0 4px 10px rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] .navbar-brand, [data-theme="dark"] .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar-toggler-icon, [data-theme="dark"] .navbar-toggler-icon::before,
[data-theme="dark"] .navbar-toggler-icon::after {
    background-color: var(--text-primary);
}

@media (max-width: 991px) {
    .navbar-collapse {
        padding: 1rem;border-radius: 8px;margin-top: 1rem;border: 1px solid var(--border-color);
    }
}

.btn-warning {
    background-color: var(--primary-color);
}

.btn-warning:hover {
    background-color: #ffc107;transform: translateY(-2px);
}
.booking-description {
    color: var(--primary-color);
}

/* ===================== Booking Section Start ======================== */
.booking-section {
    padding: 120px 0 40px;
    background-color: var(--bg-primary);
}
.booking-tag {
    background-color: #FFE8D9;
}

.booking-title span {
    color: var(--primary-color);font-family: var(--title-font);
}

.booking-flow {
    background: var(--card-bg);border: 1px solid var(--border-color);
}

.step-nav::before {
    content: '';position: absolute;top: 20px;left: 30px;right: 30px;height: 2px;
    background-color: var(--border-color);z-index: 1;
}

.step-number {
    background-color: var(--bg-secondary);color: var(--text-primary);border: solid 2px var(--border-color);
}

.step-label {
    font-size: 14px;color: var(--text-primary);
}

.step-item.active .step-label {
    color: var(--text-primary);
}

.step-item.completed .step-number {
    background-color: var(--primary-color);color: var(--text-primary);border-color: var(--primary-color);
}

.step-item.active .step-number {
    border-color: var(--primary-color);
}
.gokarting-body .step-item.active .step-number {
    border-color: #EF4444;color: #fff;background: #EF4444;
}

/* Booking Actions */

.back-btn:hover, .back-home-btn:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.calendar-cell {
    width: 40px;height: 40px;text-align: center;vertical-align: middle;line-height: 40px;
    border: 1px solid #eee;margin: 1px;cursor: pointer;
}

.calendar-cell.disabled {
    background: #f5f5f5;color: #ccc;cursor: not-allowed;
}

.calendar-cell.enabled {
    background: #e0ffe0;color: #222;cursor: pointer;
}

.time-slot.selected {
    background-color: #ffc107;color: white;border: 2px solid #e0a800;
}

.continue-btn, .continue-btn.active {
    background-color: var(--primary-color) !important;color: var(--secondary-color) !important;border:none !important;
}

.continue-btn:hover {
    opacity: 0.9;
}

.continue-btn:not(.active) {
    opacity: 0.5;cursor: not-allowed;
}

.booking-tab {
    animation: fadeIn 0.3s ease;
}

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

/* Calendar Styles */

.calendar-container {
    background: var(--card-bg);width: 300px;border: 1px solid var(--border-color);
}

.calendar-header button {
    color: var(--text-secondary);
}

.calendar-header button:hover {
    color: var(--text-primary);
}

#currentMonth {
    font-size: 14px;color: var(--text-primary);
}

/*==================== calendar-grid =====================*/

.calendar-grid {
    grid-template-columns: repeat(7, 1fr);gap: 8px 0;
}

.calendar-day-header {
    font-size: 14px;color: var(--text-primary);padding-bottom: 12px;text-align: center;
}

.calendar-day {
    width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;font-size: 14px;
    color: var(--text-primary);cursor: pointer;position: relative;
}

.calendar-day:not(.empty):not(.disabled)::after {
    content: '';position: absolute;width: 32px;height: 32px;border-radius: 50%;
    transition: all 0.2s ease;z-index: -1;
}

.calendar-day:not(.empty):not(.disabled):hover::after {
    background-color: rgba(255, 217, 61, 0.1);
}

.calendar-day.selected {
    color: var(--text-primary);font-weight: 500;position: relative;z-index: 1;
}

.calendar-day.selected::after {
    content: '';position: absolute;width: 32px;height: 32px;background-color: var(--primary-color);
    border-radius: 50%;z-index: -1;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
.gokarting-body .calendar-day.selected::after {
    background-color: #EF4444;
}
.calendar-day:not(.empty):not(.disabled):hover {
    color: var(--text-primary);border-radius:50%;
}

.calendar-day:not(.empty):not(.disabled):hover::after {
    content: '';position: absolute;width: 32px;height: 32px;background-color: rgba(255, 217, 61, 0.1);
    border-radius: 50%;z-index: -1;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

.calendar-day.today:not(.selected) {
    background: var(--primary-color);font-weight: 500;border-radius:50%;
}

.calendar-day.disabled {
    color: var(--text-secondary);cursor: default;
}

.calendar-day.empty {
    cursor: default;
}

/* ========================= Time Slot Styles ====================== */

.selected-date {
    color: var(--text-primary);
}

.time-slots-grid {
    grid-template-columns: repeat(2, 1fr);
}

.time-slot {
    border: 1px solid var(--border-color);
}

.time-slot:hover {
    border-color: var(--primary-color);
}

.time-slot.selected {
    border-color: var(--primary-color);background-color: var(--primary-color);
}

.time-slot-hours {
    color: var(--text-primary);
}

.time-slot-availability {
    font-size: 14px;color: var(--text-primary);
}

/* Package Selection Styles */

.package-card {
    border: 2px solid var(--border-color);
}

.package-card:hover {
    border-color: var(--primary-color);
}

.package-card.selected {
    border: 2px solid var(--primary-color);background: var(--primary-color);
}

.package-info h5 {
    color: var(--text-primary);
}

.package-info p {
    font-size: 14px;color: var(--text-primary);
}

.price-amount {
    color: var(--text-primary);
}

.price-amount::before {
    content: '₹';
}

.price-tax {
    font-size: 14px;color: var(--text-primary);
}

/* ============================ Booking Details Styles ====================== */

.form-label {
    color: var(--text-primary);
}

.form-input {
    border: 1px solid var(--border-color);font-size: 14px;color: var(--text-primary);
}

.form-input::placeholder {
    color: var(--text-secondary);
}

.form-input:focus {
    outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.1);
}

/* ======================== Number of Children Counter====================== */

.counter-btn {
    border: 1px solid var(--border-color);background: var(--bg-secondary);color: var(--text-primary);
}

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

.counter-value {
    color: var(--text-primary);
}

/* Booking Summary */
.booking-summary {
    background: var(--bg-secondary);
}

.summary-title, .section-title, .confirm-summary .summary-title {
    color: #f69e51;border-bottom: 1px solid var(--border-color);
}

.summary-row {
    border-bottom: 1px solid var(--border-color);
}

.summary-label, .info-label {
    color: var(--text-primary);font-size: 15px;
}

.summary-value, .info-value {
    color: var(--text-primary);font-size: 15px;font-weight: 600;
}

/* ================================== Payment Details Styles================================== */

.info-section {
    background: var(--bg-secondary);
}
.info-row {
    border-bottom: 1px solid var(--border-color);
}

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

.total-amount {
    color: var(--text-primary);
}

/* Payment Gateway Section */

.gateway-title {
    font-size: 15px;font-weight: 500;color: #f69e51;margin-bottom: 16px;
}

.gateway-logos img {
    height: 36px;object-fit: contain;
}

.gateway-note {
    color: var(--text-primary);font-size: 14px;line-height: 1.5;margin: 0;
}

/* Navigation Buttons */

.back-btn, .back-home-btn {
    background: transparent;color: var(--text-primary);
}

.proceed-payment-btn {
    padding: 12px 24px;font-weight: 500;background-color: var(--primary-color);color: var(--secondary-color);
    border: none;border-radius: 8px;cursor: pointer;transition: all 0.2s ease;
}

.proceed-payment-btn:hover {
    opacity: 0.9;
}

/* Confirm Booking Styles */

.confirm-message {
    color: var(--text-primary);
}

.confirm-summary {
    background: var(--bg-secondary);
}

.book-another-btn {
    background-color: var(--primary-color);
}

.book-another-btn:hover {
    opacity: 0.9;
}

/* Footer Section */
.footer {
    background-color: var(--bg-secondary);border-top: 1px solid var(--border-color);
}

.footer-description, .footer-column ul a, .copyright, .footer-bottom-links a {
    font-size: 14px;
    color: var(--text-secondary);
}

.social-link {
    background-color: var(--card-bg);color: var(--text-secondary);
}

.social-link:hover {
    background-color: var(--accent-color);color: var(--bg-secondary);transform: translateY(-5px) rotate(8deg);
}

.footer-column h5 {
    font-family: var(--title-font);
}

.footer-column ul a:hover {
    color: var(--accent-color);
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid var(--border-color);
}

.footer-bottom-links a:hover {
    color: var(--accent-color);
}

.footer-bottom-links .separator {
    color: var(--border-color);
}

/* Animation Keyframes */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes shine {
    0% { left: -100%; } 100% { left: 100%; }
}

.btn {
    position: relative;overflow: hidden;
}
.btn::before {
    content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%; transition: 0.5s;
    background: linear-gradient(120deg,transparent,rgba(255, 255, 255, 0.3),transparent);
}

.btn:hover::before {
    animation: shine 0.75s;
}

/* Interactive Elements */
.form-input:focus {
    transform: scale(1.01);
}

.theme-toggle-label {
    transition: all 0.3s ease;
}

.theme-toggle-label:hover {
    transform: scale(1.1);
}

/* Social Links Animation */
.social-link {
    transition: all 0.3s ease;
}

.social-link:hover {
    transform: translateY(-5px) rotate(8deg);
}
.country-select .dial-code {
    padding: 8px 0 0 28px;
}
/* Navbar Scroll Effect */
.navbar.scrolled {
    background-color: var(--bg-primary) !important;
    box-shadow: 0 5px 20px var(--shadow-color) !important;padding: 15px 0;
}

[data-theme="dark"] .form-input {
    background-color: var(--dark-bg); border-color: #444; color: #fff;
}

[data-theme="dark"] .form-input::placeholder {
    color: #666;
}
[data-theme="dark"] .booking-summary, [data-theme="dark"] .info-section, [data-theme="dark"] .confirm-summary {
    background: #333;
}
[data-theme="dark"] .form-input:focus {
    border-color: var(--dark-yellow);
}

/* Dark Mode Global Styles */
[data-theme="dark"] body {
    color: #fff;
}
[data-theme="dark"] .number-indicators span {
    color: #000;
}

[data-theme="dark"] .nav-link {
    color: #fff !important;
}
[data-theme="dark"] .country-select .country-list, [data-theme="dark"] .country-select .country-list .divider {
    background-color: var(--dark-bg);border: 1px solid #333;
}
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    color: var(--dark-yellow) !important;
}

/* Footer Dark Mode */

[data-theme="dark"] .footer-title {
    color: var(--dark-yellow);
}

[data-theme="dark"] .footer-links a {
    color: #ccc;
}

[data-theme="dark"] .footer-links a:hover {
    color: var(--dark-yellow);
}

[data-theme="dark"] .social-links a {
    color: var(--dark-yellow); border-color: var(--dark-yellow);
}

[data-theme="dark"] .social-links a:hover {
    background: var(--dark-yellow);
    color: #000;
}

[data-theme="dark"] .copyright {
    color: #888;
}

/* Booking Modal Dark Mode */
[data-theme="dark"] .modal-content {
    background-color: var(--dark-card-bg); border: 1px solid #333;
}

[data-theme="dark"] .modal-header {
    border-bottom: 1px solid #333;
}

[data-theme="dark"] .modal-title {
    color: #fff;
}

[data-theme="dark"] .modal-body {
    color: #ccc;
}

[data-theme="dark"] .modal-footer {
    border-top: 1px solid #333;
}

[data-theme="dark"] .close {
    color: #fff;
}

[data-theme="dark"] .close:hover {
    color: var(--dark-yellow);
}

/* Calendar Dark Mode */
[data-theme="dark"] .calendar-container {
    background: var(--dark-card-bg);
}

[data-theme="dark"] .calendar-header {
    background: var(--dark-card-bg); color: #fff;
}

[data-theme="dark"] .calendar-days {
    color: #ccc;
}

[data-theme="dark"] .calendar-day.active {
    background: var(--dark-yellow); color: #000;
}

[data-theme="dark"] .calendar-day:hover:not(.disabled) {
    background: rgba(255, 215, 0, 0.2); color: var(--dark-yellow);
}

[data-theme="dark"] .calendar-day.disabled {
    color: #666;
}

/* Animations in Dark Mode */
[data-theme="dark"] .fade-up, [data-theme="dark"] .fade-down, [data-theme="dark"] .fade-left,
[data-theme="dark"] .fade-right {
    opacity: 0; transform: translateY(20px); transition: all 0.6s ease;
}

[data-theme="dark"] .fade-up.active, [data-theme="dark"] .fade-down.active,
[data-theme="dark"] .fade-left.active, [data-theme="dark"] .fade-right.active {
    opacity: 1;transform: translateY(0);
}
/* Logo theme switching */
.logo-dark { display: inline; }
.logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: inline !important; }

/*============================ Go Karting Booking Css Start ================================*/

body.gokarting-body, .gokarting-body .booking-section {
    background: #fef2f2;
    background: linear-gradient(135deg,rgba(254, 242, 242, 1) 60%, rgba(254, 248, 198, 1) 100%);
}
.gokarting-body .booking-section {
    padding-top: 90px;
}
.gokarting-body .booking-flow, .gokarting-body .calendar-container, .gokarting-body .time-slot,
.gokarting-body .form-input, .adultsBorder, .gokarting-body .summary-row, .gokarting-body .info-row,
.gokarting-body .counter-btn, .gokarting-body .footer, .gokarting-body .footer-bottom {
    border-color: #fecaca !important;
}
.gokarting-body .booking-flow {
    background:none;
}

.gokarting-body .step-number {
    border-color: #fecaca;
}

.gokarting-body .step-nav::before {
    background-color: #fecaca;
}

.gokarting-body .booking-details-title, .gokarting-body .confirm-title, .gokarting-body .date-select-title,
.gokarting-body .time-select-title, .gokarting-body .package-select-title, .gokarting-body .payment-details-title, 
.gokarting-body .counter-value {
    color: #dc2626 !important;
}
.gokarting-body .time-slot, .gokarting-body .back-btn, .gokarting-body .back-home-btn {
    background: #fff;
}
.gokarting-body .btn-warning, .gokarting-body .time-slot.selected, .gokarting-bg {
    background: #EF4444 !important;color: #fff !important;
    background: linear-gradient(90deg,rgba(239, 68, 68, 1) 0%, rgba(249, 115, 22, 1) 100%) !important;
}
.gokarting-body .calendar-day.selected, .gokarting-body .time-slot.selected * {
    color: #fff;
}
[data-theme="dark"] .gokarting-body .counter-value {
    color: #fff !important;
}
.adultsBorder, .gokarting-body .booking-summary, .gokarting-body .info-section,
.gokarting-body .confirm-summary {
    background: none;
}

[data-theme="dark"] body.gokarting-body, [data-theme="dark"] .gokarting-body .navbar,
[data-theme="dark"] .gokarting-body .booking-section, [data-theme="dark"] .gokarting-body .booking-flow,
[data-theme="dark"] .gokarting-body .calendar-container, [data-theme="dark"] .gokarting-body .calendar-header,
[data-theme="dark"] .gokarting-body .footer {
    background: #140b0a !important;
}
[data-theme="dark"] .gokarting-body .booking-details-title, [data-theme="dark"] .gokarting-body .confirm-title,
[data-theme="dark"] .gokarting-body .date-select-title, [data-theme="dark"] .gokarting-body .time-select-title,
[data-theme="dark"] .gokarting-body .package-select-title, [data-theme="dark"] .gokarting-body .payment-details-title {
    color: #f87171 !important;
}
[data-theme="dark"] .gokarting-body .step-number {
    border-color: var(--border-color);
}
[data-theme="dark"] .gokarting-body .step-nav::before {
    background-color: var(--border-color);
}
[data-theme="dark"] .gokarting-body .time-slot {
    background: none;
}
[data-theme="dark"] .gokarting-body .booking-flow, [data-theme="dark"] .gokarting-body .calendar-container, 
[data-theme="dark"] .gokarting-body .time-slot, [data-theme="dark"] .gokarting-body .form-input {
    border-color: #EF4444 !important;
}
[data-theme="dark"] .gokarting-body .back-btn, [data-theme="dark"] .gokarting-body .back-home-btn {
    background: transparent;
}

[data-theme="dark"] .adultsBorder, [data-theme="dark"] .gokarting-body .booking-summary,
[data-theme="dark"] .gokarting-body .info-section, [data-theme="dark"] .gokarting-body .confirm-summary,
[data-theme="dark"] .gokarting-body .counter-btn {
    background: #440f08;
}

[data-theme="dark"] .adultsBorder, [data-theme="dark"] .gokarting-body .summary-row, [data-theme="dark"] .gokarting-body .info-row,
[data-theme="dark"] .gokarting-body .footer, [data-theme="dark"] .gokarting-body .footer-bottom {
    border-color: #732525 !important;
}


/*============================ Go Karting Booking Css End ================================*/

@media (max-width: 1441px) {
    .step-nav::before {
        top: 15px;
    }
}
@media (max-width: 1199px) {
    .gokarting-body .booking-section {
        padding-top: 140px;
    }
}
@media (max-width: 991px) {
    .gokarting-body .booking-section {
        padding-top: 95px;
    }
}
@media (max-width: 767px) {
    .booking-section {
        padding-top: 80px;
    }
    .booking-flow {
        width: 100%;
    }
    .gokarting-body .booking-section {
        padding-top: 75px;
    }
}
@media (max-width: 575px) {
    .calendar-container {
        width: 100%;
    }
    .booking-section {
        padding-top: 70px;
    }
    .time-slots-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .gokarting-body .booking-section {
        padding-top: 65px;
    }
    .gokarting-body .booking-flow {
        border:none !important;
    }
}