/* Responsive Styles for BookIt Appointment System */

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 42px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {

    /* Header */
    .navbar-brand img {
        height: 35px;
    }

    /* Hero Section */
    .hero-section {
        padding: 150px 0 80px;
    }
    .pages-hero-section {
        padding: 150px 0 80px;
    }

    .hero-title {
        font-size: 38px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    /* About Section */
    .about-content {
        padding-left: 0;
        margin-top: 40px;
    }

    /* Features */
    .feature-item {
        padding: 25px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {

    /* General */
    .section {
        padding: 30px 0;
    }

    .section-title {
        font-size: 30px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    /* Header */
    .header {
        padding: 15px 0;
    }

    .navbar-nav .nav-link {
        padding: 10px 0;
    }

    .navbar-nav .btn {
        margin-top: 10px;
        display: inline-block;
    }

    /* Hero Section */
    .hero-section {
        padding: 130px 0 60px;
        text-align: center;
    }
    .pages-hero-section {
        padding: 130px 0 60px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-img {
        margin-top: 40px;
    }

    .hero-search .btn {
        position: relative;
        top: 0;
        right: 0;
        /* margin-top: 15px; */
        width: 100%;
    }

    /* Categories */
    .category-item {
        margin-bottom: 20px;
    }

    /* Testimonials */
    .testimonial-item {
        margin-bottom: 20px;
    }

    /* Contact */
    .contact-info {
        margin-bottom: 40px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

    /* General */
    .section {
        padding: 20px 0;
    }

    .section-title {
        font-size: 26px;
    }

    /* Hero Section */
    .hero-title {
        font-size: 28px;
    }

    .hero-search .form-control {
        height: 50px;
    }

    /* About Section */
    .about-list li {
        padding-left: 25px;
    }

    .about-list li i {
        top: 3px;
    }

    /* Auth Modal */
    .auth-modal .modal-dialog {
        margin: 10px;
    }

    .auth-body {
        padding: 20px;
    }

    /* Time Slots */
    .time-slot-row .col-md-3,
    .time-slot-row .col-md-2 {
        margin-bottom: 10px;
    }

    .time-slot-row .remove-slot {
        width: 100%;
    }

    /* Footer */
    .footer-widget {
        margin-bottom: 30px;
    }

    .footer-bottom {
        margin-top: 20px;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 480px) {

    /* Hero Section */
    .hero-title {
        font-size: 24px;
    }

    /* Categories */
    .category-item {
        padding: 20px;
    }

    /* Testimonials */
    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    .author-img {
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* Contact Form */
    .contact-form .btn {
        width: 100%;
    }

    /* Back to top */
    .back-to-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        bottom: 20px;
        right: 20px;
    }
}

/* Special cases for very small screens */
@media (max-width: 380px) {

    /* Header */
    .navbar-brand img {
        height: 30px;
    }

    /* Hero Section */
    .hero-title {
        font-size: 22px;
    }

    /* Buttons */
    .btn {
        padding: 8px 20px;
        font-size: 14px;
    }

    /* Time Slot Management */
    .time-slot-row .col-md-1 {
        text-align: center;
    }
}

/* Landscape phones and taller portrait phones */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        padding: 100px 0 60px;
    }
    .pages-hero-section {
        padding: 100px 0 60px;
    }

    .hero-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        margin-bottom: 20px;
    }
}

/* iPad Pro portrait */
@media (width: 1024px) and (height: 1366px) {
    .hero-title {
        font-size: 44px;
    }

    .hero-subtitle {
        font-size: 20px;
    }
}

/* Responsive adjustments for booking flow */
@media (max-width: 768px) {

    /* Booking steps */
    .booking-steps .step {
        margin-bottom: 20px;
    }

    /* Service selection */
    .service-item {
        padding: 15px;
    }

    /* Time slot buttons */
    .time-slot-btn {
        padding: 8px 12px;
        font-size: 14px;
        margin: 5px;
    }
}

/* Print styles */
@media print {

    .header,
    .footer,
    .no-print {
        display: none !important;
    }

    body {
        padding: 20px;
        font-size: 12pt;
    }

    .print-section {
        display: block !important;
    }
}