/* ═══════════════════════════════════════════════════════════════
   2N DIAMONDS — GLOBAL MOBILE FRAMEWORK
   mobile.css v2.0 — March 25, 2026
   
   UNIVERSAL rules ONLY. No page-specific overrides.
   Each page handles its own responsive layout internally.
   
   This file provides:
   1. Overflow prevention
   2. Touch target minimums
   3. iOS zoom prevention on inputs
   4. Safe area insets (iPhone X+)
   5. Scrollbar hiding for horizontal scroll containers
   6. Print cleanup
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1. UNIVERSAL OVERFLOW PREVENTION ═══ */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
*, *::before, *::after {
    box-sizing: border-box;
}
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ═══ 2. TOUCH TARGET MINIMUMS (44px) ═══ */
@media (max-width: 768px) {
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
    }
}

/* ═══ 3. iOS ZOOM PREVENTION ═══ */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], textarea, select {
        font-size: 16px;
    }
}

/* ═══ 4. SAFE AREA INSETS (iPhone X+ notch) ═══ */
@supports (padding: env(safe-area-inset-bottom)) {
    .site-ftr, footer {
        padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }
}

/* ═══ 5. SCROLLBAR HIDING FOR HORIZONTAL SCROLL ═══ */
@media (max-width: 768px) {
    .shape-grid, .os-prog, .cat-grid {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .shape-grid::-webkit-scrollbar,
    .os-prog::-webkit-scrollbar,
    .cat-grid::-webkit-scrollbar {
        display: none;
    }
}

/* ═══ 6. LANDSCAPE PHONE ═══ */
@media (max-height: 500px) and (orientation: landscape) {
    .preloader {
        display: none;
    }
}

/* ═══ 7. PRINT ═══ */
@media print {
    .site-hdr, .site-ftr, .floating-top, .hdr-mob-toggle,
    .mob-overlay, .sticky-cta, .preloader {
        display: none;
    }
}