/* GharBazar — W3 component styles (Worker W3: Monetization)
   Coordinator: add <link rel="stylesheet" href="<?= asset('css/w3.css') ?>"> after style.css in layout.php.
   (layout.php is protected — do not edit from W3.) */

/* ── banner ad slots (M4) ── */
.ad-slot{position:relative;margin:1rem auto;text-align:center;max-width:100%}
.ad-label{position:absolute;top:2px;right:6px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;background:rgba(255,255,255,.85);padding:0 .35rem;border-radius:4px}
.ad-slot img{display:inline-block;max-width:100%;height:auto;border-radius:8px}
.ad-homepage-top{margin:1.2rem auto}
.ad-footer-banner{margin:1.5rem auto 0}
.ad-search-sidebar img,.ad-listing-sidebar img{width:300px}

/* ── featured agents section (M5) ── */
.featured-agents{margin:1.5rem 0}
.featured-agents h2{font-size:1.25rem;margin-bottom:.8rem}
.grid.agents.featured{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.featured-card{border:2px solid var(--gold-500,#d4a017)}
.agent-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:.5rem}

/* ── payment result page (M1) ── */
.pay-result-emoji{font-size:48px}

/* ── Worker 3: type tabs with counts (Zameen parity) ── */
.type-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.type-tab{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:.55rem 1rem;font-size:.95rem;font-weight:600;color:var(--ink)}
.type-tab:hover{border-color:var(--green-600);text-decoration:none}
.type-tab .n{background:var(--green-100);color:var(--green-900);border-radius:999px;padding:.05rem .5rem;font-size:.8rem;font-weight:700;margin-left:.35rem}