/* ============================================
   IT-MIXX B2B — Responsive Styles
   ============================================ */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
    :root {
        --container-padding: 20px;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .hero-visual {
        display: none;
    }

    .hero-content {
        max-width: 100%;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }

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

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

    .category-card-featured {
        grid-column: span 2;
        grid-row: span 1;
        min-height: 200px;
    }

    .catalog-layout {
        grid-template-columns: 1fr;
    }

    .catalog-sidebar {
        position: static;
        display: none;
    }

    .catalog-sidebar.open {
        display: block;
    }

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

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

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

/* Mobile: < 768px */
@media (max-width: 768px) {
    :root {
        --container-padding: 16px;
        --navbar-height: 60px;
    }

    /* Typography scaling */
    .section-title {
        font-size: var(--font-2xl);
    }

    .hero-title {
        font-size: var(--font-3xl);
    }

    .page-title {
        font-size: var(--font-2xl);
    }

    /* Top bar */
    .top-bar-text {
        display: none;
    }

    .top-bar-inner {
        justify-content: flex-end;
    }

    /* Navbar */
    .navbar-menu {
        display: flex;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        width: 85vw;
        max-width: 350px;
        background: var(--bg-card);
        flex-direction: column;
        padding: calc(var(--space-2xl) * 2) var(--space-xl) var(--space-xl);
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    }

    .navbar-menu.open {
        transform: translateX(0);
    }

    /* Overlay for menu */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .menu-overlay.open {
        display: block;
        opacity: 1;
    }

    .navbar-menu .nav-link {
        padding: 14px 16px;
        font-size: var(--font-md);
        border-radius: var(--radius-sm);
    }

    .mobile-toggle {
        display: flex;
        width: 48px;
        height: 48px;
        z-index: 1001;
        /* Above menu */
    }

    .nav-icon-btn {
        width: 48px;
        height: 48px;
    }

    .btn-nav {
        display: none;
    }

    /* Mobile auth block — only visible inside mobile menu */
    .mobile-auth-block {
        display: block;
        padding-top: var(--space-sm);
    }

    .mobile-auth-divider {
        height: 1px;
        background: var(--border);
        margin: var(--space-sm) 0 var(--space-md) 0;
    }

    .mobile-auth-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: var(--radius-sm);
        font-size: var(--font-md);
        font-weight: 500;
        color: var(--text-secondary);
        text-decoration: none;
        transition: all var(--transition-fast);
    }

    .mobile-auth-btn:hover {
        background: var(--bg-muted);
        color: var(--text-primary);
    }

    .mobile-auth-btn svg {
        flex-shrink: 0;
    }

    /* Login button */
    .mobile-auth-login {
        color: var(--primary);
    }

    .mobile-auth-login:hover {
        background: var(--primary-lighter);
        color: var(--primary-dark);
    }

    /* Register button — prominent style */
    .mobile-auth-register {
        margin-top: var(--space-xs);
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
        color: white;
        font-weight: 600;
        border-radius: var(--radius-md);
    }

    .mobile-auth-register:hover {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(27, 107, 147, 0.25);
    }

    /* Account */
    .mobile-auth-account {
        color: var(--primary);
    }

    /* Admin panel button */
    .mobile-auth-admin {
        color: var(--accent);
    }

    .mobile-auth-admin:hover {
        background: var(--accent-light);
        color: var(--accent-dark);
    }

    /* Cart */
    .mobile-auth-cart {
        color: var(--text-secondary);
    }

    /* Logout button */
    .mobile-auth-logout {
        color: var(--danger);
    }

    .mobile-auth-logout:hover {
        background: var(--danger-light);
        color: var(--danger);
    }

    /* Dropdown on mobile */
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 0 0 var(--space-md);
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
        min-width: unset !important;
        max-width: unset !important;
        background: transparent !important;
    }

    .has-dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        padding: 10px 16px;
        display: block;
        text-decoration: none;
        color: var(--text-secondary);
        border-radius: var(--radius-sm);
        font-size: var(--font-sm);
    }

    .dropdown-menu a:hover,
    .dropdown-menu a:active {
        background: var(--bg-muted);
        color: var(--text-primary);
    }

    /* Stats */
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--space-lg);
        border-radius: var(--radius-lg);
    }

    .stat-number {
        font-size: var(--font-2xl);
    }

    /* Categories */
    .categories-bento {
        grid-template-columns: 1fr;
    }

    .category-card-featured {
        grid-column: span 1;
        min-height: 160px;
    }

    /* Products */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    /* Trust */
    .trust-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* CTA */
    .cta-section {
        padding: var(--space-2xl) var(--space-lg);
        border-radius: var(--radius-lg);
    }

    .cta-title {
        font-size: var(--font-2xl);
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }

    /* Auth */
    .auth-card {
        padding: var(--space-lg);
        border-radius: var(--radius-lg);
    }

    /* Grid */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* WhatsApp */
    .whatsapp-widget {
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-btn {
        width: 52px;
        height: 52px;
    }

    .whatsapp-tooltip {
        display: none;
    }

    /* Scroll top */
    .scroll-top {
        bottom: 84px;
        right: 20px;
    }

    /* Page header */
    .page-header-inner {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .breadcrumbs {
        align-self: flex-start;
    }

    /* Forms */
    .form-radio-group {
        flex-direction: column;
    }

    .form-radio-card {
        min-width: 100%;
    }
}

/* Small mobile: < 480px */
@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
    }

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

    .trust-grid {
        grid-template-columns: 1fr;
    }

    .stats-bar {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }
}

/* ============================================
   Responsive Grid Utilities (replaces inline grids)
   ============================================ */
.resp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.resp-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
}

.resp-grid-2-lg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

@media (max-width: 768px) {

    .resp-grid-2,
    .resp-grid-3,
    .resp-grid-2-lg {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Catalog sidebar filter toggle (visible on tablet)
   ============================================ */
@media (max-width: 1024px) {
    #filterToggle {
        display: inline-flex !important;
    }
}

/* ============================================
   Logo & Footer Logo Scaling
   ============================================ */
@media (max-width: 768px) {
    .logo-img {
        height: 80px;
    }

    .footer-logo-img {
        height: 72px;
    }

    .auth-logo {
        height: 100px;
    }

    /* Fix iOS auto-zoom on inputs: form-label uses 13px < 16px minimum */
    .form-label {
        font-size: 14px;
    }

    /* Category card min-height */
    .category-card {
        min-height: 120px;
    }

    /* Product page grid stacking */
    #productGridCols {
        grid-template-columns: 1fr !important;
    }

    /* Product gallery — remove sticky on mobile */
    .product-gallery-container {
        position: static !important;
    }

    /* Quick View modal — stack columns */
    #qvContent {
        grid-template-columns: 1fr !important;
    }

    /* Cart total font-size */
    .cart-total-price {
        font-size: 24px !important;
    }

    /* Product spec table — first column auto */
    .table td:first-child {
        width: auto !important;
        min-width: 100px;
    }

    /* Product thumbnails responsive */
    .product-thumb-item {
        width: 60px !important;
        height: 60px !important;
    }

    /* Cart item stacking */
    .cart-item-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}

/* ============================================
   Touch Target Minimum Heights (44px for iOS/Android)
   ============================================ */
.btn-sm {
    min-height: 44px;
}

.badge {
    min-height: 28px;
    padding: 6px 12px;
}

/* Dropdown mobile constraint — handled by 768px rule above */

/* ============================================
   Hero card grid mobile
   ============================================ */
@media (max-width: 768px) {
    .hero-card-grid {
        grid-template-columns: 1fr;
    }

    .hero-card:first-child {
        grid-column: span 1;
    }
}

/* ============================================
   Touch-friendly hover alternatives
   ============================================ */
@media (hover: none) {

    /* Partner logos: always show in full color on touch devices */
    .partner-logo-img {
        filter: none !important;
        opacity: 1 !important;
    }

    /* Disable translateY hover effects on touch to avoid sticky hovers */
    .product-card:hover,
    .trust-card:hover,
    .category-card:hover,
    .card:hover {
        transform: none;
    }
}