/* Mobile Responsive CSS for Vethagama Nanban Website */

/* Base mobile styles */
@media (max-width: 768px) {
    /* Prevent horizontal scrolling */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Container adjustments */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    .max-w-4xl, .max-w-7xl {
        max-width: 100% !important;
        padding: 0 0.75rem !important;
    }
    
    /* Grid layout fixes */
    .grid {
        gap: 1rem !important;
    }
    
    /* Force single column on mobile for complex grids */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    .md\:grid-cols-2, .md\:grid-cols-3, .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Form elements */
    input, select, textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.75rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Button adjustments */
    button, .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Flex layouts */
    .flex {
        flex-wrap: wrap !important;
    }
    
    .justify-between {
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    
    .space-x-4 > * + * {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }
    
    /* Typography */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    /* Navigation fixes */
    .nav-container {
        padding: 0 1rem !important;
    }
    
    /* Card and content spacing */
    .card, .bg-white {
        margin: 0.5rem !important;
        padding: 1rem !important;
    }
    
    /* Image responsiveness */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Table responsiveness */
    table {
        font-size: 0.8rem !important;
    }
    
    th, td {
        padding: 0.5rem !important;
    }
    
    /* Modal and popup adjustments */
    .modal, .popup {
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
    }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
    /* Even tighter spacing */
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Smaller text */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    /* Smaller buttons */
    button, .btn {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Tighter card spacing */
    .card, .bg-white {
        margin: 0.25rem !important;
        padding: 0.75rem !important;
    }
    
    /* Smaller form elements */
    input, select, textarea {
        padding: 0.6rem !important;
        font-size: 16px !important;
    }
}

/* Course registration specific fixes */
@media (max-width: 768px) {
    .step-indicator {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    
    .step-line {
        margin: 0 8px !important;
    }
    
    .mode-option {
        padding: 16px !important;
        margin-bottom: 1rem !important;
    }
    
    .summary-card {
        padding: 16px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Force grid layouts to single column */
    div[style*="grid-template-columns"] {
        display: block !important;
    }
    
    div[style*="grid-template-columns"] > div {
        margin-bottom: 1rem !important;
    }
    
    /* Fix button layouts */
    div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
    
    div[style*="justify-content: flex-end"] {
        justify-content: center !important;
    }
}

/* Store product list fixes */
@media (max-width: 768px) {
    .product-image {
        width: 100% !important;
        height: 200px !important;
        max-width: 200px !important;
        margin: 0 auto 0.5rem auto !important;
    }
    
    .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3 {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .product-image {
        height: 180px !important;
        max-width: 180px !important;
    }
    
    .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Gallery and image grid fixes */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 0.5rem !important;
    }
    
    .gallery-item {
        margin-bottom: 0.5rem !important;
    }
}

/* Publication slider fixes */
@media (max-width: 768px) {
    .publication-card {
        width: 200px !important;
        margin: 0 0.5rem !important;
    }
    
    .publications-container {
        padding: 0 1rem !important;
    }
}

/* Contact form fixes */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .contact-form {
        order: 2 !important;
    }
    
    .contact-info {
        order: 1 !important;
    }
}

/* Footer fixes */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }
    
    .footer-links {
        justify-content: center !important;
    }
}

/* Staff dashboard fixes */
@media (max-width: 768px) {
    .staff-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
    }
    
    .staff-sidebar.open {
        transform: translateX(0) !important;
    }
    
    .staff-content {
        margin-left: 0 !important;
        padding: 1rem !important;
    }
}

/* Utility classes for mobile */
.mobile-hidden {
    display: none !important;
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
}

/* Fix for address auto-showing issue mentioned by user */
@media (max-width: 768px) {
    input[type="text"][name*="address"],
    input[type="text"][name*="place"],
    input[type="text"][name*="location"] {
        autocomplete: off !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Prevent browser autofill suggestions on mobile */
    input::-webkit-contacts-auto-fill-button {
        visibility: hidden !important;
        display: none !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
    }
}