/* =========================
   Tandorost Food Catalog UI
   ========================= */

/* Base & toolbar */
.tfc-wrap, .tfc-archive-wrap {
  font-family: IRANYekan, Vazirmatn, Segoe UI, Arial, sans-serif;
}
.tfc-toolbar {
  display:flex; gap:12px; margin:18px 0; flex-wrap:wrap;
}
.tfc-toolbar input[type=search], .tfc-toolbar select{
  padding:12px 14px; border:1px solid #e8e8e8; border-radius:14px;
  min-width:220px; background:#fff; outline:none;
}

/* Grid */
.tfc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px,1fr));
  gap:22px;
}

/* Card */
.tfc-card{
  background:#fff; border:1px solid #eee; border-radius:20px; overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tfc-card:hover{ transform:translateY(-3px); box-shadow:0 12px 36px rgba(0,0,0,.08); }
.tfc-card-inner{
  display:grid; grid-template-columns:190px 1fr; gap:18px; align-items:center; padding:18px;
}

/* Figure (soft blob bg + circle image) */
.tfc-figure{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; border-radius:14px; overflow:hidden; background:#fff; }
.tfc-figure::before{
  content:""; position:absolute; inset:-14px -10px -12px -10px; z-index:0;
  background:radial-gradient(120px 120px at 40% 40%, #f4e9de 0%, #f6efe7 55%, #ffffff 100%);
  border-radius:28px;
}
.tfc-figure img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Circle image sizes */
.tfc-img-main, .tfc-img-alt{
  position:relative; z-index:1; width:160px; height:160px;
  object-fit:cover; border-radius:50%; margin:0 auto; transition:opacity .25s ease;
}

/* Hover second image — only when card has .tfc-has-alt */
.tfc-img-alt{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}
.tfc-card.tfc-has-alt:hover .tfc-img-alt{ opacity:1; visibility:visible; }
.tfc-card.tfc-has-alt:hover .tfc-img-main{ opacity:0; }

/* Badge */
.tfc-badge{
  position:absolute; right:-8px; top:-8px; z-index:2; background:#fff; border:1px solid #eee;
  border-radius:14px; padding:5px 9px; font-size:.74rem; font-weight:700; color:#444;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* Text area */
.tfc-info{ display:flex; flex-direction:column; gap:10px; }
.tfc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tfc-title{ margin:0; font-size:1.15rem; line-height:1.5; font-weight:800; color:#1a1a1a; }
.tfc-desc{ color:#4b4b4b; line-height:1.9; font-size:.95rem; max-height:4.6em; overflow:hidden; }

/* Meta pills */
.tfc-meta{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tfc-meta li{ background:#f6f6f6; color:#333; border-radius:999px; padding:5px 10px; font-size:.84rem; }

/* Actions */
.tfc-actions{ display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.tfc-cta,
.tfc-buy-external{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:12px; font-weight:800; font-size:.92rem;
  line-height:1; text-decoration:none;
}
.tfc-cta{
  background:#f39a33; color:#fff; box-shadow:0 6px 16px rgba(243,154,51,.22);
  transition:transform .1s ease, box-shadow .1s ease;
}
.tfc-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(243,154,51,.3); }

/* Green external buy button (next to CTA) */
.tfc-buy-external{
  background:#1a8917; color:#fff !important; box-shadow:0 6px 16px rgba(26,137,23,.22);
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.tfc-buy-external:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(26,137,23,.3); background:#187a15; }

/* Buy button that appears inside post content (imported) */
.tfc-buy-btn{
  display:inline-block; padding:.65rem 1rem; border-radius:10px; background:#1a8917;
  color:#fff !important; text-decoration:none; font-weight:700; line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.tfc-buy-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.18); background:#187a15; }

/* Pagination */
.tfc-pagination ul{ display:flex; gap:6px; justify-content:center; margin:18px 0; padding:0; }
.tfc-pagination li{ list-style:none; }
.tfc-pagination a, .tfc-pagination span{
  display:block; padding:8px 12px; border:1px solid #e6e6e6; border-radius:10px;
}

/* Quick View modal */
.tfc-modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.tfc-modal .tfc-modal-content{ background:#fff; border-radius:16px; max-width:900px; width:100%; max-height:90vh; overflow:auto; position:relative; padding:16px; }
.tfc-modal .tfc-close{ position:absolute; top:10px; left:10px; border:none; background:#eee; border-radius:10px; padding:6px 10px; cursor:pointer; }

/* Single template basics */
.tfc-single-wrap{ max-width:1100px; margin:24px auto; padding:0 16px; }
.tfc-single{ display:grid; grid-template-columns:1fr 1.1fr; gap:24px; }
.tfc-single__media img{ width:100%; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.06); }
.tfc-single__title{ margin:0 0 8px; font-size:1.6rem; }
.tfc-single__meta{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:8px; }
.tfc-single__meta li{ background:#f7f7f7; border-radius:999px; padding:6px 10px; font-size:.92rem; }
.tfc-single__content{ line-height:1.9; color:#333; }

/* =================
   Responsive tweaks
   ================= */
@media (max-width:900px){
  .tfc-card-inner{ grid-template-columns:1fr; text-align:center; padding:18px 16px; }
  .tfc-info{ align-items:center; }
  .tfc-meta{ justify-content:center; }
  .tfc-actions{ justify-content:center; }
  .tfc-img-main, .tfc-img-alt{ width:190px; height:190px; }
  .tfc-cta, .tfc-buy-external{ padding:10px 14px; font-size:.95rem; }
  .tfc-single{ grid-template-columns:1fr; }
}

@media (max-width:420px){
  .tfc-grid{ grid-template-columns:1fr; }
  .tfc-img-main, .tfc-img-alt{ width:180px; height:180px; }
  .tfc-cta, .tfc-buy-external{ padding:9px 12px; font-size:.9rem; }
}