/* Mobile Responsive Optimizations for Contact Us Page */

/* Mobile-first approach - optimizations for contact-us.php */

/* Base mobile styles */
@media (max-width: 768px) {
    /* Header optimizations - hide top info bar */
    .top-info-bar {
        display: none !important;
    }
    
    .main-navigation {
        padding: 0.75rem 0 !important;
    }
    
    /* Brand logo optimization */
    .brand-enhanced .logo-horizontal {
        max-height: 45px !important;
        max-width: 200px !important;
    }
    
    /* Mobile navigation improvements */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98) !important;
        border-radius: 16px !important;
        margin-top: 15px !important;
        padding: 20px !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
    }
    
    .navbar-nav .nav-link.nav-enhanced {
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(229, 231, 235, 0.3) !important;
        border-radius: 8px !important;
        margin: 0 0 0.5rem 0 !important;
        text-align: center !important;
    }
    
    .header-actions {
        margin-top: 20px;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .header-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    /* Contact Section Mobile */
    .contact-section {
        padding: 30px 0 40px !important;
        min-height: auto !important;
    }
    
    .contact-page-title {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
        line-height: 1.2 !important;
    }
    
    .contact-page-subtitle {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
        padding: 0 10px !important;
    }
    
    /* Contact Form Container Mobile */
    .contact-form-container {
        padding: 24px !important;
        margin-bottom: 24px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }
    
    .contact-form-header h3 {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }
    
    .contact-form-header p {
        font-size: 0.9rem !important;
        text-align: center !important;
        color: var(--text-muted) !important;
        margin-bottom: 0 !important;
    }
    
    /* Form Elements Mobile */
    .form-group-compact {
        margin-bottom: 1.5rem !important;
    }
    
    .form-label-compact {
        font-size: 1rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
        color: var(--text-color) !important;
    }
    
    .form-control-compact {
        padding: 14px 16px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border-radius: 12px !important;
        border: 2px solid var(--border-color) !important;
        min-height: 48px !important; /* Better touch target */
        box-sizing: border-box !important;
    }
    
    .form-control-compact:focus {
        border-color: var(--secondary-color) !important;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
        outline: none !important;
    }
    
    textarea.form-control-compact {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    .form-check {
        margin: 1rem 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .form-check-input {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        cursor: pointer !important;
    }
    
    .form-check-label-compact {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        cursor: pointer !important;
        margin: 0 !important;
    }
    
    .btn-submit-compact {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        min-height: 52px !important;
        margin-top: 1.5rem !important;
        touch-action: manipulation !important;
        border: none !important;
        background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)) !important;
        color: white !important;
        transition: all 0.3s ease !important;
    }
    
    .btn-submit-compact:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3) !important;
    }
    
    .btn-submit-compact:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2) !important;
    }
    
    /* Contact Info Sidebar Mobile */
    .contact-info-sidebar {
        padding: 24px !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        margin-bottom: 24px !important;
    }
    
    .contact-info-header {
        text-align: center !important;
        margin-bottom: 24px !important;
        padding-bottom: 20px !important;
    }
    
    .contact-info-header h3 {
        font-size: 1.3rem !important;
        margin-bottom: 8px !important;
    }
    
    .contact-info-header p {
        font-size: 0.9rem !important;
        margin-bottom: 0 !important;
    }
    
    .contact-info-items {
        margin-bottom: 24px !important;
    }
    
    .contact-info-item {
        padding: 16px !important;
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        background: var(--light-bg) !important;
        display: flex !important;
        align-items: flex-start !important;
        transition: all 0.3s ease !important;
    }
    
    .contact-info-item:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    }
    
    .contact-info-icon-compact {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        font-size: 1.2rem !important;
        margin-right: 16px !important;
        flex-shrink: 0 !important;
        background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)) !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .contact-info-content h4 {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin-bottom: 4px !important;
        color: var(--text-color) !important;
    }
    
    .contact-info-content p {
        font-size: 0.9rem !important;
        color: var(--text-muted) !important;
        margin-bottom: 4px !important;
        line-height: 1.4 !important;
    }
    
    .contact-info-content a {
        color: var(--secondary-color) !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        text-decoration: none !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        transition: all 0.2s ease !important;
    }
    
    .contact-info-content a:hover {
        background: rgba(14, 165, 233, 0.1) !important;
        text-decoration: none !important;
    }
    
    /* Contact Social Mobile */
    .contact-social {
        text-align: center !important;
        padding-top: 20px !important;
        border-top: 2px solid var(--light-bg) !important;
        margin-top: 20px !important;
    }
    
    .contact-social h4 {
        font-size: 1.1rem !important;
        margin-bottom: 16px !important;
        color: var(--text-color) !important;
    }
    
    .social-links-compact {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    
    .social-link-compact {
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--light-bg) !important;
        color: var(--text-muted) !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        font-size: 1.1rem !important;
    }
    
    .social-link-compact:hover {
        background: var(--secondary-color) !important;
        color: white !important;
        transform: translateY(-2px) !important;
        text-decoration: none !important;
    }
    
    /* Success Message Mobile */
    .alert-success {
        padding: 20px !important;
        border-radius: 12px !important;
        margin-bottom: 24px !important;
        font-size: 0.95rem !important;
        text-align: center !important;
    }
    
    .alert-success i {
        font-size: 1.2rem !important;
        margin-right: 8px !important;
    }
    
    /* Footer mobile optimizations */
    .modern-login-footer {
        margin-top: 40px !important;
    }
    
    .footer-main {
        padding: 40px 0 30px !important;
        text-align: center !important;
    }
    
    .footer-section {
        margin-bottom: 30px !important;
    }
    
    .footer-title {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-links {
        text-align: center !important;
    }
    
    .footer-contact {
        text-align: center !important;
    }
    
    .contact-item {
        justify-content: center !important;
        margin-bottom: 0.75rem !important;
    }
    
    .social-links-footer {
        justify-content: center !important;
        margin-top: 16px !important;
    }
    
    .footer-bottom {
        text-align: center !important;
        padding: 20px 0 !important;
    }
    
    .footer-legal {
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin-top: 12px !important;
    }
    
    .trust-badges {
        justify-content: center !important;
        flex-wrap: wrap !important;
        padding: 16px 0 !important;
    }
    
    .trust-badge {
        margin: 4px !important;
        font-size: 0.8rem !important;
    }
}

/* Small mobile devices (576px and below) */
@media (max-width: 576px) {
    /* Even more compact for small screens */
    .brand-enhanced .logo-horizontal {
        max-height: 40px !important;
        max-width: 180px !important;
    }
    
    .contact-section {
        padding: 20px 0 30px !important;
    }
    
    .contact-page-title {
        font-size: 1.8rem !important;
        margin-bottom: 10px !important;
    }
    
    .contact-page-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 24px !important;
    }
    
    .contact-form-container,
    .contact-info-sidebar {
        padding: 20px !important;
        margin-bottom: 20px !important;
        border-radius: 12px !important;
    }
    
    .contact-form-header h3,
    .contact-info-header h3 {
        font-size: 1.2rem !important;
    }
    
    .form-control-compact {
        padding: 12px 14px !important;
        min-height: 46px !important;
    }
    
    textarea.form-control-compact {
        min-height: 100px !important;
    }
    
    .btn-submit-compact {
        padding: 14px 20px !important;
        font-size: 1rem !important;
        min-height: 48px !important;
    }
    
    .contact-info-item {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }
    
    .contact-info-icon-compact {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
        margin-right: 14px !important;
    }
    
    .contact-info-content h4 {
        font-size: 1rem !important;
    }
    
    .contact-info-content p,
    .contact-info-content a {
        font-size: 0.85rem !important;
    }
    
    .social-link-compact {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
    
    /* Extra small adjustments */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .navbar-collapse {
        padding: 16px !important;
        margin-top: 12px !important;
    }
    
    .footer-main {
        padding: 32px 0 24px !important;
    }
}

/* Very small mobile devices (375px and below) */
@media (max-width: 375px) {
    .brand-enhanced .logo-horizontal {
        max-height: 36px !important;
        max-width: 160px !important;
    }
    
    .contact-page-title {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }
    
    .contact-form-container,
    .contact-info-sidebar {
        padding: 18px !important;
    }
    
    .form-group-compact {
        margin-bottom: 1.25rem !important;
    }
    
    .form-control-compact {
        padding: 11px 12px !important;
        min-height: 44px !important;
    }
    
    .btn-submit-compact {
        padding: 13px 18px !important;
        font-size: 0.95rem !important;
        min-height: 46px !important;
    }
    
    .contact-info-item {
        padding: 12px !important;
    }
    
    .contact-info-icon-compact {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
        margin-right: 12px !important;
    }
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .contact-section {
        padding: 20px 0 30px !important;
    }
    
    .contact-page-title {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }
    
    .contact-page-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
    }
    
    .contact-form-container,
    .contact-info-sidebar {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }
    
    .form-group-compact {
        margin-bottom: 1.25rem !important;
    }
    
    textarea.form-control-compact {
        min-height: 100px !important;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Smoother animations for mobile */
    * {
        animation-duration: 0.8s !important;
        transition-duration: 0.5s !important;
    }
    
    .contact-form-container,
    .contact-info-sidebar,
    .contact-info-item,
    .social-link-compact,
    .btn-submit-compact {
        transition: all 0.4s ease !important;
    }
    
    /* Simpler shadows for better performance */
    .contact-form-container,
    .contact-info-sidebar {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    }
    
    .contact-info-item:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    }
    
    .btn-submit-compact:hover {
        box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25) !important;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Better touch targets */
    .navbar-nav .nav-link,
    .header-actions .btn,
    .social-links-footer .social-link,
    .social-link-compact,
    .btn-submit-compact,
    .form-check-input {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .navbar-nav .nav-link,
    .header-actions .btn,
    .social-links-footer .social-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Better contrast for mobile */
    .contact-form-header h3,
    .contact-info-header h3,
    .contact-info-content h4 {
        color: #1F2937 !important;
    }
    
    .contact-page-subtitle,
    .contact-info-content p {
        color: #4B5563 !important;
    }
    
    /* Focus states for better accessibility */
    .form-control-compact:focus,
    .btn-submit-compact:focus {
        outline: 2px solid #0EA5E9 !important;
        outline-offset: 2px !important;
    }
}

/* Hide complex animations on very slow devices */
@media (max-width: 576px) and (prefers-reduced-motion: reduce) {
    .contact-form-container,
    .contact-info-sidebar,
    .contact-info-item,
    .social-link-compact,
    .btn-submit-compact,
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Form validation mobile styles */
@media (max-width: 768px) {
    .form-control-compact.is-invalid {
        border-color: var(--danger-color) !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
    }
    
    .form-control-compact.is-valid {
        border-color: var(--success-color) !important;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    }
    
    .invalid-feedback,
    .valid-feedback {
        font-size: 0.85rem !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem !important;
        border-radius: 6px !important;
    }
    
    .invalid-feedback {
        background: rgba(239, 68, 68, 0.1) !important;
        color: var(--danger-color) !important;
    }
    
    .valid-feedback {
        background: rgba(16, 185, 129, 0.1) !important;
        color: var(--success-color) !important;
    }
}