/* ================================================================
   css_base_responsive.css
   Westonaria Connect — split from style.css (lines 2920–3111)
   ================================================================ */

/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* RESPONSIVE DESIGN */
/* //////////////////////////////////////////////////////////////////////////////////////////////// */

@media (max-width: 1200px) {
    #adminPanel .modal-content.modal-xl { width: 95%; max-height: 85vh; }
    .admin-header { padding: 6px 10px; }
    .admin-tabs { padding: 0 6px; }
    .admin-content { padding: 6px; }
    .dashboard-sections { grid-template-columns: 1fr; }
    .business-listings { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    .premium-body { grid-template-columns: 1fr; }
    .premium-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .hero-title { font-size: 2.8rem; }
    .section-title { font-size: 2.2rem; }
    .cta-title { font-size: 2rem; }
    .search-filter-container { flex-direction: column; }
    .filters-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--graphite); }
    .modal-content { padding: var(--space-2xl) var(--space-xl); }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
    .system-actions { grid-template-columns: 1fr; }
    .admin-search input { min-width: 250px; }
    .admin-business-item,
    .admin-user-item,
    .admin-review-item { flex-direction: column; gap: var(--space-xl); }
    .user-actions,
    .review-actions { width: 100%; min-width: auto; }
    .categories-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .mobile-menu-btn { display: block; }
    .hero-title { font-size: 2.3rem; }
    .hero-subtitle { font-size: 1.1rem; }
    .search-box { flex-direction: column; border: none; }
    .search-box i { display: none; }
    #service-search, .btn-search {
        width: 100%;
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
    }
    .btn-search { border-radius: var(--radius-md); }
    .cta-buttons { flex-direction: column; align-items: center; }
    .results-header { flex-direction: column; align-items: flex-start; }
    .results-controls { width: 100%; justify-content: space-between; }
    .form-actions { flex-direction: column; gap: var(--space-lg); }
    .form-actions button { width: 100%; }
    .step-label { font-size: 0.8rem; }
    .notification { min-width: 250px; max-width: 300px; right: var(--space-md); left: var(--space-md); }
    .card-header { flex-direction: column; align-items: flex-start; }
    .card-actions { flex-direction: row; flex-wrap: nowrap; }
    .card-actions button { flex: 1; min-width: 0; }
    .listing-actions { flex-direction: column; }
    .listing-actions button { width: 100%; }
    #adminPanel .modal-content.modal-xl { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; margin: 0; }
    .admin-header { padding: var(--space-xl); }
    .admin-header h2 { font-size: 1.5rem; }
    .admin-tabs { padding: 0 var(--space-xl); flex-wrap: wrap; }
    .admin-tab { padding: var(--space-lg); font-size: 0.9rem; }
    .admin-content { padding: var(--space-xl); max-height: calc(100vh - 180px); }
    .dashboard-stats { grid-template-columns: 1fr; }
    .admin-section-header { flex-direction: column; align-items: flex-start; gap: var(--space-xl); }
    .admin-search { width: 100%; }
    .admin-search input { min-width: 0; flex: 1; }
    .stat-icon { width: 60px; height: 60px; font-size: 1.5rem; }
    .stat-info h3 { font-size: 1.8rem; }
    .featured-grid { grid-template-columns: 1fr; }
    .premium-modal { max-width: 100%; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
    .premium-header { flex-direction: column; gap: 20px; text-align: center; padding: 24px 20px; }
    .header-main { flex-direction: column; text-align: center; }
    .header-stats { width: 100%; justify-content: center; flex-wrap: wrap; }
    .premium-body { padding: 20px; }
    .stats-grid { grid-template-columns: 1fr; }
    .premium-footer { flex-direction: column; gap: 20px; text-align: center; padding: 20px; }
    .footer-info { flex-direction: column; gap: 16px; }

    /* ===== MOBILE FULL-WIDTH CARDS ===== */
    .search-section .container { padding-left: 0; padding-right: 0; }

    .search-results { padding: 0; }

    #business-listings {
        gap: 0;
        border-radius: 0;
        grid-template-columns: 1fr;
    }

    .business-listing-card {
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.08);
        margin: 0;
    }

    .business-listing-card .card-header,
    .business-listing-card .listing-description,
    .business-listing-card .card-rating,
    .business-listing-card .card-details,
    .business-listing-card .card-actions,
    .business-listing-card .card-payment-summary {
        padding-left: 16px;
        padding-right: 16px;
    }

    .gallery-thumbnail-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .results-header { padding: 16px 16px 0; }
    .active-filters { margin: 0 16px var(--space-xl); }
}

@media (max-width: 576px) {
    section { padding: 60px 0; }
    .hero { padding: 80px 0; }
    .hero-title { font-size: 2rem; }
    .section-title { font-size: 1.8rem; }
    .cta-title { font-size: 1.8rem; }
    .featured-grid, .categories-grid { grid-template-columns: 1fr; }
    .cta-features { flex-direction: column; align-items: center; gap: var(--space-lg); }
    .listing-details { grid-template-columns: 1fr; }
    .step-indicators { flex-direction: column; gap: var(--space-xl); align-items: flex-start; }
    .step-indicators::before { display: none; }
    .step { flex-direction: row; gap: var(--space-lg); width: 100%; }
    .step-number { margin-bottom: 0; }
    .step:not(:last-child)::after { display: none; }
    .modal-content { padding: var(--space-xl) var(--space-lg); }
    .form-actions button { padding: var(--space-md) var(--space-lg); }
    .admin-header { padding: var(--space-lg); }
    .admin-tabs { gap: var(--space-xs); }
    .admin-tab { padding: var(--space-md); font-size: 0.85rem; flex: 1; min-width: 0; justify-content: center; }
    .admin-content { padding: var(--space-lg); }
    .stat-card { padding: var(--space-xl); }
    .dashboard-section { padding: var(--space-xl); }
    .pending-actions { flex-direction: column; }
    .pending-actions button { width: 100%; }
    .upload-photos-btn { width: 100%; justify-content: center; padding: var(--space-md); }
    .card-details { font-size: 0.85rem; }
    .card-actions button { padding: 6px 10px; font-size: 0.75rem; }
    .premium-header { padding: 20px 16px; }
    .header-text h2 { font-size: 24px; }
    .header-icon { width: 56px; height: 56px; font-size: 24px; }
    .premium-body { padding: 16px; gap: 16px; }
    .stat-card { flex-direction: column; text-align: center; gap: 16px; }
    .activity-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pending-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .pending-item button { align-self: flex-end; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .admin-business-item,
    .admin-user-item,
    .admin-review-item,
    .system-action-card,
    .business-listing-card,
    .business-card,
    .category-card { transition: none; }

    .stat-card:hover,
    .admin-business-item:hover,
    .admin-user-item:hover,
    .admin-review-item:hover,
    .system-action-card:hover,
    .business-listing-card:hover,
    .business-card:hover,
    .category-card:hover { transform: none; }

    .quick-actions button:hover,
    .user-actions button:hover,
    .review-actions button:hover,
    .system-action-card button:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-outline:hover,
    .upload-photos-btn:hover { transform: none; }

    .admin-tab-content { animation: none; }
    .admin-loading i { animation: none; }
    .stat-card:hover .stat-icon { animation: none; }
    .notification { animation: none; }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// */