/*----------------------------------------
  Kids Kadhaba – Kids & Entertainment Theme
  Load AFTER your existing master stylesheet:
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/kids-theme.css">

  Palette
  --ink     #2b2160  grape ink (all text)
  --sun     #ffc83d  sunshine yellow
  --coral   #ff6b5b  main action colour
  --teal    #19c3a6  success / play
  --sky     #4aa8ff  info / links
  --grape   #7a5af8  accent / badges
  --bg      #f4f1ff  soft lavender page
----------------------------------------*/

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

:root {
  --ink: #2b2160;
  --ink-soft: #5d5890;
  --line: #e2dcff;
  --bg: #f4f1ff;
  --card: #ffffff;
  --sun: #ffc83d;
  --coral: #ff6b5b;
  --coral-dark: #d94c3d;
  --teal: #19c3a6;
  --sky: #4aa8ff;
  --grape: #7a5af8;
  --pink: #ff7ac6;
  --radius: 22px;
  --radius-sm: 14px;
  --font-display: 'Fredoka', 'Nunito', sans-serif;
  --font-body: 'Nunito', 'Open Sans', sans-serif;
}

/*==============================
  Base
==============================*/
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(rgba(122, 90, 248, .09) 2px, transparent 2px);
  background-size: 26px 26px;
}

body::-webkit-scrollbar { width: 14px; }
body::-webkit-scrollbar-track { background: var(--bg); }
body::-webkit-scrollbar-thumb {
  background-color: var(--grape);
  border-radius: 10px;
  border: 3px solid var(--bg);
  outline: none;
}

::selection { background: var(--sun); color: var(--ink); }
::-webkit-input-placeholder { color: #9b96c8; }
::-moz-placeholder { color: #9b96c8; }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Headings and "display" text use the rounded font */
h1, h2, h3, h4, h5, h6,
.main__title h1, .main__title h3,
.hero__title, .album__title h3, .live__title, .post__title,
.event__title, .artist__title, .plan__title, .plan__price,
.feature__title, .step__title, .dashbox__title h3,
.single-item__title h4, .comments__title h4, .sign__title,
.footer__title, .page-404__title, .product__title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .005em;
}

/*==============================
  Header & Sidebar
==============================*/
.header {
  background: #fff;
  border-bottom: 3px solid var(--line);
  box-shadow: 0 6px 0 rgba(122, 90, 248, .06);
}
.header__search { background: #fff; border-bottom: 3px solid var(--line); }
.header__search input,
.main__filter-search input {
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
}
.header__search input:focus,
.main__filter-search input:focus { border-color: var(--grape); background: #fff; }

.header__btn span { background: var(--ink); }
.header__btn:hover span,
.header__btn--active span { background: var(--coral); }

.header__nav a { color: var(--ink); font-family: var(--font-display); font-weight: 500; }
.header__nav a:hover { color: var(--coral); }

.header__action-btn svg { fill: var(--ink-soft); }
.header__action-btn:hover svg { fill: var(--coral); }
.header__action-btn span { color: var(--ink-soft); font-family: var(--font-body); font-weight: 700; }
.header__action--signin:before { background-color: var(--line); }
.header__action--signin:hover a span,
.header__action--signin:hover button span { color: var(--coral); }
.header__action--signin:hover a svg,
.header__action--signin:hover button svg { fill: var(--coral); }

.header__action--cart span { background: var(--coral); }
.header__action--note span { background: var(--sky); }

.header__drop {
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(43, 33, 96, .15);
}
.header__note, .header__product { border-bottom-color: var(--line); }
.header__note p, .header__note p a,
.header__product p, .header__product p a { color: var(--ink); }
.header__note span, .header__product span { color: var(--ink-soft); }
.header__product p a:hover { color: var(--coral); }
.header__all { background: var(--bg); color: var(--grape); border-radius: 10px 10px 0 0; }
.header__all:hover { color: var(--coral); }

.sidebar {
  background: #fff;
  border-right: 3px solid var(--line);
}
.sidebar__logo { border-bottom: 3px solid var(--line); }
.sidebar__nav-item { padding: 0 12px; }
.sidebar__nav-link {
  display: flex;
  margin-left: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
}
.sidebar__nav-link i { color: var(--ink-soft); fill: var(--ink-soft); }
.sidebar__nav-link:hover { color: var(--ink); background: #fff3d1; }
.sidebar__nav-link:hover i { color: var(--coral); }
.sidebar__nav-link--active,
.sidebar__nav-link.active,
.sidebar__nav-link[aria-expanded="true"] {
  color: #fff;
  background: var(--coral);
  box-shadow: 0 4px 0 var(--coral-dark);
}
.sidebar__nav-link--active i,
.sidebar__nav-link.active i,
.sidebar__nav-link[aria-expanded="true"] i,
.sidebar__nav-link--active:hover i { color: #fff; }
.sidebar__menu { background: var(--bg); border-radius: var(--radius-sm); }
.sidebar__menu li:before { background: var(--grape); }
.sidebar__menu a { color: var(--ink-soft); font-weight: 700; }
.sidebar__menu a:hover,
.sidebar__menu a.active { color: var(--coral); }

/*==============================
  Titles & links
==============================*/
.main__title h1,
.main__title h1 a,
.main__title h3 a { color: var(--ink); }
.main__title h3 { color: var(--ink); font-size: 28px; }
.main__title h3 i { color: var(--sun); text-shadow: 0 2px 0 rgba(0,0,0,.08); }
.main__title h1 a:hover,
.main__title h3 a:hover { color: var(--coral); }
.main__title p { color: var(--ink-soft); }
.main__title p a { color: var(--coral); }
.main__title h2 { color: var(--ink); font-family: var(--font-display); }
.main__title ol h4 { color: var(--ink); font-family: var(--font-display); }
.main__title ol li, .main__title ol li b { color: var(--ink-soft); }

.main__link {
  color: var(--grape);
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--line);
}
.main__link svg { fill: var(--grape); }
.main__link:hover { color: #fff; background: var(--grape); border-color: var(--grape); }
.main__link:hover svg { fill: #fff; }

.main__nav svg { fill: var(--grape); }
.main__nav:hover svg { fill: var(--coral); }
.main__nav--hero svg { fill: #fff; }

.breadcrumb__item, .breadcrumb a { color: var(--ink-soft); font-weight: 700; }
.breadcrumb a:hover { color: var(--coral); }
.breadcrumb__item--active:hover { color: var(--ink-soft); }

/* Carousel dots */
.main__carousel .owl-dot span,
.hero .owl-dot span,
.store-item__carousel .owl-dot span { background: #cfc6ff; height: 8px; width: 8px; border-radius: 50%; }
.main__carousel .owl-dot.active span,
.hero .owl-dot.active span,
.store-item__carousel .owl-dot.active span { background: var(--coral); width: 26px; border-radius: 8px; }

/*==============================
  Buttons – chunky "press-me" style
==============================*/
.hero__btn,
.sign__btn,
.main__load,
.release__buy,
.store-item__buy,
.article__buy,
.plan__btn,
.page-404__btn,
.kids-home .kids-button {
  border-radius: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--coral);
  color: #fff;
  box-shadow: 0 6px 0 var(--coral-dark);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.hero__btn:hover,
.sign__btn:hover,
.main__load:hover,
.release__buy:hover,
.store-item__buy:hover,
.article__buy:hover,
.plan__btn:hover,
.page-404__btn:hover {
  background: #ff7e70;
  color: #fff;
  transform: translateY(2px);
  box-shadow: 0 4px 0 var(--coral-dark);
}
.hero__btn:active, .sign__btn:active, .main__load:active,
.release__buy:active, .store-item__buy:active, .article__buy:active,
.plan__btn:active, .page-404__btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--coral-dark); }

.hero__btn--video { background: var(--sun); color: var(--ink); box-shadow: 0 6px 0 #d9a21a; }
.hero__btn--video svg { fill: var(--ink); }
.hero__btn--video:hover { background: #ffd35f; color: var(--ink); }
.hero__btn--video:hover svg { fill: var(--ink); }
.hero__btn--green { background: var(--teal); box-shadow: 0 6px 0 #0f9a82; }
.hero__btn--green:hover { background: #3fd6bc; color: #fff; }

.sign__btn { background: var(--grape); box-shadow: 0 6px 0 #5a3fd0; }
.sign__btn:hover { background: #8d70ff; box-shadow: 0 4px 0 #5a3fd0; }

.plan__btn { background: #fff; color: var(--coral); border: 3px solid var(--coral); box-shadow: 0 5px 0 var(--coral-dark); }
.plan__btn:hover { background: var(--coral); }

/*==============================
  Hero
==============================*/
.hero__slide { border-radius: 28px; border: 4px solid #fff; box-shadow: 0 14px 0 rgba(122, 90, 248, .12); }
.hero .owl-stage-outer { border-radius: 28px; }
.hero__slide:before { background: linear-gradient(0deg, rgba(43, 33, 96, .72), transparent 65%); }
.hero__title { color: #fff; text-shadow: 0 3px 0 rgba(43, 33, 96, .35); }
.hero__text { color: #fff; font-weight: 600; }

/*==============================
  Cards: album, live, post, event, artist, product
==============================*/
.album__cover, .live__cover, .post__img, .release__cover, .product__img {
  border-radius: var(--radius);
  border: 4px solid #fff;
  box-shadow: 0 8px 0 rgba(122, 90, 248, .14);
  background: #fff;
}
.album, .live, .artist { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.album:hover, .live:hover, .artist:hover { transform: translateY(-6px) rotate(-.6deg); }

.album__cover a {
  background: var(--sun);
  border: 3px solid #fff;
  border-radius: 50%;
  width: 62px; height: 62px; margin: -31px 0 0 -31px;
}
.album__cover a svg { fill: var(--ink); width: 26px; }
.album__cover a:hover svg { fill: var(--coral); }
.album__title h3, .album__title h3 a { color: var(--ink); font-size: 18px; }
.album__title h3 a:hover { color: var(--coral); }
.album__title span, .album__title span a { color: var(--ink-soft); font-weight: 700; }
.album__title span a:hover { color: var(--coral); }
.album__stat { color: #fff; font-weight: 800; }
.album__stat svg { fill: #fff; }

.live__cover:before { background: linear-gradient(45deg, rgba(122, 90, 248, .75), transparent); }
.live__title, .live__title a { color: var(--ink); }
.live:hover .live__title, .live:hover .live__title a { color: var(--coral); }
.live__status, .single-item__time--live {
  background: var(--coral);
  border-radius: 999px;
  font-family: var(--font-display);
  letter-spacing: .06em;
}
.live__value { background: rgba(43, 33, 96, .82); border-radius: 999px; font-weight: 700; }

/* Round artist/character avatars */
.artist__cover {
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 0 rgba(255, 200, 61, .5);
  background: var(--sun);
}
.artist__cover:before { background: linear-gradient(45deg, rgba(255, 107, 91, .7), transparent); }
.artist__title { color: var(--ink); font-size: 18px; }
.artist:hover .artist__title { color: var(--coral); }

/* Post / blog cards */
.post, .product {
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 rgba(122, 90, 248, .1);
}
.post__img { border: none; box-shadow: none; border-radius: 0; }
.post__content { background: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.post__title, .post__title a { color: var(--ink); }
.post__title a:hover { color: var(--coral); }
.post__date, .post__comments { color: var(--ink-soft); font-weight: 700; }
.post__date svg, .post__comments svg { fill: var(--grape); }
.post__video, .event__ticket {
  background: var(--sun);
  color: var(--ink);
  border: 3px solid #fff;
  border-radius: 999px;
}
.post__video svg, .event__ticket svg { fill: var(--ink); }
.post__video:hover, .event__ticket:hover { background: var(--coral); color: #fff; border-color: #fff; }
.post__video:hover svg, .event__ticket:hover svg { fill: #fff; }

/* Colourful category chips – each card gets a different colour */
.post__category, .article__category {
  background: var(--grape);
  border-radius: 999px;
  font-weight: 800;
  border: 3px solid #fff;
}
.col-12:nth-child(4n+1) .post__category { background: var(--coral); }
.col-12:nth-child(4n+2) .post__category { background: var(--teal); }
.col-12:nth-child(4n+3) .post__category { background: var(--sky); }
.col-12:nth-child(4n+4) .post__category { background: var(--grape); }
.post__category:hover, .article__category:hover { background: var(--sun); color: var(--ink); }

.product__title, .product__title a { color: var(--ink); }
.product__title a:hover { color: var(--coral); }
.product__price { color: var(--teal); font-weight: 800; font-size: 18px; }
.product__new { color: var(--coral); }
.product__add { background: var(--sun); border: 3px solid #fff; border-radius: 50%; }
.product__add svg { fill: var(--ink); }

.event { border-radius: var(--radius); border: 4px solid #fff; box-shadow: 0 8px 0 rgba(122, 90, 248, .14); }
.event:before { background: linear-gradient(0deg, rgba(43, 33, 96, .85), rgba(43, 33, 96, 0) 70%); opacity: 1; }
.event__date, .event__title, .event__title a, .event__address { color: #fff; }
.event__time { color: #e8e3ff; font-weight: 700; }
.event__title a:hover { color: var(--sun); }
.event__out { background: var(--coral); border-radius: 999px; }

/*==============================
  Lists (single-item tracks / episodes)
==============================*/
.single-item { border-bottom: 2px dashed var(--line); border-radius: 0; }
.single-item__number { color: var(--grape); font-family: var(--font-display); font-weight: 600; }
.single-item__title h4, .single-item__title h4 a { color: var(--ink); }
.single-item__title h4 a:hover { color: var(--coral); }
.single-item__title span, .single-item__title span a { color: var(--ink-soft); font-weight: 700; }
.single-item__time { color: var(--ink-soft); font-weight: 700; }
.single-item__cover { border-radius: 14px; }
.single-item__cover svg { fill: #fff; }
.single-item:hover .single-item__cover { background-color: var(--grape); }
.single-item__cover.active { background-color: var(--coral); }
.single-item__cover.active svg { fill: #fff; }
.single-item__add { background: rgba(25, 195, 166, .16); border-radius: 12px; }
.single-item__add svg { fill: var(--teal); }
.single-item__export { background: rgba(122, 90, 248, .14); border-radius: 12px; }
.single-item__export svg { fill: var(--grape); }
.single-item__rate svg { fill: var(--teal); }
.single-item__rate--red svg { fill: var(--coral); }

/*==============================
  Panels: release, store-item, stats, dashbox, feature, step, plan, cart, profile
==============================*/
.release, .store-item, .stats, .dashbox, .step, .plan, .cart, .profile,
.sign__form, .page-404__content, .comments__item, .comments__form {
  background: #fff;
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 rgba(122, 90, 248, .08);
}
.dashbox { overflow: hidden; }
.dashbox__title { border-bottom: 3px dashed var(--line); }
.dashbox__title h3, .stats span, .stats span a { color: var(--ink); }
.dashbox__title h3 svg { fill: var(--coral); }
.dashbox__title h3 span { background: var(--coral); }
.dashbox__more { color: var(--grape); font-weight: 800; }
.dashbox__more:hover { color: var(--coral); }
.dashbox__note p, .dashbox__note p a { color: var(--ink); }
.dashbox__note span { color: var(--ink-soft); }
.dashbox__note { border-bottom-color: var(--line); }

.stats p, .stats p a { color: var(--ink-soft); }
.stats p b { color: var(--ink); }
.stats svg { fill: var(--sun); }
.stats--green svg { fill: var(--teal); }
.stats--purple svg { fill: var(--grape); }
.stats span a { border-bottom-color: var(--coral); }
.stats__form input { color: var(--ink); }
.stats__form button { color: var(--coral); }

.release__stat { color: var(--ink-soft); font-weight: 700; }
.release__stat svg { fill: var(--coral); }

.feature { border-bottom-color: var(--line); }
.feature__icon { background: #fff3d1; border-radius: 18px; }
.feature__icon svg { fill: var(--sun); }
.feature__icon--purple { background: rgba(122, 90, 248, .14); }
.feature__icon--purple svg { fill: var(--grape); }
.feature__icon--red { background: rgba(255, 107, 91, .16); }
.feature__icon--red svg { fill: var(--coral); }
.feature__icon--blue { background: rgba(74, 168, 255, .16); }
.feature__icon--blue svg { fill: var(--sky); }
.feature__title, .step__title { color: var(--ink); }
.feature__text, .step__text { color: var(--ink-soft); }
.step__number { background: var(--sun); color: var(--ink); border-radius: 50%; font-family: var(--font-display); }

.plan__title { color: var(--ink); }
.plan--red .plan__title { color: var(--coral); }
.plan--green .plan__title { color: var(--teal); }
.plan--purple .plan__title { color: var(--grape); }
.plan__price { color: var(--ink); border-bottom: 3px dashed var(--line); }
.plan__list li { color: var(--ink-soft); }
.plan__list li.green { color: var(--ink); font-weight: 700; }
.plan__list li.green svg { fill: var(--teal); }
.plan__list li.red svg { fill: #c4bfe6; }

/* Profile bar */
.profile__tabs a { color: var(--ink-soft); font-family: var(--font-display); font-weight: 500; }
.profile__tabs a:hover, .profile__tabs a.active { color: var(--ink); }
.profile__tabs a:before { background: var(--coral); height: 4px; border-radius: 4px 4px 0 0; }
.profile__meta h3 { color: var(--ink); font-family: var(--font-display); }
.profile__meta span { color: var(--ink-soft); }
.profile__avatar { border-radius: 50%; border: 3px solid var(--sun); }
.profile__logout span { color: var(--ink-soft); font-family: var(--font-body); font-weight: 700; }
.profile__logout svg { fill: var(--ink-soft); }
.profile__logout:hover span { color: var(--coral); }
.profile__logout:hover svg { fill: var(--coral); }

/* Cart */
.cart__table th { color: var(--ink-soft); }
.cart__table td, .cart__table td a { color: var(--ink); }
.cart__table td a:hover { color: var(--coral); }
.cart__price { color: var(--teal); font-weight: 800; }
.cart__price span { color: var(--coral); }
.cart__total span { color: var(--ink); font-family: var(--font-display); }
.cart__total p, .cart__systems { color: var(--ink-soft); }
.cart__amount, .article__amount { background: var(--bg); border: 2px solid var(--line); border-radius: 999px; }
.cart__amount input, .article__amount input { color: var(--ink); }
.cart__amount button svg, .article__amount button svg { fill: var(--grape); }
.cart__delete svg { fill: var(--ink-soft); }
.cart__delete:hover svg { fill: var(--coral); }

/*==============================
  Article / content pages
==============================*/
.article__content h1, .article__content h2, .article__content h3,
.article__content h4, .article__content h5, .article__content h6 { color: var(--ink); font-family: var(--font-display); }
.article__content p, .article__content ul li { color: var(--ink-soft); font-weight: 600; }
.article__content p a { color: var(--coral); }
.article__content blockquote { color: var(--ink); background: #fff3d1; border-radius: var(--radius-sm); padding: 16px 20px 16px 28px; }
.article__content blockquote:before { background: var(--sun); top: 12px; bottom: 12px; left: 12px; }
.article__content ul li:before { background: var(--coral); width: 8px; height: 8px; margin-top: -4px; }
.article__content img, .article__content iframe { border-radius: var(--radius); border: 4px solid #fff; box-shadow: 0 8px 0 rgba(122, 90, 248, .12); }
.article__date, .article__place { color: var(--ink-soft); font-weight: 700; }
.article__date svg, .article__place svg { fill: var(--grape); }
.article__price { color: var(--ink); font-family: var(--font-display); }
.article__artist div span { color: var(--ink-soft); }

.share__link { border-radius: 999px; background: var(--grape); font-weight: 800; }
.share__link:hover { background: var(--coral); }

/*==============================
  Comments
==============================*/
.comments { border-top: 3px dashed var(--line); }
.comments__title h4, .comments__name { color: var(--ink); }
.comments__title span { background: var(--coral); border-radius: 999px; }
.comments__time { color: var(--ink-soft); }
.comments__text { color: var(--ink-soft); border-color: var(--line); font-weight: 600; }
.comments__text span { background: var(--bg); color: var(--ink-soft); }
.comments__text a { color: var(--coral); }
.comments__avatar { border-radius: 50%; }
.comments__actions button span { color: var(--ink-soft); }
.comments__rate button { color: var(--ink-soft); }
.comments__rate button:first-child:before { background: var(--line); }

/*==============================
  Forms
==============================*/
.sign__title { color: var(--ink); }
.sign__label { color: var(--ink-soft); font-weight: 800; padding-left: 6px; }
.sign__label b { color: var(--ink); }
.sign__input, .sign__select, .sign__textarea {
  background-color: var(--bg);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 16px;
  font-family: var(--font-body);
  font-weight: 700;
}
.sign__input:focus, .sign__select:focus, .sign__textarea:focus { border-color: var(--grape); background-color: #fff; }
.sign__text { color: var(--ink); }
.sign__text a, .sign__group--checkbox input+label a { color: var(--coral); font-weight: 800; }
.sign__delimiter { color: var(--ink-soft); }
.sign__value { color: var(--ink); font-family: var(--font-display); }
.sign__group--checkbox input:not(:checked)+label,
.sign__group--checkbox input:checked+label { color: var(--ink-soft); font-weight: 700; }
.sign__group--checkbox input:not(:checked)+label:before,
.sign__group--checkbox input:checked+label:before { background-color: var(--bg); border: 2px solid var(--line); border-radius: 8px; }
.sign__radio label { color: var(--ink-soft); font-weight: 700; }
.sign__radio label:before { border-color: var(--line); }
.sign__radio label:hover, .sign__radio input:checked+label { color: var(--ink); }
.sign__radio input:checked+label:before { border-color: var(--coral); }

.slider-radio { background: #fff; border: 2px solid var(--line); border-radius: 999px; }
.slider-radio label { color: var(--ink-soft); border-radius: 999px; font-family: var(--font-display); }
.slider-radio label:hover { color: var(--ink); }
.slider-radio .sliding-piece,
.slider-radio input[type=radio]:checked+label { background-color: var(--coral); color: #fff; border-radius: 999px; }

/*==============================
  Filter bar, tabs, tables
==============================*/
.main__filter, .main__filter:before { background-color: var(--bg); border-color: var(--line); }
.main__tabs a { color: var(--ink-soft); font-family: var(--font-display); font-size: 18px; }
.main__tabs a span { color: var(--ink-soft); }
.main__tabs a:hover, .main__tabs a.active { color: var(--ink); }
.main__tabs a.active span { color: var(--coral); }

.main__table thead { border-bottom: 3px dashed var(--line); }
.main__table thead th, .main__table thead th a { color: var(--ink-soft); font-weight: 800; }
.main__table thead th a:hover, .main__table thead th a.active { color: var(--ink); }
.main__table tbody tr { border-top: 2px dashed var(--line); }
.main__table-text, .main__table-text a { color: var(--ink); }
.main__table-text a:hover { color: var(--coral); }
.main__table-text svg { fill: var(--ink-soft); }
.main__table-text--price { color: var(--teal); }
.main__table-text--green { color: var(--teal); }
.main__table-text--green svg { fill: var(--teal); }
.main__table-text--red { color: var(--coral); }
.main__table-text--number a { border-bottom-color: var(--sun); }

/*==============================
  Player
==============================*/
.player { background: #fff; border-top: 3px solid var(--line); }
.player__cover img { border: 3px solid #fff; box-shadow: 0 5px 0 rgba(122, 90, 248, .2); }
.player__track { color: var(--ink-soft); font-weight: 700; }
.player__track b { color: var(--ink); font-family: var(--font-display); }
.player__btn { background: var(--sun); color: var(--ink); border: 3px solid #fff; border-bottom: none; font-weight: 800; }
.player__btn svg { fill: var(--ink); }
.plyr__control svg { fill: var(--grape); }
.plyr__control:hover svg { fill: var(--coral); }
.plyr__time { color: var(--ink-soft); font-weight: 700; }
.plyr__tooltip { background: var(--ink); border-radius: 10px; }
.plyr__tooltip:before { border-top-color: var(--ink); }
.plyr--audio .plyr__controls { color: var(--ink); }
.plyr--full-ui input[type="range"] { color: var(--coral); }

/*==============================
  Footer
==============================*/
.footer { background: var(--ink); border-top: 6px solid var(--sun); }
.footer__tagline, .footer__copyright, .footer__copyright a,
.footer__nav a, .footer__links a { color: #d9d3ff; }
.footer__title { color: #fff; font-family: var(--font-display); }
.footer__nav a:hover, .footer__copyright a:hover, .footer__links a:hover { color: var(--sun); }
.footer__links a svg { fill: var(--sun); }
.footer__content { border-top-color: rgba(255, 255, 255, .15); }
.footer__social a { background: #fff; border-radius: 50%; width: 44px; height: 44px; padding: 0; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.footer__social a i { color: var(--coral); }
.footer__social a:nth-child(3n+2) i { color: var(--teal); }
.footer__social a:nth-child(3n+3) i { color: var(--grape); }
.footer__social a:hover { transform: translateY(-4px) rotate(-8deg); }

/*==============================
  404, modal, select2, scrollbars
==============================*/
.page-404__title { color: var(--coral); text-shadow: 4px 4px 0 var(--sun); }
.page-404__text { color: var(--ink-soft); }

.modal { background: #fff; border: 3px solid var(--line); border-radius: var(--radius); }
.modal__close svg { fill: var(--ink-soft); opacity: 1; }
.modal__close:hover svg { fill: var(--coral); }
.mfp-bg { background: rgba(43, 33, 96, .72); }

.select2-container .select2-selection--single .select2-selection__rendered { color: var(--ink); font-family: var(--font-display); }
.select2-container .select2-selection--single:hover .select2-selection__rendered { color: var(--coral); }
.select2-dropdown { background: #fff; border: 3px solid var(--line); box-shadow: 0 10px 24px rgba(43, 33, 96, .15); }
.select2-results__option { color: var(--ink); font-weight: 700; }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] { color: var(--coral); background: transparent; }

.scrollbar-track-y, .scrollbar-track-x { background: var(--line) !important; }
.scrollbar-thumb-y, .scrollbar-thumb-x { background: var(--grape) !important; }

/*==============================
  Home page (.kids-home) – refresh existing block
==============================*/
.kids-home {
  --kids-ink: var(--ink);
  --kids-muted: var(--ink-soft);
  --kids-coral: var(--coral);
  --kids-yellow: var(--sun);
  --kids-teal: var(--teal);
  background-color: var(--bg);
}
.kids-home .header { background: #fff; border-bottom-color: var(--line); box-shadow: 0 6px 0 rgba(122, 90, 248, .06); }
.kids-home .sidebar { background: #fff; border-right-color: var(--line); }
.kids-home .sidebar__nav-link { color: var(--ink-soft); }
.kids-home .sidebar__nav-link:hover { color: var(--ink); }
.kids-home .sidebar__nav-link.active { color: #fff; }
.kids-home .footer { background: var(--ink); border-top: 6px solid var(--sun); }
.kids-home .footer__nav a, .kids-home .footer__copyright { color: #d9d3ff; }
.kids-home .footer__copyright a { color: var(--sun); }

.kids-home .kids-welcome {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 200, 61, .55) 0 90px, transparent 91px),
    radial-gradient(circle at 92% 88%, rgba(255, 122, 198, .35) 0 120px, transparent 121px),
    linear-gradient(120deg, #ffe9a8 0%, #ffc9d9 50%, #c9e6ff 100%);
  border: 4px solid #fff;
  border-radius: 36px;
  box-shadow: 0 12px 0 rgba(122, 90, 248, .14);
}
.kids-home .kids-welcome h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.kids-home .kids-welcome h1 span { color: var(--coral); }
.kids-home .kids-welcome p { color: var(--ink-soft); font-weight: 700; }
.kids-home .kids-welcome__eyebrow { background: var(--grape); color: #fff; font-family: var(--font-display); letter-spacing: .06em; }
.kids-home .kids-welcome__art {
  background: radial-gradient(circle at 36% 27%, #fff5b8 0 10%, transparent 10.5%), linear-gradient(145deg, #7a5af8, #4aa8ff);
  box-shadow: 0 14px 0 rgba(43, 33, 96, .18);
  animation: kk-wobble 4s ease-in-out infinite;
}
.kids-home .kids-welcome__art::after { background: var(--pink); }
.kids-home .kids-button { background: var(--coral); box-shadow: 0 7px 0 var(--coral-dark); }
.kids-home .kids-button--light { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 7px 0 #d8d0ff; }
.kids-home .kids-button--light:hover { background: #fff; color: var(--ink); }
.kids-home .main__title h3 { font-family: var(--font-display); font-weight: 600; }
.kids-home .main__link { color: var(--grape); }
.kids-home .hero__slide { border-radius: 28px; }
.kids-home .artist__cover { border: 5px solid #fff; box-shadow: 0 8px 0 rgba(255, 200, 61, .5); }

/*==============================
  Motion (one gentle moment only)
==============================*/
@keyframes kk-wobble {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-8px); }
}

@media (max-width: 768px) {
  .main__title h3 { font-size: 22px; }
  .album__title h3, .album__title h3 a { font-size: 16px; }
  .hero__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .album:hover, .live:hover, .artist:hover { transform: none; }
}