/* Bwe — Minimal CSS for African networks
   Target: <5KB. No frameworks. Mobile-first. */

:root {
    --bwe-primary: #FF6B00;    /* Warm orange — energy, Africa */
    --bwe-dark: #1A1A2E;
    --bwe-grey: #6B7280;
    --bwe-light: #F9FAFB;
    --bwe-white: #FFFFFF;
    --bwe-green: #10B981;
    --bwe-red: #EF4444;
    --bwe-radius: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color: var(--bwe-dark);
    background: var(--bwe-light);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

.container { max-width: 1024px; margin: 0 auto; padding: 0 16px; }

/* --- Nav --- */
.nav { background: var(--bwe-white); border-bottom: 1px solid #E5E7EB; padding: 12px 0; position: sticky; top: 0; z-index: 50; }
.nav .container { display: flex; align-items: center; gap: 16px; }
.logo { text-decoration: none; color: var(--bwe-primary); font-size: 1.5rem; }
.country-switch { display: flex; gap: 4px; margin-left: auto; }
.country-switch a { padding: 4px 8px; border-radius: 4px; text-decoration: none; color: var(--bwe-grey); font-size: 0.75rem; font-weight: 600; }
.country-switch a.active { background: var(--bwe-primary); color: white; }
.nav-links { display: flex; gap: 12px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--bwe-dark); font-size: 0.875rem; }

/* --- Buttons --- */
.btn { display: inline-block; padding: 8px 16px; border-radius: var(--bwe-radius); text-decoration: none; font-weight: 600; font-size: 0.875rem; border: none; cursor: pointer; }
.btn-primary { background: var(--bwe-primary); color: white; }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { border: 1px solid var(--bwe-primary); color: var(--bwe-primary); background: transparent; }
.btn-whatsapp { background: #25D366; color: white; }
.btn-sm { padding: 4px 12px; font-size: 0.75rem; }

/* --- Search --- */
.search-bar { background: var(--bwe-primary); padding: 16px 0; }
.search-bar input { width: 100%; padding: 12px 16px; border: none; border-radius: var(--bwe-radius); font-size: 1rem; outline: none; }

/* --- Cards / Listings Grid --- */
.listing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 0; }
@media (min-width: 640px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .listing-grid { grid-template-columns: repeat(4, 1fr); } }

.listing-card { background: var(--bwe-white); border-radius: var(--bwe-radius); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.listing-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.listing-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #E5E7EB; }
.listing-card .card-body { padding: 8px 10px; }
.listing-card .card-title { font-size: 0.875rem; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-card .card-price { color: var(--bwe-primary); font-weight: 700; font-size: 0.9rem; margin-top: 4px; }
.listing-card .card-meta { font-size: 0.7rem; color: var(--bwe-grey); margin-top: 2px; }

/* --- Featured badge --- */
.badge-featured { background: var(--bwe-primary); color: white; font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; position: absolute; top: 8px; left: 8px; font-weight: 600; }
.badge-verified { color: var(--bwe-green); font-size: 0.7rem; }

/* --- Detail page --- */
.detail-header { padding: 16px 0; }
.detail-header h1 { font-size: 1.25rem; }
.detail-price { font-size: 1.5rem; color: var(--bwe-primary); font-weight: 700; margin: 8px 0; }
.detail-actions { display: flex; gap: 8px; margin: 16px 0; }
.detail-info { font-size: 0.875rem; color: var(--bwe-grey); }
.detail-info dt { font-weight: 600; color: var(--bwe-dark); }

/* --- Categories --- */
.category-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; }
.category-chip { padding: 6px 14px; background: var(--bwe-white); border: 1px solid #E5E7EB; border-radius: 20px; text-decoration: none; color: var(--bwe-dark); font-size: 0.8rem; }
.category-chip:hover { border-color: var(--bwe-primary); color: var(--bwe-primary); }

/* --- Section headers --- */
.section-title { font-size: 1.1rem; font-weight: 600; padding: 12px 0 4px; }

/* --- Alerts --- */
.alert { padding: 10px 14px; border-radius: var(--bwe-radius); margin: 8px 0; font-size: 0.875rem; }
.alert-success { background: #D1FAE5; color: #065F46; }
.alert-error { background: #FEE2E2; color: #991B1B; }

/* --- Trust badges --- */
.trust-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; }
.trust-new { background: #F3F4F6; color: var(--bwe-grey); }
.trust-phone { background: #FEF3C7; color: #92400E; }
.trust-verified { background: #D1FAE5; color: #065F46; }
.trust-pro { background: #FEF3C7; color: #92400E; }

/* --- Footer --- */
.footer { padding: 24px 0; text-align: center; font-size: 0.75rem; color: var(--bwe-grey); margin-top: 32px; border-top: 1px solid #E5E7EB; }
.footer-links a { color: var(--bwe-grey); text-decoration: none; }

/* --- Utilities --- */
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.hidden { display: none; }