/* ==========================================================================
   Huatai Warrants Academy - Unified Stylesheet (繁中 / EN 共用樣式)
   ========================================================================== */

:root {
  --huatai-red: #E60012;
  --huatai-dark: #1E293B;
}

/* ===== 品牌色彩輔助類 ===== */
.brand-red { color: var(--huatai-red); }
.text-brand-red { color: var(--huatai-red); }
.hover\:text-brand-red:hover { color: var(--huatai-red); }
.bg-brand-red { background-color: var(--huatai-red); }
.border-brand-red { border-color: var(--huatai-red); }

/* ===== FAQ 手風琴摺疊 (Accordion) ===== */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all .3s ease-in-out;
  opacity: 0;
}
.faq-answer.open {
  max-height: none;
  opacity: 1;
  border-top-color: #F3F4F6;
}
.faq-card {
  background: #fff;
}
.chev {
  transition: transform .2s ease;
}
.chev.rotate-180 {
  transform: rotate(180deg);
}
.faq-prewrap {
  white-space: pre-wrap;
  line-height: 1.9;
}

/* ===== FAQ 搜尋模式佈局 ===== */
#faqContent.search-mode .faq-part {
  margin-top: 2rem;
}

/* ===== 頂部主頁籤 (專有名詞 / 關鍵交易知識 / 常問問題) ===== */
.page-tab {
  padding: 16px 6px;
  color: #4B5563;
  border-bottom: 3px solid transparent;
  transition: all .2s ease;
}
.page-tab:hover {
  color: var(--huatai-red);
}
.page-tab.active {
  color: var(--huatai-red);
  border-color: var(--huatai-red);
}

/* ===== 專有名詞 3D 翻轉卡片 (3D Flip Flashcards) ===== */
.perspective-1000 {
  perspective: 3000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
}

.flip-card-inner {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 100%;
}

.flip-card.is-flipped .flip-card-inner,
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* 翻卡背面滾動條 */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* ===== 專有名詞側滑抽屜 (Slide-in Dictionary Drawer) ===== */
#detail-panel {
  transition: transform .35s ease-in-out;
  transform: translateX(100%);
}
#detail-panel.open {
  transform: translateX(0);
}
#detail-overlay {
  transition: opacity .35s ease-in-out;
}

main#top .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

main#top .container .px-3 {
    padding-left: .75rem!important;
    padding-right: .75rem!important;
}

main#top .container .py-3 {
    padding-top: .75rem!important;
    padding-bottom: .75rem!important;
}

main#top .container .px-4 {
    padding-left: 1rem!important;
    padding-right: 1rem!important;
}

main#top .container .py-4 {
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}

main#top .container .px-5 {
  padding-left: 1.25rem!important;
  padding-right: 1.25rem!important;
}

main#top .container .py-5 {
    padding-top: 1.25rem!important;
    padding-bottom: 1.25rem!important;
}

main#top .container .gap-3 {
    gap: 0.75rem!important;
}

main#top .container .border {
    border: inherit;
}

main#top .container .border-red-200 {
    --tw-border-opacity: 1!important;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1))!important;
}

main#top .container .border-red-100 {
    --tw-border-opacity: 1!important;
    border-color: rgb(254 226 226 / var(--tw-border-opacity, 1))!important;
}

main#top .container .text-4xl {
    font-size: 2.25rem!important;
    line-height: 2.5rem!important;
}

main#top .container button.text-2xl {
    font-size: 42px !important;
    line-height: 24px;
}

main#top .container .mb-5 {
    margin-bottom: 1.25rem!important;
}

main#top .container .quick_link .db_disclaimer {
    font-size: 14px;
    max-width: 1320px;
    margin: 0 auto;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
}

main#top .container .border-transparent {
    border-color: transparent !important;
}

@media (min-width: 768px) {
    main#top .container .md\:text-5xl {
        font-size: 3rem!important;
    }
}

@media (min-width: 1200px) {
   	main#top .container nav {
      width: auto;
		  min-width: 0;
    }
}

@media (min-width: 992px) {
   	main#top .container nav {
      width: auto;
		  min-width: 0;
    }
}

@media (max-width: 992px) {
	  main#top .container main {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    #detail-panel.open {
        margin-top: 80px;
    }
}