 <!-- Debug: Current timezone: Europe/Helsinki -->
<!-- Debug: Server time: 2025-06-21 18:04:56 -->
<!-- Debug: Today&#039;s date for query: 2025-06-21 -->
<!-- Debug: Database connected: 127.0.0.1:3306 via TCP/IP -->
<!-- Debug: Available tables: -->
<!-- Debug: - admin_users -->
<!-- Debug: - blog_posts -->
<!-- Debug: - calendar_events -->
<!-- Debug: - class_bookings -->
<!-- Debug: - class_schedule -->
<!-- Debug: - courses -->
<!-- Debug: - customers -->
<!-- Debug: - daily_schedule -->
<!-- Debug: - important_info -->
<!-- Debug: - private_session_features -->
<!-- Debug: - private_sessions -->
<!-- Debug: - schedule -->
<!-- Debug: - schedules -->
<!-- Debug: - team_members -->
<!-- Debug: calendar_events table structure: -->
<!-- Debug: - id (int(11)) -->
<!-- Debug: - title (varchar(255)) -->
<!-- Debug: - description (text) -->
<!-- Debug: - start_time (time) -->
<!-- Debug: - end_time (time) -->
<!-- Debug: - duration (int(11)) -->
<!-- Debug: - instructor (varchar(255)) -->
<!-- Debug: - class_type (varchar(100)) -->
<!-- Debug: - level (varchar(50)) -->
<!-- Debug: - date (date) -->
<!-- Debug: - recurring (tinyint(1)) -->
<!-- Debug: - recurring_pattern (varchar(50)) -->
<!-- Debug: - created_at (timestamp) -->
<!-- Debug: - visibility (varchar(20)) -->
<!-- Debug: All events in calendar_events: -->
<!-- Debug: Array
(
    [id] =&gt; 3
    [title] =&gt; Evening Flow
    [description] =&gt; Gentle flow to unwind after a long day.
    [start_time] =&gt; 18:00:00
    [end_time] =&gt; 19:00:00
    [duration] =&gt; 60
    [instructor] =&gt; Annica Hill
    [class_type] =&gt; Vinyasa Flow
    [level] =&gt; All Levels
    [date] =&gt; 2025-04-22
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-04-22 17:34:32
    [visibility] =&gt; 
)
 -->
<!-- Debug: Array
(
    [id] =&gt; 6
    [title] =&gt; Candlelight Meditation
    [description] =&gt; Relaxing meditation by candlelight to end your day.
    [start_time] =&gt; 20:00:00
    [end_time] =&gt; 21:00:00
    [duration] =&gt; 60
    [instructor] =&gt; Guru Yogi Prakash
    [class_type] =&gt; Meditation
    [level] =&gt; All Levels
    [date] =&gt; 2025-04-23
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-04-22 17:34:32
    [visibility] =&gt; 
)
 -->
<!-- Debug: Array
(
    [id] =&gt; 7
    [title] =&gt; Sunrise Yoga
    [description] =&gt; Energizing morning practice to awaken your body and mind.
    [start_time] =&gt; 06:30:00
    [end_time] =&gt; 07:30:00
    [duration] =&gt; 60
    [instructor] =&gt; Dhanpati Pandey
    [class_type] =&gt; Vinyasa Flow
    [level] =&gt; Intermediate
    [date] =&gt; 2025-04-24
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-04-22 17:34:32
    [visibility] =&gt; 
)
 -->
<!-- Debug: Array
(
    [id] =&gt; 30
    [title] =&gt; Hatha Yoga
    [description] =&gt; 
    [start_time] =&gt; 10:00:00
    [end_time] =&gt; 11:00:00
    [duration] =&gt; 60
    [instructor] =&gt; Staff
    [class_type] =&gt; Hatha Yoga
    [level] =&gt; Beginner
    [date] =&gt; 2025-05-18
    [recurring] =&gt; 0
    [recurring_pattern] =&gt; 
    [created_at] =&gt; 2025-05-17 08:49:57
    [visibility] =&gt; 
)
 -->
<!-- Debug: class_schedule table exists -->
<!-- Debug: Table structure: -->
<!-- Debug: Field: id, Type: int(11) -->
<!-- Debug: Field: day, Type: varchar(20) -->
<!-- Debug: Field: time, Type: varchar(50) -->
<!-- Debug: Field: class_name, Type: varchar(100) -->
<!-- Debug: Field: trainer, Type: varchar(100) -->
<!-- Debug: Field: created_at, Type: timestamp -->
<!-- Debug: Sample data: -->
<!-- Debug: Database connected: 127.0.0.1:3306 via TCP/IP -->
<!-- Debug: Table columns: id, day, time, class_name, trainer, created_at -->
<!-- Debug: Found 0 classes for Monday -->
<!-- Debug: Found 0 classes for Tuesday -->
<!-- Debug: Found 0 classes for Wednesday -->
<!-- Debug: Found 0 classes for Thursday -->
<!-- Debug: Found 0 classes for Friday -->
<!-- Debug: Found 0 classes for Saturday -->
<!-- Debug: Found 0 classes for Sunday -->
<!-- Debug: Found 5 daily schedule items -->
<!-- Debug: Important info found: yes -->
<!-- Debug: Found 0 calendar events -->

<!-- Debug: Found 0 dates with classes -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shanti Yoga Center - Class Schedule</title>
    
    <!-- Favicon -->
    <link href="img/logo.png" rel="icon">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- CSS Libraries -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/flaticon/font/flaticon.css" rel="stylesheet"> 
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
    
    <!-- FullCalendar CSS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css' rel='stylesheet' />
    
    <!-- Custom Stylesheets -->
    <link href="assets/css/modern-class-layout.css" rel="stylesheet">
    
    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">

        <style>
            /* Calendar Redesign Styles */
            .calendar-booking-container {
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                overflow: hidden;
                margin-bottom: 30px;
                padding: 20px;
            }
            
            .calendar-wrapper {
                padding: 20px;
            }
            
            /* FullCalendar Customization */
            .fc-theme-standard .fc-scrollgrid {
                border: none;
            }
            
            .fc .fc-toolbar-title {
                font-family: 'Cormorant Garamond', serif;
                font-size: 1.8rem;
                color: #333;
                font-weight: 600;
            }
            
            .fc .fc-button-primary {
                background-color: #ed732f;
                border-color: #ed732f;
                box-shadow: none;
            }
            
            .fc .fc-button-primary:hover {
                background-color: #d86525;
                border-color: #d86525;
            }
            
            .fc .fc-button-primary:not(:disabled):active,
            .fc .fc-button-primary:not(:disabled).fc-button-active {
                background-color: #c55a1e;
                border-color: #c55a1e;
            }
            
            .fc-daygrid-day-number {
                font-family: 'Poppins', sans-serif;
                font-size: 16px;
                font-weight: 500;
                color: #333;
                padding: 8px;
            }
            
            .fc-daygrid-day.fc-day-today {
                background-color: rgba(237, 115, 47, 0.2);
            }
            
            /* Style for past days */
            .fc-day-past {
                background-color: #f9f9f9;
            }
            
            .fc-day-past .fc-daygrid-day-number {
                color: #888;
            }
            
            .fc-event {
                border-radius: 6px;
                padding: 5px 8px;
                font-size: 14px;
                font-weight: 600;
                border: none;
                cursor: pointer;
                transition: transform 0.2s ease;
            }
            
            .fc-event:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            .fc-h-event .fc-event-title {
                font-weight: 500;
            }
            
            .fc-day-other .fc-daygrid-day-top {
                opacity: 0.5;
            }
            
            .fc-col-header-cell {
                background-color: #f8f9fa;
                padding: 10px 0;
            }
            
            .fc-col-header-cell-cushion {
                font-family: 'Poppins', sans-serif;
                font-weight: 600;
                font-size: 16px;
                color: #333;
                text-decoration: none !important;
                padding: 12px 0;
            }
            
            /* Booking Modal Redesign */
            .modal-content {
                border: none;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
            }
            
            .modal-header {
                background: linear-gradient(135deg, #ed732f, #e05e1d);
                color: white;
                border-bottom: none;
                padding: 20px 25px;
            }
            
            .modal-title {
                font-family: 'Cormorant Garamond', serif;
                font-weight: 600;
                font-size: 1.5rem;
            }
            
            .modal-body {
                padding: 25px;
            }
            
            #booking-class-details {
                background-color: #f8f9fa;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
            }
            
            #booking-class-title {
                font-size: 1.2rem;
                color: #333;
                margin-bottom: 10px;
            }
            
            .form-group label {
                font-weight: 500;
                color: #555;
                margin-bottom: 8px;
            }
            
            .form-control {
                border-radius: 6px;
                border: 1px solid #ddd;
                padding: 12px 15px;
                font-size: 14px;
                transition: all 0.3s ease;
            }
            
            .form-control:focus {
                border-color: #ed732f;
                box-shadow: 0 0 0 3px rgba(237, 115, 47, 0.1);
            }
            
            .modal-footer {
                border-top: none;
                padding: 15px 25px 25px;
            }
            
            .btn-primary {
                background-color: #ed732f;
                border-color: #ed732f;
                border-radius: 6px;
                padding: 10px 20px;
                font-weight: 500;
                transition: all 0.3s ease;
            }
            
            .btn-primary:hover {
                background-color: #d86525;
                border-color: #d86525;
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
            
            .btn-secondary {
                background-color: #f8f9fa;
                border-color: #ddd;
                color: #555;
                border-radius: 6px;
                padding: 10px 20px;
                font-weight: 500;
                transition: all 0.3s ease;
            }
            
            .btn-secondary:hover {
                background-color: #e9ecef;
                border-color: #ccc;
            }
            
            /* Success Modal */
            #successModal .modal-header {
                background: linear-gradient(135deg, #4CAF50, #388E3C);
            }
            
            .schedule-hero {
                background: #ed732f;
                padding: 60px 0;
                text-align: center;
                color: #fff;
            }

            .schedule-hero h1 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 3.5rem;
                margin-bottom: 20px;
                font-weight: 600;
                position: relative;
                padding-bottom: 15px;
            }

            .schedule-hero h1:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 3px;
                background: #fff;
            }

            .schedule-section {
                padding: 80px 0;
                background: #fff;
            }

            .schedule-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 40px;
            }

            .schedule-header h2 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2.5rem;
                margin: 0;
            }

            .filter-dropdown {
                position: relative;
                display: inline-block;
                margin-left: 15px;
            }

            .filter-dropdown select {
                appearance: none;
                padding: 10px 40px 10px 20px;
                font-size: 1rem;
                border: 1px solid #ddd;
                border-radius: 25px;
                background: #fff;
                cursor: pointer;
                outline: none;
                min-width: 180px;
            }

            .filter-group {
                display: flex;
                gap: 15px;
            }

            .schedule-layout {
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 30px;
                margin-bottom: 40px;
            }

            .calendar-section {
                background: #fff;
                border-radius: 24px 24px 0 0;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
            }

            .calendar-nav {
                background: #ed732f;
                padding: 20px 25px;
                color: #fff;
                border-radius: 10px 10px 0 0;
            }
            
            .header-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .schedule-title {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .icon-container {
                background-color: rgba(255, 255, 255, 0.2);
                width: 40px;
                height: 40px;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
            }
            
            .schedule-title h3 {
                font-size: 1.8rem;
                margin: 0;
                font-weight: 500;
            }
            
            .date-display {
                font-size: 1.2rem;
                color: #fff;
                font-weight: 500;
            }

            .calendar-nav h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2rem;
                margin: 0;
                display: flex;
                align-items: center;
                gap: 15px;
                color: #fff;
            }

            .calendar-nav h3:before {
                content: '\f133';
                font-family: 'Font Awesome 5 Free';
                font-weight: 400;
                font-size: 1.8rem;
                background: rgba(255, 255, 255, 0.2);
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                backdrop-filter: blur(5px);
            }

            .hourly-schedule {
                padding: 0;
                background: #fff;
            }

            .time-slots {
                display: flex;
                flex-direction: column;
            }

            .time-slot {
                display: flex;
                margin-bottom: 15px;
                position: relative;
                perspective: 1000px;
            }

            .time-label {
                width: 100px;
                font-weight: 600;
                color: #333;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 15px;
                position: relative;
                font-size: 1.1rem;
                border-right: 2px dashed #ed732f;
                margin-right: 20px;
            }

            .time-classes {
                flex: 1;
                display: flex;
                padding: 0;
                position: relative;
            }

            .class-card {
                background: white;
                border-radius: 0;
                padding: 20px;
                min-width: 220px;
                flex: 1;
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
                border-top: 3px solid #ed732f;
                box-shadow: 0 3px 10px rgba(0,0,0,0.1);
                transform-style: preserve-3d;
                transform: rotateX(0deg);
            }

            .class-card::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 20px 20px 0;
                border-color: transparent #ed732f transparent transparent;
            }

            .class-card:hover {
                transform: rotateX(5deg);
                box-shadow: 0 15px 20px rgba(0,0,0,0.1);
            }

            .class-time {
                font-size: 0.8rem;
                color: #fff;
                margin-bottom: 12px;
                background: #ed732f;
                display: inline-block;
                padding: 3px 8px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                position: relative;
            }

            .class-name {
                font-weight: 700;
                font-size: 1.2rem;
                margin-bottom: 10px;
                color: #333;
                border-bottom: 1px solid #eee;
                padding-bottom: 10px;
            }

            .class-instructor {
                font-size: 0.9rem;
                color: #666;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                font-style: italic;
            }

            .no-class {
                color: #999;
                font-style: italic;
                width: 100%;
                text-align: center;
                padding: 20px;
                background: #f9f9f9;
                border: 1px dashed #ddd;
            }

            .day-name {
                font-size: 0.85rem;
                color: #666;
                margin-bottom: 5px;
                font-weight: 500;
                transition: color 0.3s ease;
            }

            .day-number {
                font-size: 1.2rem;
                color: #333;
                font-weight: 600;
                transition: color 0.3s ease;
            }

            .calendar-days {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 15px;
                padding: 25px;
            }

            .full-calendar-link {
                color: #fff;
                text-decoration: none;
                padding: 10px 20px;
                border-radius: 12px;
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(5px);
                transition: all 0.3s ease;
            }

            .full-calendar-link:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: translateY(-2px);
            }

            .daily-schedule {
                background: #fff;
                border-radius: 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
            }

            .daily-schedule-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
            }

            .daily-schedule-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 1.6rem;
                margin: 0;
                color: #fff;
            }

            .schedule-content {
                padding: 25px;
            }

            .schedule-item {
                display: flex;
                align-items: flex-start;
                gap: 15px;
                padding: 12px;
                border-radius: 12px;
                transition: all 0.3s ease;
                cursor: pointer;
                border: 1px solid transparent;
            }

            .schedule-item:hover {
                background: rgba(243, 100, 56, 0.05);
                border-color: rgba(243, 100, 56, 0.1);
                transform: translateX(5px);
            }

            .schedule-time {
                min-width: 90px;
                padding: 8px;
                background: #f8f9fa;
                border-radius: 8px;
                text-align: center;
                font-size: 0.85rem;
                font-weight: 600;
                color: #ed732f;
            }

            .schedule-activity {
                font-size: 0.9rem;
                color: #333;
                padding-top: 8px;
            }

            .schedule-note {
                margin-top: 20px;
                padding: 20px;
                background: rgba(243, 100, 56, 0.05);
                border-radius: 12px;
                border: 1px dashed rgba(243, 100, 56, 0.2);
            }

            .schedule-note h4 {
                color: #ed732f;
                font-size: 1rem;
                margin-bottom: 12px;
                font-weight: 600;
            }

            .schedule-note p {
                font-size: 0.85rem;
                color: #666;
                margin-bottom: 8px;
                line-height: 1.6;
            }

            .contact-info {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 12px;
                color: #ed732f;
                font-size: 0.85rem;
            }

            .class-list {
                margin-top: 0;
                background: #fff;
                border-radius: 0 0 24px 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                padding: 25px;
                border-top: 1px solid rgba(243, 100, 56, 0.1);
            }

            .class-list h4 {
                margin-bottom: 20px;
                font-size: 1.8rem;
                font-family: 'Cormorant Garamond', serif;
                color: #333;
                padding-bottom: 15px;
                border-bottom: 2px solid rgba(243, 100, 56, 0.1);
                position: relative;
            }

            .class-list h4:after {
                content: '';
                position: absolute;
                bottom: -2px;
                left: 0;
                width: 60px;
                height: 2px;
                background: #ed732f;
            }

            .class-item {
                display: flex;
                align-items: center;
                padding: 20px;
                border-radius: 12px;
                margin-bottom: 15px;
                transition: all 0.3s ease;
                background: #f8f9fa;
                border: 1px solid transparent;
            }

            .class-item:hover {
                background: rgba(243, 100, 56, 0.05);
                border-color: rgba(243, 100, 56, 0.1);
                transform: translateX(5px);
            }

            .class-time {
                min-width: 100px;
                text-align: center;
            }

            .class-time .time {
                font-size: 1.1rem;
                font-weight: 600;
                color: #ed732f;
                margin-bottom: 5px;
            }

            .class-time .duration {
                font-size: 0.85rem;
                color: #888;
            }

            .instructor-avatar {
                width: 50px;
                height: 50px;
                border-radius: 12px;
                margin: 0 20px;
                object-fit: cover;
                border: 2px solid rgba(243, 100, 56, 0.2);
            }

            .class-info {
                flex-grow: 1;
            }

            .class-title {
                font-size: 1.1rem;
                margin-bottom: 5px;
                color: #333;
            }

            .instructor-name {
                color: #666;
                font-size: 0.9rem;
                margin-bottom: 5px;
            }

            .class-location {
                color: #888;
                font-size: 0.85rem;
            }

            .details-btn {
                background: #fff;
                color: #ed732f;
                padding: 12px 25px;
                border-radius: 12px;
                text-decoration: none;
                transition: all 0.3s ease;
                border: 1px solid rgba(243, 100, 56, 0.2);
                font-weight: 500;
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
            }

            .details-btn i {
                font-size: 1.1rem;
            }

            .details-btn:hover {
                background: rgba(243, 100, 56, 0.05);
                border-color: rgba(243, 100, 56, 0.3);
                transform: translateX(5px);
            }

            @media (max-width: 576px) {
                .details-btn {
                    width: 100%;
                    justify-content: center;
                }
            }

            @media (max-width: 768px) {
                .schedule-header {
                    flex-direction: column;
                    align-items: stretch;
                }

                .filter-group {
                    flex-direction: column;
                    width: 100%;
                }

                .filter-dropdown {
                    width: 100%;
                    margin-left: 0;
                }

                .filter-dropdown select {
                    width: 100%;
                }

                .calendar-days {
                    grid-template-columns: repeat(4, 1fr);
                    padding: 20px;
                    gap: 10px;
                }

                .calendar-nav {
                    padding: 20px;
                    flex-direction: column;
                    gap: 15px;
                    text-align: center;
                }

                .calendar-nav h3 {
                    justify-content: center;
                }

                .day-circle.today:before {
                    top: -20px;
                    font-size: 0.65rem;
                    padding: 3px 10px;
                }

                .full-calendar-link {
                    width: 100%;
                    justify-content: center;
                }

                .class-item {
                    flex-wrap: wrap;
                    gap: 15px;
                    padding: 15px;
                }

                .class-time {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 10px;
                    border-bottom: 1px solid rgba(243, 100, 56, 0.1);
                }

                .instructor-avatar {
                    margin: 10px auto;
                }

                .class-info {
                    width: 100%;
                    text-align: center;
                }
            }

            @media (max-width: 480px) {
                .schedule-hero h1 {
                    font-size: 2.5rem;
                }

                .schedule-header h2 {
                    font-size: 2rem;
                }

                .calendar-nav h3 {
                    font-size: 1.6rem;
                }

                .day-circle {
                    padding: 8px 5px;
                }

                .day-number {
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    font-size: 1rem;
                }

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

            .schedule-section .container {
                max-width: 1300px;
            }

            @media (max-width: 992px) {
                .schedule-layout {
                    grid-template-columns: 1fr;
                    gap: 20px;
                }

                .calendar-days {
                    gap: 10px;
                }

                .day-circle {
                    padding: 8px 5px;
                }

                .schedule-content {
                    padding: 20px;
                }
            }

            .modal-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(5px);
                z-index: 1000;
                display: none;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .modal-backdrop.show {
                display: flex;
                opacity: 1;
            }

            .class-details-modal {
                background: #fff;
                width: 90%;
                max-width: 600px;
                margin: auto;
                border-radius: 24px;
                overflow: hidden;
                position: relative;
                transform: translateY(-20px);
                transition: transform 0.3s ease;
            }

            .modal-backdrop.show .class-details-modal {
                transform: translateY(0);
            }

            .modal-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
                position: relative;
            }

            .modal-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 1.8rem;
                margin: 0 0 10px 0;
            }

            .modal-close {
                position: absolute;
                top: 20px;
                right: 20px;
                background: rgba(255, 255, 255, 0.2);
                border: none;
                color: #fff;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .modal-close:hover {
                background: rgba(255, 255, 255, 0.3);
                transform: rotate(90deg);
            }

            .modal-body {
                padding: 25px;
            }

            .class-meta {
                display: flex;
                gap: 20px;
                margin-bottom: 25px;
                padding-bottom: 20px;
                border-bottom: 1px solid rgba(243, 100, 56, 0.1);
            }

            .meta-item {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #666;
            }

            .meta-item i {
                color: #ed732f;
                font-size: 1.2rem;
            }

            .instructor-profile {
                display: flex;
                align-items: center;
                gap: 20px;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 12px;
                margin-bottom: 25px;
            }

            .instructor-profile img {
                width: 80px;
                height: 80px;
                border-radius: 12px;
                object-fit: cover;
                border: 2px solid rgba(243, 100, 56, 0.2);
            }

            .instructor-info h4 {
                color: #333;
                margin: 0 0 5px 0;
                font-size: 1.2rem;
            }

            .instructor-info p {
                color: #666;
                font-size: 0.9rem;
                margin: 0;
                line-height: 1.6;
            }

            .class-description {
                margin-bottom: 25px;
            }

            .class-description h4 {
                color: #333;
                margin: 0 0 15px 0;
                font-size: 1.1rem;
            }

            .class-description p {
                color: #666;
                font-size: 0.95rem;
                line-height: 1.6;
                margin: 0 0 15px 0;
            }

            .class-benefits {
                background: rgba(243, 100, 56, 0.05);
                padding: 20px;
                border-radius: 12px;
                margin-bottom: 25px;
            }

            .class-benefits h4 {
                color: #333;
                margin: 0 0 15px 0;
                font-size: 1.1rem;
            }

            .benefits-list {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .benefits-list li {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #666;
                font-size: 0.95rem;
                margin-bottom: 10px;
            }

            .benefits-list li:last-child {
                margin-bottom: 0;
            }

            .benefits-list li i {
                color: #ed732f;
            }

            .modal-footer {
                padding: 20px 25px;
                background: #f8f9fa;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px solid rgba(243, 100, 56, 0.1);
            }

            .modal-footer .price {
                font-size: 1.2rem;
                font-weight: 600;
                color: #333;
            }

            .modal-footer .price span {
                font-size: 0.9rem;
                color: #666;
                font-weight: normal;
            }

            @media (max-width: 576px) {
                .class-meta {
                    flex-direction: column;
                    gap: 15px;
                }

                .instructor-profile {
                    flex-direction: column;
                    text-align: center;
                }

                .modal-footer {
                    flex-direction: column;
                    gap: 15px;
                    text-align: center;
                }

                .modal-footer .details-btn {
                    width: 100%;
                }
            }

            .calendar-modal-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                z-index: 9999;
            }

            .calendar-modal-backdrop.show {
                opacity: 1;
                visibility: visible;
            }

            .full-calendar-modal {
                background: #fff;
                width: 90%;
                max-width: 600px;
                margin: auto;
                border-radius: 24px;
                overflow: hidden;
                position: relative;
                transform: translateY(-20px);
                transition: transform 0.3s ease;
            }

            .calendar-modal-backdrop.show .full-calendar-modal {
                transform: translateY(0);
            }

            .calendar-modal-header {
                padding: 20px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            }

            .month-nav {
                display: flex;
                align-items: center;
                gap: 20px;
            }

            .month-title {
                font-size: 1.4rem;
                font-weight: 600;
                color: #333;
            }

            .nav-btn {
                background: none;
                border: none;
                padding: 8px;
                cursor: pointer;
                color: #666;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }

            .nav-btn:hover {
                color: #ed732f;
            }

            .calendar-grid {
                padding: 20px;
            }

            .weekdays {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                text-align: center;
                margin-bottom: 15px;
            }

            .weekday {
                font-size: 0.9rem;
                color: #666;
                font-weight: 500;
                padding: 5px;
            }

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

            .day-cell {
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1rem;
                color: #333;
                background: #f8f9fa;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.3s ease;
                border: 1px solid transparent;
            }

            .day-cell:hover {
                background: rgba(243, 100, 56, 0.1);
                color: #ed732f;
            }

            .day-cell.inactive {
                color: #ccc;
                background: none;
                cursor: default;
            }

            .day-cell.today {
                background: #fff;
                border-color: #ed732f;
                color: #ed732f;
                font-weight: 600;
            }

            .day-cell.selected {
                background: rgba(243, 100, 56, 0.1);
                color: #ed732f;
                border-color: #ed732f;
            }

            .calendar-modal-footer {
                padding: 20px;
                display: flex;
                justify-content: flex-end;
                gap: 15px;
                border-top: 1px solid rgba(0, 0, 0, 0.1);
            }

            .calendar-btn {
                padding: 12px 25px;
                border-radius: 12px;
                font-size: 0.95rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .btn-cancel {
                background: #fff;
                color: #666;
                border: 1px solid #ddd;
            }

            .btn-cancel:hover {
                background: #f8f9fa;
                border-color: #ccc;
            }

            .btn-apply {
                background: #ed732f;
                color: #fff;
                border: none;
            }

            .btn-apply:hover {
                background: #e55a30;
            }

            @media (max-width: 480px) {
                .full-calendar-modal {
                    width: 95%;
                }

                .month-title {
                    font-size: 1.2rem;
                }

                .day-cell {
                    font-size: 0.9rem;
                }
            }

            /* Daily Schedule Styles */
            .daily-schedule-section {
                background: #fff;
                border-radius: 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
                margin-top: 30px;
            }

            .daily-schedule-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
            }

            .daily-schedule-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2rem;
                margin: 0;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .daily-schedule-header h3:before {
                content: '\f017';
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: 1.8rem;
                background: rgba(255, 255, 255, 0.2);
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                backdrop-filter: blur(5px);
            }

            .daily-schedule-content {
                padding: 25px;
            }

            .schedule-item {
                display: flex;
                align-items: center;
                padding: 15px;
                border-radius: 12px;
                transition: all 0.3s ease;
                margin-bottom: 10px;
            }

            .schedule-item:hover {
                background: rgba(243, 100, 56, 0.05);
            }

            .schedule-time {
                font-weight: 600;
                color: #ed732f;
                min-width: 120px;
            }

            .schedule-activity {
                flex-grow: 1;
                color: #333;
            }

            /* Important Information Styles */
            .important-info {
                background: #fff;
                border-radius: 24px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.05);
                overflow: hidden;
                margin-top: 30px;
            }

            .important-info-header {
                background: linear-gradient(135deg, #ed732f 0%, #f5a76c 100%);
                padding: 25px;
                color: #fff;
            }

            .important-info-header h3 {
                font-family: 'Cormorant Garamond', serif;
                font-size: 2rem;
                margin: 0;
                color: #fff;
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .important-info-header h3:before {
                content: '\f05a';
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: 1.8rem;
                background: rgba(255, 255, 255, 0.2);
                width: 45px;
                height: 45px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
                backdrop-filter: blur(5px);
            }

            .important-info-content {
                padding: 25px;
            }

            .info-item {
                display: flex;
                align-items: start;
                margin-bottom: 20px;
            }

            .info-icon {
                color: #ed732f;
                margin-right: 15px;
                width: 20px;
                text-align: center;
            }

            .info-text {
                flex-grow: 1;
            }

            .info-text strong {
                display: block;
                margin-bottom: 5px;
                color: #333;
            }

            .today-classes {
                margin-top: 30px;
            }

            .class-item {
                background: white;
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 15px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.05);
                display: flex;
                align-items: center;
                gap: 20px;
            }

            .class-time {
                font-size: 1.1em;
                font-weight: bold;
                color: #ed732f;
                min-width: 140px;
            }

            .class-details {
                flex-grow: 1;
            }

            .class-details h4 {
                margin: 0 0 5px;
                color: #333;
            }

            .instructor {
                color: #666;
                margin: 0 0 5px;
                font-size: 0.9em;
            }

            .class-type {
                color: #888;
                margin: 0;
                font-size: 0.9em;
            }

            .no-classes {
                text-align: center;
                padding: 40px 20px;
                color: #666;
            }

            .no-classes i {
                font-size: 3em;
                color: #ddd;
                margin-bottom: 15px;
            }

            .no-classes p {
                margin: 5px 0;
                font-size: 1.1em;
            }

            .no-classes .sub-text {
                font-size: 0.9em;
                color: #999;
            }

            .class-actions {
                display: flex;
                gap: 10px;
            }

            .book-btn {
                background: #ed732f;
                color: #fff;
                padding: 12px 25px;
                border-radius: 12px;
                border: none;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .book-btn:hover {
                background: #e55a30;
                transform: translateY(-2px);
            }

            .class-type, .class-level {
                font-size: 0.9em;
                color: #666;
                margin: 2px 0;
            }

            .class-location {
                font-size: 0.85em;
                color: #888;
                margin-top: 5px;
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .class-location i {
                color: #ed732f;
            }

            @media (max-width: 768px) {
                .day-circle.active .day-name,
                .day-circle.active .day-number {
                    color: white !important;
                }
            }
        </style>

        <style>
            /* Additional styles for the full calendar modal */
            .calendar-modal-backdrop.show {
                opacity: 1;
                visibility: visible;
            }
            
            .full-calendar-modal {
                position: relative;
                background: white;
                width: 90%;
                max-width: 500px;
                border-radius: 12px;
                padding: 25px;
                box-shadow: 0 5px 30px rgba(0,0,0,0.3);
                z-index: 1001;
                overflow: hidden;
                transform: translateY(0);
            }
            
            .calendar-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                position: relative;
            }
            
            .month-nav {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
            }
            
            .month-title {
                font-size: 24px;
                font-weight: 600;
                margin: 0 15px;
                text-align: center;
            }
            
            .class-time-modern {
                min-width: 100px;
                text-align: center;
                margin-right: 15px;
            }
            
            .time-modern {
                font-size: 24px;
                font-weight: 600;
                color: #ff6b35;
            }
            
            .class-icon {
                margin-right: 20px;
            }
            
            .yoga-icon {
                width: 60px;
                height: 60px;
                object-fit: contain;
            }
            
            .class-details-modern {
                flex: 1;
            }
            
            .class-title-modern {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 5px;
                color: #333;
            }
            
            .instructor-modern, .class-type-modern, .class-level-modern {
                margin-bottom: 3px;
                color: #666;
            }
            
            .class-location-modern {
                color: #ff6b35;
                margin-top: 5px;
            }
            
            .view-details-btn {
                margin-left: 15px;
            }
            
            .view-details-btn button {
                color: #ff6b35;
                border-color: #ff6b35;
                padding: 8px 15px;
                transition: all 0.3s ease;
            }
            
            .view-details-btn button:hover {
                background-color: #ff6b35;
                color: white;
            }
            
            .nav-btn {
                background: transparent;
                border: none;
                font-size: 18px;
                cursor: pointer;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: all 0.2s;
            }
            
            .nav-btn:hover {
                background: #f0f0f0;
            }
            
            .modal-close {
                position: absolute;
                top: 0;
                right: 0;
                background: transparent;
                border: none;
                font-size: 24px;
                cursor: pointer;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .weekdays {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                text-align: center;
                font-weight: 600;
                color: #666;
                margin-bottom: 15px;
            }
            
            .weekday {
                padding: 10px 0;
            }
            
            .days-grid {
                display: grid;
                grid-template-columns: repeat(7, 1fr);
                gap: 8px;
            }
            
            .day-cell {
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                border-radius: 8px;
                cursor: pointer;
                transition: all 0.2s;
                background: #f5f5f5;
                position: relative;
            }
            
            .day-cell:hover {
                background: #e9e9e9;
            }
            
            .day-cell.inactive {
                color: #aaa;
                background: #f0f0f0;
            }
            
            .day-cell.today {
                background: #e0f7fa;
                color: #00838f;
                font-weight: 600;
            }
            
            .day-cell.selected {
                background: #4db6ac;
                color: white;
                font-weight: 600;
            }
            
            .day-cell.has-events:after {
                content: '';
                position: absolute;
                bottom: 5px;
                left: 50%;
                transform: translateX(-50%);
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #ed732f;
            }
            
            .calendar-footer {
                display: flex;
                justify-content: space-between;
                margin-top: 25px;
                padding-top: 15px;
                border-top: 1px solid #eee;
            }
            
            .calendar-footer button {
                padding: 10px 25px;
                border-radius: 8px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s;
            }
            
            .btn-secondary {
                background: #f0f0f0;
                color: #333;
                border: none;
            }
            
            .btn-primary {
                background: #ed732f;
                color: white;
                border: none;
            }
            
            .btn-secondary:hover {
                background: #e0e0e0;
            }
            
            .btn-primary:hover {
                background: #e55328;
            }
        </style>

    </head>

    <body>
        <br />
<b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /home/u729492380/domains/shantiyoga.fi/public_html/dailyclass.php:33) in <b>/home/u729492380/domains/shantiyoga.fi/public_html/includes/language.php</b> on line <b>25</b><br />