/* responsive.css - Stylesheet untuk Responsive Design HOLA RentCar */

/* ===== BREAKPOINTS ===== */
/* Extra small devices (phones, 576px and down) */
/* Small devices (landscape phones, 576px and up) */
/* Medium devices (tablets, 768px and up) */
/* Large devices (desktops, 992px and up) */
/* Extra large devices (large desktops, 1200px and up) */

/* ===== GLOBAL RESPONSIVE STYLES ===== */
@media (max-width: 1199.98px) {
    /* Large devices adjustments */
    .container {
        max-width: 960px;
    }
}

@media (max-width: 991.98px) {
    /* Medium devices adjustments */
    .container {
        max-width: 720px;
    }
    
    /* Navbar adjustments */
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-item {
        margin: 5px 0;
    }
    
    /* Hero section adjustments */
    .hero-wrap .slider-text {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    
    .hero-wrap .text h1 {
        font-size: 2.5rem;
    }
    
    /* Car listings adjustments */
    .car-wrap {
        margin-bottom: 30px;
    }
    
    /* Footer adjustments */
    .ftco-footer-widget {
        margin-bottom: 30px;
    }
}

@media (max-width: 767.98px) {
    /* Small devices adjustments */
    .container {
        max-width: 540px;
    }
    
    /* Hero section */
    .hero-wrap .text h1 {
        font-size: 2rem;
    }
    
    .hero-wrap .text p {
        font-size: 16px;
    }
    
    /* Section headings */
    .heading-section h2 {
        font-size: 1.75rem;
    }
    
    /* Carousel adjustments */
    .carousel-car .item,
    .carousel-testimony .item {
        padding: 0 15px;
    }
    
    /* Services section */
    .services {
        margin-bottom: 30px;
    }
    
    /* Contact form adjustments */
    .contact-form {
        padding: 20px !important;
    }
    
    /* Footer */
    .ftco-footer-social {
        float: none !important;
        text-align: center;
        margin-top: 20px;
    }
    
    .block-23 ul {
        padding-left: 0;
    }
}

@media (max-width: 575.98px) {
    /* Extra small devices adjustments */
    .container {
        padding: 0 15px;
    }
    
    /* Navbar brand */
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    /* Hero section */
    .hero-wrap .text h1 {
        font-size: 1.75rem;
    }
    
    .hero-wrap .text p {
        font-size: 14px;
    }
    
    /* Section headings */
    .heading-section h2 {
        font-size: 1.5rem;
    }
    
    .heading-section .subheading {
        font-size: 0.9rem;
    }
    
    /* Car details */
    .car-details .text h2 {
        font-size: 1.5rem;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .btn-lg {
        padding: 12px 24px;
        font-size: 1rem;
    }
    
    /* Forms */
    .form-control {
        font-size: 0.9rem;
    }
    
    /* Testimonials */
    .testimony-wrap {
        padding: 20px;
    }
    
    /* Pagination */
    .block-27 ul li {
        margin: 0 2px;
    }
    
    .block-27 ul li a,
    .block-27 ul li span {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
}

/* ===== INDEX.PHP RESPONSIVE STYLES ===== */
@media (max-width: 767.98px) {
    /* Featured vehicles carousel */
    .carousel-car.owl-carousel .owl-stage-outer {
        padding: 0 10px;
    }
    
    /* Services grid */
    .services-2 {
        margin-bottom: 30px;
    }
    
    /* Testimonials */
    .carousel-testimony.owl-carousel .owl-stage-outer {
        padding: 0 10px;
    }
}

/* ===== CONTACT.PHP RESPONSIVE STYLES ===== */
@media (max-width: 991.98px) {
    .contact-info .col-md-4 {
        margin-bottom: 30px;
    }
    
    .block-9 {
        margin-top: 30px;
    }
}

@media (max-width: 575.98px) {
    .map-container {
        height: 300px;
    }
    
    .contact-info .border {
        padding: 15px !important;
    }
}

/* ===== CAR.PHP RESPONSIVE STYLES ===== */
@media (max-width: 767.98px) {
    .car-wrap .text h2 {
        font-size: 1.25rem;
    }
    
    .car-wrap .text .d-flex.mb-0 {
        flex-direction: column;
    }
    
    .car-wrap .text .btn {
        margin: 5px 0;
        width: 100%;
    }
}

/* ===== CAR-SINGLE.PHP RESPONSIVE STYLES ===== */
@media (max-width: 991.98px) {
    .car-details .img {
        height: 400px;
        margin-bottom: 30px;
    }
    
    .ftco-car-details .services {
        margin-bottom: 20px;
    }
    
    /* Tabs responsive */
    .bd-example-tabs .nav-pills {
        flex-direction: column;
    }
    
    .bd-example-tabs .nav-pills .nav-item {
        margin-bottom: 10px;
    }
    
    .bd-example-tabs .nav-pills .nav-link {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .car-details .img {
        height: 300px;
    }
    
    /* Features list */
    .features {
        margin-bottom: 20px;
    }
    
    /* Related cars */
    .ftco-no-pt .car-wrap {
        margin-bottom: 30px;
    }
}

/* ===== BOOKNOW.PHP RESPONSIVE STYLES ===== */
@media (max-width: 991.98px) {
    .booking-steps {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .booking-steps .step {
        flex: 0 0 33.333%;
        margin-bottom: 15px;
    }
    
    .booking-steps:before {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .booking-steps .step {
        flex: 0 0 50%;
    }
    
    .car-image-sidebar img {
        height: 200px;
    }
    
    .car-info-sidebar {
        padding: 15px;
    }
}

@media (max-width: 575.98px) {
    .booking-steps .step {
        flex: 0 0 100%;
    }
    
    .step-label {
        font-size: 10px;
    }
    
    /* Form adjustments */
    .bg-light.p-4.rounded {
        padding: 15px !important;
    }
    
    .d-flex.justify-content-between.align-items-center.mt-4 {
        flex-direction: column;
    }
    
    .d-flex.justify-content-between.align-items-center.mt-4 .btn {
        margin: 5px 0;
        width: 100%;
    }
}

/* ===== ABOUT.PHP RESPONSIVE STYLES ===== */
@media (max-width: 991.98px) {
    .ftco-about .col-md-6 {
        margin-bottom: 30px;
    }
    
    .ftco-about .img.img-2 {
        height: 400px;
    }
    
    .wrap-about .heading-section {
        padding-left: 0 !important;
        padding-right: 0;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .ftco-about .img.img-2 {
        height: 300px;
    }
    
    .wrap-about .heading-section h2 {
        font-size: 1.5rem;
    }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE DESIGN ===== */
.img-fluid-mobile {
    max-width: 100%;
    height: auto;
}

.text-center-mobile {
    text-align: center;
}

.d-block-mobile {
    display: block;
}

.d-none-mobile {
    display: none;
}

@media (min-width: 768px) {
    .text-center-mobile {
        text-align: left;
    }
    
    .d-block-mobile {
        display: inline-block;
    }
    
    .d-none-mobile {
        display: block;
    }
}

/* ===== FIX FOR COMMON RESPONSIVE ISSUES ===== */
/* Prevent horizontal scrolling */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for carousel on mobile */
.owl-carousel .owl-stage-outer {
    overflow: hidden;
}

/* Improve touch targets on mobile */
@media (max-width: 767.98px) {
    .btn, 
    .nav-link, 
    .form-control,
    .custom-select {
        min-height: 44px;
    }
    
    .nav-link {
        padding: 10px 15px;
    }
}

/* Loading animation responsive */
#ftco-loader {
    position: fixed;
}

/* ===== PRINT STYLES ===== */
@media print {
    .navbar,
    .ftco-footer,
    .btn {
        display: none !important;
    }
    
    .container {
        width: 100%;
        max-width: 100%;
    }
}