/* ═══════════════════════════════════════════ */
/* Chú Rồng Đồ Chơi - CSS Overrides          */
/* Brand: Churong Toys - Playful E-commerce   */
/* ═══════════════════════════════════════════ */

/* ─── DESIGN TOKENS & ROOT VARIABLES ─── */
:root {
  /* Legacy MyKingdom variable overrides */
  --color-base-accent-1: 56, 194, 205;
  --color-base-accent-2: 239, 60, 126;
  --gradient-base-accent-2: #EF3C7E;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 18, 18, 18;
  --color-base-background-1: 255, 255, 255;
  --color-base-background-2: 243, 243, 243;
  --color-base-text: 18, 18, 18;
  --gradient-base-accent-1: #38C2CD;
  --gradient-yellow-surface-badge-main: linear-gradient(135deg, #FFB800 0%, #FFD466 100%);
  --button-not-sale-yet-bg: #E5E5E5;
  --button-not-sale-yet-border: #BFBFBF;
  --product-card-corner-radius: 16px;

  /* Churong Design Tokens */
  --primary: #EF3C7E;
  --accent: #38C2CD;
  --secondary: #FFF243;
  --bg-main: #FFFDFB;
  --bg-soft-pink: #FFF7FA;
  --bg-soft-cyan: #F1FEFF;
  --text-main: #1F2937;
  --text-sub: #6B7280;
  --border-soft: #F3DCE6;
  --white: #FFFFFF;

  /* FONTS */
  --font-body-family: "Plus Jakarta Sans", "Inter", sans-serif;
  --font-heading-family: "Plus Jakarta Sans", "Inter", sans-serif;
}

/* ─── FONT FIX ─── */
body, html, * {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── HERO BANNER: Force landscape aspect ratio ─── */
.section-image-slider .swiper-slide .image-content {
  aspect-ratio: 1280 / 496;
  overflow: hidden;
}
.section-image-slider .swiper-slide .image-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ─── HEADER WRAPPER: BRAND PINK BACKGROUND ─── */
.mk-header {
  background-color: rgb(var(--color-base-accent-2)) !important;
  background-color: #EF3C7E !important;
}

.mk-header .header {
  background-color: #EF3C7E;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 8px;
}

/* White text/icons on red header */
.mk-header .header__heading-link,
.mk-header .header__icon,
.mk-header .header a,
.mk-header .header svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Search bar on red header */
.mk-header .search-form,
.mk-header .header__search,
.mk-header .search__input,
.mk-header .header__search-form {
  background: #fff;
  color: #1F2937;
  border-radius: 24px;
  border: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.mk-header .search__input::placeholder,
.mk-header .header__search input::placeholder {
  color: #9CA3AF;
  font-size: 13px;
}

/* Fix: nav icons should NOT be white on white navbar */
.mk-header .header__inline-menu svg {
  fill: none !important;
  color: inherit !important;
}

/* ─── NAVIGATION BAR (from original MyKingdom) ─── */
/* Nav bar layout: white bar below red header */
@media screen and (min-width: 990px) {
  /* Critical: Header grid with navigation on full second row */
  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      "heading searchbar icons"
      "navigation navigation navigation" !important;
    grid-template-columns: 1.15fr 2fr 1.5fr !important;
  }

  .header__inline-menu {
    grid-area: navigation;
  }

  .header__heading {
    grid-area: heading;
  }

  .header___search,
  .header__search {
    grid-area: searchbar;
  }

  .header__icons {
    grid-area: icons;
  }

  .header {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  nav.header__inline-menu .list-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  nav.header__inline-menu {
    position: relative;
  }

  /* White pseudo-element overlay on hover */
  nav.header__inline-menu:before {
    content: '';
    height: 44px;
    background: white;
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    left: 0;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateY(0);
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    border-radius: 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  }

  .header__inline-menu:hover:before {
    transform: translateY(-36px);
    opacity: 1;
    visibility: visible;
  }

  /* Hover color change on nav items */
  .header__inline-menu:hover .header__menu-item,
  .header__inline-menu:hover .header__active-menu-item {
    color: #000;
  }

  .header__inline-menu .header__menu-item:hover .icon-caret {
    color: var(--gradient-base-accent-2) !important;
  }

  .header__inline-menu .header__menu-item:hover span {
    color: var(--gradient-base-accent-2) !important;
  }

  .header__inline-menu .header__menu-item:hover svg {
    fill: var(--gradient-base-accent-2) !important;
    color: var(--gradient-base-accent-2) !important;
  }

  .header__inline-menu .header__menu-item {
    position: relative;
    z-index: 2;
  }
}

/* Nav bar white background */
.mk-header .header__inline-menu,
.mk-header nav.header__inline-menu {
  background-color: #fff !important;
  color: #1F2937;
  border-radius: 24px;
  width: fit-content;
  margin: 0 auto;
  padding: 4px 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(239, 60, 126, 0.08);
}

/* Nav item styling */
.mk-header .header__inline-menu a,
.mk-header .header__inline-menu .header__menu-item {
  color: #121212 !important;
  text-decoration: none;
}

/* Menu item padding - critical for spacing */
.header__inline-menu .lv1.header__menu-item,
.header__inline-menu .header__menu-item {
  padding: 8px 16px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 20px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.header__inline-menu .lv1.header__menu-item:hover,
.header__inline-menu .header__menu-item:hover {
  background-color: #FFF7FA;
}

/* List menu flex layout with gap */
.header__inline-menu .list-menu--inline {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-wrap: nowrap;
}

.mk-header .header__inline-menu .header__menu-item span {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.mk-header .header__inline-menu a:hover,
.mk-header .header__inline-menu .header__menu-item:hover {
  color: #EF3C7E !important;
}

.mk-header .header__inline-menu .header__menu-item:hover span {
  color: #EF3C7E !important;
}

/* Menu icon sizing */
.menu-icon-lv1_container {
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-icon-lv1_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Menu item flex layout */
.menu-lv1, .lv1.header__menu-item {
  display: inline-flex;
}

.menu-lv1 a {
  display: inline-flex;
  gap: 2px;
}

.menu-lv1 span, .label.header__active-menu-item {
  text-transform: uppercase;
}

/* Header z-index (no sticky) */
.mk-header {
  position: relative;
  z-index: 100;
}

/* ─── LOGO FIX ─── */
.header__heading-logo {
  max-width: 200px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

.header__heading-logo-wrapper {
  max-width: 200px;
  display: flex;
  align-items: center;
}

/* ─── ANNOUNCEMENT BAR FIX ─── */
.announcement-bar-section,
.announcement-bar-section-hidden {
  display: block !important;
}

/* ─── MEGA MENU HOVER EFFECTS ─── */
mega-menu .mega-menu_container {
  border-radius: 32px;
  background: #fff;
  border: 1px solid #E5E2E0;
  box-shadow: -463px 802px 250px #0000,
              -296px 513px 237px #00000003,
              -167px 289px 200px #0000000d,
              -74px 128px 148px #00000017,
              -19px 32px 81px #0000001a;
}

mega-menu .mega-menu__heading-item:hover,
mega-menu .mega-menu__heading-item.is-active {
  color: #EF3C7E;
  border-radius: 16px;
  background: #FFECEF;
}

/* ─── CUSTOM ELEMENT DISPLAY ─── */
image-slider, slider-product, dynamic-slider-bar, brands-silder-bar,
article-slider, use-animate, mega-menu, header-drawer, search-form,
product-form, product-info, media-gallery, quantity-input, sticky-header,
product-recommendations, slider-component, modal-opener,
localization-form, cart-drawer, cart-drawer-items, cart-note,
pickup-availability, pickup-availability-preview, product-modal,
tpt-section-lazyload {
  display: block;
}

/* ─── LAZY IMAGE FIX ─── */
img.lazyloaded,
img.lazy-img {
  opacity: 1 !important;
}

/* ─── USE-ANIMATE FIX ─── */
use-animate .image-animate,
use-animate .image-content {
  opacity: 1 !important;
  transform: none !important;
}

/* ─── SCROLL TRIGGER ANIMATION FIX ─── */
.scroll-trigger.animate--slide-in,
.scroll-trigger.animate--fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ─── COLOR SCHEME CLASSES ─── */
.color-accent-2 {
  color: rgb(var(--color-base-solid-button-labels));
  background-color: rgb(var(--color-base-accent-2));
}

.color-accent-1 {
  color: rgb(var(--color-base-solid-button-labels));
  background-color: rgb(var(--color-base-accent-1));
}

/* ─── PRODUCT CARD: VENDOR & SKU BOX FIX ─── */
.vendor-sku-box {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 5px;
  overflow: hidden;
  width: 100%;
}

.vendor-box {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vendor-box .caption-with-letter-spacing {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 20px;
  color: #8f8f8f;
}

.sku-box {
  display: none !important;
}

/* Card content overflow */
.card__information {
  overflow: hidden;
  width: 100%;
}

.card__content {
  overflow: hidden;
}

/* ═══════════════════════════════════════════ */
/* PRODUCT DETAIL PAGE - OVERRIDES             */
/* ═══════════════════════════════════════════ */
/* Main CSS loaded from /css/mykingdom-product.css */

/* Hide duplicate "Đã bao gồm thuế" in guest-price section */
.guest-price {
  display: none !important;
}

/* When NOT on sale, hide the sale div (which duplicates price) */
.price:not(.price--on-sale) .price__sale {
  display: none !important;
}

/* When on sale, hide the regular div (sale div shows both) */
.price--on-sale .price__regular {
  display: none !important;
}

/* Price container: inline layout */
.price__container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Sale price styling */
.price-item--sale {
  font-weight: 700;
  color: #EF3C7E;
}

/* Strikethrough original price */
.price__sale s.price-item--regular {
  font-weight: 400;
  color: #8f8f8f;
  text-decoration: line-through;
}

/* Hide 0% discount badge */
.badge.price__badge-sale {
  font-size: 14px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
}

/* "Thêm Vào Giỏ Hàng" button — outline style like MyKingdom */
.buy-button-box .product-form__submit.button--primary {
  background: #fff !important;
  color: #EF3C7E !important;
  border: 2px solid #EF3C7E !important;
  border-radius: 16px !important;
}

.buy-button-box .product-form__submit.button--primary:hover {
  background: #EF3C7E !important;
  color: #fff !important;
}

.buy-button-box .product-form__submit.button--primary svg path {
  stroke: #EF3C7E;
}

.buy-button-box .product-form__submit.button--primary:hover svg path {
  stroke: #fff;
}

/* ─── MENU ICON ANIMATIONS ─── */

/* Icon container sizing */
.menu-lv1 .menu-icon-lv1_container {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menu-lv1 .menu-icon-animated {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 1px 2px rgba(239, 60, 126, 0.15));
}

/* Bounce on hover */
.menu-lv1:hover .menu-icon-animated {
  animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
  0% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-6px) scale(1.15); }
  40% { transform: translateY(0) scale(0.95); }
  60% { transform: translateY(-3px) scale(1.05); }
  80% { transform: translateY(0) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

/* Hot TikTok sparkle animation - continuous subtle pulse */
.menu-lv1[data-handle="do-choi-hot-tiktok"] .menu-icon-animated {
  animation: sparkle 2s ease-in-out infinite;
}

.menu-lv1[data-handle="do-choi-hot-tiktok"]:hover .menu-icon-animated {
  animation: iconBounce 0.6s ease, sparkle 1s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 1px 2px rgba(239, 60, 126, 0.15)); }
  50% { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 2px 8px rgba(255, 242, 67, 0.5)); }
}

/* Menu item gap for icon + text */
.menu-lv1 .header__menu-item {
  gap: 6px;
  align-items: center;
}

/* Mobile drawer icons */
.menu-drawer__menu .menu-icon-lv1_container {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.menu-drawer__menu .menu-icon-animated {
  width: 24px;
  height: 24px;
}