/*
Theme Name: ToonPlay
Theme URI: https://example.com
Author: ToonPlay
Description: সব বয়সের জন্য নিরাপদ কার্টুন ভিডিও সাইট। মিনিমাল ও পরিষ্কার ডিজাইন।
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: toonplay
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@500;600;700&family=Hind+Siliguri:wght@400;500;600&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Hind Siliguri', sans-serif;
  background: #fbf9f5;
  color: #2c2a26;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px 60px; }

/* ── হেডার ── */
.tp-header {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 0 16px; flex-wrap: wrap;
}
.tp-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.tp-logo-mark { font-size: 22px; color: #ff8a3d; letter-spacing: -2px; }
.tp-logo-text { font-family: 'Baloo Da 2', cursive; font-size: 22px; font-weight: 700; color: #2c2a26; }
.tp-logo-text em { font-style: normal; color: #ff8a3d; }

.tp-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid #ece7de; border-radius: 14px; padding: 10px 14px;
}
.tp-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; font-family: 'Hind Siliguri', sans-serif; color: #2c2a26;
}
.tp-search input::placeholder { color: #b3ada6; }
.tp-search button { border: none; background: transparent; cursor: pointer; color: #9a9590; display: flex; }

.tp-favtab {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px;
  border: 1.5px solid #ece7de; background: #fff; border-radius: 14px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: #2c2a26;
  text-decoration: none; font-family: 'Hind Siliguri', sans-serif;
}
.tp-favtab.on { background: #ff5a7a; border-color: #ff5a7a; color: #fff; }
.tp-badge { background: #ff5a7a; color:#fff; border-radius: 20px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
.tp-favtab.on .tp-badge { background: rgba(255,255,255,.3); }

/* ── হিরো ── */
.tp-hero { padding: 34px 0 26px; text-align: center; }
.tp-hero .kicker { font-size: 13px; font-weight: 600; color: #ff8a3d; margin-bottom: 10px; }
.tp-hero h1 { font-family: 'Baloo Da 2', cursive; font-size: 38px; font-weight: 700; line-height: 1.25; }
.tp-hero h1 span { color: #ff8a3d; }
.tp-hero .sub { margin-top: 10px; font-size: 16px; color: #807a72; }

/* ── ক্যাটাগরি চিপ ── */
.tp-chips { display: flex; gap: 9px; flex-wrap: wrap; padding: 6px 0 22px; justify-content: center; }
.tp-chip {
  padding: 8px 17px; border-radius: 30px; border: 1.5px solid #ece7de;
  background: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
  color: #807a72; text-decoration: none; font-family: 'Hind Siliguri', sans-serif;
  transition: all .15s ease;
}
.tp-chip.on { background: #2c2a26; border-color: #2c2a26; color: #fff; font-weight: 600; }

/* ── সেকশন টাইটেল ── */
.tp-sechead { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 2px 16px; }
.tp-sechead h2 { font-family: 'Baloo Da 2', cursive; font-size: 21px; font-weight: 700; }
.tp-count { font-size: 13px; color: #a8a299; }

/* ── গ্রিড: মোবাইল ১, ট্যাবলেট ২, পিসি ৪ ── */
.tp-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tp-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── কার্ড ── */
.tp-card {
  background: #fff; border-radius: 18px; overflow: hidden;
  border: 1.5px solid #f0ece3; transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.tp-card:hover { transform: translateY(-6px); }
.tp-thumb { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #f0ece3; }
.tp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-thumb .over {
  position: absolute; inset: 0; opacity: 0; background: rgba(44,42,38,.32);
  display: flex; align-items: center; justify-content: center; transition: opacity .2s ease;
}
.tp-card:hover .over { opacity: 1; }
.tp-play {
  width: 52px; height: 52px; border-radius: 50%; background: #ff8a3d;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(255,138,61,.5); color: #fff; font-size: 20px;
}
.tp-dur {
  position: absolute; bottom: 8px; right: 8px; background: rgba(44,42,38,.85);
  color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px;
}
.tp-cardbody { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px 15px; }
.tp-cardtext { flex: 1; }
.tp-cardtext h3 { font-family: 'Baloo Da 2', cursive; font-size: 16px; font-weight: 600; line-height: 1.35; }
.tp-cardtext h3 a { color: #2c2a26; text-decoration: none; }
.tp-cat { font-size: 12.5px; color: #ff8a3d; font-weight: 600; }
.tp-heart {
  border: 1.5px solid #f0ece3; background: #fbf9f5; border-radius: 10px;
  padding: 7px; cursor: pointer; display: flex; flex-shrink: 0; color: #b3ada6;
  font-size: 16px; line-height: 1; transition: all .15s ease;
}
.tp-heart.on { border-color: #ffd9e1; background: #fff0f3; color: #ff5a7a; }

/* ── খালি অবস্থা ── */
.tp-empty { text-align: center; padding: 70px 20px; color: #a8a299; font-size: 15px; line-height: 1.6; }

/* ── সিঙ্গেল ভিডিও পেজ ── */
.tp-single { padding: 24px 0; }
.tp-videobox { aspect-ratio: 16/9; background: #000; border-radius: 16px; overflow: hidden; }
.tp-videobox iframe { width: 100%; height: 100%; border: none; display: block; }
.tp-single h1 { font-family: 'Baloo Da 2', cursive; font-size: 26px; font-weight: 700; margin: 18px 0 4px; }
.tp-back { display: inline-block; margin-bottom: 8px; color: #807a72; text-decoration: none; font-size: 14px; }

/* ── ফুটার ── */
.tp-footer {
  margin-top: 56px; padding-top: 26px; border-top: 1.5px solid #ece7de;
  display: flex; align-items: center; gap: 9px; justify-content: center;
}
.tp-footer p { font-size: 13.5px; color: #a8a299; }