/* =========================
   Archive Logos Wrapper
========================= */

.lm-logo-archive-wrap{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

/* =========================
   Header
========================= */

.lm-logo-archive-header{
  text-align:center;
  margin-bottom:40px;
}

.lm-logo-archive-title{
  font-size:clamp(2rem,5vw,2.4rem);
  color:#0f172a;
  margin-bottom:10px;
  font-weight:700;
}

.lm-logo-archive-subtitle{
  font-size:1.05rem;
  color:#64748b;
  line-height:1.7;
}

/* results count */

.lm-archive-results-count{
  margin-bottom:20px;
  color:#475569;
  font-size:.95rem;
}

/* =========================
   Filters
========================= */

.lm-logo-archive-filters{
  background:#fff;
  padding:25px;
  border-radius:18px;
  margin-bottom:30px;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 30px rgba(15,23,42,.05);
}

.lm-logo-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:flex-end;
}

.lm-filter-item{
  flex:1;
  min-width:200px;
}

.lm-filter-item label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  font-size:.9rem;
  color:#334155;
}

.lm-filter-item input,
.lm-filter-item select{
  width:100%;
  padding:12px 14px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
  font-size:.95rem;
  transition:.2s;
}

.lm-filter-item input:focus,
.lm-filter-item select:focus{
  outline:none;
  border-color:#6f42c1;
  box-shadow:0 0 0 3px rgba(111,66,193,.15);
}

/* =========================
   Grid
========================= */

.lm-logo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-bottom:40px;
}

/* =========================
   Card
========================= */

.lm-logo-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  transition:.25s;
  box-shadow:0 8px 30px rgba(15,23,42,.05);
  display:flex;
  flex-direction:column;
}

.lm-logo-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(15,23,42,.1);
}

/* image */

.lm-logo-card-thumb img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

.lm-logo-card-thumb-placeholder{
  height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f5f9;
  color:#94a3b8;
  font-size:.9rem;
}

/* body */

.lm-logo-card-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* title */

.lm-logo-card-title{
  font-size:1.15rem;
  font-weight:700;
  margin-bottom:8px;
  line-height:1.4;
}

.lm-logo-card-title a{
  text-decoration:none;
  color:#0f172a;
}

.lm-logo-card-title a:hover{
  color:#6f42c1;
}

/* designer */

.lm-logo-card-designer{
  font-size:.9rem;
  color:#64748b;
  margin-bottom:12px;
}

/* meta */

.lm-logo-card-meta{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
  color:#475569;
  margin-bottom:15px;
}

.lm-logo-card-price span{
  font-weight:600;
  color:#0f172a;
}

/* =========================
   Engagement
========================= */

.lm-logo-engagement{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:15px;
  font-size:.85rem;
}

.lm-like-btn{
  border:none;
  background:#f1f5f9;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  gap:6px;
  align-items:center;
  font-size:.85rem;
  transition:.2s;
}

.lm-like-btn:hover{
  background:#e2e8f0;
}

/* stars */

.lm-stars{
  display:flex;
  gap:4px;
}

.lm-rating-star{
  text-decoration:none;
  font-size:15px;
  color:#cbd5e1;
}

.lm-rating-star:hover{
  color:#f59e0b;
}

/* =========================
   Actions
========================= */

.lm-logo-card-actions{
  margin-top:auto;
}

.lm-btn{
  padding:11px 18px;
  text-decoration:none;
  border-radius:12px;
  text-align:center;
  cursor:pointer;
  font-weight:600;
  display:block;
  transition:.2s;
  font-size:.9rem;
}

/* primary */

.lm-btn-primary{
  background:#6f42c1;
  color:#fff;
  box-shadow:0 6px 18px rgba(111,66,193,.18);
}

.lm-btn-primary:hover{
  background:#5b34a4;
}

/* secondary */

.lm-btn-secondary{
  background:#fff;
  border:1px solid #e5e7eb;
  color:#334155;
}

.lm-btn-secondary:hover{
  background:#f8fafc;
}

/* =========================
   VIP Banner
========================= */

.lm-vip-banner{
  background:linear-gradient(135deg,#f97316,#ea580c);
  color:#fff;
  padding:25px;
  border-radius:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
  box-shadow:0 10px 25px rgba(234,88,12,.2);
}

.lm-vip-banner h2{
  margin:0 0 6px;
}

.lm-vip-banner p{
  margin:0;
  font-size:.95rem;
}

/* =========================
   Pagination
========================= */

.lm-logo-pagination{
  text-align:center;
  margin-top:40px;
}

.lm-logo-pagination ul{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:0;
  list-style:none;
}

.lm-logo-pagination .page-numbers{
  display:inline-block;
  padding:9px 15px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  text-decoration:none;
  color:#334155;
  font-size:.9rem;
}

.lm-logo-pagination .page-numbers:hover{
  background:#f1f5f9;
}

.lm-logo-pagination .current{
  background:#6f42c1;
  color:#fff;
  border-color:#6f42c1;
}

/* =========================
   No Results
========================= */

.lm-no-results{
  text-align:center;
  padding:40px;
  border:1px dashed #e2e8f0;
  border-radius:14px;
  color:#64748b;
}

/* =========================
   Responsive
========================= */

@media (max-width:992px){

.lm-logo-grid{
  grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:600px){

.lm-logo-grid{
  grid-template-columns:1fr;
}

.lm-logo-filter-row{
  flex-direction:column;
}

.lm-vip-banner{
  flex-direction:column;
  text-align:center;
  gap:15px;
}

}
