/* MOBILE RESPONSIVE FIXES FOR SUNSEA GLOBAL ESTATES */
/* Add this to the end of your existing CSS or as a separate file */

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Base Mobile Adjustments */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Header Adjustments */
    .top-bar {
        padding: 8px 0;
    }

    .top-bar-inner {
        flex-direction: column;
        gap: 10px;
        padding: 0 15px;
    }

    .top-bar-list {
        font-size: 0.85rem;
        justify-content: center;
    }

    .top-bar-list li {
        margin: 0 8px;
    }

    /* Hide social media icons on mobile in top bar */
    .top-bar-list li[style*="border-left"] {
        display: none;
    }

    /* Logo Size */
    .header-logo img {
        height: 50px !important;
    }

    /* Navigation Menu */
    .header-menu-wrap nav ul {
        flex-direction: column;
        gap: 15px !important;
        padding: 20px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }

    .header-menu-wrap nav ul li a {
        font-size: 1rem;
        padding: 8px 15px;
        display: block;
    }

    /* 24/7 Banner */
    div[style*="position: fixed"] {
        font-size: 0.8rem !important;
        padding: 10px 15px !important;
    }

    /* Hero Section */
    .premium-hero {
        height: auto !important;
        min-height: 100vh;
        padding: 120px 0 60px;
    }

    .hero-content-premium {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 20px !important;
    }

    .hero-title {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.1rem !important;
    }

    .hero-description {
        font-size: 1rem !important;
    }

    /* Hero Buttons */
    .hero-buttons {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 18px 30px !important;
        font-size: 1rem !important;
    }

    /* Hero Stats */
    .hero-stats {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .stat-item {
        padding: 20px !important;
    }

    .stat-number {
        font-size: 2rem !important;
    }

    /* Hero Image/Visual */
    .hero-visual-premium {
        display: none; /* Hide on mobile to save space */
    }

    /* Floating Shapes - Reduce on mobile */
    .shape {
        width: 200px !important;
        height: 200px !important;
        filter: blur(40px);
    }

    /* Services Section */
    .services-grid-premium {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px;
    }

    .service-card-premium {
        padding: 30px 20px !important;
    }

    .service-icon-premium {
        width: 70px !important;
        height: 70px !important;
        font-size: 2rem !important;
    }

    .service-card-premium h3 {
        font-size: 1.5rem !important;
    }

    /* Trust Section */
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px;
    }

    .trust-item {
        padding: 25px 20px !important;
    }

    /* Free Consultation Section */
    .consultation-benefits {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 15px;
    }

    .benefit-card {
        padding: 25px 20px !important;
    }

    .benefit-icon {
        width: 70px !important;
        height: 70px !important;
        font-size: 2rem !important;
    }

    /* CTA Buttons in Consultation */
    .consultation-actions {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .consultation-actions .btn-primary,
    .consultation-actions .btn-secondary {
        width: 100%;
    }

    /* Premium CTA Section */
    .premium-cta {
        padding: 50px 20px !important;
        margin: 40px 15px !important;
        border-radius: 20px !important;
    }

    .premium-cta h3 {
        font-size: 2rem !important;
    }

    .premium-cta p {
        font-size: 1.1rem !important;
    }

    /* Footer */
    footer {
        padding: 40px 15px !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .footer-section h3 {
        font-size: 1.3rem !important;
    }

    /* Service Detail Pages */
    .service-hero-premium {
        padding: 120px 20px 60px !important;
    }

    .service-hero-content h1 {
        font-size: 2.5rem !important;
    }

    .service-hero-content p {
        font-size: 1.1rem !important;
    }

    .service-detail {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        padding: 30px 20px !important;
        margin: 0 15px 30px !important;
    }

    .service-detail img {
        height: 250px !important;
    }

    .service-detail h4 {
        font-size: 1.5rem !important;
    }

    /* Section Headings */
    .section-heading h2 {
        font-size: 2.5rem !important;
    }

    .section-heading p {
        font-size: 1.1rem !important;
    }

    /* Padding Adjustments */
    .services-section,
    section {
        padding: 60px 0 !important;
    }

    /* Image Containers */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Text Alignment on Mobile */
    .hero-text-premium,
    .service-hero-content {
        text-align: center;
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
}

/* Tablet Adjustments (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-content-premium {
        grid-template-columns: 1fr !important;
        padding: 0 40px !important;
    }

    .hero-title {
        font-size: 3.5rem !important;
    }

    .services-grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .service-detail {
        grid-template-columns: 1fr !important;
        padding: 40px !important;
    }

    .consultation-benefits {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Small Mobile Devices (max-width: 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important;
    }

    .hero-badge {
        font-size: 0.75rem !important;
        padding: 8px 20px !important;
    }

    .btn-primary, .btn-secondary {
        padding: 15px 25px !important;
        font-size: 0.9rem !important;
    }

    .service-card-premium h3 {
        font-size: 1.3rem !important;
    }

    .section-heading h2 {
        font-size: 2rem !important;
    }

    .premium-cta h3 {
        font-size: 1.8rem !important;
    }

    /* Make phone numbers and emails more clickable */
    a[href^="tel"],
    a[href^="mailto"] {
        font-size: 1.1rem;
        padding: 10px;
        display: inline-block;
    }
}

/* Landscape Mobile (max-height: 500px) */
@media (max-height: 500px) and (orientation: landscape) {
    .premium-hero {
        height: auto !important;
        padding: 100px 0 40px;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Fix for Fixed Elements on Mobile */
@media (max-width: 768px) {
    /* Ensure fixed header doesn't overlap content */
    body {
        padding-top: 40px;
    }

    /* Adjust chat button position for mobile */
    #chat-button {
        bottom: 20px !important;
        right: 20px !important;
        width: 60px !important;
        height: 60px !important;
        font-size: 1.4rem !important;
    }

    /* Full screen chat on mobile */
    #chat-window {
        bottom: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap target sizes */
    button,
    a,
    .btn-primary,
    .btn-secondary,
    .quick-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .service-card-premium:hover,
    .trust-item:hover {
        transform: none;
    }
}

/* Accessibility - High Contrast */
@media (prefers-contrast: high) {
    .hero-title,
    .section-heading h2 {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    }

    button,
    .btn-primary,
    .btn-secondary {
        border: 2px solid currentColor;
    }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .floating-shapes,
    .animated-bg,
    .shape {
        animation: none !important;
    }
}

/* Print Styles */
@media print {
    header,
    footer,
    #chat-button,
    #chat-window,
    .floating-shapes,
    .animated-bg {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    .premium-hero,
    section {
        page-break-inside: avoid;
    }
}