/* Universal Box-Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}
/* Color Variables */
:root {
    --color-beige: #EADED0; /* Light, warm background */
    --color-brown: #6F4F28; /* A rich, earthy brown for accents/headings */
    --color-white: #FFFFFF;
    --color-text-dark: #333333; /* For text on light backgrounds */
    --color-text-light: #F8F8F8; /* For text on dark backgrounds */
    --color-overlay: rgba(0, 0, 0, 0.4); /* Dark overlay for hero */
    --color-border: #DCDCDC; /* Subtle border color */
    --color-light-gray: #F0F0F0; /* For lighter backgrounds like footer */
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-white); /* Default body background */
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

/* Container for consistent content width */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Horizontal padding for smaller screens */
}

/* Global Headings */
h1, h2, h3 {
    font-family: 'Inter', sans-serif; /* Using Inter for headings as well for consistency */
    color: var(--color-brown); /* Changed from burgundy */
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
h3 { font-size: clamp(1.5rem, 4vw, 2rem); }

p {
    color: var(--color-text-dark);
    margin-bottom: 1em;
}

/* Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-brown); /* Changed from burgundy */
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Buttons */
.button {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: center;
    cursor: pointer;
    border: none;
}

.primary-button {
    background-color: var(--color-brown); /* Changed from burgundy */
    color: var(--color-white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.primary-button:hover {
    background-color: #5A401F; /* Slightly darker brown */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.secondary-button {
    background-color: transparent;
    color: var(--color-brown); /* Changed from burgundy */
    border: 2px solid var(--color-brown); /* Changed from burgundy */
    box-shadow: none;
}

.secondary-button:hover {
    background-color: var(--color-brown); /* Changed from burgundy */
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Rounded Images */
.rounded-image {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below image */
}
/* Header & Navbar */
.header {
    background-color: var(--color-white);
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    /* The navbar's background-color is already var(--color-white) from .header,
       which is good for mix-blend-mode with a white background image. */
}

/* MODIFICATIONS START HERE */

/* Styles for the image within the logo div */
.logo img {
    max-height: 50px; /* Adjust this value (e.g., 40px, 60px) to control logo size */
    width: auto;     /* Ensures the image scales proportionally */
    display: block;  /* Helps prevent extra space below the image */
    
    /* This is the key for blending the beige background with the white navbar. */
    /* 'multiply' is usually best for removing lighter backgrounds when blending onto a darker background.
       Since your navbar is white and the logo has a beige background, 'darken' or 'color-burn' might
       also work to make the beige disappear. 'multiply' often gives a good result by effectively
       making white areas transparent when blending with white. */
}

.logo a {
    /* Removed font-size, font-weight, color as these were for text and no longer apply to the image. */
    text-decoration: none; /* Keep this to remove any default link underline */
    display: flex; /* Make the link a flex container to center the image if needed */
    align-items: center; /* Vertically center the image within the link's height */
    height: 100%; /* Ensure the anchor takes full height to allow vertical centering */
}


.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
    /* NEW: Align items vertically in the flex container */
    align-items: center;
}

/* NEW: Specific styling for regular nav links (excluding the button) */
.nav-links li a:not(.button) {
    text-decoration: none;
    color: var(--color-text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 1rem;
}

.nav-links li a:not(.button):hover {
    color: var(--color-brown); /* Changed from burgundy */
}

/* NEW: Specific styling for the button within nav-links */
.nav-links .button {
    padding: 8px 18px; /* Slightly smaller padding for navbar button */
    font-size: 0.95rem; /* Slightly smaller font size */
    margin-left: 10px; /* Add a bit of space from other links */
    white-space: nowrap; /* Prevent button text from wrapping */
}

/* Hero Section */
.hero-section {
    position: relative;
    width: 100%;
    height: 80vh; /* Full viewport height for hero */
    min-height: 500px; /* Minimum height for smaller screens */
    background-image: url('bg2.jpeg'); /* Updated placeholder image color */
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Default for mobile compatibility */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
}

/* Parallax effect for desktop */
@media (min-width: 769px) {
    .hero-section {
        background-attachment: fixed;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    color: var(--color-white); /* White for hero heading */
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.hero-content p {
    color: var(--color-text-light); /* Light text for hero paragraph */
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin-bottom: 30px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Section Spacing */
section {
    padding: 80px 0; /* Consistent vertical padding for sections */
}

/* About Section */
.about-section {
    background-color: var(--color-beige);
    padding: 80px 0;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.about-text {
    flex: 1;
}

.about-text p {
    color: var(--color-text-dark);
    margin-bottom: 15px;
}

.about-image {
    flex: 0 0 45%; /* Fixed width for image on desktop */
    max-width: 300px; /* Max width for image */
}

/* Classes Preview Section */
.classes-preview-section {
    background-color: var(--color-white);
    padding: 80px 0;
}

.class-grid {
    display: grid;
grid-template-columns: repeat(2, 1fr);    gap: 30px;
    margin-top: 40px;
}

.class-card {
    background-color: var(--color-light-gray);
    border-radius: 10px;
    overflow: hidden;
    /* text-align: center; Remove text-align for flexibility in text cards */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.class-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px 10px 0 0; /* Only top corners rounded */
}

.class-card h3 {
    margin: 20px 15px 10px;
    color: var(--color-brown); /* Changed from burgundy */
}

.class-card p {
    margin: 0 15px 20px;
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

/* NEW: Styling for Reformer Description Cards */
.reformer-description-card {
    background-color: var(--color-beige); /* Use beige for these cards */
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex; /* Use flex for internal content alignment if needed */
    flex-direction: column;
    justify-content: center; /* Center content vertically if card height varies */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reformer-description-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.reformer-description-card h3 {
    color: var(--color-brown); /* Heading color */
    margin-top: 0; /* Remove default h3 top margin */
    margin-bottom: 15px;
}

.reformer-description-card p {
    color: var(--color-text-dark); /* Paragraph color */
    font-size: 0.95rem;
    line-height: 1.6;
}

.reformer-description-card ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 15px 0 0;
}

.reformer-description-card ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: var(--color-text-dark);
    font-size: 0.95rem;
}

.reformer-description-card ul li::before {
    content: '\f00c'; /* Font Awesome checkmark icon */
    font-family: "Font Awesome 6 Free"; /* Make sure this font is loaded */
    font-weight: 900; /* For solid icon */
    position: absolute;
    left: 0;
    color: var(--color-brown); /* Checkmark color */
    font-size: 0.9rem;
    top: 3px;
}


.text-center {
    text-align: center;
    margin-top: 60px; /* Space above button */
}

/* Booking CTA Section */
.booking-cta-section {
    background-color: var(--color-white); /* Changed from burgundy */
    color: var(--color-brown);
    text-align: center;
    padding: 60px 20px;
}

.booking-cta-section h2 {
    color: var(--color-brown);
    margin-bottom: 15px;
}

.booking-cta-section p {
    color: var(--color-brown);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 30px;
}

/* Footer */
.footer {
    background-color: var(--color-brown); /* Dark background for footer */
    color: var(--color-text-light);
    padding: 50px 0;
    font-size: 0.9rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.footer-col h3 {
    color: var(--color-white);
    margin-bottom: 15px;
}

.footer-col p {
    margin-bottom: 10px;
    color: var(--color-text-light);
}

.footer-col a {
    color: var(--color-text-light);
    text-decoration: underline;
    transition: color 0.3s ease;
    color: white;
}

.footer-col a:hover {
    transform: translateY(-2px);
}

.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

.social-icon-link {
    color: var(--color-white);
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icon-link:hover {
    transform: translateY(-2px);
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .navbar {
        flex-direction: column;
        gap: 15px;
    }
    .nav-links {
        gap: 20px;
        justify-content: center;
        /* NEW: Ensure button aligns with other links when stacked */
        align-items: center;
    }
    /* NEW: Remove margin-left from button when navbar stacks vertically */
    .nav-links .button {
        margin-left: 0;
    }
    .about-content {
        flex-direction: column;
        text-align: center;
        
     }
    .about-text {
        order: 1; /* Text below image on smaller screens */
    }
    .about-image {
        order: -1; /* Move image above text on mobile */
        margin-bottom: 30px;
        
    }
    .about-image img {
        max-width: 100%; /* Adjust image size on smaller screens */
    }
    .footer-content {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .social-icons {
        justify-content: center;
    }
    /* Adjust grid for classes on smaller screens to allow description cards to stack well */
    .class-grid {
        grid-template-columns: 1fr; /* Stack all cards/descriptions on smaller screens */
    }
    .class-card,
    .reformer-description-card {
        margin: 0 auto; /* Center cards when stacked */
        max-width: 400px; /* Limit card width for readability */
    }
}

@media (max-width: 768px) {
    .header {
        padding: 10px 0;
    }
    .navbar {
        padding: 0 15px;
    }
    .hero-section {
        height: 70vh; /* Slightly less height on smaller mobiles */
        min-height: 400px;
    }
    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    .hero-content p {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
    }
    section {
        padding: 60px 0; /* Reduce section padding */
    }
    .booking-cta-section {
        padding: 40px 15px;
    }
    .footer {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .hero-section {
        min-height: 350px;
    }
    .button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .nav-links a {
        font-size: 0.9rem;
    }
    /* NEW: Specific rule for button on very small screens to ensure it fits */
    .nav-links .button {
        padding: 6px 12px; /* Smaller button padding */
        font-size: 0.85rem; /* Smaller button font */
    }
}






/* Page Hero Section (for About Us and future pages) */
.page-hero-section {
    position: relative;
    width: 100%;
    height: 40vh; /* Shorter hero for internal pages */
    min-height: 250px;
    background-image: url('bg1.jpeg'); /* Placeholder image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color-white);
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay);
    z-index: 1;
}

.page-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.page-hero-content h1 {
    color: var(--color-white);
    margin-bottom: 10px;
    font-size: clamp(2rem, 5vw, 3.5rem);
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.page-hero-content p {
    color: var(--color-text-light);
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Our Story Section */
.our-story-section {
    background-color: var(--color-white);
    padding: 80px 0;
}

.story-content {
    display: flex;
    align-items: center;
    gap: 40px;
}

.story-text {
    flex: 1;
}

.story-text p {
    margin-bottom: 15px;
    color: var(--color-text-dark);
}

.story-image {
    flex: 0 0 45%; /* Slightly larger image */
    max-width: 300px;
}

/* Studio Gallery Section */
.studio-gallery-section {
    background-color: var(--color-beige);
    padding: 80px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.gallery-item {
    width: 100%;
    height: 250px; /* Fixed height for gallery images */
    object-fit: cover;
    border: 3px solid var(--color-brown); /* Subtle border */
}

/* Testimonials Section */
.testimonials-section {
    background-color: var(--color-white);
    padding: 80px 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background-color: var(--color-light-gray);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.testimonial-avatar {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%; /* Make it circular */
    margin-bottom: 20px;
    border: 3px solid var(--color-brown);
}

.testimonial-card p {
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--color-text-dark);
}

.testimonial-author {
    font-weight: 600;
    color: var(--color-brown);
    margin-top: 5px;
    font-size: 0.95rem;
}

/* Responsive Adjustments for About Page */
@media (max-width: 992px) {
    .story-content {
        flex-direction: column-reverse; /* Text on top, image below */
        text-align: center;
    }
    .story-image {
        margin-bottom: 30px;
    }
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* More images per row on smaller screens */
    }
    .testimonials-grid {
        grid-template-columns: 1fr; /* Stack testimonials on smaller screens */
    }
    .testimonial-card {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .page-hero-section {
        height: 30vh;
        min-height: 200px;
    }
    .page-hero-content h1 {
        font-size: clamp(1.8rem, 7vw, 3rem);
    }
    .page-hero-content p {
        font-size: clamp(0.9rem, 3vw, 1rem);
    }
    .gallery-grid {
        grid-template-columns: 1fr; /* Stack gallery images on very small screens */
    }
    .gallery-item {
        height: 200px; /* Adjust height for smaller images */
    }
}






/* Full Schedule Section */
.full-schedule-section {
    background-color: var(--color-white);
    padding: 80px 0;
}

.schedule-intro-text {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: var(--color-text-dark);
}

.schedule-table-container {
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    margin-top: 40px;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px; /* Ensure table is wide enough for content */
    background-color: var(--color-white);
}

.schedule-table th,
.schedule-table td {
    padding: 15px 10px;
    text-align: center;
    border: 1px solid var(--color-border);
}

.schedule-table thead th {
    background-color: var(--color-brown);
    color: var(--color-white);
    font-weight: 600;
    white-space: nowrap; /* Prevent day names from wrapping */
}

.schedule-table tbody tr:nth-child(even) {
    background-color: var(--color-light-gray); /* Light stripe for readability */
}

.schedule-table tbody td {
    color: var(--color-text-dark);
    font-size: 0.95rem;
}

.schedule-table tbody td:first-child {
    font-weight: 600;
    color: var(--color-brown);
}



/* Cancellation Policy Section */
.cancellation-policy-section {
    background-color: var(--color-white);
    padding: 80px 0;
}

.policy-content {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-light-gray);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.policy-content p {
    margin-bottom: 15px;
    font-size: 1rem;
    color: var(--color-text-dark);
}

.policy-content ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.policy-content ul li {
    display: flex;
    align-items: flex-start; /* Align checkbox and text at top */
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

.policy-content input[type="checkbox"] {
    margin-right: 10px;
    min-width: 18px; /* Ensure checkbox is visible */
    min-height: 18px;
    accent-color: var(--color-brown); /* Style the checkbox itself */
    cursor: default; /* Since they are disabled */
}

.policy-content label {
    flex: 1; /* Allow label text to wrap */
    cursor: default; /* Since checkbox is disabled */
}

/* Responsive Adjustments for Schedule Page */
@media (max-width: 992px) {
    .instructors-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust grid for tablets */
    }
    .instructor-card {
        max-width: 350px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .schedule-table-container {
        margin: 20px 0; /* Adjust margin on small screens */
    }
    .schedule-table th,
    .schedule-table td {
        padding: 10px 5px; /* Reduce padding in table cells */
        font-size: 0.85rem; /* Smaller font size for table content */
    }
    .schedule-table tbody td:first-child {
        font-size: 0.9rem; /* Keep time column slightly larger */
    }
    .instructors-grid {
        grid-template-columns: 1fr; /* Stack instructor cards on very small screens */
    }
    .policy-content {
        padding: 20px; /* Reduce padding for policy box */
    }
    .policy-content ul li {
        font-size: 0.9rem; /* Smaller font for policy text */
    }
}





/* Booking Form Section */
.booking-form-section {
    background-color: var(--color-white);
    padding: 80px 0;
}

.booking-form {
    max-width: 700px; /* Limit form width for readability */
    margin: 0 auto;
    padding: 40px;
    background-color: var(--color-light-gray);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.form-group {
    margin-bottom: 25px; /* Space between form fields */
}

.form-group label {
    display: block; /* Make label take full width */
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-dark);
    font-size: 1rem;
}

.form-group .required {
    color: var(--color-brown); /* Indicate required fields with brown asterisk */
    font-size: 0.9em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-brown);
    outline: none;
    box-shadow: 0 0 0 3px rgba(111, 79, 40, 0.2); /* Light brown shadow on focus */
}

.form-group textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 100px;
}

/* Cancellation Policy Checkboxes */
.cancellation-policy-checkboxes {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--color-beige); /* Use beige for this section */
    border-radius: 10px;
    border: 1px solid var(--color-border);
}

.cancellation-policy-checkboxes h3 {
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.policy-item {
    display: flex;
    align-items: flex-start; /* Align checkbox and text at top */
    margin-bottom: 15px;
}

.policy-item input[type="checkbox"] {
    margin-right: 12px;
    margin-top: 4px; /* Adjust for vertical alignment with text */
    min-width: 18px; /* Ensure checkbox is visible */
    min-height: 18px;
    accent-color: var(--color-brown); /* Style the checkbox itself */
}

.policy-item label {
    flex: 1; /* Allow label text to wrap */
    font-size: 0.95rem;
    color: var(--color-text-dark);
    line-height: 1.5;
}

.policy-item label strong {
    color: var(--color-brown); /* Highlight important policy terms */
}

/* Form Submit Button */
.form-submit {
    text-align: center;
    margin-top: 40px;
}

.form-submit .button {
    width: auto; /* Allow button to size based on content */
    padding: 15px 40px;
    font-size: 1.1rem;
}

/* Responsive Adjustments for Booking Page */
@media (max-width: 768px) {
    .booking-form {
        padding: 25px; /* Reduce padding on smaller screens */
        margin: 0 15px; /* Add horizontal margin to form */
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group label,
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 0.95rem; /* Slightly smaller font for inputs */
    }
    .cancellation-policy-checkboxes {
        padding: 15px;
    }
    .cancellation-policy-checkboxes h3 {
        font-size: 1.1rem;
    }
    .policy-item label {
        font-size: 0.9rem;
    }
    .form-submit .button {
        width: 100%; /* Full width button on small screens */
        padding: 12px 20px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .booking-form {
        padding: 20px;
    }
}






/* Styling for clickable class slots in schedule table */
.schedule-table td a.class-slot-link {
    display: block; /* Make the entire cell clickable */
    text-decoration: none; /* Remove underline */
    color: var(--color-brown); /* Use brown for the link text */
    font-weight: 600;
    padding: 10px 5px; /* Add some padding to make it easier to click */
    border-radius: 5px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.schedule-table td a.class-slot-link:hover {
    background-color: rgba(111, 79, 40, 0.1); /* Light brown background on hover */
    transform: translateY(-1px); /* Slight lift on hover */
    cursor: pointer;
}

.schedule-table tbody td {
    vertical-align: middle; /* Center content vertically in table cells */
}






/* Styling for clickable class slots in schedule table */
.schedule-table td a.class-slot-link {
    display: block; /* Make the entire cell clickable */
    text-decoration: none; /* Remove underline */
    color: var(--color-brown); /* Use brown for the link text */
    font-weight: 600;
    padding: 10px 5px; /* Add some padding to make it easier to click */
    border-radius: 5px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.schedule-table td a.class-slot-link:hover {
    background-color: rgba(111, 79, 40, 0.1); /* Light brown background on hover */
    transform: translateY(-1px); /* Slight lift on hover */
    cursor: pointer;
}

.schedule-table tbody td {
    vertical-align: middle; /* Center content vertically in table cells */
}





/* --- Authentication Form Sections (for login.html, signup.html) --- */
.auth-form-section {
    background-color: var(--color-beige); /* A light background for the section */
    padding: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - var(--footer-height)); /* Adjust height dynamically */
    /* Note: --header-height and --footer-height are not defined in your CSS yet,
       but this is a common pattern for full-height sections. For now, it will
       just use 100vh minus some default values. */
}

.auth-form {
    max-width: 450px; /* Max width for the form container */
    width: 100%;
    padding: 40px;
    background-color: var(--color-white); /* White background for the form */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    text-align: center; /* Center text elements like title and switch link */
}

.auth-form .section-title {
    margin-bottom: 30px;
}

.auth-form .form-group {
    margin-bottom: 20px;
    text-align: left; /* Align labels and inputs to the left within the form */
}

.auth-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-dark);
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-form input:focus {
    border-color: var(--color-brown);
    outline: none;
    box-shadow: 0 0 0 3px rgba(111, 79, 40, 0.2);
}

.auth-form .form-submit {
    margin-top: 30px;
}

.auth-form .button {
    width: 100%; /* Make button full width within the form */
    padding: 12px 25px;
    font-size: 1rem;
}

.auth-switch {
    margin-top: 25px;
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

.auth-switch a {
    color: var(--color-brown); /* Link color */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.auth-switch a:hover {
    color: #5A401F; /* Slightly darker brown on hover */
}

/* Message Container for Auth Forms (e.g., error/success messages) */
.message-container {
    padding: 12px 20px;
    margin-top: 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    opacity: 1;
    transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    border: 1px solid transparent; /* Default transparent border */
}

/* Specific styles for error messages */
.message-container.error {
    color: var(--color-brown);
    background-color: rgba(111, 79, 40, 0.1);
    border-color: var(--color-brown);
}

/* Specific styles for success messages */
.message-container.success {
    color: green;
    background-color: rgba(0, 128, 0, 0.1);
    border-color: green;
}

/* Responsive adjustments for auth forms */
@media (max-width: 768px) {
    .auth-form-section {
        padding: 60px 0;
    }
    .auth-form {
        padding: 30px;
        margin: 0 15px; /* Add horizontal margin on smaller screens */
    }
}

@media (max-width: 480px) {
    .auth-form {
        padding: 20px;
    }
    .auth-form .button {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .auth-switch {
        font-size: 0.85rem;
    }
}








/* --- Profile Page Sections (for profile.html) --- */
.profile-section {
    background-color: var(--color-beige); /* Light background for the profile area */
    padding: 80px 0;
}

.profile-card {
    background-color: var(--color-white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px; /* Space between profile info and bookings */
    text-align: center; /* Center content within the card */
}

.profile-card h3 {
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.profile-card p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: var(--color-text-dark);
}

.profile-card p strong {
    color: var(--color-brown);
}

.profile-card #logout-button {
    margin-top: 25px;
    padding: 10px 25px;
    font-size: 1rem;
}

.profile-bookings {
    background-color: var(--color-white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.profile-bookings h3 {
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5rem;
    text-align: center;
}

#bookings-message {
    text-align: center;
    color: var(--color-text-dark);
    font-style: italic;
    margin-bottom: 20px;
}

.booking-list {
    display: grid;
    gap: 20px; /* Space between booking items */
    margin-top: 20px;
}

.booking-item {
    background-color: var(--color-light-gray);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.booking-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.booking-item p {
    margin: 0; /* Remove default paragraph margins */
    font-size: 0.95rem;
    color: var(--color-text-dark);
}

.booking-item p strong {
    color: var(--color-brown);
}

/* Responsive adjustments for profile page */
@media (max-width: 768px) {
    .profile-card,
    .profile-bookings {
        padding: 30px;
        margin: 0 15px 30px; /* Add horizontal margin and reduce bottom margin */
    }
    .profile-card h3,
    .profile-bookings h3 {
        font-size: 1.3rem;
    }
    .profile-card p {
        font-size: 1rem;
    }
    .profile-card #logout-button {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    .booking-item {
        padding: 15px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .profile-card,
    .profile-bookings {
        padding: 20px;
    }
    .booking-list {
        gap: 15px;
    }
}




/* --- Admin Panel Styles (for admin.html) --- */

.admin-dashboard-section {
    background-color: var(--color-beige); /* Light background for the admin area */
    padding: 80px 0;
    min-height: calc(100vh - 200px); /* Adjust height to push footer down, approximate */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align content to the top */
}

.admin-content {
    background-color: var(--color-white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 1200px; /* Increased max-width to match main container for more space */
    margin: 0 auto; /* Center the content */
}

.admin-content .section-title {
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
}

.admin-content p {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text-dark);
    margin-bottom: 20px;
}

.admin-dashboard-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    text-align: center;
}

.overview-card {
    background-color: var(--color-light-gray);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.overview-card h3 {
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.overview-card p {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

.admin-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    margin-bottom: 40px;
}

.admin-actions .button {
    min-width: 180px; /* Ensure buttons have a decent minimum width */
}

/* Specific section content area */
#admin-section-content {
    border-top: 1px solid var(--color-border);
    padding-top: 40px;
    margin-top: 40px;
}

/* Styles for Admin Forms and Tables */
.admin-form-card,
.admin-table-card {
    background-color: var(--color-light-gray); /* Consistent background for cards */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px; /* Space between cards */
}

.admin-form-card h3,
.admin-table-card h3 {
    color: var(--color-brown);
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

/* Form Group specific for admin forms */
.admin-form-card .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.admin-form-card .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-dark);
}

.admin-form-card .form-group input[type="text"],
.admin-form-card .form-group input[type="number"],
.admin-form-card .form-group input[type="date"],
.admin-form-card .form-group input[type="time"],
.admin-form-card .form-group select, /* Added select for instructor dropdown */
.admin-form-card .form-group textarea /* Added textarea for instructor bio */
{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.admin-form-card .form-group input:focus,
.admin-form-card .form-group select:focus, /* Added select focus */
.admin-form-card .form-group textarea:focus /* Added textarea focus */
{
    border-color: var(--color-brown);
    outline: none;
    box-shadow: 0 0 0 3px rgba(111, 79, 40, 0.2);
}

.admin-form-card .checkbox-group {
    display: flex;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 25px;
}

.admin-form-card .checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    min-width: 18px;
    min-height: 18px;
    accent-color: var(--color-brown);
}

.admin-form-card .checkbox-group label {
    margin-bottom: 0;
    font-weight: 500;
}

.admin-form-card .form-submit {
    text-align: center;
    margin-top: 30px;
}

.admin-form-card .form-submit .button {
    padding: 10px 25px;
    font-size: 1rem;
}

/* Table Specific Styles */
.admin-table-container {
    overflow-x: auto; /* Ensures horizontal scrolling on small screens */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.admin-table {
    width: 100%; /* Make table take full width of its container */
    border-collapse: collapse;
    min-width: 700px; /* Minimum width for the table to prevent excessive squishing, forcing scroll */
    background-color: var(--color-white);
}

.admin-table th,
.admin-table td {
    padding: 12px 10px; /* Increased padding for better spacing */
    text-align: left; /* Align text left for readability */
    border: 1px solid var(--color-border);
    white-space: nowrap; /* Prevent text wrapping in cells by default */
}

.admin-table thead th {
    background-color: var(--color-brown);
    color: var(--color-white);
    font-weight: 600;
    position: sticky; /* Keep header visible during scroll */
    top: 0;
    z-index: 1; /* Ensure header is above content */
}

.admin-table tbody tr:nth-child(even) {
    background-color: var(--color-light-gray); /* Light stripe for readability */
}

.admin-table tbody td {
    font-size: 0.9rem;
    color: var(--color-text-dark);
}

/* Small button styling for table actions */
.admin-table .small-button {
    padding: 6px 12px;
    font-size: 0.85rem;
    margin: 2px; /* Small margin between buttons */
    border-radius: 6px;
    white-space: nowrap; /* Prevent button text from wrapping */
}

.admin-table .delete-button {
    background-color: #dc3545; /* Red for delete */
    border-color: #dc3545;
}

.admin-table .delete-button:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Message container specific to admin sections */
.admin-content .message-container {
    margin-bottom: 20px; /* Space below messages in admin sections */
}


/* --- Responsive adjustments for admin panel --- */

/* Tablet and smaller desktop adjustments */
@media (max-width: 992px) {
    .admin-content {
        padding: 30px;
        margin: 0 20px; /* Add horizontal margin */
    }
    .admin-dashboard-overview {
        grid-template-columns: 1fr; /* Stack overview cards on tablets */
        gap: 15px; /* Slightly reduce gap */
    }
    /* Tables will scroll horizontally if content overflows */
    .admin-table-container {
        width: 100%;
    }
    .admin-table {
        min-width: 600px; /* Keep a minimum width to force scroll, but adjust for screen size */
    }
    .admin-form-card,
    .admin-table-card {
        padding: 25px; /* Slightly reduce card padding */
    }
    .admin-form-card .form-group input,
    .admin-form-card .form-group select,
    .admin-form-card .form-group textarea {
        font-size: 0.9rem; /* Slightly smaller font for inputs */
    }
    .admin-table th,
    .admin-table td {
        padding: 10px 8px; /* Reduce table cell padding */
        font-size: 0.85rem; /* Reduce table font size */
    }
}

/* Larger phone and small tablet adjustments */
@media (max-width: 768px) {
    .admin-dashboard-section {
        padding: 60px 0;
    }
    .admin-content {
        padding: 20px;
        margin: 0 15px; /* Further reduce horizontal margin */
    }
    .admin-actions {
        flex-direction: column; /* Stack action buttons vertically */
        align-items: center;
        gap: 15px; /* Reduce gap between stacked buttons */
    }
    .admin-actions .button {
        width: 100%; /* Make buttons full width when stacked */
        max-width: 280px; /* Limit max width for readability */
    }
    .admin-form-card,
    .admin-table-card {
        padding: 20px; /* Further reduce card padding */
    }
    .admin-table {
        min-width: 400px; /* Adjusted min-width for better fit on smaller phones, ensuring scroll */
    }
    .admin-table th,
    .admin-table td {
        padding: 8px 6px; /* More reduction in table cell padding */
        font-size: 0.75rem; /* More reduction in table font size */
        white-space: normal; /* IMPORTANT: Allow text to wrap within cells */
    }
    .admin-table .small-button {
        padding: 5px 10px; /* Smaller action buttons */
        font-size: 0.7rem;
        white-space: normal; /* Allow button text to wrap if needed */
        word-break: break-word; /* Ensure long words break */
    }
}

/* Very small phone adjustments */
@media (max-width: 480px) {
    .admin-dashboard-section {
        padding: 40px 0; /* Tighten overall section padding */
    }
    .admin-content {
        padding: 15px; /* Tightest padding for the main admin content card */
        margin: 0 10px; /* Tightest horizontal margin */
    }
    .admin-content .section-title {
        margin-bottom: 20px; /* Reduce space below title */
        font-size: clamp(1.8rem, 7vw, 2.2rem); /* Adjust heading size for smallest screens */
    }
    .admin-content p {
        font-size: 0.95rem; /* Slightly smaller paragraph text */
    }
    .admin-dashboard-overview {
        gap: 10px; /* Tighten gap between overview cards */
        margin-bottom: 25px;
    }
    .overview-card {
        padding: 15px; /* Tighten padding in overview cards */
    }
    .overview-card h3 {
        font-size: 1rem; /* Smallest heading in overview cards */
    }
    .overview-card p {
        font-size: 1.3rem; /* Smallest count in overview cards */
    }
    .admin-actions {
        gap: 10px; /* Tighten gap between stacked buttons */
        margin-bottom: 25px;
    }
    .admin-actions .button {
        max-width: 200px; /* Further limit max width for stacked buttons */
        padding: 7px 12px; /* Smallest button padding */
        font-size: 0.85rem; /* Smallest button font */
    }

    #admin-section-content {
        padding-top: 25px; /* Reduce padding above dynamic content */
        margin-top: 25px;
    }

    .admin-form-card,
    .admin-table-card {
        padding: 15px; /* Tightest card padding */
        margin-bottom: 15px; /* Tightest space between cards */
    }
    .admin-form-card h3,
    .admin-table-card h3 {
        font-size: 1rem; /* Smallest headings within cards */
        margin-bottom: 15px;
    }

    /* Form elements within admin cards */
    .admin-form-card .form-group {
        margin-bottom: 12px; /* Tighten space between form groups */
    }
    .admin-form-card .form-group label {
        font-size: 0.85rem; /* Smallest label font */
        margin-bottom: 4px;
    }
    .admin-form-card .form-group input,
    .admin-form-card .form-group select,
    .admin-form-card .form-group textarea {
        padding: 7px 8px; /* Smallest input padding */
        font-size: 0.8rem; /* Smallest input font */
    }
    .admin-form-card .checkbox-group label {
        font-size: 0.8rem; /* Smallest checkbox label font */
    }
    .admin-form-card .form-submit .button {
        padding: 7px 15px; /* Smallest submit button */
        font-size: 0.85rem;
    }

    /* Table specific adjustments for very small screens */
    .admin-table {
        min-width: 300px; /* Adjusted min-width for very small phones, ensuring scroll */
    }
    .admin-table th,
    .admin-table td {
        padding: 4px 2px; /* Even tighter padding in table cells */
        font-size: 0.65rem; /* Smallest font for table content */
        white-space: normal; /* IMPORTANT: Allow text to wrap within cells */
        word-break: break-word; /* Ensure long words break */
    }
    .admin-table .small-button {
        padding: 2px 4px; /* Smallest buttons */
        font-size: 0.6rem; /* Smallest button font */
        margin: 0.5px; /* Minimal margin between buttons */
        white-space: normal; /* Allow button text to wrap */
        word-break: break-word; /* Ensure long words break */
    }
}