/* Car Classified - minimal premium UI (scoped) */
.car-cc { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:#111; }
.car-cc a { color: inherit; text-decoration: none; }
.car-cc-header { max-width: 1100px; margin: 0 auto 14px; padding: 8px 14px; }
.car-cc-h1 { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.car-cc-sub { margin: 6px 0 0; color:#666; }

.car-cc-filters { max-width: 1100px; margin: 0 auto 14px; padding: 14px; border:1px solid #e6e6e6; border-radius: 18px; background:#fff; }
.car-cc-f-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.car-cc-f label { display:block; font-size: 12px; color:#666; margin-bottom: 6px; }
.car-cc-f input, .car-cc-f select { width:100%; padding: 10px 12px; border:1px solid #ddd; border-radius: 12px; outline: none; background:#fff; }
.car-cc-f input:focus, .car-cc-f select:focus { border-color:#111; }
.car-cc-f-actions { display:flex; gap:12px; align-items:center; }
.car-cc-btn { padding: 10px 14px; border:1px solid #111; border-radius: 12px; background:#111; color:#fff; cursor:pointer; font-weight:700; }
.car-cc-link { color:#111; font-weight:700; }

.car-cc-grid { max-width: 1100px; margin: 0 auto; padding: 0 14px 18px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.car-cc-card { border:1px solid #e6e6e6; border-radius: 18px; overflow:hidden; background:#fff; transition: transform .12s ease, box-shadow .12s ease; }
.car-cc-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.car-cc-card-media { position: relative; aspect-ratio: 4/3; background:#f4f4f4; }
.car-cc-card-media img { width:100%; height:100%; object-fit: cover; display:block; }
.car-cc-card-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#888; font-weight:700; }
.car-cc-badges { position:absolute; left:10px; top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.car-cc-badge { font-size: 12px; font-weight:800; padding: 6px 10px; border-radius: 999px; background:#111; color:#fff; }
.car-cc-badge-muted { background:#fff; color:#111; border:1px solid #ddd; }

.car-cc-card-body { padding: 12px 12px 14px; }
.car-cc-card-title { font-weight: 900; letter-spacing: -0.01em; margin-bottom: 6px; }
.car-cc-card-price { font-weight: 900; font-size: 18px; margin-bottom: 8px; }
.car-cc-card-specs { display:flex; gap:10px; flex-wrap:wrap; font-size: 13px; color:#333; }
.car-cc-muted { color:#666; }

.car-cc-pagination { max-width:1100px; margin: 14px auto 26px; padding: 0 14px; display:flex; gap:8px; flex-wrap:wrap; }
.car-cc-pagination a, .car-cc-pagination span { padding: 8px 12px; border:1px solid #ddd; border-radius: 12px; }
.car-cc-pagination .current { background:#111; color:#fff; border-color:#111; }

.car-cc-empty { max-width:1100px; margin: 0 auto; padding: 32px 14px; border:1px dashed #ddd; border-radius: 18px; color:#666; }
.car-cc-empty-title { font-size: 18px; font-weight: 900; color:#111; }
.car-cc-empty-sub { margin-top: 6px; }

@media (max-width: 980px) {
  .car-cc-f-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .car-cc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .car-cc-f-row { grid-template-columns: 1fr; }
  .car-cc-grid { grid-template-columns: 1fr; }
}


.car-cc-save { position:absolute; right:10px; top:10px; margin:0; }
.car-cc-save-btn { padding:6px 10px; border-radius:999px; border:1px solid #ddd; background: rgba(255,255,255,.92); font-weight:800; cursor:pointer; }
.car-cc-save-btn:hover { border-color:#111; }


/* Single Ad */
.car-cc-single-grid { max-width:1100px; margin:0 auto; padding:14px; display:grid; grid-template-columns: 2fr 1fr; gap:16px; }
.car-cc-gallery img { width:100%; border-radius:14px; margin-bottom:10px; }
.car-cc-single-price { font-size:26px; font-weight:900; margin:10px 0; }
.car-cc-specs-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin:14px 0; }
.car-cc-specs-grid div { padding:10px; border:1px solid #eee; border-radius:12px; }
.car-cc-specs-grid strong { display:block; font-size:12px; color:#666; }
.car-cc-description { margin-top:16px; }

.car-cc-single-side { position:sticky; top:20px; }
.car-cc-dealer-card { border:1px solid #ddd; border-radius:18px; padding:14px; background:#fff; }
.car-cc-dealer-title { font-weight:900; margin-bottom:10px; display:flex; gap:8px; align-items:center; }

.car-cc-btn-outline { display:block; text-align:center; padding:10px 14px; border:1px solid #111; border-radius:12px; margin-top:10px; font-weight:700; }

@media (max-width: 980px) {
  .car-cc-single-grid { grid-template-columns: 1fr; }
  .car-cc-single-side { position:static; }
}


/* Single ad (premium) */
.car-cc-box { max-width: 1100px; margin: 0 auto 14px; padding: 14px; border:1px solid #e6e6e6; border-radius: 18px; background:#fff; }
.car-cc-h3 { margin:0 0 10px; font-size: 16px; font-weight: 900; letter-spacing: -0.01em; }
.car-cc-alert { padding: 10px 12px; border:1px solid #ddd; border-radius: 12px; margin: 0 0 12px; background:#fff; }

.car-cc-form-row { display:flex; gap: 12px; flex-wrap:wrap; }
.car-cc-field { flex:1; min-width: 220px; margin: 0 0 12px; }
.car-cc-field label { display:block; font-size: 12px; color:#666; margin-bottom: 6px; }
.car-cc-field input, .car-cc-field textarea { width:100%; padding: 10px 12px; border:1px solid #ddd; border-radius: 12px; outline:none; }
.car-cc-field input:focus, .car-cc-field textarea:focus { border-color:#111; }
.car-cc-btn-ghost { background:#fff !important; color:#111 !important; border-color:#111 !important; }

.car-cc-ad-top { display:flex; gap: 14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.car-cc-ad-sub { display:flex; gap: 8px; align-items:center; flex-wrap:wrap; margin-top: 6px; }
.car-cc-dot { color:#aaa; }

.car-cc-ad-pricewrap { text-align:right; }
.car-cc-ad-price { font-weight: 900; font-size: 24px; letter-spacing: -0.02em; }

.car-cc-ad-layout { max-width:1100px; margin: 0 auto; padding: 0 14px 18px; display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; }
.car-cc-side { position: sticky; top: 14px; align-self: start; }
.car-cc-gallery { padding: 0; overflow:hidden; }
.car-cc-gallery-main { aspect-ratio: 16/10; background:#f4f4f4; }
.car-cc-gallery-main img { width:100%; height:100%; object-fit: cover; display:block; }
.car-cc-gallery-thumbs { display:flex; gap: 8px; padding: 12px; overflow:auto; border-top:1px solid #eee; }
.car-cc-gallery-thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: 12px; border:1px solid #eee; }
.car-cc-gallery-empty { padding: 24px; text-align:center; color:#666; }
.car-cc-gallery-actions { display:flex; gap: 10px; flex-wrap:wrap; padding: 12px; border-top:1px solid #eee; }

.car-cc-desc { }
.car-cc-rich p { margin: 0 0 10px; }

.car-cc-specs { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.car-cc-specs div { padding: 10px 12px; border:1px solid #eee; border-radius: 14px; }
.car-cc-specs span { display:block; font-size: 12px; color:#666; margin-bottom: 4px; }
.car-cc-specs strong { font-weight: 900; }

.car-cc-seller { display:flex; gap: 12px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.car-cc-seller-name { font-weight: 900; margin-bottom: 4px; }
.car-cc-seller-actions { display:flex; gap: 10px; flex-wrap:wrap; }

.car-cc-mobile-cta { display:none; position:fixed; left:0; right:0; bottom:0; padding: 10px 14px; background: rgba(255,255,255,.96); border-top:1px solid #eee; gap: 10px; justify-content:center; z-index: 999; }
.car-cc-mobile-cta .car-cc-btn { flex:1; max-width: 240px; text-align:center; }

/* Inventory (My Listings) – SaaS style */
.car-cc-inv-head { max-width: 980px; margin: 0 0 14px; }
.car-cc-inv-title { margin: 0; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.car-cc-inv-sub { margin-top: 4px; color: #666; font-size: 13px; }

.car-cc-alert { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(0,0,0,.12); background:#fff; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.car-cc-alert--success { border-color: rgba(0,200,120,.35); background: rgba(0,200,120,.08); }

.car-cc-inv-kpis { display:flex; gap:12px; flex-wrap:wrap; }
.car-cc-inv-kpi { flex: 1 1 420px; border:1px solid #e6e6e6; border-radius: 18px; background:#fff; padding: 14px; }
.car-cc-inv-kpi--actions { flex: 0 0 auto; display:flex; align-items:center; gap:10px; }
.car-cc-inv-kpi-label { color:#666; font-size: 13px; }
.car-cc-inv-kpi-value { font-size: 18px; font-weight: 900; margin-top: 2px; }
.car-cc-inv-kpi-sub { margin-top: 8px; color:#333; font-size: 13px; }

.car-cc-inv-controls { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; max-width: 980px; }
.car-cc-inv-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.car-cc-inv-tab { display:inline-flex; align-items:center; padding: 6px 10px; border:1px solid #111; border-radius: 999px; text-decoration:none; color:#111; font-weight:700; font-size: 13px; background:#fff; }
.car-cc-inv-tab.is-active { background:#111; color:#fff; }
.car-cc-inv-search { display:flex; gap:8px; align-items:center; margin:0; }
.car-cc-inv-search input[type="text"] { padding: 8px 10px; border:1px solid #ddd; border-radius: 12px; min-width: 220px; }

.car-cc-inv-grid { max-width: 980px; }
.car-cc-inv-card .car-cc-card-body { padding: 12px 12px 14px; }
.car-cc-inv-actions { margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.car-cc-inv-actions-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0; }

/* Button modifiers (backwards compatible) */
.car-cc-btn--sm { padding: 8px 10px; border-radius: 12px; font-size: 13px; }
.car-cc-btn--primary { background:#111; color:#fff; border-color:#111; }
.car-cc-btn--ghost { background:#fff; color:#111; border-color:#111; }
.car-cc-btn--danger { background:#fff; color:#b91c1c; border-color:#f3c6c6; }

@media (max-width: 640px) {
  .car-cc-inv-kpi { flex-basis: 100%; }
  .car-cc-inv-kpi--actions { width:100%; justify-content:flex-start; }
  .car-cc-inv-search input[type="text"] { min-width: 160px; }
}

@media (max-width: 980px) {
  .car-cc-ad-layout { grid-template-columns: 1fr; }
  .car-cc-side { position: static; }
}
@media (max-width: 560px) {
  .car-cc-ad-pricewrap { text-align:left; }
  .car-cc-mobile-cta { display:flex; }
  .car-cc-gallery-actions { display:none; }
}

/* =============================
   Panel Enterprise (Owner/Dealer/User)
   ============================= */
.car-cc-panel-app{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:#0b1220;
  background:#f4f6f9;
  padding: 18px 12px 28px;
}
.car-cc-panel-shell{
  max-width: 1200px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 18px;
  align-items:start;
}
.car-cc-panel-sidebar{
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.car-cc-panel-brand-name{
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.car-cc-panel-user{ margin-top: 6px; padding-top: 10px; border-top:1px solid #eef0f3; }
.car-cc-panel-user-name{ font-weight: 800; margin-bottom: 6px; }
.car-cc-panel-user-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.car-cc-panel-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid #e6e8ec;
  background:#f7f8fa;
  font-size: 12px;
  font-weight: 900;
}
.car-cc-panel-sub{ font-size: 12px; color:#5b6473; font-weight: 700; }

.car-cc-panel-nav{ margin-top: 14px; }
.car-cc-panel-nav-group{ margin-bottom: 14px; }
.car-cc-panel-nav-title{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:#667085;
  font-weight: 900;
  margin: 0 0 8px;
}
.car-cc-panel-link{
  display:flex;
  align-items:center;
  padding: 10px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  color:#0b1220;
  font-weight: 800;
}
.car-cc-panel-link:hover{ background:#f7f8fa; border-color:#eef0f3; }
.car-cc-panel-link.is-active{ background:#1f3c88; color:#fff; border-color:#1f3c88; }

.car-cc-panel-main{ min-width: 280px; }
.car-cc-panel-header{
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  margin-bottom: 14px;
}
.car-cc-panel-title{
  margin:0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.car-cc-panel-desc{ margin-top: 6px; color:#5b6473; font-size: 13px; }

.car-cc-panel-kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.car-cc-panel-card{
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
.car-cc-panel-kpi-label{ color:#667085; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.car-cc-panel-kpi-value{ font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }

.car-cc-panel-card-title{ font-weight: 900; margin: 0 0 10px; }
.car-cc-panel-muted{ color:#667085; font-size: 13px; }

.car-cc-panel-actions{ margin-bottom: 12px; }
.car-cc-panel-action-row{ display:flex; gap: 10px; flex-wrap:wrap; }
.car-cc-panel-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid #e6e8ec;
  background:#fff;
  font-weight: 900;
  color:#0b1220;
}
.car-cc-panel-btn.is-sm{
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
}
.car-cc-panel-btn.is-primary{ background:#1f3c88; border-color:#1f3c88; color:#fff; }
.car-cc-panel-btn.is-primary:hover{ background:#162f6a; border-color:#162f6a; }
.car-cc-panel-btn.is-secondary{
  background:#fff;
  border-color:#1f3c88;
  color:#1f3c88;
}
.car-cc-panel-btn.is-secondary:hover{
  background:#f1f4ff;
  border-color:#162f6a;
  color:#162f6a;
}
.car-cc-panel-btn.is-muted{
  background:#f7f8fa;
  border-color:#eef0f3;
  color:#3a465a;
}
.car-cc-panel-btn.is-muted:hover{ border-color:#cfd4dd; }
.car-cc-panel-btn.is-ghost:hover{ border-color:#cfd4dd; }

/* Panel sub-nav pills (e.g., Moderation status) */
.car-cc-panel-subnav{ display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 14px; }
.car-cc-panel-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid #e6e8ec;
  background:#fff;
  color:#0b1220;
  font-weight: 900;
  text-decoration:none;
}
.car-cc-panel-pill:hover{ border-color:#cfd4dd; }
.car-cc-panel-pill.is-active{ background:#1f3c88; border-color:#1f3c88; color:#fff; }
.car-cc-panel-pill .cc-count{ opacity:0.85; font-weight:900; }

/* Small inputs used inside panel action rows */
.car-cc-panel-input-sm{
  width:180px;
  border:1px solid #e6e8ec;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  background:#fff;
}
.car-cc-panel-input-sm:focus{ outline:none; border-color:#1f3c88; box-shadow: 0 0 0 3px rgba(31,60,136,0.10); }

.car-cc-panel-content{ }

@media (max-width: 980px){
  .car-cc-panel-shell{ grid-template-columns: 1fr; }
  .car-cc-panel-kpis{ grid-template-columns: 1fr; }
}


.car-cc-panel-btn.is-danger{
  background:#fff5f5;
  border-color:#fecaca;
  color:#b91c1c;
}
.car-cc-panel-btn.is-danger:hover{
  background:#ffe4e6;
  border-color:#fca5a5;
  color:#991b1b;
}