/* =========================
   Catalog Card — GradMate polish
========================= */

.cc-card{
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(29,78,216,.06), rgba(109,40,217,.03) 55%, rgba(255,255,255,0) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .10);
  border-color: rgba(29,78,216,.30);
}

.cc-body{ padding: 14px 14px 12px; }

.cc-top{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

.cc-title{
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 8px 0 6px;
  font-size: clamp(1.02rem, 2.6vw, 1.18rem);
  line-height: 1.15;
}

.cc-desc{
  color: rgba(100,116,139,1);
  margin: 0 0 12px;
  font-size: .95rem;
  line-height: 1.35;

  /* prevent cards from becoming too tall */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 3);
}

.cc-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

/* chips */
.cc-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.75);
  font-size: .82rem;
  color: rgba(15,23,42,.85);
}

/* badge (type) */
.cc-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding: 7px 11px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .02em;
  border: 1px solid rgba(148,163,184,.25);
}

/* soft color badges — NOT christmas */
.cc-badge-exam{
  background: rgba(29,78,216,.12);
  color: #1D4ED8;
  border-color: rgba(29,78,216,.22);
}
.cc-badge-training{
  background: rgba(109,40,217,.12);
  color: #6D28D9;
  border-color: rgba(109,40,217,.22);
}
.cc-badge-exercise{
  background: rgba(8,145,178,.12);
  color: #0891B2;
  border-color: rgba(8,145,178,.22);
}
.cc-badge-default{
  background: rgba(100,116,139,.10);
  color: rgba(100,116,139,1);
  border-color: rgba(100,116,139,.18);
}

/* footer */
.cc-footer{
  border-top: 1px solid rgba(148,163,184,.28);
  padding-top: 12px;
  margin-top: 8px;
}

.cc-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cc-price{
  font-weight: 900;
  color: rgba(15,23,42,.95);
}
.cc-free{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight: 800;
  color: rgba(8,145,178,1);
}

/* actions: tighter & nicer */
.cc-actions{
  display:flex;
  gap: 10px;
  align-items: stretch;
}

/* buttons */
.cc-btn{
  border-radius: 12px;
  font-weight: 800;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.35);
}

.cc-btn-secondary{
  background: rgba(255,255,255,.85);
}

.cc-btn-primary{
  border-color: rgba(29,78,216,.25);
  background: linear-gradient(135deg, rgba(29,78,216,1), rgba(109,40,217,1));
  color: #fff;
}

.cc-btn-primary:hover{
  filter: brightness(1.03);
}

.cc-btn-icon{
  width: 44px;
  min-width: 44px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.85);
}

.cc-btn-icon.is-active{
  border-color: rgba(109,40,217,.35);
  box-shadow: 0 0 0 3px rgba(109,40,217,.12);
}

/* mobile: keep it compact */
@media (max-width: 380px){
  .cc-btn{ padding: 9px 10px; }
  .cc-btn-icon{ width: 42px; min-width: 42px; }
}

.cc-icon-btn{
  border: none;
  background: transparent;
  padding: 6px;
  line-height: 1;
  cursor: pointer;
  color: rgba(100,116,139,.75);
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.cc-icon-btn:hover{ transform: scale(1.1); opacity: .95; }

/* Top row: badges left, heart right */
.cc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.cc-top-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0; /* important for overflow */
}

/* Heart button in the row (NOT absolute) */
.cc-fav{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
  color: rgba(100,116,139,.75);
}

.cc-fav.is-active{
  color:#ef4444;
  border-color: rgba(239,68,68,.25);
  box-shadow: 0 10px 18px rgba(239,68,68,.12);
}

/* Small screens */
@media (max-width: 380px){
  .cc-fav{ width: 34px; height: 34px; }
}

.cc-fav.is-active{ color:#ef4444; } /* red */

.cc-like{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.95rem;
}
.cc-like.is-active{ color:#2563eb; } /* blue */
.cc-like-count{ font-size:.8rem; font-weight:700; color:inherit; }

.cc-stats{ display:inline-flex; align-items:center; gap:10px; }
.cc-stat{ display:inline-flex; align-items:center; gap:4px; font-size:.8rem; color:#64748b; }