/* =================================================================
   KIDS THEME — loontik.ru
   Pastel Soft UI | Neumorphism-lite | Nunito | Bubble Buttons
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ---------- Color tokens ---------- */
:root {
  --bg:             #fffaf0;
  --surface:        #ffffff;
  --surface-alt:    #fff5e8;
  --accent-lav:     #b39ddb;
  --accent-mint:    #80cbc4;
  --accent-peach:   #ff8a65;
  --accent-yellow:  #ffca28;
  --accent:         #ff8a65;
  --text:           #5b4a42;
  --text-muted:     #9e8b7e;
  --border-subtle:  rgba(91, 74, 66, 0.1);
  --shadow-soft:    0 8px 32px rgba(255, 138, 101, 0.14), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-hover:   0 14px 48px rgba(255, 138, 101, 0.22), 0 4px 12px rgba(0,0,0,0.08);
  --radius:         24px;
  --btn-radius:     50px;
  --font:           'Nunito', system-ui, sans-serif;

  /* Bootstrap 5 overrides */
  --bs-body-bg:       var(--bg);
  --bs-body-color:    var(--text);
  --bs-primary:       var(--accent-peach);
  --bs-primary-rgb:   255, 138, 101;
  --bs-border-color:  var(--border-subtle);
  --bs-link-color:    var(--accent-mint);
  --bs-link-hover-color: var(--accent-peach);
  --bs-card-bg:       var(--surface);
  --bs-card-border-color: transparent;
}

/* ---------- Global ---------- */
body.theme-kids {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

body.theme-kids h1,
body.theme-kids h2,
body.theme-kids h3,
body.theme-kids h4 {
  font-family: var(--font);
  font-weight: 800;
}

body.theme-kids ::selection {
  background: rgba(255, 138, 101, 0.2);
  color: var(--text);
}

/* ---------- Navbar ---------- */
body.theme-kids .site-navbar {
  background: var(--bg);
  border-bottom: 2px solid rgba(255, 138, 101, 0.15);
  backdrop-filter: none;
}

body.theme-kids .navbar-brand {
  color: var(--accent-peach);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

body.theme-kids .site-badge {
  background: rgba(179, 157, 219, 0.18);
  color: var(--accent-lav);
  border: 2px solid rgba(179, 157, 219, 0.35);
  font-weight: 700;
}

/* ---------- Background decoration ---------- */
body.theme-kids {
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255, 202, 40, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 90% 75%, rgba(128, 203, 196, 0.1) 0%, transparent 45%);
}

/* ---------- Hero ---------- */
body.theme-kids .hero-section h1 {
  color: var(--accent-peach);
}

body.theme-kids .hero-subtitle {
  color: var(--text-muted);
}

/* ---------- Article Card ---------- */
body.theme-kids .article-card {
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

body.theme-kids .article-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}

body.theme-kids .article-card-title {
  color: var(--text);
  font-weight: 800;
}

body.theme-kids .article-card-meta {
  color: var(--text-muted);
}

body.theme-kids .article-card-desc {
  color: var(--text-muted);
}

/* Colored top border stripe per card */
body.theme-kids .article-card::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--accent-mint) 0%, var(--accent-peach) 50%, var(--accent-lav) 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ---------- Read-more button ---------- */
body.theme-kids .btn-read-more {
  background: linear-gradient(135deg, var(--accent-peach) 0%, #ff6b6b 100%);
  color: #ffffff;
  border: none;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(255, 138, 101, 0.3);
}

body.theme-kids .btn-read-more:hover {
  box-shadow: 0 6px 22px rgba(255, 138, 101, 0.45);
  color: #ffffff;
  transform: translateY(-2px) scale(1.02);
}

/* ---------- Article page ---------- */
body.theme-kids .article-header h1 {
  color: var(--text);
}

body.theme-kids .article-header {
  border-bottom: 2px dashed rgba(255, 138, 101, 0.2);
}

body.theme-kids .article-meta {
  color: var(--text-muted);
}

body.theme-kids .article-content h2 {
  color: var(--accent-peach);
  position: relative;
  padding-bottom: 0.35rem;
}

body.theme-kids .article-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--accent-mint);
  border-radius: 3px;
}

body.theme-kids .article-content h3 {
  color: var(--accent-lav);
}

body.theme-kids .article-content a {
  color: var(--accent-mint);
  font-weight: 600;
}

/* ---------- Pros / Cons ---------- */
body.theme-kids .pros-list {
  background: #f0fff8;
  border: 2px solid rgba(128, 203, 196, 0.35);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(128, 203, 196, 0.15);
}

body.theme-kids .cons-list {
  background: #fff5f0;
  border: 2px solid rgba(255, 138, 101, 0.3);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(255, 138, 101, 0.12);
}

body.theme-kids .pros-list h4 {
  color: var(--accent-mint);
  font-size: 0.78rem;
}

body.theme-kids .cons-list h4 {
  color: var(--accent-peach);
  font-size: 0.78rem;
}

body.theme-kids .pros-list li::before {
  content: "🌟";
  font-size: 0.8rem;
}

body.theme-kids .cons-list li::before {
  content: "🤔";
  font-size: 0.8rem;
}

body.theme-kids .pros-list li,
body.theme-kids .cons-list li {
  color: var(--text-muted);
}

/* ---------- Verdict ---------- */
body.theme-kids .verdict-block {
  background: linear-gradient(135deg, rgba(255, 202, 40, 0.08) 0%, rgba(128, 203, 196, 0.08) 100%);
  border: 2px solid rgba(255, 202, 40, 0.25);
  border-left: 5px solid var(--accent-yellow);
  border-radius: var(--radius);
}

body.theme-kids .verdict-block .verdict-label {
  color: var(--accent-peach);
  font-weight: 800;
}

body.theme-kids .verdict-block p {
  color: var(--text);
  font-weight: 500;
}

/* ---------- Affiliate CTA ---------- */
body.theme-kids .affiliate-cta {
  background: linear-gradient(135deg, rgba(255, 138, 101, 0.07) 0%, rgba(128, 203, 196, 0.07) 100%);
  border: 2px dashed rgba(255, 138, 101, 0.25);
  border-radius: var(--radius);
  text-align: center;
}

body.theme-kids .affiliate-cta-title {
  color: var(--text);
  font-weight: 800;
  font-size: 1.2rem;
}

body.theme-kids .affiliate-cta-subtitle {
  color: var(--text-muted);
  font-weight: 500;
}

body.theme-kids .btn-affiliate {
  background: linear-gradient(135deg, var(--accent-mint) 0%, #4db6ac 100%);
  color: #ffffff;
  border: none;
  font-weight: 900;
  font-size: 1rem;
  padding: 0.9rem 2.5rem;
  box-shadow: 0 6px 24px rgba(128, 203, 196, 0.4);
  letter-spacing: 0.01em;
}

body.theme-kids .btn-affiliate:hover {
  box-shadow: 0 10px 32px rgba(128, 203, 196, 0.55);
  color: #ffffff;
  transform: translateY(-3px) scale(1.03);
}

/* ---------- Rating badge ---------- */
body.theme-kids .rating-badge {
  background: var(--accent-yellow);
  color: var(--text);
  font-weight: 800;
  border: none;
}

/* ---------- Footer ---------- */
body.theme-kids footer {
  background: var(--surface);
  border-top: 2px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}