/* assets/css/mobile.css - MOBILE RESPONSIVE MAXIM */

/* ===========================================
   RESPONSIVE BREAKPOINTS
   =========================================== */
/* Mobile: 320px - 767px */
/* Tablet: 768px - 1024px */
/* Desktop: 1025px+ */

/* ===========================================
   TABLET & BELOW (768px)
   =========================================== */
@media (max-width: 768px) {
    
    /* CONTAINER */
    .container {
        padding: 0 1rem !important;
        max-width: 100% !important;
    }
    
    /* PRODUCTS GRID */
    .products-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    
    .product-card {
        font-size: 0.875rem !important;
    }
    
    .product-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
    
    .product-price {
        font-size: 0.9rem !important;
    }
    
    /* PRODUCT PAGE */
    .product-page-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* BUTTONS: dimensiuni doar pentru .btn-sm; lățimea completă se cere explicit (cz-btn-block) */
    main .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    /* FORMS */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-control {
        font-size: 16px !important; /* Previne zoom iOS */
    }
    
    /* CHECKOUT */
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* TABLES: derulare orizontală doar în containerul .table-scroll */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* HIDE ON MOBILE */
    .hide-mobile {
        display: none !important;
    }
}

/* ===========================================
   MOBILE ONLY (480px and below)
   =========================================== */
@media (max-width: 480px) {
    
    /* CONTAINER */
    .container {
        padding: 0 1rem !important;
    }
    
    /* TYPOGRAPHY */
    main h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    main h2 {
        font-size: 1.25rem !important;
    }
    
    main h3 {
        font-size: 1.1rem !important;
    }
    
    /* PRODUCTS GRID - SINGLE COLUMN */
    .products-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* PRODUCT CARD */
    .product-card {
        max-width: 100% !important;
    }
    
    .product-image {
        height: 250px !important;
    }
    
    
    /* MODAL / POPUP */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
    }
}

/* ===========================================
   PRODUCT PAGE SPECIFIC
   =========================================== */
@media (max-width: 768px) {
    
    /* Product Images */
    #main-image {
        margin-bottom: 1rem !important;
    }
    
    .product-gallery {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .product-gallery img {
        width: 100% !important;
    }
    
    /* Product Info */
    .product-info {
        padding: 1rem !important;
    }
    
    .product-price {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
    
    /* Reviews */
    .reviews-grid {
        grid-template-columns: 1fr !important;
    }
    
    .review-card {
        padding: 1rem !important;
    }
}

/* ===========================================
   CART / CHECKOUT SPECIFIC
   =========================================== */
@media (max-width: 768px) {
    
    .cart-table {
        font-size: 0.8rem !important;
    }
    
    .cart-item-image {
        width: 60px !important;
        height: 60px !important;
    }
    
    .cart-item-name {
        font-size: 0.875rem !important;
    }
    
    .quantity-input {
        width: 60px !important;
    }
    
    .cart-summary {
        position: static !important;
        margin-top: 2rem !important;
    }
}

/* ===========================================
   COMPARE PAGE SPECIFIC
   =========================================== */
@media (max-width: 768px) {
    
    .compare-table {
        display: none !important;
    }
    
    .compare-cards {
        display: block !important;
    }
    
    .compare-card {
        margin-bottom: 1.5rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 8px !important;
        padding: 1rem !important;
        background: white !important;
    }
    
    .compare-card h3 {
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid #e5e7eb !important;
    }
    
    .compare-row {
        display: flex !important;
        justify-content: space-between !important;
        padding: 0.75rem 0 !important;
        border-bottom: 1px solid #f3f4f6 !important;
    }
    
    .compare-label {
        font-weight: 600 !important;
        color: #6b7280 !important;
    }
}

/* ===========================================
   WISHLIST / FAVORITE SPECIFIC
   =========================================== */
@media (max-width: 768px) {
    
    .wishlist-grid {
        grid-template-columns: 1fr !important;
    }
    
    .wishlist-item {
        display: flex !important;
        gap: 1rem !important;
    }
    
    .wishlist-item-image {
        flex: 0 0 100px !important;
    }
    
    .wishlist-item-info {
        flex: 1 !important;
    }
}

/* ===========================================
   TOUCH IMPROVEMENTS
   =========================================== */

/* Derulare lină */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
}

/* ===========================================
   ORIENTATION SPECIFIC
   =========================================== */

/* Landscape mobil */
@media (max-width: 768px) and (orientation: landscape) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ===========================================
   iOS SPECIFIC FIXES
   =========================================== */
@supports (-webkit-touch-callout: none) {
    /* Fix pentru input zoom iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
}

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    a {
        text-decoration: underline !important;
        color: #000 !important;
    }
}