/* Add these to your responsive.css */

/* Mobile-first responsive design */
@media (max-width: 768px) {
    /* Header adjustments for mobile */
    .navbar {
        flex-wrap: wrap;
        padding: 10px 0;
        justify-content: space-between;
    }
    
    .logo {
        flex: 0 0 auto;
    }
    
    .mobile-menu-btn {
        display: block;
        order: 2;
        flex: 0 0 auto;
    }
    
    .nav-links {
        display: none;
        width: 100%;
        order: 3;
        margin-top: 15px;
        flex-direction: column;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    
    /* Search bar mobile adjustments */
    .search-container {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        margin: 15px 0 0 0;
    }
    
    /* Hero section mobile */
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    /* Destination cards mobile */
    .destinations-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .destination-card {
        margin: 0 10px;
    }
    
    /* Map mobile */
    #map {
        height: 300px;
        margin: 0 -15px;
        border-radius: 0;
    }
    
    /* Booking wizard mobile */
    .booking-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .wizard-steps {
        flex-wrap: wrap;
    }
    
    .step {
        flex: 0 0 50%;
        padding: 10px;
        font-size: 0.9rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .preference-options {
        grid-template-columns: 1fr;
    }
    
    /* Quiz mobile */
    .quiz-container {
        padding: 1.5rem;
    }
    
    /* Tourist features mobile */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Footer mobile */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-column h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Modal mobile */
    .modal-content {
        width: 95%;
        margin: 20px auto;
        padding: 1.5rem;
    }
    
    /* SOS button mobile */
    .sos-button {
        bottom: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    /* Extra small devices */
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .card-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .card-actions .btn {
        width: 100%;
    }
    
    /* Hide logo text on very small screens */
    .logo-text {
        font-size: 1rem;
    }
    
    /* Adjust wizard steps for perfect vertical alignment */
    .step {
        flex: 0 0 100%;
        justify-content: flex-start;
        padding-left: 30%;
    }
    
    /* Reduce section padding */
    .section {
        padding: 3rem 0;
    }
}

/* Tablet devices */
@media (min-width: 769px) and (max-width: 1024px) {
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .booking-container {
        grid-template-columns: 1fr;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .search-container {
        max-width: 300px;
    }
}

/* Landscape mode for mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: 100vh;
        min-height: 400px;
    }
    
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Prevent zoom on input focus for mobile */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Touch-friendly buttons */
@media (hover: none) and (pointer: coarse) {
    .btn, button, .option, .destination-option {
        min-height: 44px; /* Minimum touch target size */
        padding: 12px 24px;
    }
    
    .nav-links a {
        padding: 12px 0;
        display: block;
    }
    
    .card-actions .btn {
        min-height: 40px;
    }
}