/* Global mobile optimization layer (safe overrides) */

:root {
    --mobile-safe-space: 12px;
}

* {
    -webkit-tap-highlight-color: transparent;
}

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

body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

.btn,
.btn-form,
.btn-secondary,
.nav-link,
.btn-cart,
button,
a[role="button"] {
    min-height: 44px;
}

input,
textarea,
select,
.form-control {
    font-size: 16px;
}

@media (max-width: 1024px) {
    .container {
        padding-left: var(--mobile-safe-space) !important;
        padding-right: var(--mobile-safe-space) !important;
        box-sizing: border-box;
    }

    .page-container {
        margin-top: 92px !important;
    }

    .products-grid,
    .categories-grid,
    .services-grid,
    .footer-content,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .product-card,
    .card,
    .form-container,
    .admin-container {
        width: 100% !important;
        box-sizing: border-box;
    }

    .form-container {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 560px !important;
    }

    .admin-container {
        margin-top: 96px !important;
        padding: 14px !important;
    }

    .admin-actions,
    .admin-nav {
        width: 100% !important;
    }

    .admin-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .admin-table-container,
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 680px;
    }

    .admin-table th,
    .admin-table td {
        white-space: nowrap;
    }

    .admin-container .btn,
    .admin-actions .btn,
    .admin-actions .btn-secondary {
        min-height: 42px;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 42px 0 !important;
    }

    .hero {
        padding: 56px 0 !important;
    }

    .hero h1 {
        font-size: clamp(1.5rem, 6vw, 2.1rem) !important;
        line-height: 1.2 !important;
    }

    .hero p {
        font-size: clamp(0.95rem, 3.6vw, 1.1rem) !important;
        line-height: 1.45 !important;
    }

    .section-title {
        font-size: clamp(1.3rem, 5vw, 1.9rem) !important;
        line-height: 1.25 !important;
    }

    .admin-container,
    .form-container {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .admin-header,
    .products-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .admin-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .admin-actions .btn,
    .admin-actions .btn-secondary {
        width: 100% !important;
        text-align: center !important;
    }

    .admin-nav {
        display: flex !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    .admin-nav a {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 40px;
    }

    .admin-container [style*="position: sticky"],
    .cart-container [style*="position: sticky"] {
        position: static !important;
        top: auto !important;
    }

    .form-container,
    .admin-container,
    .card,
    .product-card {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    }

    .table-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .footer-content {
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    :root {
        --mobile-safe-space: 8px;
    }

    .page-container {
        margin-top: 84px !important;
    }

    .hero {
        padding: 46px 0 !important;
    }

    .btn,
    .btn-form,
    .btn-secondary,
    .btn-cart,
    .nav-link {
        min-height: 42px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    .admin-container {
        margin-top: 86px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .admin-header h1,
    .products-header h1,
    .form-title,
    h1 {
        font-size: clamp(1.1rem, 5.8vw, 1.5rem) !important;
        line-height: 1.25 !important;
    }

    .admin-table {
        min-width: 620px;
        font-size: 12px;
    }

    .admin-table th,
    .admin-table td {
        padding: 8px 10px !important;
    }

    .table-actions .btn,
    .btn,
    .btn-secondary,
    .btn-form {
        font-size: 13px !important;
    }
}