/* === FOUC Prevention === */
body.i18n-loading {
  opacity: 0 !important;
}
body:not(.i18n-loading) {
  opacity: 1 !important;
}

/* === OEM/ODM page card styles === */
.premium-card {
  background-color: #1A1A1A;
  border: 1px solid rgba(233, 195, 73, 0.1);
  transition: all 0.3s ease-out;
}
.premium-card:hover {
  border-color: #e9c349;
  box-shadow: 0 0 20px rgba(233, 195, 73, 0.15);
  transform: translateY(-4px);
}
.glass-card {
  background: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(233, 195, 73, 0.1);
}
.glass-card:hover {
  border-color: rgba(233, 195, 73, 0.4);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  opacity: 0;
}
details[open] .accordion-content {
  max-height: 500px;
  opacity: 1;
}

:lang(th) .nav-link,
:lang(th) [data-i18n="nav.home"],
:lang(th) [data-i18n="nav.products"],
:lang(th) [data-i18n="nav.contact"],
:lang(th) [data-i18n="nav.about"] {
  font-size: 13px;
  letter-spacing: 0;
}

:lang(en) .hero-cta,
:lang(th) .hero-cta {
  padding-left: 32px;
  padding-right: 32px;
}

a[data-locale].lang-active {
  color: #e9c349 !important;
  font-weight: 700 !important;
}

a[data-locale]:not(.lang-active) {
  color: rgba(229, 226, 225, 0.8) !important;
  font-weight: 400 !important;
}

/* FAQ accordion animation for contact page mobile */
.ver-mob .faq-item .faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}
.ver-mob .faq-item.active .faq-content {
  max-height: 500px;
}

/* Smooth <details> accordion animation */
details summary ~ * {
  overflow: hidden;
}
details[open] summary ~ * {
  animation: faqSlideDown 0.35s ease-out;
}
details:not([open]) summary ~ * {
  animation: faqSlideUp 0.25s ease-in;
}
@keyframes faqSlideDown {
  from { opacity: 0; max-height: 0; padding-top: 0; }
  to { opacity: 1; max-height: 500px; }
}
@keyframes faqSlideUp {
  from { opacity: 1; max-height: 500px; }
  to { opacity: 0; max-height: 0; padding-top: 0; }
}
details summary {
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}

/* Carousel drag/swipe support */
#slider-container, .hero-carousel-container, #hero-carousel {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#slider-container:active, #hero-carousel:active {
  cursor: grabbing;
}