:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e7edf5;

  --blue:#2f6fed;
  --blue2:#1e5ae0;

  --red:#ef4444;
  --red2:#dc2626;

  --shadow: 0 16px 40px rgba(16,24,40,.08);
  --shadow2: 0 8px 20px rgba(16,24,40,.06);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background: radial-gradient(900px 380px at 55% 120px, rgba(47,111,237,.10), transparent 60%),
              radial-gradient(700px 340px at 30% 90px, rgba(239,68,68,.08), transparent 58%),
              var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 18px}

/* NAV */
.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(246,248,252,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:10px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:.2px;
  font-size:22px;
}
.brand .dot{
  width:12px;height:12px;border-radius:999px;
  background: linear-gradient(135deg, var(--blue), var(--red));
  box-shadow: 0 6px 14px rgba(47,111,237,.25);
}
.pill-country{
  margin-left:10px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(47,111,237,.10);
  color: var(--blue);
  border: 1px solid rgba(47,111,237,.18);
  font-weight:700;
}

.nav-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--card);
  color:var(--text);
  box-shadow: var(--shadow2);
  transition: .16s ease;
  font-weight:700;
}
.btn:hover{transform: translateY(-1px)}
.btn.ghost{
  border-color: transparent;
  box-shadow: none;
  background: transparent;
  color: var(--text);
}
.btn.blue{
  background: linear-gradient(180deg, var(--blue), var(--blue2));
  color:#fff;
  border-color: rgba(47,111,237,.35);
}
.btn.red{
  background: linear-gradient(180deg, var(--red), var(--red2));
  color:#fff;
  border-color: rgba(239,68,68,.35);
}
.btn.soft{
  background: #f1f5ff;
  border-color: #dbe7ff;
  color: var(--blue);
  box-shadow: none;
}

/* HERO */
.hero{padding:22px 0 10px}
.hero-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.hero-top{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  padding:28px 26px 0;
  align-items:center;
}
@media(max-width: 980px){
  .hero-top{grid-template-columns: 1fr; padding:22px 18px 0}
}

.h-title{
  margin:0 0 12px;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-.8px;
}
@media(max-width:980px){ .h-title{font-size:34px} }

.h-sub{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
  max-width:60ch;
}

.hero-media{
  height:260px;
  border-radius: 18px;
  background:
    radial-gradient(260px 220px at 20% 30%, rgba(47,111,237,.16), transparent 62%),
    radial-gradient(260px 220px at 70% 40%, rgba(239,68,68,.10), transparent 62%),
    url('/assets/hero.jpg');
  background-size: cover;
  background-position: center;
}
@media(max-width:980px){ .hero-media{height:220px} }

.search-wrap{
  padding:18px 18px 20px;
}
.searchbar{
  display:grid;
  grid-template-columns: 1.25fr .7fr .55fr .7fr .45fr;
  gap:10px;
  background: #f8fbff;
  border: 1px solid #e6eefc;
  padding:12px;
  border-radius:16px;
}
@media(max-width: 980px){
  .searchbar{grid-template-columns: 1fr 1fr;}
  .span2{grid-column: span 2;}
}
.field{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid #e6edf7;
  background:#fff;
  color:var(--text);
  outline:none;
  font-weight:600;
}
.field::placeholder{color:#98a4b5; font-weight:600}
.select{appearance:none; background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right:34px;}

.stats{
  margin-top:14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  box-shadow: var(--shadow2);
}
.stat{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#fbfdff;
  border:1px solid #edf3fb;
  min-width: 180px;
}
@media(max-width:980px){ .stat{min-width: 0; flex:1} }
.icon{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  background: rgba(47,111,237,.12);
  color: var(--blue);
}
.icon.red{background: rgba(239,68,68,.12); color: var(--red);}
.icon.gold{background: rgba(245,158,11,.16); color: #b45309;}
.stat b{font-size:22px}
.stat span{color:var(--muted); font-weight:700}

/* SECTIONS */
.section{padding:18px 0}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin:14px 0 12px;
}
.section-head h2{margin:0; font-size:34px; letter-spacing:-.6px}
.section-head p{margin:6px 0 0; color:var(--muted)}
.sort{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #dbeafe;
  color:#1d4ed8;
  font-weight:800;
}

.pills{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.pill{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow: var(--shadow2);
  font-weight:800;
  color:#111827;
}
.pill small{color:var(--muted); font-weight:800}

.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
@media(max-width:980px){ .grid{grid-template-columns: repeat(2, 1fr)} }
@media(max-width:640px){ .grid{grid-template-columns: 1fr} }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow: var(--shadow2);
  transition:.16s ease;
}
.card:hover{transform: translateY(-2px); box-shadow: var(--shadow)}
.card-media{
  height:170px;
  background:
    radial-gradient(240px 140px at 25% 20%, rgba(47,111,237,.14), transparent 60%),
    url('/assets/placeholder-car.jpg');
  background-size: cover;
  background-position:center;
  position:relative;
}
.tag{
  position:absolute; top:12px; left:12px;
  padding:8px 12px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
  background: rgba(255,255,255,.92);
  border: 1px solid #e6edf7;
  box-shadow: var(--shadow2);
}
.tag.featured{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.22);
  color:#b45309;
}

.card-body{padding:14px 14px 16px}
.card-title{margin:0 0 8px; font-size:16px; font-weight:900; letter-spacing:-.2px}
.card-meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-weight:800; font-size:13px}
.price{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px;
}
.price b{font-size:18px}
.small{color:var(--muted); font-weight:800; font-size:13px}

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  padding:24px 0 34px;
  margin-top:24px;
  color:var(--muted);
  background: rgba(255,255,255,.45);
}

.nav-right{ display:flex; align-items:center; gap:10px; }

.user-dd{ position:relative; }
.user-btn{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  transition: box-shadow .15s ease, transform .08s ease;
}
.user-btn:hover{ box-shadow:0 10px 25px rgba(0,0,0,.10); transform:translateY(-1px); }
.user-btn:active{ transform:translateY(0); }

.avatar{
  width:36px; height:36px; border-radius:999px;
  overflow:hidden; flex:0 0 36px;
  border:1px solid rgba(0,0,0,.12);
  background:#111;
  display:flex; align-items:center; justify-content:center;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-initial{ color:#fff; font-weight:900; }

.user-meta{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.user-name{ font-weight:900; font-size:13px; color:#111; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-sub{ font-size:12px; color:#6b7280; max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chev{ font-size:12px; color:#6b7280; margin-left:2px; }

.dd-menu{
  position:absolute;
  right:0; top:calc(100% + 10px);
  width:240px;
  padding:8px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 24px 60px rgba(0,0,0,.14);
  display:none;
  z-index:9999;
}
.user-dd.open .dd-menu{ display:block; }

.dd-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#111;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.dd-item:hover{ background:rgba(0,0,0,.06); }
.dd-item.danger{ color:#b91c1c; }
.dd-item.danger:hover{ background:rgba(239,68,68,.10); }

.dd-sep{ height:1px; background:rgba(0,0,0,.08); margin:6px 4px; }

@media (max-width: 760px){
  .user-meta{ display:none; }
  .user-btn{ padding:8px; }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{
  color:#2b59ff;              /* culoarea logo-ului */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform: translateY(1px);  /* mic fix vizual */
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo{
  color:#2b59ff;              /* ALBASTRU MODERN */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform: translateY(1px);
}

/* opțional – hover elegant */
.brand:hover .brand-logo{
  color:#1f4ae0;
}
/* ===== STATS: responsive, fără să se strângă urât pe mobil ===== */
.stats{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}

.stat{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:12px 14px;
  min-width:0; /* important pt ellipsis */
}

.stat .icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.04);
  flex:0 0 auto;
}

.stat b{
  font-size:18px;
  line-height:1.1;
}

.stat span{
  display:block;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;         /* nu mai sparge pe litere */
  overflow:hidden;
  text-overflow:ellipsis;     /* taie frumos dacă e prea lung */
}

/* ===== TABLET ===== */
@media (max-width: 980px){
  .stats{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ===== MOBILE ===== */
@media (max-width: 560px){
  .stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .stat{ padding:10px 12px; border-radius:14px; }
  .stat .icon{ width:34px; height:34px; border-radius:11px; }
  .stat b{ font-size:17px; }
  .stat span{ font-size:12px; }
}
/* ===== STATS responsive FIX (force) ===== */
.stats{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
}

.stats .stat{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  padding:12px 14px !important;
  border-radius:16px !important;
}

.stats .stat .icon{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.stats .stat span{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* tablet */
@media (max-width: 980px){
  .stats{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

/* mobile */
@media (max-width: 560px){
  .stats{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
  .stats .stat{
    padding:10px 12px !important;
    border-radius:14px !important;
  }
  .stats .stat .icon{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
  }
}
/* ===== STATS responsive FIX (HOME + ADMIN) ===== */
.stats{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:14px !important;
}

.stats .stat{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  min-width:0 !important;
}

.stats .stat .icon{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
}

.stats .stat span{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* TABLET */
@media (max-width: 980px){
  .stats{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}

/* MOBILE */
@media (max-width: 560px){
  .stats{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .stats .stat{
    padding:10px 12px !important;
    border-radius:14px !important;
  }
  .stats .stat .icon{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
  }
}
/* ===== STATS: look mai premium / îngroșat ===== */
.stats .stat{
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  border: 1.5px solid rgba(15, 23, 42, .10) !important; /* mai gros */
  box-shadow:
    0 14px 35px rgba(2, 8, 23, .06),
    0 2px 8px rgba(2, 8, 23, .04) !important;
  padding: 14px 16px !important;
}

.stats .stat:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 45px rgba(2, 8, 23, .08),
    0 3px 10px rgba(2, 8, 23, .05) !important;
  transition: .18s ease;
}

.stats .stat .icon{
  background: linear-gradient(180deg, rgba(37, 99, 235, .14), rgba(37, 99, 235, .06)) !important;
  border: 1px solid rgba(37, 99, 235, .18) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .10) !important;
}

.stats .stat .icon.red{
  background: linear-gradient(180deg, rgba(239, 68, 68, .14), rgba(239, 68, 68, .06)) !important;
  border-color: rgba(239, 68, 68, .18) !important;
  box-shadow: 0 10px 22px rgba(239, 68, 68, .10) !important;
}
.stats .stat .icon.gold{
  background: linear-gradient(180deg, rgba(245, 158, 11, .16), rgba(245, 158, 11, .07)) !important;
  border-color: rgba(245, 158, 11, .20) !important;
  box-shadow: 0 10px 22px rgba(245, 158, 11, .10) !important;
}

.stats .stat b{
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px;
}

.stats .stat span{
  font-size: 13px !important;
  font-weight: 800 !important;
  color: rgba(15, 23, 42, .62) !important;
}

/* mobile: păstrăm gros dar compact */
@media (max-width: 560px){
  .stats .stat{
    padding: 12px 14px !important;
    box-shadow:
      0 12px 30px rgba(2, 8, 23, .06),
      0 2px 7px rgba(2, 8, 23, .04) !important;
  }
  .stats .stat b{ font-size: 19px !important; }
}
/* wrapper-ul în care stă stats (dacă e într-un hero-card) */
.hero-card .stats{
  padding: 10px !important;
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 18px !important;
}
.dealer-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  font-weight:900; font-size:12px;
  background:rgba(34,197,94,.12);
  color:#15803d;
  border:1px solid rgba(34,197,94,.25);
  white-space:nowrap;
}
.dealer-badge .dot{
  width:8px; height:8px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.15);
}
.card-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.dealer-badge.mini{
  padding:4px 8px;
  font-size:11px;
  font-weight:900;
  border-radius:999px;
  white-space:nowrap;
  transform: translateY(1px);
}

.dealer-badge.mini .dot{
  width:7px; height:7px;
  box-shadow:0 0 0 3px rgba(34,197,94,.14);
}
.dealer-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:1;
}

.dealer-link:hover .dealer-badge.mini{
  filter: brightness(0.98);
}
.card-title-row .card-title{
  flex:1;
  min-width:0;
}

.card-title-row .card-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* titlul să nu împingă badge-ul */
.card-title-row .card-title{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* link-ul să se comporte ca un element flex, nu ca text */
.dealer-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:1;
  flex:0 0 auto;
}

/* aliniere mai frumoasă pe același rând */
.card-title-row{
  align-items:center; /* în loc de flex-start */
}
.dealer-click{
  cursor:pointer;
}

.card-media .img-wrap{
  background: linear-gradient(90deg,#eef2f7 25%,#f6f8fb 37%,#eef2f7 63%);
  background-size: 400% 100%;
  animation: shimmer 1.1s ease infinite;
}
@keyframes shimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.pagination-wrap{
  display:flex;
  justify-content:center;
  margin:18px 0 10px;
}

.pagination{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:10px;
}

.pagination .page-item{ list-style:none; }

.pagination .page-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  font-weight:800;
  text-decoration:none;
}

.pagination .active .page-link{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 10px 26px rgba(59,130,246,.12);
}

.pagination .disabled .page-link{
  opacity:.45;
  pointer-events:none;
}
.pagination svg{
  width:16px !important;
  height:16px !important;
}
.pagination .page-link{
  line-height:1 !important;
}
/* ===== PAGINATION FIX (works with Laravel default + bootstrap) ===== */
.pagination-wrap{
  display:flex;
  justify-content:center;
  margin:18px 0 10px;
}

/* Laravel default (Tailwind) output includes <nav> and <div>... but it still contains .pagination in bootstrap view.
   So we target both patterns safely. */
.pagination, 
.pagination-wrap nav ul{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;

  padding:10px !important;
  margin:0 !important;

  list-style:none !important;      /* <<< scoate bullets */
}

/* dacă e bootstrap view */
.pagination .page-item{ list-style:none !important; margin:0 !important; }
.pagination .page-link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-width:42px !important;
  height:40px !important;
  padding:0 12px !important;

  border-radius:12px !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background:#fff !important;
  color:#111 !important;

  font-weight:800 !important;
  text-decoration:none !important;
  line-height:1 !important;
}

/* dacă e tailwind view (linkuri simple) */
.pagination-wrap nav a,
.pagination-wrap nav span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-width:42px !important;
  height:40px !important;
}
/* ===== PAGINATION – ACTIVE CLEAN & ROTUND ===== */

/* Bootstrap view */
.pagination .page-item.active .page-link{
  background: linear-gradient(135deg, #2b59ff, #1f4ae0) !important;
  color:#fff !important;
  border:none !important;

  border-radius:999px !important;   /* 👈 rotund */
  width:44px !important;
  height:44px !important;
  padding:0 !important;

  box-shadow: 0 10px 22px rgba(43,89,255,.35);
  transform:none !important;
}

/* Tailwind view */
.pagination-wrap [aria-current="page"]{
  background: linear-gradient(135deg, #2b59ff, #1f4ae0) !important;
  color:#fff !important;
  border:none !important;

  border-radius:999px !important;
  width:44px !important;
  height:44px !important;
  padding:0 !important;

  box-shadow: 0 10px 22px rgba(43,89,255,.35);
}

/* Toate butoanele (uniforme) */
.pagination .page-link,
.pagination-wrap nav a,
.pagination-wrap nav span{
  border-radius:999px !important;
  width:44px;
  height:44px;
  padding:0 !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-weight:800;
}

  .bid-row{ transition: all .2s ease; }
  .bid-top{
    background: rgba(10,122,47,.08);
    border-radius: 12px;
    padding: 10px 12px !important;
  }
  .bid-pulse{
    animation: bidPulse .6s ease;
  }
  @keyframes bidPulse{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.02); }
    100%{ transform: scale(1); }
  }