/* ============================================= */
/* 分會場共用元件：色票／Modal／Dialog／Alert／Toast／Lightbox
   以 ruten20th 的 wall/components.css、toast.css、lightbox.css 為基礎，
   改成雙11 Figma（分會場-趣能量基地 元件區 2218:9418）的樣式。
   Modal 一律置中（不使用 mobile 底部彈窗）。 */
/* ============================================= */
:root {
  /* 雙11 色票（Figma） */
  --navy: #1828a2;            /* 藍色外框線 */
  --navy-dark: #1b1f95;
  --brand-500: #ff963b;
  --tab-active: #f75b35;
  --purple-700: #7500e1;
  --purple-600: #7f0fe9;
  --pink-500: #fc4eb1;
  --sky-500: #46bad4;
  --warning-500: #ffdf4f;
  --warning-300: #ffe180;
  --white-soft: #fdf9fd;
  --danger-100: #ffded9;
  --danger-300: #f9644c;
  --danger-400: #c94732;
  --neutral-900: #161619;
  --neutral-850: #171717;
  --neutral-800: #33343b;
  --neutral-700: #47484d;
  --neutral-600: #73747b;

  /* 硬邊陰影（貼紙感） */
  --shadow-navy-2: 0 2px 0 var(--navy);
  --shadow-navy-4: 0 4px 0 var(--navy);

  --font-zh: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
}

/* ============================================= */
/* 共用按鈕 */
/* ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 46px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* 深底橘字（Figma Button Solid：已關閉／趣能量不足彈窗） */
.btn--dark {
  background: var(--neutral-800);
  color: var(--brand-500);
}

.btn--dark:hover {
  opacity: 0.85;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================= */
/* Modal / Overlay（邏輯見 core/modal-base.js） */
/* ============================================= */
body.modal-open {
  overflow: hidden;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px 8px; /* Figma 375 寬時彈窗 358，左右各留約 8px */
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(22, 22, 25, 0.8); /* Figma Transparency / Black / opacity-80 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.is-open,
.modal-overlay.is-closing {
  display: flex;
}

.modal-overlay.is-open {
  opacity: 1;
}

/* 疊加層：疊在 primary 彈窗上面，不再多疊一層遮罩 */
.modal-overlay--stacked {
  z-index: 10003;
  background: transparent;
}

/* 外框（白底、圓角、padding）交給各個 Dialog 自己定義，這層只負責置中與捲動 */
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 358px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-overlay.is-open .modal-content {
  opacity: 1;
  transform: scale(1);
}

/* ============================================= */
/* Dialog（結構見 core/dialog.js） */
/* ============================================= */
.dialog {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-radius: 16px;
}

.dialog__header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
}

.dialog__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dialog__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--neutral-850);
}

.dialog__subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--neutral-600);
}

/* Figma close-layout：32x32 點擊區，裡面 26.67px 的 × */
.dialog__close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.dialog__close .icon-close {
  display: block;
  width: 26.67px;
  height: 26.67px;
}

.dialog__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-size: 14px;
  line-height: 22px;
  color: var(--neutral-800);
}

.dialog__footer {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
}

/* ============================================= */
/* Alert（一般錯誤提示，結構見 core/alert.js） */
/* ============================================= */
.modal-content:has(.alert) {
  max-width: 300px;
}

.alert {
  padding: 24px 16px 16px;
  background: #fff;
  border-radius: 16px;
}

.alert__message {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 22px;
  color: var(--neutral-800);
  text-align: center;
}

.alert__footer {
  display: flex;
  justify-content: center;
}

.alert__confirm {
  min-width: 136px;
}

/* ============================================= */
/* Toast（畫面正中心，結構見 core/toast.js）
   Figma Toast_趣能量變化 2273:8528 */
/* ============================================= */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  padding: 8px 16px;
  border-radius: 4px;
  background: rgba(22, 22, 25, 0.8);
  box-shadow: 0 0 1px rgba(22, 22, 25, 0.05), 0 4px 8px rgba(22, 22, 25, 0.1);
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
}

.toast--energy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.toast--energy .toast__icon {
  display: block;
  width: 40px;
  height: 40px;
}

.toast--energy .toast__text {
  margin: 0;
}

/* ============================================= */
/* Lightbox（點獎品圖放大，結構見 core/lightbox.js） */
/* ============================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.is-open {
  display: flex;
  opacity: 1;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}