/**
 * Sony Store 618 — colors aligned with campaign banner
 * Gold #F9D423 | Orange #FF5722 | Teal #00BFA5 | Pink #FF4081
 */
:root {
  --s618-gold: #f9d423;
  --s618-gold-dark: #e6c01a;
  --s618-orange: #ff5722;
  --s618-orange-dark: #e64a19;
  --s618-teal: #00bfa5;
  --s618-pink: #ff4081;
  --s618-black: #000000;
  --s618-white: #ffffff;
}

/* Navbar — golden yellow like banner background */
#main-content .navbar.bg-red {
  background-color: var(--s618-gold) !important;
}

#main-content .navbar-dark .navbar-nav .nav-link {
  color: var(--s618-black);
}

#main-content .navbar-dark .navbar-toggler,
#main-content .navbar-dark #currentCate {
  color: var(--s618-black);
}

#main-content .navbar-toggler-icon i {
  color: var(--s618-orange) !important;
}

/* Flash tab — orange badge (3日限量快閃) */
#main-content .navbar-nav .nav-link#flash {
  background-color: var(--s618-orange);
  color: var(--s618-white) !important;
  border-radius: 6px;
  margin: 0.35rem 0.2rem;
  line-height: 1.4;
  padding: 0.45rem 0.65rem;
  font-weight: 600;
}

#main-content .navbar-nav .nav-link#flash:hover,
#main-content .navbar-nav .nav-link#flash.active {
  background-color: var(--s618-orange-dark) !important;
  color: var(--s618-white) !important;
}

/* Other tabs — active / hover */
#main-content .navbar-dark .navbar-nav .show > .nav-link,
#main-content .navbar-dark .navbar-nav .active > .nav-link:not(#flash),
#main-content .navbar-dark .navbar-nav .nav-link.show:not(#flash),
#main-content .navbar-dark .navbar-nav .nav-link.active:not(#flash),
#main-content .navbar-dark .navbar-nav .nav-link:hover:not(#flash) {
  background-color: var(--s618-white);
  color: var(--s618-black) !important;
}

#main-content.vday .navbar-dark .navbar-nav .active > .nav-link:not(#flash),
#main-content.vday .navbar-dark .navbar-nav .nav-link.active:not(#flash),
#main-content.vday .navbar-dark .navbar-nav .nav-link:hover:not(#flash) {
  background-color: var(--s618-white);
  color: var(--s618-black) !important;
}

/* Accent blocks (e-coupon, etc.) */
#main-content .bg-red {
  background-color: var(--s618-orange) !important;
}

#main-content .tnc {
  border-color: var(--s618-gold);
}

#main-content.vday .tnc {
  border-color: var(--s618-orange);
}

#main-content.vday .bg-red {
  background-color: var(--s618-orange) !important;
}

/* CTA buttons */
#main-content .btn-buy,
#main-content .btn-style {
  background-color: var(--s618-orange) !important;
  border-color: var(--s618-orange) !important;
  color: var(--s618-white) !important;
}

#main-content .btn-buy:hover,
#main-content .btn-style:hover {
  background-color: var(--s618-orange-dark) !important;
  border-color: var(--s618-orange-dark) !important;
  color: var(--s618-white) !important;
}

/* Price / offer highlights */
#main-content .text-danger {
  color: var(--s618-orange) !important;
}

#main-content .bg-star {
  color: var(--s618-white);
  background-color: var(--s618-orange);
  border-color: var(--s618-gold);
}

#main-content .subcate-title,
#main-content .subcate-title span {
  background-color: var(--s618-orange);
}

/* Countdown — active sale */
#timer.start li,
#timer.start h5.startOffer {
  color: var(--s618-orange);
}

#timer.start li span {
  background-color: var(--s618-orange);
  color: var(--s618-white) !important;
}

/* Countdown — before sale */
#timer.before li,
#timer.before h5.beforeOffer {
  color: var(--s618-black);
}

#timer.before li span {
  background-color: var(--s618-gold);
  color: var(--s618-black) !important;
}

#main-content .flash-content .campaign-period-title {
  color: var(--s618-black) !important;
}

h5.startOffer,
h5.beforeOffer {
  color: var(--s618-black) !important;
}

#countdown li,
#countdown li span {
  color: var(--s618-black) !important;
}

/* Swiper active bullet — gold */
#main-content .swiper-pagination-bullet-active {
  -webkit-box-shadow: 0 0 2px 2px var(--s618-gold);
  box-shadow: 0 0 2px 2px var(--s618-gold);
}

#main-content .dropdown-item.active,
#main-content .dropdown-item:hover {
  color: var(--s618-orange) !important;
}
