/* Custom Responsive CSS for ElStar Hostel */

/* ==================================
   Mobile-Specific Responsive Fixes
   ================================== */

/* ==========================================
   BURGER MENU FIX - Mobile Navigation
   ========================================== */

/* Burger Button Styling */
@media (max-width: 991px) {
    /* Make burger button visible and properly styled */
    .header-btn-collapse-nav {
        display: block !important;
        background: #cb1130 !important;
        color: white !important;
        border: none !important;
        padding: 12px 18px !important;
        border-radius: 8px !important;
        margin-left: 10px !important;
        font-size: 1.3rem !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        z-index: 1000 !important;
        position: relative !important;
    }

    .header-btn-collapse-nav:hover {
        background: #a00e26 !important;
        transform: scale(1.05) !important;
    }

    .header-btn-collapse-nav:focus {
        outline: 2px solid #fc256d !important;
        outline-offset: 2px !important;
    }

    .header-btn-collapse-nav i {
        font-size: 1.3rem !important;
    }

    /* Navigation Menu Mobile Styles */
    .header-nav-main nav {
        background-color: #fff;
        padding: 0 !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        border-top: 3px solid #cb1130 !important;
        z-index: 999 !important;
        margin-top: 10px !important;
    }

    /* When menu is collapsed (hidden) */
    .header-nav-main nav.collapse:not(.show) {
        display: none !important;
    }

    /* When menu is expanded (visible) */
    .header-nav-main nav.collapse.show {
        display: block !important;
    }

    /* Menu items styling */
    .header-nav-main nav ul.nav {
        flex-direction: column !important;
        padding: 15px 20px !important;
    }

    .header-nav-main nav ul.nav li {
        width: 100% !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin: 0 !important;
    }

    .header-nav-main nav ul.nav li:last-child {
        border-bottom: none !important;
    }

    .header-nav-main nav ul.nav li a {
        display: block !important;
        padding: 15px 10px !important;
        color: #333 !important;
        font-weight: 600 !important;
        font-size: 1.05rem !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
    }

    .header-nav-main nav ul.nav li a:hover,
    .header-nav-main nav ul.nav li a:focus {
        background-color: #f8f9fa !important;
        color: #cb1130 !important;
        padding-left: 20px !important;
    }

    /* Fix header positioning */
    .header-body {
        position: relative !important;
    }

    /* Book Now button in mobile menu */
    .custom-header-top-btn-style-1 {
        width: 100%;
        text-align: center;
        margin: 10px 0;
        display: block !important;
    }

    /* Ensure header container allows menu to expand */
    .header-container {
        position: relative !important;
    }

    /* Fix header column layout on mobile */
    .header-column.justify-content-end {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .header-row {
        flex-wrap: wrap !important;
    }

    .header-nav {
        width: 100% !important;
        order: 3 !important;
    }
}

/* Extra small devices - adjust burger button size */
@media (max-width: 575px) {
    .header-btn-collapse-nav {
        padding: 10px 15px !important;
        font-size: 1.2rem !important;
    }

    .header-nav-main nav ul.nav li a {
        font-size: 1rem !important;
    }
}

/* Smooth transitions for menu */
.header-nav-main nav.collapse {
    transition: height 0.35s ease !important;
}

/* Fix for fixed header on mobile */
@media (max-width: 991px) {
    .header-body[style*="position: fixed"] {
        position: fixed !important;
        width: 100% !important;
        z-index: 1030 !important;
    }

    /* Add padding to body when header is fixed */
    body {
        padding-top: 100px !important;
    }
}

/* ========================================== */

/* Gallery responsive adjustments */
@media (max-width: 767px) {
    .gallery-item {
        margin-bottom: 15px;
    }

    .gallery-item img {
        width: 100%;
        height: auto;
    }

    /* Welcome section image */
    .welcome-image-col {
        min-height: 300px;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* Package cards mobile */
@media (max-width: 575px) {
    .package-card {
        margin-bottom: 15px;
    }

    .price-tag {
        font-size: 1.5rem;
    }
}

/* Booking form mobile fixes */
@media (max-width: 991px) {
    .invoice-card {
        position: relative !important;
        top: auto !important;
        margin-top: 30px;
    }
}

/* Text sizing for mobile */
@media (max-width: 767px) {
    h1 {
        font-size: 1.8rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.3rem !important;
    }

    .text-10 {
        font-size: 1.5rem !important;
    }

    .text-resp-100 {
        font-size: 2rem !important;
    }
}

/* Package section responsive */
@media (max-width: 991px) {
    .rotate-r-90 {
        transform: none !important;
        position: relative !important;
        margin-top: 0 !important;
        text-align: center;
        padding: 10px 0;
    }

    .border-end {
        border-right: none !important;
        border-bottom: 1px solid #dee2e6;
    }

    /* Make the row a flex container so order classes work */
    .custom-projects-1 > .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* Put "X NIGHTS" label ABOVE "INCLUDES" heading on mobile */
    .col-12.col-lg-2.order-3 {
        order: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
    }

    /* INCLUDES section appears second (after X NIGHTS) */
    .col-12.col-lg-6.order-1 {
        order: 2 !important;
    }

    /* Price image stays last */
    .col-12.col-lg-4.order-2 {
        order: 3 !important;
    }

    /* Fix the "5 guests" warning text on mobile - prevent overflow */
    .text-overflow-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: center !important;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .text-overflow-center svg {
        width: 35px !important;
        height: 35px !important;
        flex-shrink: 0 !important;
    }

    /* Center the warning text and prevent overflow */
    h5.text-overflow-center {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        padding: 0 15px !important;
        margin: 0 !important;
        max-width: 100% !important;
        word-break: break-word !important;
    }

    /* Home page - Put images ABOVE "OUR ..." headings on mobile */
    .col-12.col-sm-10.col-lg-3,
    .col-12.col-sm-10.col-lg-3.ps-sm-5 {
        order: 1 !important;
        margin-bottom: 30px !important;
    }

    .col-12.col-lg-8.mb-5,
    .col-12.col-lg-8.offset-lg-1 {
        order: 2 !important;
    }
}

/* Images on mobile - ensure proper spacing */
@media (max-width: 767px) {
    img.img-fluid {
        margin-bottom: 20px;
    }

    .max-width-custom-1 img {
        max-width: 80% !important;
        margin: 0 auto;
        display: block;
    }
}

/* Contact section mobile */
@media (max-width: 767px) {
    .feature-box {
        margin-bottom: 30px;
    }
}

/* Logo section mobile */
@media (max-width: 575px) {
    .row.align-items-center.text-center.my-5 img {
        max-width: 80px !important;
    }
}

/* Spacing adjustments for mobile */
@media (max-width: 767px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .mt-5,
    .my-5 {
        margin-top: 2rem !important;
    }

    .mb-5,
    .my-5 {
        margin-bottom: 2rem !important;
    }
}

/* Ensure buttons are full width on mobile */
@media (max-width: 575px) {
    .btn-modern,
    .btn-primary,
    .btn-secondary {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Fix parallax background on mobile */
@media (max-width: 767px) {
    .section-parallax {
        background-attachment: scroll !important;
    }

    .welcome-section {
        background-attachment: scroll !important;
    }
}

/* Invoice/Booking summary on mobile */
@media (max-width: 991px) {
    .sticky-top {
        position: relative !important;
    }
}

/* Package extra options on mobile */
@media (max-width: 575px) {
    .guest-counter {
        width: 100%;
        justify-content: center;
        margin: 10px 0;
    }

    .extra-option {
        flex-direction: column;
    }

    .extra-option .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* Room gallery mobile fixes */
@media (max-width: 767px) {
    .d-flex.flex-column.gap-4 {
        gap: 1rem !important;
    }
}

/* Activities page mobile */
@media (max-width: 991px) {
    .order-1 {
        order: 1 !important;
    }

    .order-2 {
        order: 2 !important;
    }
}

/* Testimonials on mobile */
@media (max-width: 767px) {
    .testimonial-author img {
        max-width: 80px;
    }

    .testimonial blockquote p {
        font-size: 0.95rem;
    }
}

/* Footer mobile */
@media (max-width: 767px) {
    footer .row {
        text-align: center;
    }

    footer a {
        display: block;
        margin: 10px 0;
    }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .container {
        overflow-x: hidden;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ========================================== */
/* FIX 1: House Page - Equal spacing between images on mobile */
/* ========================================== */
@media (max-width: 991px) {
    /* Equal spacing for all image columns on mobile */
    .thumb-info-wrapper {
        margin-bottom: 20px;
    }

    /* Ensure consistent spacing between image rows */
    .row.mt-4 .col-lg-4 {
        margin-bottom: 20px;
    }

    /* Add consistent padding to all image containers */
    .col-lg-4 {
        padding-bottom: 15px;
    }
}

/* ========================================== */
/* FIX 2: Activities Page - Images above titles on mobile */
/* ========================================== */
@media (max-width: 991px) {
    /* SURF section - image above title */
    .row.align-items-center.justify-content-around.mt-5:nth-child(1) .col-12.col-lg-5 {
        order: 1 !important;
        margin-bottom: 20px;
    }

    .row.align-items-center.justify-content-around.mt-5:nth-child(1) .col-12.col-lg-6 {
        order: 2 !important;
    }

    /* SKATE section - image above title */
    .row.align-items-center.justify-content-around.mt-5:nth-child(2) .col-12.col-lg-5 {
        order: 1 !important;
        margin-bottom: 20px;
    }

    .row.align-items-center.justify-content-around.mt-5:nth-child(2) .col-12.col-lg-6,
    .row.align-items-center.justify-content-around.mt-5:nth-child(2) .col-lg-6 {
        order: 2 !important;
    }

    /* YOGA section - already has order classes, just ensure spacing */
    .row.align-items-center.justify-content-around.mt-5:nth-child(3) .col-12.col-lg-5 {
        margin-bottom: 20px;
    }

    /* QUAD section - image above title */
    .row.align-items-center.justify-content-around.mt-5:nth-child(4) .col-12.col-lg-5,
    .row.align-items-center.justify-content-around.mt-5:nth-child(4) .col-lg-5 {
        order: 1 !important;
        margin-bottom: 20px;
    }

    .row.align-items-center.justify-content-around.mt-5:nth-child(4) .col-lg-6 {
        order: 2 !important;
    }

    /* HAMMAM section - image above title */
    .row.align-items-center.justify-content-around.mt-5:nth-child(5) .col-12.col-lg-5 {
        order: 1 !important;
        margin-bottom: 20px;
    }

    .row.align-items-center.justify-content-around.mt-5:nth-child(5) .col-12.col-lg-6,
    .row.align-items-center.justify-content-around.mt-5:nth-child(5) .col-lg-6 {
        order: 2 !important;
    }

    /* BERBER section - image above title */
    .row.align-items-center.justify-content-around.mt-5:nth-child(6) .col-12.col-lg-5,
    .row.align-items-center.justify-content-around.mt-5:nth-child(6) .col-lg-5 {
        order: 1 !important;
        margin-bottom: 20px;
    }

    .row.align-items-center.justify-content-around.mt-5:nth-child(6) .col-lg-6 {
        order: 2 !important;
    }
}

/* ========================================== */
/* Simple Bootstrap Burger Menu Styling */
/* ========================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: white;
    border-bottom: 6px solid #4d0d0a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-header .header-logo img {
    max-width: 123px;
    height: auto;
}

.site-header .nav-link {
    color: #333 !important;
    font-weight: 600;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: #cb1130 !important;
}

.site-header .btn-book {
    background: #cb1130;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.site-header .btn-book:hover {
    background: #a00e26;
    transform: scale(1.05);
}

/* Ensure body has padding for fixed header */
body {
    padding-top: 100px;
}

/* Mobile header fixes */
@media (max-width: 991px) {
    /* Ensure BOOK NOW button is completely hidden on mobile */
    .site-header .btn-book {
        display: none !important;
    }

    /* Prevent horizontal scrolling issues */
    .site-header .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Adjust header row spacing on mobile */
    .site-header .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Ensure header stays fixed properly when scrolling */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Reduce header padding on mobile for better space */
    .site-header .py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Ensure logo doesn't overflow */
    .site-header .header-logo {
        max-width: 100px;
    }

    .site-header .header-logo img {
        max-width: 100%;
        height: auto;
    }
}

/* ========================================== */
/* FIX 3: Terms and Conditions - Fix first title on mobile */
/* ========================================== */
@media (max-width: 991px) {
    /* Fix page header title spacing and alignment */
    .page-header .col-md-12.align-self-center.p-static {
        padding: 20px 15px !important;
        margin-bottom: 15px;
    }

    .page-header .col-md-12.align-self-center h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        word-wrap: break-word;
    }

    /* Ensure breadcrumb appears properly */
    .page-header .breadcrumb {
        margin-bottom: 15px !important;
        padding: 10px 0 !important;
    }

    /* Fix main title spacing */
    .text-15 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }
}