/* Emarat Place — Marketplace Styles */
.mp-layout{ display:grid; grid-template-columns:280px 1fr; gap:0; min-height:calc(100vh - 120px); }
.mp-sidebar{ background:#fff; border-right:1px solid #E5E7EB; position:sticky; top:80px; height:calc(100vh - 80px); overflow-y:auto; }
.mp-sidebar-inner{ padding:20px 16px; }
.mp-sidebar-title{ font-size:22px; font-weight:800; color:#101827; margin:0 0 16px; }
.mp-sidebar-heading{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#64748B; margin:0 0 8px; }
.mp-sidebar-link{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:600; color:#334155; text-decoration:none; transition:background .15s; margin-bottom:2px; }
.mp-sidebar-link:hover{ background:#F1F5F9; color:#1E5EFF; }
.mp-sidebar-link.active{ background:#EFF6FF; color:#1E5EFF; }
.mp-sidebar-link svg{ flex-shrink:0; }
.mp-create-link{ background:#1E5EFF; color:#fff !important; font-weight:700; margin-bottom:12px; }
.mp-create-link:hover{ background:#1648CC !important; color:#fff !important; }
.mp-create-link svg{ stroke:#fff; }
.mp-sidebar-divider{ height:1px; background:#E5E7EB; margin:14px 0; }
.mp-sidebar-select{ width:100%; padding:8px 10px; border:1px solid #E5E7EB; border-radius:8px; font-size:13px; color:#334155; background:#fff; }
.mp-cat-link{ display:flex; align-items:center; justify-content:space-between; padding:7px 12px; font-size:13px; color:#475569; text-decoration:none; border-radius:6px; transition:background .1s; margin-bottom:1px; }
.mp-cat-link:hover{ background:#F1F5F9; color:#1E5EFF; }
.mp-cat-link.active{ background:#EFF6FF; color:#1E5EFF; font-weight:600; }
.mp-cat-count{ font-size:11px; color:#94A3B8; background:#F1F5F9; padding:1px 7px; border-radius:10px; }
.mp-check-label{ display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:13px; color:#475569; cursor:pointer; border-radius:6px; }
.mp-check-label:hover{ background:#F1F5F9; }
.mp-check-label input[type="radio"]{ accent-color:#1E5EFF; }
.mp-price-row{ display:flex; align-items:center; gap:6px; padding:0 12px; }
.mp-price-input{ flex:1; padding:7px 8px; border:1px solid #E5E7EB; border-radius:6px; font-size:12px; min-width:0; }
.mp-price-go{ padding:7px 12px; background:#1E5EFF; color:#fff; border:none; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }

/* Main */
.mp-main{ padding:0; background:#F8FAFC; }
.mp-topbar{ display:flex; align-items:center; gap:12px; padding:14px 24px; background:#fff; border-bottom:1px solid #E5E7EB; }
.mp-search-wrap{ flex:1; display:flex; align-items:center; gap:8px; background:#F1F5F9; border-radius:24px; padding:6px 14px; border:1px solid #E5E7EB; transition:border-color .15s; }
.mp-search-wrap:focus-within{ border-color:#1E5EFF; }
.mp-search-wrap input{ flex:1; border:none; outline:none; background:transparent; font-size:14px; padding:6px 0; }
.mp-search-btn{ padding:6px 16px; background:#1E5EFF; color:#fff; border:none; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; }
.mp-sort-wrap select{ padding:8px 12px; border:1px solid #E5E7EB; border-radius:8px; font-size:13px; color:#334155; background:#fff; }
.mp-results-info{ display:flex; align-items:center; gap:8px; padding:10px 24px; flex-wrap:wrap; }
.mp-results-count{ font-size:14px; font-weight:700; color:#101827; }
.mp-results-tag{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; background:#EFF6FF; color:#1E5EFF; font-size:12px; font-weight:600; border-radius:12px; }
.mp-results-tag a{ color:#64748B; text-decoration:none; font-size:14px; font-weight:700; margin-left:2px; }

/* Grid */
.mp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; padding:16px 24px; }
.mp-card{ background:#fff; border:1px solid #E5E7EB; border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s; }
.mp-card:hover{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.1); }
.mp-card-img{ position:relative; aspect-ratio:4/3; background:#F1F5F9; overflow:hidden; }
.mp-card-img img{ width:100%; height:100%; object-fit:contain; }
.mp-card-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.mp-card-photos{ position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.65); color:#fff; font-size:11px; padding:2px 8px; border-radius:4px; }
.mp-card-badge{ position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:4px; font-size:10px; font-weight:700; text-transform:uppercase; }
.mp-badge-featured{ background:#C89B3C; color:#fff; }
.mp-card-body{ padding:12px 14px; }
.mp-card-price{ font-size:18px; font-weight:800; color:#101827; margin-bottom:4px; }
.mp-price-free{ color:#059669; }
.mp-card-title{ font-size:13px; font-weight:500; color:#374151; line-height:1.3; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-card-meta{ font-size:12px; color:#6B7280; margin-bottom:4px; }
.mp-card-location{ display:flex; align-items:center; gap:4px; font-size:12px; color:#94A3B8; }

/* Pagination */
.mp-pagination{ display:flex; justify-content:center; gap:6px; padding:24px; }
.mp-page-btn{ padding:8px 14px; border:1px solid #E5E7EB; border-radius:8px; font-size:13px; font-weight:600; color:#374151; text-decoration:none; background:#fff; transition:all .15s; }
.mp-page-btn:hover{ border-color:#1E5EFF; color:#1E5EFF; }
.mp-page-btn.active{ background:#1E5EFF; color:#fff; border-color:#1E5EFF; }

/* Empty */
.mp-empty{ text-align:center; padding:80px 24px; }
.mp-empty h3{ font-size:18px; color:#374151; margin:16px 0 6px; }
.mp-empty p{ font-size:14px; color:#94A3B8; }

/* Responsive */
@media(max-width:900px){
  .mp-layout{ grid-template-columns:1fr; }
  .mp-sidebar{ display:none; position:fixed; left:0; top:0; bottom:0; width:280px; z-index:100; box-shadow:4px 0 20px rgba(0,0,0,.15); }
  .mp-sidebar.open{ display:block; }
  .mp-topbar{ padding:10px 14px; gap:8px; }
  .mp-search-wrap{ padding:4px 10px; }
  .mp-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; padding:10px 14px; }
  .mp-results-info{ padding:8px 14px; }
  .mp-filter-toggle{ display:flex !important; align-items:center; justify-content:center; }
}

/* Detail Page */
.mp-detail-layout{ display:grid; grid-template-columns:1fr 380px; gap:32px; padding:24px; align-items:start; }
.mp-detail-gallery{ border-radius:12px; overflow:hidden; background:#F1F5F9; }
.mp-detail-main-img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#f8f8f8; }
.mp-detail-thumbs{ display:flex; gap:8px; margin-top:8px; overflow-x:auto; }
.mp-detail-thumbs img{ width:80px; height:60px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.mp-detail-thumbs img:hover,.mp-detail-thumbs img.active{ border-color:#1E5EFF; }
.mp-detail-info{ }
.mp-detail-price{ font-size:28px; font-weight:800; color:#101827; margin-bottom:8px; }
.mp-detail-title{ font-size:22px; font-weight:700; color:#101827; margin-bottom:16px; line-height:1.3; }
.mp-detail-specs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px; }
.mp-detail-spec{ padding:10px 14px; background:#F8FAFC; border-radius:8px; font-size:13px; }
.mp-detail-spec span{ color:#64748B; }
.mp-detail-spec strong{ color:#101827; font-weight:600; }
.mp-detail-desc{ margin-bottom:24px; }
.mp-detail-desc h3{ font-size:16px; font-weight:700; margin-bottom:10px; }
.mp-detail-desc p{ font-size:14px; color:#475569; line-height:1.7; white-space:pre-wrap; }
.mp-detail-actions{ display:flex; gap:8px; margin-bottom:20px; }
.mp-detail-actions .btn{ flex:1; text-align:center; padding:12px; border-radius:10px; font-weight:600; text-decoration:none; font-size:14px; }
.mp-btn-primary{ background:#1E5EFF; color:#fff; border:none; cursor:pointer; }
.mp-btn-primary:hover{ background:#2D1F6E; }
.mp-btn-whatsapp{ background:#25D366; color:#fff; border:none; cursor:pointer; }
.mp-btn-whatsapp:hover{ background:#1da851; }
.mp-btn-outline{ background:#fff; color:#334155; border:1.5px solid #E5E7EB; cursor:pointer; }
.mp-btn-outline:hover{ border-color:#1E5EFF; color:#1E5EFF; }
.mp-seller-card{ background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:20px; margin-bottom:16px; }
.mp-seller-card h4{ font-size:14px; margin-bottom:12px; }
.mp-seller-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.mp-seller-avatar{ width:40px; height:40px; border-radius:50%; background:#1E5EFF; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; overflow:hidden; }
.mp-seller-avatar img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:768px){
  .mp-detail-layout{ grid-template-columns:1fr; padding:16px; }
  .mp-detail-price{ font-size:22px; }
  .mp-detail-title{ font-size:18px; }
  .mp-detail-specs{ grid-template-columns:1fr; }
}

/* My Listings & Favorites */
.mp-my-grid{ display:flex; flex-direction:column; gap:12px; }
.mp-my-card{ display:flex; gap:16px; background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:16px; transition:border-color .15s; }
.mp-my-card:hover{ border-color:#1E5EFF; }
.mp-my-img{ width:100px; height:100px; border-radius:8px; overflow:hidden; background:#F1F5F9; flex-shrink:0; }
.mp-my-img img{ width:100%; height:100%; object-fit:cover; }
.mp-my-info{ flex:1; min-width:0; }
.mp-my-status{ font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.mp-my-status.active{ background:#DCFCE7; color:#166534; }
.mp-my-status.inactive{ background:#F1F5F9; color:#64748B; }
.mp-my-actions{ display:flex; gap:8px; margin-top:8px; }
.mp-my-btn{ font-size:12px; padding:5px 12px; border:1px solid #E5E7EB; border-radius:6px; background:#fff; color:#475569; cursor:pointer; text-decoration:none; display:inline-block; transition:all .15s; }
.mp-my-btn:hover{ background:#F1F5F9; color:#1E5EFF; border-color:#1E5EFF; }
.mp-fav-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.mp-fav-card{ background:#fff; border:1px solid #E5E7EB; border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.mp-fav-card:hover{ border-color:#1E5EFF; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.mp-fav-img{ position:relative; aspect-ratio:4/3; background:#F1F5F9; }
.mp-fav-img img{ width:100%; height:100%; object-fit:cover; }
.mp-fav-price{ position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.75); color:#fff; font-size:13px; font-weight:700; padding:3px 8px; border-radius:6px; }
.mp-fav-info{ padding:10px 12px; }
@media(max-width:900px){
  .mp-fav-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  .mp-layout{ grid-template-columns:1fr !important; }
  .mp-sidebar{ display:none !important; }
  .mp-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:8px !important; padding:10px 12px !important; }
  .mp-card-img{ aspect-ratio:1 !important; min-height:120px !important; }
  .mp-card-body{ padding:8px 10px !important; }
  .mp-card-title{ font-size:12px !important; }
  .mp-card-price{ font-size:14px !important; }
  .mp-card-meta{ font-size:10px !important; }
  .mp-card-location{ font-size:10px !important; }
  .mp-topbar{ padding:10px 12px; flex-wrap:wrap; gap:8px; }
  .mp-results-info{ padding:8px 12px; }
  .mp-my-card{ flex-direction:row; }
  .mp-my-img{ width:80px !important; height:80px !important; }
}
@media(max-width:480px){
  .mp-grid{ grid-template-columns:1fr 1fr !important; gap:6px !important; padding:6px 8px !important; }
  .mp-card-img{ aspect-ratio:4/3 !important; min-height:100px !important; }
  .mp-card-img img{ object-fit:cover !important; }
  .mp-card-body{ padding:5px 6px !important; }
  .mp-card-price{ font-size:12px !important; font-weight:800 !important; margin-bottom:1px !important; }
  .mp-card-title{ font-size:10px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin-bottom:1px !important; }
  .mp-card-meta{ font-size:9px !important; display:none !important; }
  .mp-card-location{ font-size:9px !important; }
  .mp-card-photos{ font-size:8px !important; padding:1px 4px !important; }
  .mp-card-badge{ font-size:7px !important; padding:1px 4px !important; }
  .mp-fav-grid{ grid-template-columns:1fr 1fr; }
  .mp-my-card{ flex-direction:column; }
  .mp-my-img{ width:100% !important; height:120px !important; }
}