/* ===== CLASSIFIEDS PAGE ===== */
.classifieds-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-8); align-items: start; }
.classifieds-list { display: flex; flex-direction: column; gap: var(--space-4); }
.classified-card { background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; gap: 0; transition: transform var(--transition-base), box-shadow var(--transition-base); }
.classified-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.classified-card-image { width: 160px; flex-shrink: 0; background: var(--color-bg-light); overflow: hidden; }
.classified-card-image img { width: 100%; height: 100%; object-fit: cover; }
.classified-card-image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; background: var(--color-bg-light); }
.classified-card-body { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; }
.classified-card-category { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary); background: rgba(196, 30, 58, 0.08); padding: 2px 8px; border-radius: var(--radius-sm); display: inline-block; margin-bottom: var(--space-2); }
.classified-card-title { font-size: var(--font-size-base); font-weight: 700; color: var(--color-title); margin-bottom: var(--space-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.classified-card-desc { font-size: var(--font-size-sm); color: var(--color-body); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-3); }
.classified-card-footer { display: flex; align-items: center; justify-content: space-between; }
.classified-card-meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--font-size-xs); color: var(--color-muted); }
.classified-card-price { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-primary); }

/* ===== CLASSIFIED DETAIL PAGE ===== */
.classified-detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: start; }
.classified-detail-main { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.classified-detail-images { }
.classified-detail-images img { width: 100%; max-height: 400px; object-fit: cover; }
.classified-detail-body { padding: var(--space-6); }
.classified-detail-title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-title); margin-bottom: var(--space-4); }
.classified-detail-meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-light); }
.classified-detail-content { font-size: var(--font-size-base); color: var(--color-body); line-height: var(--line-height-relaxed); }

.classified-contact-card { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-6); position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.classified-contact-title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-5); }
.classified-publisher { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-light); }
.classified-publisher-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.classified-publisher-name { font-weight: 700; color: var(--color-title); }
.classified-publisher-meta { font-size: var(--font-size-xs); color: var(--color-muted); }
.classified-contact-info { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.classified-contact-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); }
.classified-contact-item-icon { font-size: 18px; color: var(--color-primary); }

/* ===== POST CLASSIFIED PAGE ===== */
.post-classified-form { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-8); max-width: 720px; margin: 0 auto; }
.post-classified-title { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-8); }
.category-select-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.category-select-item { border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; cursor: pointer; transition: all var(--transition-fast); }
.category-select-item:hover { border-color: var(--color-primary); }
.category-select-item.selected { border-color: var(--color-primary); background: rgba(196, 30, 58, 0.06); }
.category-select-item-icon { font-size: 28px; margin-bottom: var(--space-2); }
.category-select-item-name { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-title); }
.image-upload-area { border: 2px dashed var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; cursor: pointer; transition: all var(--transition-fast); }
.image-upload-area:hover { border-color: var(--color-primary); background: rgba(196, 30, 58, 0.02); }
.image-upload-icon { font-size: 40px; margin-bottom: var(--space-3); color: var(--color-muted); }
.image-upload-text { font-size: var(--font-size-sm); color: var(--color-muted); }
.image-upload-hint { font-size: var(--font-size-xs); color: var(--color-muted); margin-top: var(--space-2); }

/* ===== PUBLISHER PAGE ===== */
.publisher-header { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-8); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-6); }
.publisher-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; flex-shrink: 0; }
.publisher-info { flex: 1; }
.publisher-name { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-title); margin-bottom: var(--space-2); }
.publisher-meta { display: flex; gap: var(--space-5); font-size: var(--font-size-sm); color: var(--color-muted); flex-wrap: wrap; }
.publisher-bio { font-size: var(--font-size-sm); color: var(--color-body); margin-top: var(--space-3); }