/* Mobile-specific CSS for Sovedel Reality */

/* Global mobile styles */
@media (max-width: 768px) {
    /* Body adjustments */
    body {
        padding-bottom: env(safe-area-inset-bottom);
        overflow-x: hidden;
    }
    
    /* Container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Typography scaling */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    /* Touch-friendly buttons */
    button, 
    a.button,
    .btn,
    [type="submit"],
    [type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Prevent zoom on input focus (iOS) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* Navigation improvements */
    nav {
        padding: 0.75rem 1rem;
    }
    
    /* Mobile menu container */
    #mobile-menu {
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Property cards */
    .property-card {
        margin-bottom: 1rem;
    }
    
    .property-card img {
        height: 200px;
        object-fit: cover;
    }
    
    /* Search form */
    .search-form {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .search-form input,
    .search-form select {
        width: 100%;
    }
    
    /* Footer */
    footer {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    footer .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Modal improvements */
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    
    /* Tables - make responsive */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Hero section */
    .hero-section {
        min-height: 60vh;
        padding: 2rem 1rem;
    }
    
    .hero-section h1 {
        font-size: 1.75rem !important;
    }
    
    /* Grid adjustments */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    .md\\:grid-cols-2,
    .md\\:grid-cols-3,
    .md\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Flex wrapping */
    .flex-row {
        flex-direction: column;
    }
    
    /* Spacing adjustments */
    .space-x-4 > * + *,
    .space-x-6 > * + *,
    .space-x-8 > * + * {
        margin-left: 0;
        margin-top: 0.75rem;
    }
    
    /* Profile page */
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-avatar {
        width: 80px;
        height: 80px;
        margin: 0 auto 1rem;
    }
    
    /* Quick actions grid */
    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .quick-actions-grid > * {
        padding: 1rem;
    }
    
    /* Property detail page */
    .property-hero {
        height: 40vh;
        min-height: 250px;
    }
    
    .property-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .property-info-card {
        padding: 1rem;
    }
    
    /* Contact page */
    .contact-cards {
        grid-template-columns: 1fr;
    }
    
    /* Forms */
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Badges */
    .badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Image galleries */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    /* Language dropdown */
    #lang-dropdown {
        right: 0;
        min-width: 140px;
    }
    
    /* User menu */
    #user-menu-dropdown {
        right: 0;
        min-width: 180px;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    .hero-section {
        min-height: 50vh;
    }
    
    .hero-section h1 {
        font-size: 1.5rem !important;
    }
    
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Smaller cards on very small screens */
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
    
    /* Property cards - full width */
    .property-card {
        margin: 0 -0.75rem 1rem;
        border-radius: 0;
    }
    
    /* Buttons - full width */
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .hero-section h1 {
        font-size: 2.5rem !important;
    }
    
    .property-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* iOS safe area insets */
@supports (padding-top: env(safe-area-inset-top)) {
    nav {
        padding-top: calc(0.75rem + env(safe-area-inset-top));
    }
    
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .modal-content {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}

/* Prevent double-tap zoom */
* {
    touch-action: manipulation;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Mobile menu animation */
#mobile-menu.open {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode mobile styles */
@media (max-width: 768px) {
    .dark-theme nav {
        background-color: rgb(17, 24, 39);
    }
    
    .dark-theme #mobile-menu {
        background-color: rgb(17, 24, 39);
    }
    
    .dark-theme .property-card {
        background-color: rgb(31, 41, 55);
    }
    
    .dark-theme footer {
        background-color: rgb(17, 24, 39);
    }
}

/* Orientation changes */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        min-height: 80vh;
    }
    
    nav {
        padding: 0.5rem 1rem;
    }
}

/* Print styles for mobile */
@media print {
    nav,
    footer,
    #mobile-menu,
    .btn {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
}