/* ==========================================================================
   MOBILE-FIRST RESPONSIVE — Richoosoft & OOSOFT
   Breakpoints: 1200 | 1024 | 768 | 480 | 360
   ========================================================================== */

/* --- Safe area (notched devices) --- */
@supports (padding: env(safe-area-inset-top)) {
    .announcement-bar {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--announcement-height) + env(safe-area-inset-top));
    }

    .site-header {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .mobile-drawer {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
        padding-right: calc(24px + env(safe-area-inset-right));
    }

    .whatsapp-float {
        bottom: calc(24px + env(safe-area-inset-bottom));
        right: calc(24px + env(safe-area-inset-right));
    }

    .back-to-top {
        bottom: calc(96px + env(safe-area-inset-bottom));
        right: calc(24px + env(safe-area-inset-right));
    }
}

/* --- Touch-friendly base --- */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
}

@media (hover: none) and (pointer: coarse) {
    .btn-gold, .btn-outline-gold, .btn-black, .btn-whatsapp, .btn-white,
    .nav-link, .drawer-link, .drawer-accordion-trigger,
    .faq-question, .color-option, .gallery-thumb, .swatch,
    .mobile-toggle, .drawer-close, .pagination a, .pagination span {
        min-height: 44px;
    }

    .product-card:hover { transform: none; }
    .catalogue-card:hover { transform: none; }
}

/* --- Prevent iOS input zoom --- */
@media (max-width: 768px) {
    .form-control, .filter-select, .newsletter-form input,
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* --- Announcement bar responsive text --- */
.announcement-short { display: none; }

@media (max-width: 768px) {
    :root {
        --announcement-height: 36px;
    }

    .announcement-full { display: none; }
    .announcement-short { display: inline; }
    .announcement-inner { font-size: 0.75rem; gap: 8px; }
    .announcement-link { white-space: nowrap; font-size: 0.72rem; }
}

@media (max-width: 360px) {
    .announcement-text i { display: none; }
}

/* --- 1200px --- */
@media (max-width: 1200px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-brand { grid-column: 1 / -1; }
    .nav-list { gap: 20px; }
}

/* --- 1024px — tablet / mobile nav switch --- */
@media (max-width: 1024px) {
    .main-nav { display: none; }
    .mobile-toggle { display: flex; }

    .hero-content { grid-template-columns: 1fr; gap: 40px; }
    .hero-brands { flex-direction: row; }
    .brand-card { flex: 1; }

    .product-detail-grid { grid-template-columns: 1fr; gap: 32px; }
    .product-gallery { position: static; }

    .form-grid { grid-template-columns: 1fr; gap: 40px; }

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

    .section-header { margin-bottom: 48px; }
}

@media (max-width: 768px) {
    :root {
        --header-height: 76px;
    }

    body {
        padding-top: calc(var(--header-height) + var(--announcement-height));
    }

    .logo-brand-img {
        height: 48px;
        max-width: 190px;
    }

    .logo-richoosoft { max-height: 48px; max-width: 180px; }
    .logo-oosoft { max-height: 44px; max-width: 135px; }

    /* logo-frame sizes handled in logos.css */

    .container { padding: 0 20px; }

    /* Header — mobile */
    .header-inner { gap: 8px; }

    .header-actions { gap: 8px; }
    .header-whatsapp span { display: none; }
    .header-whatsapp {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .mobile-toggle {
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border-radius: var(--radius-sm);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-toggle.active .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .mobile-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .mobile-toggle.active .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile drawer */
    .mobile-drawer {
        width: min(100%, 360px);
        padding: 20px;
        z-index: 2100;
    }

    .drawer-overlay {
        z-index: 2050;
        -webkit-tap-highlight-color: transparent;
    }

    /* Sections */
    section { padding: 56px 0; }

    .section-header { margin-bottom: 36px; }
    .section-header p { font-size: 1rem; }

    .page-header { padding: 40px 0; }
    .page-header h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); }
    .page-header p { font-size: 0.95rem; padding: 0 8px; }

    /* Hero */
    .hero { min-height: auto; }
    .hero-content { padding: 40px 0; gap: 32px; }
    .hero-text h1 { font-size: clamp(1.85rem, 7vw, 2.75rem); }
    .hero-text p { font-size: 1rem; margin-bottom: 28px; }
    .hero-stats { flex-wrap: wrap; gap: 20px; padding-top: 24px; }
    .stat-value { font-size: 1.6rem; }
    .hero-brands { flex-direction: column; }
    .brand-card { padding: 24px; }

    .hero-trust-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .product-swatches.magic-swatches {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
        max-width: 100%;
    }

    .magic-swatches .magic-swatch {
        flex-shrink: 0;
        scroll-snap-align: start;
        min-width: 32px;
        min-height: 32px;
    }

    .footer-logos .logo-frame--richoosoft,
    .footer-logos .logo-frame--oosoft {
        height: 48px;
        width: 156px;
    }

    html, body { overflow-x: hidden; max-width: 100vw; }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .category-card { height: 200px; }

    .process-grid,
    .features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .catalogue-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Product detail */
    .product-detail { padding: 24px 0 56px; }
    .breadcrumb { font-size: 0.78rem; margin-bottom: 20px; }

    .product-detail-info h1 { font-size: 1.5rem; }

    .detail-meta {
        flex-wrap: wrap;
        gap: 16px;
    }

    .detail-meta-item {
        flex: 0 0 calc(50% - 8px);
    }

    .color-options {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
        gap: 10px;
    }

    .color-option {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .gallery-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
    }

    .gallery-thumb {
        flex-shrink: 0;
        scroll-snap-align: start;
        width: 64px;
        height: 64px;
    }

    .detail-actions { flex-direction: column; }
    .detail-actions .btn-gold,
    .detail-actions .btn-outline-gold,
    .detail-actions .btn-whatsapp {
        width: 100%;
        min-height: 48px;
    }

    /* Filters */
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px 0;
    }

    .search-box { min-width: 0; }
    .filter-select { width: 100%; min-height: 48px; }

    /* Forms */
    .form-section { padding: 48px 0; }
    .form-row { grid-template-columns: 1fr; }
    .form-card { padding: 24px 20px; }

    .form-grid { gap: 32px; }

    /* Testimonials — horizontal scroll */
    .testimonials-slider {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 16px;
        margin: 0 -20px;
        padding: 0 20px 16px;
    }

    .testimonial-card {
        flex: 0 0 min(85%, 320px);
        scroll-snap-align: center;
        padding: 28px 24px;
    }

    /* Countries */
    .countries-grid { gap: 8px; }
    .country-tag { padding: 8px 14px; font-size: 0.8rem; }

    /* CTA */
    .cta-section { padding: 56px 0; }
    .cta-actions { flex-direction: column; width: 100%; max-width: 360px; margin: 0 auto; }
    .cta-actions a { width: 100%; min-height: 48px; }

    /* Pagination */
    .pagination { flex-wrap: wrap; gap: 6px; }
    .pagination a, .pagination span {
        width: 44px;
        height: 44px;
    }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 56px 0 32px; }
    .footer-newsletter { padding: 24px 0; }
    .newsletter-inner { flex-direction: column; text-align: center; gap: 20px; }
    .newsletter-form { flex-direction: column; max-width: 100%; width: 100%; }
    .newsletter-form input,
    .newsletter-form button { width: 100%; min-height: 48px; }
    .trust-strip-inner { gap: 16px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
    .trust-item { flex-shrink: 0; font-size: 0.75rem; }
    .footer-legal { flex-wrap: wrap; justify-content: center; }
    .footer-map iframe { height: 200px; }

    /* Floating buttons */
    .whatsapp-float {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
        bottom: 20px;
        right: 20px;
    }

    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 84px;
        right: 20px;
        font-size: 0.9rem;
    }

    /* Zoom modal */
    .zoom-modal { padding: 16px; }
    .zoom-close {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
    }

    /* Legal */
    .legal-content { padding: 40px 20px; }

    /* Error page */
    .error-page { padding: 80px 20px; }
    .error-page h1 { font-size: clamp(4rem, 20vw, 8rem); }

    /* Product cards */
    .product-actions { flex-direction: column; }
    .product-actions .btn-gold,
    .product-actions .btn-outline-gold {
        width: 100%;
        min-height: 44px;
    }

    .product-image { height: 240px; }

    /* FAQ */
    .faq-question { padding: 16px 20px; font-size: 0.95rem; }
    .faq-answer-inner { padding: 0 20px 16px; font-size: 0.9rem; }

    /* Admin dashboard inline grid on homepage - N/A */
    .admin-card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- 480px — small phones --- */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    .hero-actions { flex-direction: column; }
    .hero-actions a { width: 100%; min-height: 48px; }

    .category-grid { grid-template-columns: 1fr; }
    .category-card { height: 180px; }

    .component-metrics-grid {
        flex-direction: column;
    }

    .detail-meta-item { flex: 0 0 100%; }

    .catalogue-download-btn {
        min-width: 0;
        width: 100%;
    }

    .drawer-cta .btn-block { min-height: 48px; }

    .stats-mini-grid { grid-template-columns: 1fr; }
}

/* --- 360px — very small phones --- */
@media (max-width: 360px) {
    .logo-divider { display: none; }
    .logo-dual { gap: 6px; }

    .stat-item { flex: 0 0 calc(50% - 10px); }
}

/* --- Landscape phones --- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { min-height: auto; }
    .hero-content { padding: 32px 0; }
    .mobile-drawer { padding-top: 12px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}