/* ============================================
   FILE: assets/css/responsive.css
   Mobile-First Responsive Styles
   Nude Header + Navy Blue + Coffee Brown Color Scheme
   ============================================ */

/* Import color variables for consistency */
:root {
    --primary: #0A1929;
    --accent: #6F4E37;
    --secondary: #1e3a5f;
    --highlight: #8B6F47;
    --coffee-dark: #4B3621;
    --coffee-light: #A0826D;
    --nude-light: #F5E6D3;
    --nude-medium: #E8D5C4;
    --nude-dark: #D4BFA8;
    --light-bg: #F5F5F5;
    --dark: #1A1A1A;
    --white: #FFFFFF;
    --light-gray: #E8E8E8;
}

/* Mobile First - Base styles for mobile (Extra Small Devices) */
@media (max-width: 576px) {
    .container {
        padding: 0 10px;
    }
    
    h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.3rem;
        line-height: 1.3;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    /* Buttons */
    .btn-wholesale,
    .btn-primary,
    .btn-secondary,
    .btn-accent {
        width: 100%;
        text-align: center;
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    /* Product Cards */
    .product-card {
        margin-bottom: 1rem;
    }
    
    .product-image {
        height: 200px;
    }
    
    .product-info {
        padding: 1rem;
    }
    
    .product-title {
        font-size: 1rem;
        color: var(--primary);
    }
    
    .product-price {
        font-size: 1.3rem;
        color: var(--accent);
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: 1.3rem;
    }
    
    .nav-link {
        padding: 0.5rem 0;
        margin: 0;
    }
    
    /* Logo sizing */
    .logo-spinning {
        height: 42px !important;
    }
    
    .navbar-brand-text {
        font-size: 1.2rem;
    }
    
    /* Hero Section */
    .hero-content h1 {
        font-size: 2rem;
        color: var(--white);
    }
    
    .hero-content p {
        font-size: 1rem;
        color: var(--white);
    }
    
    .btn-hero {
        padding: 0.875rem 2rem;
        font-size: 0.95rem;
    }
    
    /* Grids */
    .stat-grid,
    .product-grid,
    .promo-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Cards */
    .card {
        padding: 1.25rem;
    }
    
    /* Promo Cards */
    .promo-card img {
        height: 200px;
    }
    
    .promo-overlay h3 {
        font-size: 1.3rem;
        color: var(--primary);
    }
    
    /* Tables */
    .table {
        font-size: 0.875rem;
    }
    
    .table thead {
        background: var(--primary);
        color: white;
    }
    
    .table th,
    .table td {
        padding: 0.5rem;
    }
    
    /* Forms */
    .form-control {
        font-size: 0.95rem;
        padding: 0.625rem;
    }
    
    .form-control:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(111, 78, 55, 0.15);
    }
    
    /* Newsletter */
    .newsletter-form {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        font-size: 0.95rem;
    }
    
    /* Footer */
    footer .row > div {
        margin-bottom: 2rem;
    }
    
    footer h5 {
        color: var(--coffee-light);
    }
    
    /* Modal */
    .age-modal {
        padding: 2rem;
        margin: 1rem;
    }
    
    .age-modal h2 {
        font-size: 1.5rem;
        color: var(--primary);
    }
    
    /* Reviews */
    .review-card {
        padding: 1.25rem;
    }
    
    .review-stars {
        color: var(--accent);
    }
    
    .review-author {
        color: var(--primary);
    }
    
    .review-verified {
        color: var(--accent);
    }
    
    /* Payment Icons */
    .payment-icons {
        gap: 1rem;
    }
    
    .payment-icon {
        font-size: 2rem;
        color: var(--primary);
    }
    
    .payment-icon:hover {
        color: var(--accent);
    }
    
    /* Section Titles */
    .section-title {
        font-size: 2rem;
        color: var(--primary);
    }
    
    .section-title::after {
        background: linear-gradient(to right, var(--accent), var(--coffee-light));
    }
    
    /* Feature Cards */
    .feature-card h5 {
        color: var(--primary);
    }
    
    .feature-icon {
        background: linear-gradient(135deg, var(--accent), var(--coffee-dark));
    }
}

/* Small Tablets (Portrait) */
@media (min-width: 577px) and (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    /* Logo sizing */
    .logo-spinning {
        height: 50px !important;
    }
    
    .navbar-brand-text {
        font-size: 1.4rem;
    }
    
    /* Grids */
    .stat-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .promo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Product Images */
    .product-image {
        height: 250px;
    }
    
    /* Hero */
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-content p {
        font-size: 1.2rem;
    }
    
    /* Promo Cards */
    .promo-card img {
        height: 250px;
    }
    
    /* Tables remain scrollable */
    .table-responsive {
        overflow-x: auto;
    }
}

/* Tablets (Landscape) and Small Desktops */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }
    
    /* Logo sizing */
    .logo-spinning {
        height: 60px !important;
    }
    
    .navbar-brand-text {
        font-size: 1.6rem;
    }
    
    /* Grids */
    .stat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .promo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Product Images */
    .product-image {
        height: 280px;
    }
    
    /* Hero */
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .hero-content p {
        font-size: 1.3rem;
    }
    
    /* Promo Cards */
    .promo-card img {
        height: 280px;
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: 1.6rem;
    }
}

/* Large Desktop */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
    }
    
    /* Logo sizing */
    .logo-spinning {
        height: 80px !important;
    }
    
    .navbar-brand-text {
        font-size: 1.8rem;
    }
    
    /* Grids */
    .stat-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
    
    .promo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Product Images */
    .product-image {
        height: 300px;
    }
    
    /* Promo Cards */
    .promo-card img {
        height: 300px;
    }
}

/* Extra Large Desktop */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* Hero */
    .hero-content h1 {
        font-size: 4.5rem;
    }
    
    .hero-content p {
        font-size: 1.6rem;
    }
}

/* Admin Panel Responsive Styles */
@media (max-width: 768px) {
    /* Admin Sidebar */
    .admin-sidebar {
        width: 100%;
        position: relative;
        height: auto;
        box-shadow: none;
        border-bottom: 2px solid var(--coffee-light);
        background: linear-gradient(135deg, var(--accent), var(--coffee-dark));
    }
    
    .admin-content {
        margin-left: 0;
        padding: 1rem;
    }
    
    .admin-wrapper {
        flex-direction: column;
    }
    
    /* Admin Navigation */
    .admin-nav {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .admin-nav-item {
        display: inline-block;
        padding: 0.75rem 1rem;
        color: var(--white);
    }
    
    .admin-nav-item:hover,
    .admin-nav-item.active {
        background: var(--coffee-dark);
        color: var(--white);
    }
    
    /* Admin Stats */
    .admin-stat-card {
        margin-bottom: 1rem;
        border-left: 4px solid var(--accent);
    }
    
    .admin-stat-card h3 {
        color: var(--primary);
    }
    
    /* Admin Tables */
    .admin-table-wrapper {
        overflow-x: auto;
    }
    
    .admin-table thead {
        background: var(--primary);
        color: var(--white);
    }
    
    /* Dashboard Cards */
    .dashboard-card {
        margin-bottom: 1rem;
        border-top: 3px solid var(--accent);
    }
    
    .dashboard-card h4 {
        color: var(--primary);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .admin-sidebar {
        width: 200px;
        background: linear-gradient(180deg, var(--accent), var(--coffee-dark));
    }
    
    .admin-content {
        margin-left: 200px;
    }
    
    .admin-nav-item {
        color: var(--white);
    }
    
    .admin-nav-item:hover {
        background: var(--coffee-dark);
    }
}

@media (min-width: 1025px) {
    .admin-sidebar {
        width: 250px;
        background: linear-gradient(180deg, var(--accent), var(--coffee-dark));
    }
    
    .admin-content {
        margin-left: 250px;
    }
    
    .admin-nav-item {
        color: var(--white);
    }
    
    .admin-nav-item:hover,
    .admin-nav-item.active {
        background: var(--coffee-dark);
        border-left: 4px solid var(--nude-light);
    }
}

/* Print Styles */
@media print {
    .navbar,
    .footer,
    .whatsapp-float,
    .age-modal-overlay,
    .btn-add-cart,
    .admin-sidebar,
    .promo-banner-container {
        display: none !important;
    }
    
    body {
        color: var(--dark);
        background: white;
    }
    
    .container {
        max-width: 100%;
    }
    
    .product-card,
    .card {
        box-shadow: none;
        border: 1px solid var(--light-gray);
    }
    
    h1, h2, h3 {
        color: var(--primary);
    }
    
    .product-price {
        color: var(--accent);
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --primary: #000814;
        --accent: #3D2B1F;
        --secondary: #003566;
        --highlight: #6F4E37;
        --coffee-dark: #1A0F0A;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-accent {
        border: 3px solid var(--dark);
        font-weight: 700;
    }
    
    .nav-link {
        font-weight: 600;
    }
    
    .product-card {
        border: 2px solid var(--primary);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .whatsapp-float {
        animation: none;
    }
    
    .logo-spinning {
        animation: none !important;
    }
    
    .promo-banner-toggle {
        animation: none;
    }
    
    .product-card:hover .product-image img {
        transform: none;
    }
}

/* Orientation Specific Styles */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        height: 100vh;
    }
    
    .age-modal {
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .age-modal h2 {
        font-size: 1.3rem;
        color: var(--primary);
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn-wholesale,
    .btn-primary,
    .btn-secondary,
    .btn-accent,
    .nav-link,
    .btn-add-cart {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
    }
    
    /* Remove hover effects on touch devices */
    .product-card:hover,
    .card:hover {
        transform: none;
    }
    
    /* Disable image zoom on product cards for touch */
    .product-card:hover .product-image img {
        transform: none;
    }
    
    /* Make social icons larger for touch */
    .social-icon {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
    }
    
    /* Ensure dropdown menus are touch-friendly */
    .dropdown-item {
        padding: 1rem 1.5rem;
    }
    
    /* Make cart badge more visible on touch devices */
    .cart-badge {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* Promotional Banner Responsive */
@media (max-width: 768px) {
    .promo-banner-container {
        width: 100%;
        max-width: 300px;
        right: -270px;
    }
    
    .promo-banner-container.active {
        right: 0;
    }
    
    .promo-banner-toggle {
        width: 40px;
        height: 70px;
        left: -40px;
        background: linear-gradient(135deg, var(--accent), var(--coffee-dark));
    }
}

@media (max-width: 576px) {
    .promo-banner-container {
        max-width: 280px;
        right: -250px;
        bottom: 100px;
        top: auto;
        transform: none;
    }
    
    .promo-banner-toggle {
        top: 10px;
        transform: none;
        width: 35px;
        height: 60px;
        left: -35px;
    }
}

/* Newsletter Section Responsive */
@media (max-width: 768px) {
    .newsletter-section {
        padding: 3rem 0;
    }
    
    .newsletter-section h2 {
        font-size: 2rem;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form button {
        background: var(--accent);
        color: var(--white);
    }
}

/* Footer Responsive Updates */
@media (max-width: 768px) {
    footer {
        background: linear-gradient(180deg, var(--primary), var(--secondary));
    }
    
    footer h5 {
        color: var(--coffee-light);
        font-size: 1.1rem;
    }
    
    footer .social-icon {
        background: var(--secondary);
        color: var(--coffee-light);
    }
    
    footer .social-icon:hover {
        background: linear-gradient(135deg, var(--accent), var(--coffee-dark));
        color: white;
    }
}

/* Badge and Alert Responsive */
@media (max-width: 576px) {
    .badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }
    
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Button Group Responsive */
@media (max-width: 576px) {
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-group .btn {
        width: 100%;
        margin: 0;
    }
}