/* ========================================
   GLOBAL RESPONSIVE DESIGN - DRY PRINCIPLE
   Applied to ALL pages consistently
   ======================================== */

/* Base Container Responsive */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 991px) {
    .container {
        padding: 0 15px;
    }
}

/* Typography Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.25rem !important; }
    p { font-size: 14px !important; }
}

@media (max-width: 576px) {
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    p { font-size: 13px !important; }
}

/* Section Padding Responsive */
section, .section {
    padding: 80px 0;
}

@media (max-width: 991px) {
    section, .section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    section, .section {
        padding: 40px 0;
    }
}

@media (max-width: 576px) {
    section, .section {
        padding: 30px 0;
    }
}

/* Buttons Responsive */
.btn, .btn-primary, .btn-red, .btn-phone {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .btn, .btn-primary, .btn-red {
        padding: 12px 25px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 576px) {
    .btn, .btn-primary, .btn-red {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }
    
    .btn-block {
        width: 100% !important;
        display: block !important;
    }
}

/* Images Responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Forms Responsive */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 576px) {
    input, textarea, select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Grid Layouts Responsive */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

@media (max-width: 768px) {
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .col, [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Pizza Builder & Custom Pages Responsive */
.pizza-builder-container,
.checkout-container,
.order-container {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 991px) {
    .pizza-builder-container,
    .checkout-container {
        padding: 20px 15px;
    }
}

@media (max-width: 768px) {
    .pizza-builder-container,
    .checkout-container {
        padding: 15px 10px;
    }
    
    /* Stack sidebars below main content */
    .sidebar,
    .order-sidebar {
        width: 100% !important;
        margin-top: 20px;
        position: static !important;
    }
}

/* Modal Responsive */
.modal-content {
    max-width: 95vw;
    margin: 10px auto;
}

@media (max-width: 576px) {
    .modal-content {
        border-radius: 15px !important;
        padding: 20px !important;
    }
    
    .modal-header h3 {
        font-size: 1.25rem !important;
    }
}

/* Tables Responsive */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Cards Responsive */
.card, .menu-item, .promo-card {
    margin-bottom: 15px;
}

@media (max-width: 576px) {
    .card, .menu-item, .promo-card {
        margin-bottom: 10px;
    }
}

/* Spacing Utilities Responsive */
@media (max-width: 768px) {
    .mt-5, .my-5 { margin-top: 2rem !important; }
    .mb-5, .my-5 { margin-bottom: 2rem !important; }
    .pt-5, .py-5 { padding-top: 2rem !important; }
    .pb-5, .py-5 { padding-bottom: 2rem !important; }
}

@media (max-width: 576px) {
    .mt-5, .my-5 { margin-top: 1.5rem !important; }
    .mb-5, .my-5 { margin-bottom: 1.5rem !important; }
    .pt-5, .py-5 { padding-top: 1.5rem !important; }
    .pb-5, .py-5 { padding-bottom: 1.5rem !important; }
}

/* Flex Utilities Responsive */
@media (max-width: 768px) {
    .d-md-flex { display: flex !important; }
    .d-md-block { display: block !important; }
    .d-md-none { display: none !important; }
    
    .flex-md-column { flex-direction: column !important; }
    .flex-md-row { flex-direction: row !important; }
}

@media (max-width: 576px) {
    .d-sm-flex { display: flex !important; }
    .d-sm-block { display: block !important; }
    .d-sm-none { display: none !important; }
    
    .flex-sm-column { flex-direction: column !important; }
}

/* Text Alignment Responsive */
@media (max-width: 768px) {
    .text-md-center { text-align: center !important; }
    .text-md-left { text-align: left !important; }
}

@media (max-width: 576px) {
    .text-sm-center { text-align: center !important; }
}

/* Overflow Prevention */
body {
    overflow-x: hidden;
}

* {
    max-width: 100%;
}

/* Fix for wide elements */
@media (max-width: 768px) {
    .row, .container-fluid {
        overflow-x: hidden;
    }
    
    /* Prevent horizontal scroll */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* Pizza Builder Specific Fixes */
@media (max-width: 991px) {
    .pizza-preview {
        width: 100% !important;
        max-width: 400px;
        margin: 0 auto 30px;
    }
    
    .ingredients-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .pizza-preview {
        max-width: 300px;
    }
    
    .ingredients-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Checkout Page Responsive */
@media (max-width: 991px) {
    .checkout-form,
    .order-summary {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* Cart Sidebar Responsive */
@media (max-width: 576px) {
    .cart-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .footer-col {
        margin-bottom: 30px;
    }
}

/* Prevent Text Overflow */
@media (max-width: 576px) {
    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}