/* ===== PAGES RESPONSIVE CSS ===== */

/* ===== MOBILE (320px - 767px) ===== */
@media (max-width: 767px) {
    /* Cart Page */
    .cart-item { flex-direction: column; gap: 1rem; padding: 1rem; }
    .cart-item .item-image { width: 100%; height: 200px; }
    .quantity-controls { justify-content: center; margin: 1rem 0; }
    .cart-summary { position: sticky; bottom: 0; background: white; }
    
    /* Products/Services Grid */
    .products-grid, .services-grid, .offers-grid { 
        display: grid; 
        grid-template-columns: 1fr; 
        gap: 1rem; 
    }
    
    .product-card .card-img-top, 
    .service-card .card-img-top, 
    .offer-card .card-img-top { height: 200px; }
    
    /* Booking Confirmation */
    .booking-confirm .order-number { font-size: 1.5rem; text-align: center; }
    .booking-confirm .info-row { flex-direction: column; }
    .booking-confirm .action-buttons { flex-direction: column; gap: 1rem; }
    .booking-confirm .btn { width: 100%; }
    
    /* Contact Page */
    .contact-info .info-item { display: flex; align-items: center; gap: 1rem; }
    .contact-form .btn { width: 100%; }
    
    /* Search Results */
    .search-results-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    .search-result-item .result-image { height: 200px; }
    .search-result-item .btn { width: 100%; }
}

/* ===== TABLET (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .products-grid, .services-grid, .offers-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem; 
    }
    
    .product-card .card-img-top, 
    .service-card .card-img-top, 
    .offer-card .card-img-top { height: 250px; }
    
    .search-results-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem; 
    }
    
    .search-result-item .result-image { height: 250px; }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .products-grid, .services-grid, .offers-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 2rem; 
    }
    
    .product-card .card-img-top, 
    .service-card .card-img-top, 
    .offer-card .card-img-top { height: 300px; }
    
    .search-results-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 2rem; 
    }
    
    .search-result-item .result-image { height: 300px; }
}

/* ===== LARGE DESKTOP (1200px+) ===== */
@media (min-width: 1200px) {
    .products-grid, .services-grid, .offers-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
}

/* ===== Payment Methods Section (Cart / Checkout) ===== */
.payment-methods-wrapper, .payment-methods-container, .payment-methods#payment-methods-container {
    background: linear-gradient(135deg, rgba(34,34,34,0.95), rgba(18,18,18,0.9));
    border:1px solid rgba(212,165,116,0.35);
    padding:1rem 1rem .75rem;
    border-radius:12px;
}
.payment-methods-wrapper .form-label,
label.form-label.small.fw-bold[for*='payment'] { color: var(--primary-color,#D4A574) !important; font-weight:600; }

.payment-methods .form-check { 
    background: rgba(255,255,255,0.05); 
    border:1px solid rgba(255,255,255,0.12); 
    padding:.55rem .75rem; 
    border-radius:10px; 
    transition:background .25s ease,border-color .25s ease; 
}
.payment-methods .form-check + .form-check { margin-top:.45rem; }
.payment-methods .form-check-input { cursor:pointer; }
.payment-methods .form-check-label { color:#fff; font-weight:500; }
.payment-methods .form-check:hover { background:rgba(212,165,116,0.18); border-color:var(--primary-color,#D4A574); }
.payment-methods .form-check-input:focus { box-shadow:0 0 0 .15rem rgba(212,165,116,.35); }
.payment-methods .form-check-input:checked { background-color:var(--primary-color,#D4A574); border-color:var(--primary-color,#D4A574); }

@media (max-width:576px){
    .payment-methods-wrapper, .payment-methods#payment-methods-container { padding:.85rem .85rem .65rem; }
    .payment-methods .form-check { padding:.5rem .65rem; }
}

/* ===== Country & City Selects (Global Dark Theme) ===== */
#customerCountry, #customerCity, select.form-control#customerCountry, select.form-control#customerCity, 
select.form-select#customerCountry, select.form-select#customerCity {
    background: linear-gradient(135deg, rgba(30,30,30,0.95), rgba(18,18,18,0.92));
    color: #fff;
    border:1px solid rgba(212,165,116,0.35);
    border-radius:10px;
    min-height:46px;
    padding-inline:0.85rem;
    font-weight:500;
}

#customerCountry:focus, #customerCity:focus {
    border-color: var(--primary-color,#D4A574);
    box-shadow:0 0 0 .2rem rgba(212,165,116,0.25);
    outline:none;
}

/* Dropdown list (browser-dependent). For WebKit we can force text color */
select#customerCountry option, select#customerCity option { background:#1f1f1f; color:#fff; }

@media (max-width:576px){
    #customerCountry, #customerCity { min-height:50px; font-size:0.95rem; }
}