/* =============================================================================
   2meet InfoCards — Cards CSS
   Per-card-type styles: LINK, EMAIL, LINE, SOCIAL, PRODUCT, EVENT,
   EMBED, COUNTDOWN, click badge, ACCORDION, embed lazy placeholder.
   Depends on: 2meetic-public.css (design tokens + base).

   ── 配色強制鏈（DESIGN.md §9.5）──────────────────────────────────────────────
   本檔只能 **消費** var(--2meet-*) token，嚴禁：
     • 重新宣告 :root { --2meet-* }（唯一定義點：2meetic-public.css）
     • 硬編碼 HEX / rgb / 具名色（深色語義色除外，須隔離於 dark mode 區塊）
     • 使用 !important 覆蓋 token
   Token 鏈：Morandi 基層 → 2meetic-public.css → wp_2meet_theme_styles（Admin）
             → wp_2meet_vendor_profiles（Vendor 自訂）
   注入點：TMEETIC_Frontend::inject_profile_styles() → <style id="tmeetic-profile-vars">
   ============================================================================= */

/* --- LINK 卡片 --------------------------------------------------------------- */
.tmeetic-card--link .tmeetic-card__cta {
  margin-top: var(--2meet-space-xs);
}

/* --- EMAIL 卡片 -------------------------------------------------------------- */
.tmeetic-card--email .tmeetic-subscribe-form {
  margin-top: var(--2meet-space-sm);
}

.tmeetic-subscribe-form__field {
  margin-bottom: var(--2meet-space-xs);
}

.tmeetic-subscribe-form__input {
  width: 100%;
  padding: 12px var(--2meet-space-sm);            /* iOS 文字欄高度 44px */
  border: 1px solid var(--ios-separator);
  border-radius: var(--2meet-radius-input);
  font-family: inherit;
  font-size: 1rem;
  color: var(--2meet-text);
  background: var(--ios-fill);                    /* iOS 輸入框底色 */
  box-sizing: border-box;
  transition: border-color var(--2meet-transition), box-shadow var(--2meet-transition);
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
}

.tmeetic-subscribe-form__input:focus {
  outline: none;
  border-color: var(--2meet-primary);
  background: var(--2meet-bg);
  box-shadow: var(--2meet-focus-ring);
}

.tmeetic-subscribe-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--2meet-space-xs);
  font-size: 0.82rem;
  color: var(--2meet-muted);
  margin-bottom: var(--2meet-space-sm);
  cursor: pointer;
  line-height: 1.4;
}

.tmeetic-subscribe-form__consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--2meet-primary);
}

.tmeetic-subscribe-form__btn {
  display: block;
  width: 100%;
  padding: 12px var(--2meet-space-sm);
  border: none;
  border-radius: var(--2meet-radius-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: opacity var(--2meet-transition), transform 0.1s ease;
}

.tmeetic-subscribe-form__btn:active {
  opacity: 0.70;
  transform: scale(0.97);
}

.tmeetic-subscribe-form__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tmeetic-subscribe-form__message {
  min-height: 24px;
  font-size: 0.875rem;
  text-align: center;
  padding-top: var(--2meet-space-xs);
  transition: opacity var(--2meet-transition), transform var(--2meet-transition);
}

.tmeetic-subscribe-form__message--success {
  color: var(--2meet-success);
  animation: tmeetic-msg-fadein 0.25s ease-out both;
}

.tmeetic-subscribe-form__message--success::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--2meet-success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  vertical-align: middle;
  margin-right: 6px;
  animation: tmeetic-check-pop 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

@keyframes tmeetic-check-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes tmeetic-msg-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tmeetic-subscribe-form__message--error {
  color: var(--ios-red);
}

.tmeetic-subscribe-form__btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* --- LINE 卡片 --------------------------------------------------------------- */
.tmeetic-card--line .tmeetic-card__cta--line {
  background-color: var(--2meet-line-green) !important;
  color: var(--2meet-line-text) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--2meet-space-xs);
}

.tmeetic-card__cta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tmeetic-card__qr {
  text-align: center;
  padding: var(--2meet-space-sm) 0 0;
  font-size: 0.82rem;
  color: var(--2meet-muted);
}

/* --- SOCIAL 卡片（iOS Table Cell Style）------------------------------------- */
.tmeetic-card--social {
  /* 繼承 .tmeetic-card 的白色圓角卡片樣式 */
  padding-bottom: 0;
}

.tmeetic-card__social-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px var(--2meet-space-sm);
  text-decoration: none;
  color: var(--2meet-text);
  font-size: 0.9375rem;                           /* iOS Cell 字級 */
  font-weight: 500;
  border-bottom: 0.5px solid var(--ios-separator);/* iOS 髮絲線 */
  transition: background var(--2meet-transition), opacity var(--2meet-transition);
  position: relative;
  min-height: 44px;                               /* iOS 最小觸控目標 */
  box-sizing: border-box;
}

.tmeetic-card__social-link:last-child {
  border-bottom: none;
}

.tmeetic-card__social-link:hover {
  text-decoration: none;
  background: var(--ios-fill);                    /* iOS 高亮底色 */
  opacity: 1;
}

.tmeetic-card__social-link:active {
  opacity: 0.70;
  background: var(--ios-fill-active);
}

/* iOS Disclosure Indicator（揭示箭頭）*/
.tmeetic-card__social-link::after {
  content: '';
  width: 6px;
  height: 10px;
  border-right: 1.5px solid rgba(60, 60, 67, 0.30);
  border-top: 1.5px solid rgba(60, 60, 67, 0.30);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 2px;
}

/* iOS Squircle 圖示（32×32，border-radius 8px）*/
.tmeetic-card__social-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: var(--2meet-radius-icon);        /* 8px squircle */
  background: var(--2meet-muted) center / 18px 18px no-repeat;
  flex-shrink: 0;
}

.tmeetic-card__social-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tmeetic-card__social-followers {
  font-size: 0.8125rem;                           /* iOS Caption */
  color: var(--2meet-muted);
  flex-shrink: 0;
  margin-right: var(--2meet-space-xs);
}

/* ── 平台正式 Logo（白色 SVG on 品牌色 squircle）────────────────────────── */

/* Instagram：相機圖示 on 漸層底 */
.tmeetic-card--social-instagram .tmeetic-card__social-icon {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17 2H7C4.24 2 2 4.24 2 7v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5zm3 15c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V7c0-1.65 1.35-3 3-3h10c1.65 0 3 1.35 3 3v10zM17.25 6.5a.75.75 0 100 1.5.75.75 0 000-1.5zM12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm0 7a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
    var(--2meet-gradient-ig);
}

/* YouTube：播放鍵 on 紅底 */
.tmeetic-card--social-youtube .tmeetic-card__social-icon {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21.8 8S21.6 6.5 21 5.8c-.7-.8-1.5-.8-1.8-.9C16.6 4.7 12 4.7 12 4.7s-4.6 0-7.2.2c-.4 0-1.1.1-1.8.9-.6.7-.8 2.2-.8 2.2S2 9.7 2 11.4v1.6c0 1.7.2 3.4.2 3.4s.2 1.5.8 2.2c.7.8 1.6.8 2 .9C6.8 19.7 12 19.7 12 19.7s4.6 0 7.2-.3c.4 0 1.1-.1 1.8-.9.6-.7.8-2.2.8-2.2s.2-1.7.2-3.4v-1.6C22 9.7 21.8 8 21.8 8zM9.8 15.3V8.5l6.5 3.4-6.5 3.4z'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
    var(--2meet-social-youtube);
}

/* TikTok：音符圖示 on 黑底 */
.tmeetic-card--social-tiktok .tmeetic-card__social-icon {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19.6 6.7A4.83 4.83 0 0115.8 2.4V2h-3.45v13.67a2.89 2.89 0 01-5.77 0 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.28 6.28 0 00-.79-.05 6.34 6.34 0 000 12.68 6.34 6.34 0 006.33-6.34V8.94a8.17 8.17 0 004.77 1.52V7a4.88 4.88 0 01-1-.3z'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
    var(--2meet-social-tiktok);
}

/* Twitter / X：X 字母 on 黑底（品牌已更新為 X）*/
.tmeetic-card--social-twitter .tmeetic-card__social-icon {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.261 5.638 5.898-5.638zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
    var(--2meet-social-x);
}

/* Facebook：F 字母 on 藍底 */
.tmeetic-card--social-facebook .tmeetic-card__social-icon {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M13.397 20.997v-8.196h2.765l.411-3.209h-3.176V7.548c0-.926.258-1.56 1.587-1.56h1.684V3.127A22.336 22.336 0 0014.201 3c-2.444 0-4.122 1.492-4.122 4.231v2.355H7.332v3.209h2.753v8.202h3.312z'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
    var(--2meet-social-facebook);
}

/* Threads：品牌圖示 on 黑底 */
.tmeetic-card--social-threads .tmeetic-card__social-icon {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12.186 24h-.014c-3.402-.022-6.037-1.155-7.83-3.366C2.73 18.754 1.95 16.1 1.93 12.697v-.016c.02-3.406.803-6.058 2.41-7.938C6.134 2.753 8.77 1.622 12.172 1.6h.013c2.617.019 4.806.7 6.504 2.033 1.678 1.31 2.773 3.217 3.256 5.664l-2.797.551c-.724-3.573-2.917-5.382-6.028-5.406-2.394.024-4.173.741-5.286 2.131-1.016 1.259-1.545 3.203-1.563 5.866.017 2.67.548 4.614 1.563 5.827 1.121 1.383 2.874 2.085 5.287 2.091.978 0 1.871-.143 2.623-.416 1.16-.418 1.884-1.138 2.306-2.21.286-.727.466-1.625.532-2.657h-5.459v-2.817h8.319l-.01.512c-.074 2.268-.447 4.16-1.112 5.628-.882 1.942-2.261 3.306-4.101 4.059a10.455 10.455 0 01-3.849.666z'/%3E%3C/svg%3E") center / 18px 18px no-repeat,
    var(--2meet-social-threads);
}

/* --- PRODUCT 卡片 ------------------------------------------------------------ */
.tmeetic-card__price {
  font-size: 1.375rem;                            /* 更明顯的價格 */
  font-weight: 700;
  color: var(--2meet-accent);
  margin-bottom: var(--2meet-space-sm);
  letter-spacing: -0.02em;
}

.tmeetic-card__cta--product {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--2meet-radius-pill);
  padding: 14px var(--2meet-space-sm);
  font-size: 1rem;
  font-weight: 600;
  min-height: 50px;
}

/* --- EVENT 卡片 -------------------------------------------------------------- */
.tmeetic-card__event-date,
.tmeetic-card__event-location {
  font-size: 0.875rem;
  color: var(--2meet-muted);
  margin-bottom: var(--2meet-space-xs);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --- EMBED 卡片 -------------------------------------------------------------- */
.tmeetic-card--embed {
  padding: var(--2meet-space-sm);
}

.tmeetic-card__embed-wrap {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  border-radius: var(--2meet-radius-btn);
}

.tmeetic-card__embed-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* StreetVoice 固定高度播放器 wrapper（JS scale 填滿寬度） */
.tmeetic-card__embed-streetvoice {
  position: relative;
  width: 100%;
  height: 120px; /* 播放器自然高度，JS 執行後動態調整 */
  overflow: hidden;
  border-radius: var(--2meet-radius-btn);
}

.tmeetic-card__embed-streetvoice iframe {
  border: none;
  display: block;
}

/* --- COUNTDOWN 卡片 ---------------------------------------------------------- */

/* 標題/描述無 .card__body wrapper，補 padding 對齊 Event 卡片格式 */
.tmeetic-card--countdown .tmeetic-card__title,
.tmeetic-card--countdown .tmeetic-card__description {
  padding: var(--2meet-space-sm) var(--2meet-space-sm) 0;
}

.tmeetic-card__countdown {
  display: flex;
  justify-content: center;
  gap: var(--2meet-space-sm);
  padding: var(--2meet-space-sm) 0;
}

.tmeetic-card__countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}

.tmeetic-card__countdown-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--2meet-primary);
  line-height: 1;
}

.tmeetic-card__countdown-label {
  font-size: 0.75rem;
  color: var(--2meet-muted);
  margin-top: 4px;
}

/* --- 點擊數統計徽章（iOS 標籤風格）-------------------------------------------- */
.tmeetic-card__click-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--2meet-muted);
  background: var(--ios-fill);
  border: 0.5px solid var(--ios-separator);
  border-radius: var(--2meet-radius-pill);
  padding: 3px 10px;
  margin: 8px 0 0 auto;
  align-self: flex-end;
  pointer-events: none;
  user-select: none;
}
.tmeetic-card__click-badge::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--2meet-primary);
  opacity: 0.6;
}

/* --- ACCORDION 卡片（iOS Settings Grouped List Style）------------------------ */
.tmeetic-card--accordion {
  padding: 0;
  overflow: hidden;              /* 圓角卡片統一裁切 */
}

.tmeetic-card--accordion .tmeetic-card__title,
.tmeetic-card--accordion .tmeetic-card__description {
  padding: var(--2meet-space-sm) var(--2meet-space-sm) 0;
}

.tmeetic-accordion {
  padding: var(--2meet-space-xs) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;                        /* 無間隙，iOS Settings 分組列表 */
}

.tmeetic-accordion__item {
  border: none;
  border-radius: 0;
  border-bottom: 0.5px solid var(--ios-separator);
  overflow: visible;
  transition: background var(--2meet-transition);
}

.tmeetic-accordion__item:last-child {
  border-bottom: none;
}

.tmeetic-accordion__item[open] {
  border-color: var(--ios-separator);
}

.tmeetic-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--2meet-space-xs);
  padding: 11px var(--2meet-space-sm);
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--2meet-bg);
  font-weight: 500;
  font-size: 0.9375rem;
  min-height: 44px;              /* iOS 最小觸控目標 */
  transition: background var(--2meet-transition);
}

.tmeetic-accordion__summary::-webkit-details-marker { display: none; }
.tmeetic-accordion__summary::marker { display: none; }

.tmeetic-accordion__item[open] .tmeetic-accordion__summary {
  background: var(--2meet-bg);
}

.tmeetic-accordion__summary:hover {
  background: var(--ios-fill);
}

.tmeetic-accordion__num {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--2meet-muted);
  min-width: 2ch;
  flex-shrink: 0;
}

.tmeetic-accordion__title {
  flex: 1;
  line-height: 1.4;
}

/* + / − 圖標（純 CSS） */
.tmeetic-accordion__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  position: relative;
}

.tmeetic-accordion__icon::before,
.tmeetic-accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--2meet-muted);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* 橫線（始終可見） */
.tmeetic-accordion__icon::before {
  width: 12px;
  height: 2px;
  top: 9px;
  left: 4px;
}

/* 豎線（展開時消失） */
.tmeetic-accordion__icon::after {
  width: 2px;
  height: 12px;
  top: 4px;
  left: 9px;
}

.tmeetic-accordion__item[open] .tmeetic-accordion__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.tmeetic-accordion__content {
  padding: var(--2meet-space-sm) var(--2meet-space-sm);
  font-size: 0.875rem;                            /* iOS Footnote */
  color: var(--2meet-text);
  line-height: 1.6;
  border-top: 0.5px solid var(--ios-separator);  /* iOS 髮絲線 */
  background: var(--2meet-surface);              /* iOS 次要分組背景 */
}

.tmeetic-accordion__content a {
  color: var(--2meet-primary);
  text-decoration: underline;
}

.tmeetic-accordion__content a:hover {
  opacity: 0.8;
}

.tmeetic-accordion__content p { margin: 0 0 var(--2meet-space-xs); }
.tmeetic-accordion__content ul,
.tmeetic-accordion__content ol  { padding-left: 1.5em; margin: 0 0 var(--2meet-space-xs); }
.tmeetic-accordion__content li  { margin-bottom: 0; line-height: 1.5; }
/* 編輯器在 <li> 裡自動插入 <p> 時，消除 p margin 避免行距偏大 */
.tmeetic-accordion__content li p { margin: 0; }


/* ── Embed Lazy Loading Placeholder（v2.5.1）──────────────────── */
.tmeetic-card__embed-placeholder {
  background: var(--2meet-surface);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.tmeetic-card__embed-placeholder::after {
  content: '';
  width: 24px;
  height: 24px;
  border: 3px solid var(--2meet-border);
  border-top-color: var(--2meet-primary);
  border-radius: 50%;
  animation: tmeetic-spin 0.8s linear infinite;
}

@keyframes tmeetic-spin {
  to { transform: rotate(360deg); }
}

/* 比例容器內的 placeholder 填滿整個 wrap */
.tmeetic-card__embed-wrap .tmeetic-card__embed-placeholder {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
}

/* Fallback：iframe 載入失敗時顯示直接連結 */
.tmeetic-card__embed-placeholder--fallback {
  animation: none;
}
.tmeetic-card__embed-placeholder--fallback::after {
  display: none;
}
.tmeetic-card__embed-fallback {
  color: var(--2meet-primary);
  text-decoration: underline;
  font-size: 14px;
  padding: 8px 16px;
}

/* lazy iframe 初始不佔高度（src 尚未設定前維持 0 高度） */
.tmeetic-lazy-iframe {
  display: block;
}

/* ==========================================================================
   Story Page（v4.1.0）
   ========================================================================== */

.tmeetic-story-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--2meet-space-md) var(--2meet-space-sm);
}

.tmeetic-story-page__inner {
  display: flex;
  flex-direction: column;
  gap: var(--2meet-space-sm);
}

.tmeetic-story-page__nav {
  margin-bottom: var(--2meet-space-xs);
}

.tmeetic-story-page__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--2meet-primary);
  text-decoration: none;
}

.tmeetic-story-page__back:hover {
  text-decoration: underline;
}

.tmeetic-story-page__cover {
  border-radius: var(--2meet-radius-card);
  overflow: hidden;
  margin-bottom: var(--2meet-space-xs);
}

.tmeetic-story-page__cover img {
  width: 100%;
  height: auto;
  display: block;
}

.tmeetic-story-page__header {
  text-align: center;
  margin-bottom: var(--2meet-space-sm);
}

.tmeetic-story-page__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--2meet-text);
  margin: 0 0 8px;
}

.tmeetic-story-page__desc {
  font-size: 15px;
  color: var(--2meet-muted);
  margin: 0;
  line-height: 1.5;
}

.tmeetic-story-page__empty {
  text-align: center;
  color: var(--2meet-muted);
  padding: var(--2meet-space-lg) 0;
}

/* ==========================================================================
   EPK Page（v5.62.0）
   ========================================================================== */

/* 外層容器：無寬度限制，讓背景可全出血 */
.tmeetic-epk-page {
  min-height: 100vh;
}

/* 所有非卡片區塊（nav / cover / header / empty）
   統一限寬 480px + 水平 padding，對齊 .tmeetic-cards 的邊界 */
.tmeetic-epk-page__nav,
.tmeetic-epk-page__header,
.tmeetic-epk-page__empty {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--2meet-space-sm);
  padding-right: var(--2meet-space-sm);
  box-sizing: border-box;
}

/* 封面圖：全出血到 480px 邊界（不加側邊 padding），
   呈現與卡片容器外框齊平的視覺效果 */
.tmeetic-epk-page__cover {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.tmeetic-epk-page__cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--2meet-radius-card);
}

/* 頂部導覽列 */
.tmeetic-epk-page__nav {
  padding-top: var(--2meet-space-sm);
  padding-bottom: var(--2meet-space-xs, 8px);
}

.tmeetic-epk-page__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--2meet-primary);
  text-decoration: none;
}

.tmeetic-epk-page__back:hover {
  text-decoration: underline;
}

/* 標題區：badge + h1 + 摘要說明 */
.tmeetic-epk-page__header {
  text-align: center;
  padding-top: var(--2meet-space-sm);
  padding-bottom: var(--2meet-space-sm);
}

.tmeetic-epk-page__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--2meet-muted);
  border: 1px solid var(--2meet-border);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

.tmeetic-epk-page__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--2meet-text);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tmeetic-epk-page__desc {
  font-size: 15px;
  color: var(--2meet-muted);
  margin: 0;
  line-height: 1.6;
}

/* 空狀態 */
.tmeetic-epk-page__empty {
  text-align: center;
  color: var(--2meet-muted);
  padding-top: var(--2meet-space-lg);
  padding-bottom: var(--2meet-space-lg);
}

/* ==========================================================================
   Stories 入口區塊（Vendor Profile，v4.1.0）
   ========================================================================== */

.tmeetic-stories-entrance {
  margin-top: var(--2meet-space-md);
  padding-top: var(--2meet-space-sm);
  border-top: 1px solid var(--2meet-border);
}

.tmeetic-stories-entrance__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--2meet-text);
  margin: 0 0 12px;
}

.tmeetic-stories-entrance__list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.tmeetic-stories-entrance__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
  width: 80px;
}

.tmeetic-stories-entrance__cover {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--2meet-border);
  transition: border-color 0.2s;
}

.tmeetic-stories-entrance__item:hover .tmeetic-stories-entrance__cover {
  border-color: var(--2meet-primary);
}

.tmeetic-stories-entrance__cover--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--2meet-surface);
  font-size: 28px;
}

.tmeetic-stories-entrance__name {
  font-size: 12px;
  color: var(--2meet-text);
  text-align: center;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 全站 Stories 列表頁（[2meet_stories] shortcode）─────────────────────── */
.tmeetic-stories-list-page__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--2meet-space-sm);
  flex-wrap: wrap;
  gap: 8px;
}
.tmeetic-stories-list-page__count {
  font-size: 14px;
  color: var(--2meet-muted);
  margin: 0;
}
.tmeetic-stories-list-page__sort {
  display: flex;
  gap: 4px;
}
.tmeetic-stories-list-page__sort a {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: var(--2meet-radius-pill);
  border: 1px solid var(--2meet-border);
  text-decoration: none;
  color: var(--2meet-muted);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tmeetic-stories-list-page__sort a.is-active,
.tmeetic-stories-list-page__sort a:hover {
  background: var(--2meet-primary);
  color: var(--2meet-bg, #FAF9F6);
  border-color: var(--2meet-primary);
}

/* Story 卡片網格 */
.tmeetic-story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--2meet-space-sm);
}
.tmeetic-story-card {
  border-radius: var(--2meet-radius-card);
  overflow: hidden;
  border: 1px solid var(--2meet-border);
  background: var(--2meet-bg);
  transition: box-shadow 0.2s;
}
.tmeetic-story-card:hover { box-shadow: var(--2meet-shadow-hover); }
.tmeetic-story-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tmeetic-story-card__cover {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--2meet-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tmeetic-story-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tmeetic-story-card__cover-empty { font-size: 40px; }
.tmeetic-story-card__body { padding: var(--2meet-space-sm); }
.tmeetic-story-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--2meet-text);
  margin: 0 0 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tmeetic-story-card__title a {
  color: inherit;
  text-decoration: none;
}
/* Vendor + category 橫排（對應 /bookings/ .tmb-card-details 模式） */
.tmeetic-story-card__details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
  line-height: 1.4;
}
.tmeetic-story-card__vendor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--2meet-muted);
}
.tmeetic-story-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tmeetic-story-card__vendor-name {
  font-size: 0.82rem;
  color: var(--2meet-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tmeetic-story-card__category {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--2meet-muted);
}
.tmeetic-story-card__vendor + .tmeetic-story-card__category::before {
  content: '·';
  margin-right: 8px;
  color: var(--2meet-border);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.tmeetic-story-card__vendor-name,
.tmeetic-story-card__category a {
  text-decoration: none;
  transition: color 0.15s;
}
a.tmeetic-story-card__vendor-name { color: var(--2meet-muted); }
a.tmeetic-story-card__vendor-name:hover { color: var(--2meet-primary); }
.tmeetic-story-card__category a { color: var(--2meet-muted); }
.tmeetic-story-card__category a:hover { color: var(--2meet-primary); }

/* 品牌故事分類篩選 chip */
.tmeetic-stories-list-page__active-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 10px;
  background: var(--2meet-surface, #F8F9FA);
  border: 1px solid var(--2meet-border, #EFEFEF);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--2meet-text, #1A1A2E);
}
.tmeetic-stories-list-page__filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--2meet-muted, #6C757D);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tmeetic-stories-list-page__filter-remove:hover {
  background: var(--2meet-border, #EFEFEF);
  color: var(--2meet-text, #1A1A2E);
}
.tmeetic-story-card__meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--2meet-muted);
}

/* --- DIVIDER 分隔線 ---------------------------------------------------------- */
.tmeetic-card--divider {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 8px 0;
}
.tmeetic-card--divider-line hr {
  border: none;
  border-top: 1px solid var(--2meet-border, #EFEFEF);
  margin: 0;
}
.tmeetic-card--divider-space {
  height: 24px;
}
.tmeetic-card--divider-label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tmeetic-divider__line {
  flex: 1;
  height: 1px;
  background: var(--2meet-border, #EFEFEF);
}
.tmeetic-divider__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--2meet-muted, #6C757D);
  white-space: nowrap;
}

/* --- BANNER 文字區塊 --------------------------------------------------------- */
.tmeetic-card--banner {
  padding: var(--2meet-space-md, 16px);
}
.tmeetic-card--banner-default {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: var(--2meet-space-sm, 12px) 0;
}
.tmeetic-card--banner-highlight {
  border: 1px solid var(--2meet-border);
  background: color-mix(in oklch, var(--2meet-primary) 8%, var(--2meet-surface));
  border-radius: var(--2meet-radius-card);
}
.tmeetic-card--banner-quote {
  text-align: center;
}
.tmeetic-banner__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--2meet-text, #1A1A2E);
}
.tmeetic-banner__text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--2meet-text, #1A1A2E);
}
.tmeetic-card--banner-quote .tmeetic-banner__text {
  font-style: italic;
}
.tmeetic-banner__stars {
  color: var(--2meet-rating);
  font-size: 1.125rem;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.tmeetic-banner__author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: .8125rem;
  color: var(--2meet-muted, #6C757D);
}
.tmeetic-card--banner-quote .tmeetic-banner__author {
  justify-content: center;
}
.tmeetic-banner__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.tmeetic-banner--align-center {
  text-align: center;
}

/* --- GALLERY 圖片集 ---------------------------------------------------------- */
.tmeetic-card--gallery .tmeetic-card__title {
  margin-bottom: var(--2meet-space-sm, 12px);
}
.tmeetic-gallery {
  --gallery-ratio: 1/1;
}
.tmeetic-gallery--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.tmeetic-gallery--scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.tmeetic-gallery--scroll .tmeetic-gallery__item {
  flex: 0 0 70%;
  scroll-snap-align: start;
}
.tmeetic-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}
.tmeetic-gallery__item img {
  width: 100%;
  aspect-ratio: var(--gallery-ratio);
  object-fit: cover;
  display: block;
}
.tmeetic-gallery__item figcaption {
  font-size: .75rem;
  color: var(--2meet-muted, #6C757D);
  padding: 4px 2px;
  text-align: center;
}
.tmeetic-card--gallery .tmeetic-card__desc {
  margin-top: var(--2meet-space-sm, 12px);
  font-size: .875rem;
  color: var(--2meet-muted, #6C757D);
}

/* ── Gallery Swipe（4 張一頁 2×2）─────────────────────────────────────── */
.tmeetic-gallery--swipe {
  position: relative;
  overflow: hidden;
}
.tmeetic-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.tmeetic-gallery__track::-webkit-scrollbar {
  display: none;
}
.tmeetic-gallery__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  scroll-snap-align: start;
}
/* 圓點指示器 */
.tmeetic-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
}
.tmeetic-gallery__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--2meet-border, #EFEFEF);
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.tmeetic-gallery__dot--active {
  background: var(--2meet-primary, #A8B9A4);
  transform: scale(1.3);
}
/* 左右箭頭：所有裝置顯示 */
.tmeetic-gallery__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--2meet-text, #1A1A2E);
  transition: background 0.15s, opacity 0.15s;
  padding: 0;
}
.tmeetic-gallery__arrow:hover {
  background: var(--2meet-bg);
}
.tmeetic-gallery__arrow--prev { left: 4px; }
.tmeetic-gallery__arrow--next { right: 4px; }
.tmeetic-gallery__arrow[disabled] {
  opacity: 0.25;
  cursor: default;
}

/* ── WCAG 2.1 AA 無障礙修補（v1.0）────────────────────────────────────────
   Cards CSS 補充：訂閱表單、手風琴等元件鍵盤可訪問性
   2meetic-public.css 已套用全域規則，此處補 cards 專屬選擇器
   ─────────────────────────────────────────────────────────────────────── */

/* 鍵盤焦點環（訂閱表單輸入框已有 box-shadow，補鍵盤路徑 outline） */
.tmeetic-subscribe-form__input:focus-visible {
  outline: 2px solid var(--2meet-primary, #A8B9A4) !important;
  outline-offset: 2px !important;
}

/* 手風琴按鈕焦點 */
.tmeetic-accordion__toggle:focus-visible {
  outline: 2px solid var(--2meet-primary, #A8B9A4) !important;
  outline-offset: 2px !important;
}

/* 倒數計時器共享按鈕觸控最小目標 */
.tmeetic-countdown__btn,
.tmeetic-accordion__toggle {
  min-height: 44px;
  touch-action: manipulation;
}

/* --- MULTILEVEL ACCORDION 卡片（多階摺疊選單）-------------------------------- */
.tmeetic-card--multilevel-accordion {
  padding: 0;
  overflow: hidden;
}

.tmeetic-card--multilevel-accordion .tmeetic-card__title,
.tmeetic-card--multilevel-accordion .tmeetic-card__description {
  padding: var(--2meet-space-sm) var(--2meet-space-sm) 0;
}

.tmeetic-ml-accordion {
  padding: var(--2meet-space-xs) 0 0;
  display: flex;
  flex-direction: column;
}

/* 分類層 */
.tmeetic-ml-accordion__section {
  border-top: 1px solid var(--2meet-border);
}

.tmeetic-ml-accordion__section:last-child {
  border-bottom: 1px solid var(--2meet-border);
}

.tmeetic-ml-accordion__section[open] > .tmeetic-ml-accordion__section-summary {
  color: var(--2meet-text);
}

.tmeetic-ml-accordion__section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--2meet-space-sm);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--2meet-text);
  background: var(--2meet-surface);
  gap: 8px;
  min-height: 44px;
  touch-action: manipulation;
}

.tmeetic-ml-accordion__section-summary::-webkit-details-marker { display: none; }
.tmeetic-ml-accordion__section-summary::marker { display: none; }

.tmeetic-ml-accordion__section-title {
  flex: 1;
}

/* 子項目容器 */
.tmeetic-ml-accordion__children {
  background: var(--2meet-bg, #ffffff);
  padding: 4px 0 4px var(--2meet-space-sm);
  border-top: 1px solid var(--2meet-border);
}

/* 子 Q&A 縮排樣式 */
.tmeetic-ml-accordion__item {
  border-bottom: 1px solid color-mix(in srgb, var(--2meet-border) 60%, transparent);
}

.tmeetic-ml-accordion__item:last-child {
  border-bottom: none;
}

.tmeetic-ml-accordion__item > .tmeetic-accordion__summary {
  padding-left: 8px;
  font-size: 0.88rem;
  font-weight: 500;
}

.tmeetic-ml-accordion__item > .tmeetic-accordion__content {
  padding-left: 8px;
  font-size: 0.85rem;
}

/* 序號標籤 */
.tmeetic-ml-accordion__num {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--2meet-muted);
  flex-shrink: 0;
  margin-right: 0;
  min-width: 16px;
}

/* 顯示序號時，summary 的 title 佔滿剩餘空間 */
.tmeetic-ml-accordion--numbered .tmeetic-ml-accordion__item > .tmeetic-accordion__summary {
  display: flex;
  align-items: center;
}
.tmeetic-ml-accordion--numbered .tmeetic-ml-accordion__item > .tmeetic-accordion__summary .tmeetic-accordion__title {
  flex: 1;
}

/* ── 多階摺疊搜尋框 ─────────────────────────────────────────────────────── */
.tmeetic-ml-accordion__search-wrap {
  padding: 10px var(--2meet-space-sm, 16px) 8px;
  border-bottom: 1px solid var(--2meet-border, #EFEFEF);
  position: sticky;
  top: 0;
  background: var(--2meet-surface, #F8F9FA);
  z-index: 1;
}
.tmeetic-ml-accordion__search {
  width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--2meet-border, #EFEFEF);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--2meet-text, #1A1A2E);
  background: var(--2meet-bg, #fff);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.tmeetic-ml-accordion__search:focus {
  border-color: var(--2meet-primary, #A8B9A4);
}
.tmeetic-ml-accordion__search::placeholder {
  color: var(--2meet-muted, #6C757D);
}
.tmeetic-ml-accordion__no-results {
  padding: 16px var(--2meet-space-sm, 16px);
  text-align: center;
  font-size: .875rem;
  color: var(--2meet-muted, #6C757D);
}
.tmeetic-ml-accordion__section--hidden,
.tmeetic-accordion__item--hidden {
  display: none !important;
}

/* ── Gallery 全螢幕燈箱 ─────────────────────────────────────────────────── */
#tmeetic-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#tmeetic-lightbox.is-open {
  display: flex;
}
.tmeetic-lightbox__img-wrap {
  max-width: 92vw;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tmeetic-lightbox__img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  user-select: none;
}
.tmeetic-lightbox__caption {
  color: rgba(255, 255, 255, 0.8);
  font-size: .875rem;
  margin-top: 10px;
  text-align: center;
  max-width: 80vw;
  min-height: 1.2em;
}
.tmeetic-lightbox__counter {
  color: rgba(255, 255, 255, 0.45);
  font-size: .75rem;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.tmeetic-lightbox__close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 1;
  padding: 0;
}
.tmeetic-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.tmeetic-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 1;
  padding: 0;
}
.tmeetic-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.tmeetic-lightbox__nav[disabled] {
  opacity: 0.2;
  cursor: default;
}
.tmeetic-lightbox__nav--prev { left: 10px; }
.tmeetic-lightbox__nav--next { right: 10px; }
/* 燈箱觸發游標 */
.tmeetic-gallery__item img[data-lightbox-src] {
  cursor: zoom-in;
}
/* lazy 圖片佔位背景 */
.tmeetic-gallery__item img.tmeetic-lazy {
  background: var(--2meet-surface, #F8F9FA);
}

@media (prefers-reduced-motion: reduce) {
  .tmeetic-subscribe-form__message--success,
  .tmeetic-subscribe-form__message--success::before { animation: none; }
  .tmeetic-card__embed-placeholder::after { animation: none; opacity: 0.4; }
}
