/* Mobile Layout - EXACT Inquire.css Design */
/* Increased breakpoint to 960px to handle browser zoom (125% zoom on 768px = 960px) */
@media (max-width: 960px) {
    /* Remove blue overscroll effect on mobile */
    body, html {
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Registration pages - Grid layout with background header */
    #registrationPage1, #registrationPage2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr;
        height: 100vh;
        overflow: hidden;
        background: none;
        padding: 0;
        overscroll-behavior: none;
    }
    
    /* Hero section - Background image header (inquire.css style) */
    #registrationPage1 .registration-hero, 
    #registrationPage2 .registration-hero {
        display: block;
        position: relative;
        overflow: hidden;
        background: url('../docs/fancy-living-room.webp') center center/cover no-repeat;
        background-color: #0C436A;
    }
    
    /* Hero content positioning */
    #registrationPage1 .registration-hero::before,
    #registrationPage2 .registration-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(12, 67, 106, 0.3);
        z-index: 1;
    }
    
    #registrationPage1 .reg-hero-title,
    #registrationPage2 .reg-hero-title {
        position: relative;
        z-index: 2;
        padding: 4.5rem 1rem 1rem 1rem;
        font-size: 2rem;
        text-align: left;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        height: 100%;
        gap: 0.3em;
        white-space: nowrap;
    }
    
    /* Keep the title components on same line */
    #registrationPage1 .reg-hero-title .title-serif,
    #registrationPage2 .reg-hero-title .title-serif,
    #registrationPage1 .reg-hero-title .title-sans,
    #registrationPage2 .reg-hero-title .title-sans {
        display: inline;
    }
    
    /* Main form container - White card with rounded top (inquire.css exact) */
    #registrationPage1 .registration-container {
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        margin-top: -20px;
        padding: 4.5rem 1.5rem 2.5rem;
        position: relative;
        z-index: 3;
        overflow-y: auto;
        box-shadow: none;
    }
    #registrationPage2 .registration-container {
        background: #ffffff;
        border-radius: 20px 20px 0 0;
        margin-top: -20px;
        padding: 13rem 1.5rem 2.5rem;
        position: relative;
        z-index: 3;
        overflow-y: auto;
        box-shadow: none;
    }
    
    
    /* Regsitration pages modification end */
    
    
    /* Mobile auth section centered with proper flex layout */
    .auth-section-centered {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 80px 20px 40px 20px;
        background: transparent;
        min-height: 100vh;
    }

    /* Mobile card layout - Consistent padding */
    .book-new-section,
    .my-appointments-section,
    .dashboard-header {
        padding: 1.5rem 1.25rem;
        margin-bottom: 1.25rem;
        border-radius: 16px;
    }

    /* Mobile dashboard adjustments */
    .dashboard-section {
        padding-top: 80px;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .user-welcome h1 {
        font-size: 1.6rem;
        margin-bottom: 0.25rem;
    }

    .dashboard-subtitle {
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.3rem;
        margin-bottom: 0.5rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    /* Mobile booking section spacing - Better flow */
    .booking-section {
        padding: 80px 0 2rem 0;
    }

    .booking-container {
        margin: 1rem;
        border-radius: 20px;
    }

    .booking-header {
        padding: 1.75rem 1.5rem 1.5rem;
    }

    .booking-title {
        font-size: 1.5rem;
        padding-top: 0.5rem;
    }

    .booking-subtitle {
        font-size: 0.9rem;
    }

    /* Unit selection responsive */
    .unit-selection-section {
        grid-template-columns: 1fr;
        margin: 0 1.5rem;
        padding: 1.5rem;
        gap: 1rem;
    }

    /* Brochure section responsive */
    .brochure-section {
        margin: 1rem 1.5rem 0;
    }

    .brochure-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
        width: 100%;
        justify-content: center;
    }

    /* Mobile booking content adjustments */
    .booking-content {
        padding: 1.5rem;
        gap: 2rem;
    }

    .calendar-section {
        padding: 1.25rem;
    }

    .calendar-header {
        margin-bottom: 1.5rem;
    }

    .calendar-title {
        font-size: 1.1rem;
    }

    .time-section {
        padding: 1.5rem;
    }

    .time-section h3 {
        font-size: 1.1rem;
    }

    .selected-date-display {
        font-size: 0.85rem;
    }

    .nav-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .calendar-day {
        font-size: 0.85rem;
    }

    .time-slot {
        min-width: 100px;
        font-size: 0.85rem;
        padding: 0.7rem 0.85rem;
    }

    .weekday {
        font-size: 0.75rem;
    }

    /* Mobile confirmation spacing - Centered and clean */
    .confirmation-section {
        padding: 100px 1.25rem 2rem;
    }

    .confirmation-container {
        padding: 2.5rem 1.75rem;
        border-radius: 20px;
    }

    .confirmation-title {
        font-size: 1.8rem;
        margin-bottom: 0.75rem;
    }

    .confirmation-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    .confirmation-details {
        padding: 1.5rem;
        margin: 2rem 0;
    }

    /* Mobile projects section - Better grid */
    .projects-container {
        padding: 1.25rem;
        background: transparent !important;
    }

    .projects-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 0;
        background: transparent;
    }

    .project-card {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        border-radius: 16px;
    }

    .project-card-content {
        padding: 1.25rem;
    }

    .project-name {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .project-location {
        font-size: 0.85rem;
    }

    /* Mobile form layout - Professional spacing with proper flow */
    .auth-container {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: 2.5rem 1.75rem 2rem;
        background: #ffffff;
        border-radius: 24px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
        position: relative;
        z-index: 2;
    }

    /* Mobile title styling - Clean header above form */
    .auth-header {
        margin-bottom: 2rem;
        text-align: left;
    }

    .auth-title {
        font-size: 2.2rem;
        color: var(--azure-gold);
        margin-bottom: 0.75rem;
        text-align: center;
        font-weight: 400;
        line-height: 1.2;
        position: relative;
        z-index: 1;
    }

    /* Mobile subtitle/description - Better readability */
    .auth-subtitle {
        color: var(--text-dark);
        font-size: 0.85rem;
        margin-bottom: 0;
        text-align: center;
        line-height: 1.5;
        opacity: 0.85;
    }

    /* Auth description for white text on background */
    .auth-description {
        display: none; /* Hide if exists, using subtitle instead */
    }

    /* Mobile registration layout - Clean modern approach */
    .registration-section {
        flex-direction: column;
        padding: 0;
        min-height: 100vh;
        position: relative;
    }


    .registration-hero {
        flex: none;
        padding: 0px 0rem 0rem;
        text-align: left;
        background: transparent;
        position: relative;
        z-index: 2;
    }

    .registration-container {
        width: 100%;
        background: #ffffff;
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 7.8rem 1.5rem;
        margin: 0rem 0rem 0rem 0rem;
        border-radius: 0px 0px 0px 0px;
        
    }

    /* Registration form mobile styling */
    .reg-form-container {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Mobile registration hero title - Elegant positioning */
    .reg-hero-title {
        font-size: 2rem;
        color: var(--azure-gold);
        text-align: left;
        margin-bottom: 0.75rem;
        padding: 0;
        margin-top: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .reg-hero-title .title-serif {
        font-size: 4rem;
        color: var(--azure-gold);
        display: block;
        line-height: 1.1;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .reg-hero-title .title-sans {
        color: rgba(255, 255, 255, 0.95);
        display: block;
        margin-top: -0.5rem;
        font-size: 3rem;
        font-weight: 450;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    /* Mobile registration hero description */
    .reg-hero-description {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.95rem;
        text-align: left;
        margin-bottom: 0;
        line-height: 1.5;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }

    /* Mobile form inputs - Clean modern styling */
    .reg-form-group {
        position: relative;
    }

    .form-label {
        font-size: 0.875rem;
        color: #666;
        margin-bottom: 0.5rem;
        display: block;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    .reg-input,
    .form-input {
        width: 100%;
        padding: 0.95rem 1rem;
        border: 1.5px solid #e0e6ed;
        border-radius: 12px;
        background: #f8f9fa;
        font-size: 1rem;
        color: var(--text-dark);
        transition: all 0.3s ease;
    }

    .reg-input:focus,
    .form-input:focus {
        outline: none;
        border-color: var(--azure-primary);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(12, 67, 106, 0.1);
    }

    .reg-input::placeholder,
    .form-input::placeholder {
        color: #999;
        opacity: 1;
    }

    /* Mobile phone input styling - Single field combined design */
    .phone-input-container {
        display: flex;
        align-items: center;
        border: 1.5px solid #e0e6ed;
        border-radius: 8px;
        overflow: hidden;
        background: #f8f9fa;
        transition: all 0.3s ease;
        margin-bottom: 0.5rem;
    }

    .phone-input-container:focus-within {
        background: #ffffff;
        border-color: #0C436A;
        box-shadow: 0 0 0 3px rgba(12, 67, 106, 0.1);
    }

    .phone-input-group {
        display: contents;
    }
    #userDashboard {
        /* Fills the entire height of the screen */
        min-height: 100vh; 
    
        /* Adjusted padding for better balance and spacing */
        padding: 6rem 2rem 4rem; 
    
        /* The background image and fallback gradient */
        background: url('../docs/fancy-living-room.webp') center top no-repeat, 
                    linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    
        /* Correctly scales the image to fill the screen without distortion */
        background-size: cover; 
    
        /* Creates the parallax scrolling effect */
        background-attachment: fixed; 
    }

    .country-code-select {
        background: transparent;
        color: #333;
        border: none;
        padding: 0.875rem 0.5rem 0.875rem 1rem;
        font-size: 1rem;
        font-weight: 400;
        font-family: 'AZURESans', sans-serif;
        border-right: 1px solid #e0e6ed;
        outline: none;
        cursor: pointer;
        min-width: 80px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23666' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.5rem center;
        background-size: 10px;
        padding-right: 1.75rem;
    }

    .phone-input {
        flex: 1;
        padding: 0.875rem 1rem;
        font-size: 1rem;
        font-weight: 400;
        color: #333;
        background: transparent;
        border: none;
        outline: none;
        font-family: 'AZURESans', sans-serif;
    }

    .phone-input::placeholder {
        color: #999;
    }

    /* Mobile OTP input - Better UX */
    .otp-input {
        padding: 1.1rem;
        border: 1.5px solid #e0e6ed;
        border-radius: 12px;
        background: #f8f9fa;
        font-size: 1.3rem;
        text-align: center;
        letter-spacing: 0.4rem;
        width: 100%;
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--azure-primary);
        transition: all 0.3s ease;
    }

    .otp-input:focus {
        outline: none;
        border-color: var(--azure-primary);
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(12, 67, 106, 0.1);
    }

    .otp-input::placeholder {
        letter-spacing: 0.6rem;
        color: #ccc;
        font-weight: 400;
    }

    /* Mobile form notes - Better visibility */
    .form-note {
        font-size: 0.75rem;
        color: #999;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        line-height: 1.3;
        padding: 0;
    }

    .form-note i {
        font-size: 0.7rem;
        color: #999;
        flex-shrink: 0;
    }

    /* Mobile button adjustments - Touch-friendly & accessible */
    .btn-animated,
    .btn-new,
    .auth-btn {
        width: 38%;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 400;
        letter-spacing: 0.3px;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: 'AZURESans', sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .btn-animated,
    .btn-new2,
    .auth-btn, .btn-back {
        width: 68%;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 400;
        letter-spacing: 0.3px;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: 'AZURESans', sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .btn-new.btn-blue.btn-nxt {
        width: 68% !important;

    }
    .btn-new.btn-blue.btn-bcsh{
     width: 100%;   
    }
    .btn-new.btn-blue.btn-lg{
        width: 40%;
    }
    .btn-animated.btn-white.btn-bcc{
        width:100% ;
    }

    .btn-animated:active,
    .btn-new:active,
    .auth-btn:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    

    .btn-animated:disabled,
    .btn-new:disabled,
    .auth-btn:disabled {
        background: #d0d0d0 !important;
        color: #888 !important;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        opacity: 0.6;
    }

    /* Mobile error messages - Clear visibility */
    .error-message {
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.2px;
        margin-top: 0.5rem;
        color: #e74c3c;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: 'AZURESans', sans-serif;
    }


    .reg-form-group.has-error .reg-input,
    .reg-form-group.has-error .form-input,
    .reg-form-group.has-error .phone-input,
    .reg-form-group.has-error .country-code-select {
        border-color: #e74c3c;
        border-width: 1.5px;
        background: #fff5f5;
    }

    /* Registration button row - Better spacing */
    .reg-button-row {
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }

    .reg-button-row .btn-animated {
        margin-top: 0;
    }

    /* Mobile toggle buttons - Touch-optimized */
    .toggle-group {
        margin-top: 1rem;
        margin-bottom: -3rem;
        border-radius: 23px;
        width: 100%;
        display: flex;
        gap: 4px;
    }

    .toggle-btn {
        padding: 0.9rem 1rem;
        font-size: 0.9rem;
        min-height: 48px;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.2s ease;
        flex: 1;
    }

    .toggle-btn.active {
        background: var(--azure-primary);
        color: white;
        box-shadow: 0 2px 8px rgba(12, 67, 106, 0.3);
    }

    .toggle-group.bedrooms {
        display: grid;
        gap: 4px;
        border-radius: 14px;
        padding: 4px;
    }

    .toggle-group.bedrooms .toggle-btn {
        font-size: 0.85rem;
        padding: 0.75rem 0.5rem;
        min-height: 46px;
        border-radius: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile close button */
    .close-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 10;
    }

    /* Mobile booking content */
    .booking-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }

    /* Mobile confirmation actions */
    .confirmation-actions {
        flex-direction: column;
    }

    /* Mobile time slots */
    .time-slots-container {
        padding: 0;
    }

    .time-slot {
        min-width: calc(50% - 0.375rem);
    }
    .booking-container,
    .auth-container,
    .registration-container,
    .dashboard-section,
    .project-selection-section,
    .booking-section,
    .confirmation-section {
        transform: none;
    }
}

/* 125% Zoom Optimization (800px-960px) - Smaller elements to prevent overlap */
@media (min-width: 800px) and (max-width: 960px) {
    /* Reduce hero section height to give more space to form */
    #registrationPage1, #registrationPage2 {
        grid-template-rows: 160px 1fr !important;
    }
    
    /* Smaller title to prevent progress bar overlap */
    #registrationPage1 .reg-hero-title,
    #registrationPage2 .reg-hero-title {
        padding: 3rem 1rem 0.5rem 1rem !important;
        font-size: 1.5rem !important;
    }
    
    /* Reduce form padding but keep top padding for progress bar */
    #registrationPage1 .registration-container,
    #registrationPage2 .registration-container {
        padding: 4rem 1.25rem 2rem !important;
    }
    
    /* Smaller form labels and inputs */
    #registrationPage1 .form-label,
    #registrationPage2 .form-label {
        font-size: 0.875rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    /* Reduce spacing between form groups */
    #registrationPage1 .reg-form-group,
    #registrationPage2 .reg-form-group {
        margin-bottom: 2.25rem !important;
    }
    
    /* Smaller toggle buttons */
    #registrationPage1 .toggle-btn,
    #registrationPage2 .toggle-btn {
        padding: 0.85rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Smaller buttons */
    #registrationPage1 .btn-blue,
    #registrationPage2 .btn-blue {
        padding: 0.9rem 2rem !important;
        font-size: 0.95rem !important;
    }
}

/* Smaller Mobile Devices (480px and below) */
@media (max-width: 480px) {
    /* Further scale down booking container elements */
    .booking-title {
        font-size: 1.3rem;
    }

    .booking-subtitle {
        font-size: 0.85rem;
    }

    .booking-header {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .booking-content {
        padding: 1.25rem;
        gap: 1.75rem;
    }

    .calendar-section {
        padding: 1rem;
    }

    .calendar-header {
        margin-bottom: 1.25rem;
    }

    .calendar-title {
        font-size: 1rem;
    }

    .time-section {
        padding: 1.25rem;
    }

    .time-section h3 {
        font-size: 1rem;
    }

    .selected-date-display {
        font-size: 0.8rem;
    }

    .nav-btn {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    .calendar-day {
        font-size: 0.8rem;
    }

    .time-slot {
        min-width: 95px;
        font-size: 0.8rem;
        padding: 0.65rem 0.75rem;
    }

    .weekday {
        font-size: 0.7rem;
    }

    /* Scale down section titles and subtitles */
    .section-title {
        font-size: 1.2rem;
    }

    .section-subtitle {
        font-size: 0.85rem;
    }

    /* Projects section scaling */
    .project-name {
        font-size: 1.1rem;
    }

    .project-location {
        font-size: 0.8rem;
    }

    .projects-container {
        padding: 1rem;
    }

    .project-card-content {
        padding: 1rem;
    }
}

/* Very Small Mobile Devices (375px and below) */
@media (max-width: 375px) {
    /* Maximum compression for tiny screens */
    .booking-title {
        font-size: 1.1rem;
    }

    .booking-subtitle {
        font-size: 0.8rem;
    }

    .booking-header {
        padding: 1.25rem 1rem 1rem;
    }

    .booking-content {
        padding: 1rem;
        gap: 1.5rem;
    }

    .calendar-section {
        padding: 0.85rem;
    }

    .calendar-header {
        margin-bottom: 1rem;
    }

    .calendar-title {
        font-size: 0.95rem;
    }

    .time-section {
        padding: 1rem;
    }

    .time-section h3 {
        font-size: 0.95rem;
    }

    .selected-date-display {
        font-size: 0.75rem;
    }

    .nav-btn {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

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

    .time-slot {
        min-width: 90px;
        font-size: 0.75rem;
        padding: 0.6rem 0.7rem;
    }

    .time-slots-container {
        gap: 0.65rem;
    }

    .weekday {
        font-size: 0.65rem;
        padding: 0.4rem;
    }

    .calendar-days {
        gap: 6px;
    }

    /* Further scale section elements */
    .section-title {
        font-size: 1.1rem;
    }

    .section-subtitle {
        font-size: 0.8rem;
    }

    .user-welcome h1 {
        font-size: 1.4rem;
    }

    .dashboard-subtitle {
        font-size: 0.85rem;
    }

    /* Projects section further scaling */
    .project-name {
        font-size: 1rem;
    }

    .project-location {
        font-size: 0.75rem;
    }

    .projects-container {
        padding: 0.85rem;
    }

    .project-card-content {
        padding: 0.85rem;
    }

    /* Button adjustments for very small screens */
    .btn-new, .btn-animated {
        font-size: 0.75rem;
        padding: 0.9rem 1.25rem;
    }

    .btn-new.btn-blue.btn-nxt {
        padding: 0.9rem 1.5rem;
    }
}

/* Tablet Layout */
/* Updated to work with new mobile breakpoint */
@media (min-width: 961px) and (max-width: 1279px) {
    .auth-section {
        justify-content: center;
    }

    .auth-container {
        max-width: 600px;
    }

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

    .booking-content {
        gap: 2rem;
        padding: 2rem;
    }
}

/* Desktop Layout */
/* Increased to 1280px to handle zoom better (960px at 133% zoom) */
@media (min-width: 1280px) {
    /* Desktop registration layout */
    .registration-section {
        flex-direction: row;
        padding: 0;
    }

    .registration-hero {
        flex: 1;
        padding: 4rem;
        text-align: left;
    }

    .registration-container {
        width: 500px;
        margin: 7rem 3rem 10rem 0;
        padding: 2.5rem;
    }

    .reg-hero-title {
        font-size: 4rem;
    }

    .reg-hero-title .title-serif {
        font-size: 6rem;
    }

    /* Desktop auth layout - center for phone auth */
    .auth-section.auth-section-centered {
        justify-content: center;
    }

    .auth-container {
        max-width: 600px;
        padding: 2.5rem;
    }

    /* Desktop projects grid */
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Desktop booking layout */
    .booking-content {
        grid-template-columns: 1fr 1fr;
    }
}

/* Large Desktop Layout */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .auth-container {
        max-width: 520px;
    }
}

/* Ultra-wide Layout */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }

    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Print Styles */
@media print {
    .header,
    .btn-new,
    .nav-btn,
    .appointment-btn,
    .close-btn {
        display: none !important;
    }

    .confirmation-container {
        box-shadow: none;
        border: 1px solid #000;
    }

    body {
        background: white !important;
    }

    .confirmation-section {
        background: white !important;
        min-height: auto;
        padding: 0;
    }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .project-image,
    .logo-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .loading {
        animation: none;
    }
}

/* Dark Mode Support (if needed) */
@media (prefers-color-scheme: dark) {
    /* Currently using Azure brand colors consistently,
       but this can be expanded if dark mode is needed */
}

/* Focus Styles for Accessibility */
@media (prefers-reduced-motion: no-preference) {
    .btn-new:focus,
    .form-input:focus,
    .calendar-day:focus,
    .time-slot:focus,
    .project-card:focus {
        outline: 2px solid var(--azure-light-blue);
        outline-offset: 2px;
    }
}