/* QA Fixes - 3M Holidays - FINAL MOBILE HEADER FIX */

/* 1. Header & Logo Mobile Fix */
@media (max-width: 560px) {
    /* Hide the annoying blue box generated by the original CSS */
    .site-header::after {
        display: none !important;
        content: none !important;
    }
    
    /* Force Header to be a flexible row */
    .nav-wrap {
        display: flex !important;
        flex-direction: row !important; /* Row layout */
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 70px !important;
        padding: 0 15px !important;
        direction: rtl !important; /* Right-to-Left */
    }

    /* Fix Brand/Logo container */
    .lux-brand {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 100 !important;
    }

    /* Logo Image size and behavior */
    .brand-logo-img {
        height: 50px !important;
        width: auto !important;
        max-width: 150px !important;
        display: block !important;
        position: static !important;
    }

    /* Language and Actions on the Left */
    .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-right: auto !important; /* Push to the left in RTL */
        padding-right: 0 !important;
    }

    /* Mobile Menu Button */
    .mobile-menu {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        order: 10 !important; /* Keep it on the far side */
    }
    
    /* Ensure the brand mark (if no image) is also fixed */
    .brand-mark, .lux-brand > span:not(.brand-copy) {
        display: inline-grid !important;
        position: static !important;
        width: 50px !important;
        height: 50px !important;
    }
}

/* 2. Footer & Social Links Fixes */
.social-links-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
}

.lux-footer .social-links {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 15px;
    border-radius: 50px;
    width: fit-content;
}

.lux-footer .social-links a {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    color: #fff !important;
}

.lux-footer .social-links a:hover {
    background: var(--lux-turquoise) !important;
    transform: translateY(-3px);
}

/* 3. Global Responsive Improvements */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .footer-brand-box, .social-links-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .cards-grid, .destination-grid {
        grid-template-columns: 1fr !important;
    }
}

body {
    overflow-x: hidden;
    width: 100%;
}

/* Mobile table scroll hint + safe overflow */
@media (max-width: 768px) {
    .hotel-pricing-table-wrapper,
    .table-responsive,
    .price-table-wrapper {
        position: relative !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 28px !important;
    }

    .hotel-pricing-table-wrapper::before,
    .table-responsive::before,
    .price-table-wrapper::before {
        content: "← اسحب لرؤية باقي الأسعار";
        position: absolute;
        top: 0;
        right: 8px;
        font-size: 12px;
        font-weight: 700;
        color: #6b7280;
        z-index: 5;
    }

    .hotel-pricing-table-wrapper::after,
    .table-responsive::after,
    .price-table-wrapper::after {
        content: "";
        position: absolute;
        top: 28px;
        left: 0;
        width: 34px;
        height: calc(100% - 28px);
        pointer-events: none;
        background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0));
        z-index: 4;
    }

    .hotel-pricing-table,
    .hotel-pricing-table table,
    .price-table-premium,
    .dv4-price-table-wrap table,
    table {
        min-width: 720px;
    }
}

/* 4. Detail Page Price Table Fix */
.dv4-price-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 15px;
    border-radius: 12px;
}

/* 5. Hotel Card Price Info Fix */
@media (max-width: 768px) {
    .card-feat-dot {
        max-width: none !important;
        white-space: normal !important;
        height: auto !important;
    }
    .card-feat-strip {
        gap: 8px !important;
    }
}