/* =============================================================================
   2meet InfoCards — 公開前端樣式
   設計系統：CSS Variables（PRD 5.1）
   ============================================================================= */

/* --- Design Tokens (v2.5.0 iOS HIG + IG Style) ----------------------------- */
:root {
  /* ── 品牌色 ──────────────────────────────────────────────────────────────── */
  --2meet-primary:      #2E4A8B;
  --2meet-accent:       #E8541A;

  /* ── iOS 語義背景 ─────────────────────────────────────────────────────────── */
  --2meet-bg:           #FFFFFF;                  /* iOS systemBackground */
  --2meet-surface:      #F2F2F7;                  /* iOS systemGroupedBackground */

  /* ── iOS 語義文字 ─────────────────────────────────────────────────────────── */
  --2meet-text:         #000000;                  /* iOS label */
  --2meet-muted:        rgba(60, 60, 67, 0.60);   /* iOS secondaryLabel */

  /* ── iOS Separator（髮絲線）─────────────────────────────────────────────── */
  --2meet-border:       rgba(60, 60, 67, 0.18);   /* iOS separator */
  --ios-separator:      rgba(60, 60, 67, 0.18);
  --ios-separator-dark: rgba(84, 84, 88, 0.65);

  /* ── iOS Fill（互動底色）────────────────────────────────────────────────── */
  --ios-fill:           rgba(120, 120, 128, 0.12);
  --ios-fill-active:    rgba(120, 120, 128, 0.20);

  /* ── iOS 系統色 ──────────────────────────────────────────────────────────── */
  --ios-blue:           #007AFF;
  --ios-green:          #34C759;
  --ios-orange:         #FF9500;
  --ios-red:            #FF3B30;

  /* ── 卡片陰影 ────────────────────────────────────────────────────────────── */
  --2meet-shadow:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --2meet-shadow-hover: 0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);

  /* ── 間距 ────────────────────────────────────────────────────────────────── */
  --2meet-space-xs:     8px;
  --2meet-space-sm:     16px;
  --2meet-space-md:     24px;
  --2meet-space-lg:     48px;

  /* ── 字體 ────────────────────────────────────────────────────────────────── */
  --2meet-font-base:    -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'Segoe UI', sans-serif;
  --2meet-font-size:    16px;
  --2meet-line-height:  1.5;                      /* iOS 標準行高 */

  /* ── 圓角 ────────────────────────────────────────────────────────────────── */
  --2meet-radius-card:  16px;                     /* iOS 卡片圓角 */
  --2meet-radius-btn:   14px;                     /* iOS 按鈕圓角 */
  --2meet-radius-input: 12px;
  --2meet-radius-pill:  999px;
  --2meet-radius-icon:  8px;                      /* iOS squircle 圖示 */

  /* ── 動畫 ────────────────────────────────────────────────────────────────── */
  --2meet-transition:   0.15s ease;               /* iOS 快速回饋 */

  /* ── 陰影層級（Dashboard UI）────────────────────────────────────────────── */
  --2meet-shadow-sm:    0 1px 3px rgba(0,0,0,0.06);
  --2meet-shadow-md:    0 4px 12px rgba(0,0,0,0.08);
  --2meet-shadow-lg:    0 8px 24px rgba(0,0,0,0.12);

  /* ── Focus Ring（表單焦點環）──────────────────────────────────────────────── */
  --2meet-focus-ring:   0 0 0 3px rgba(46,74,139,0.15);

  /* ── IG 品牌元素 ─────────────────────────────────────────────────────────── */
  --2meet-gradient-ig:  linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);

  /* ── LINE 品牌色 ─────────────────────────────────────────────────────────── */
  --2meet-line-green:   #06C755;
  --2meet-line-text:    #FFFFFF;
}

/* --- 卡片容器 --------------------------------------------------------------- */
.tmeetic-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* iOS 卡片間距 */
  max-width: 480px;
  margin: var(--2meet-space-md) auto;
  padding: 0 var(--2meet-space-sm);
  font-family: var(--2meet-font-base);
  font-size: var(--2meet-font-size);
  line-height: var(--2meet-line-height);
  color: var(--2meet-text);
}

/* --- 基礎卡片（iOS Elevated Card Style）------------------------------------- */
.tmeetic-card {
  background: var(--2meet-bg);
  border-radius: var(--2meet-radius-card);        /* 16px 圓角 */
  box-shadow: var(--2meet-shadow);                /* 細緻陰影 */
  overflow: hidden;
  border: none;
  border-bottom: none;
  padding-bottom: 0;
  transition:
    box-shadow var(--2meet-transition),
    opacity var(--2meet-transition),
    transform 0.1s ease;
}

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

.tmeetic-card:hover {
  box-shadow: var(--2meet-shadow-hover);
  opacity: 1;
}

.tmeetic-card:active {
  opacity: 0.70;                                  /* iOS 標準按壓回饋 */
  transform: scale(0.98);
}

.tmeetic-card__image-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 0;                               /* 父卡片 overflow:hidden 自動裁切 */
}

.tmeetic-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.tmeetic-card__body {
  padding: var(--2meet-space-sm);
}

/* ── 圖片靠左 ────────────────────────────────────────────── */
.tmeetic-card--img-left,
.tmeetic-card--img-right {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.tmeetic-card--img-right {
  flex-direction: row-reverse;
}

.tmeetic-card--img-left .tmeetic-card__image-wrap,
.tmeetic-card--img-right .tmeetic-card__image-wrap {
  width: 32%;
  flex-shrink: 0;
  border-radius: 0;
}

.tmeetic-card--img-left .tmeetic-card__image-wrap {
  border-radius: var(--2meet-radius-card);
}

.tmeetic-card--img-right .tmeetic-card__image-wrap {
  border-radius: var(--2meet-radius-card);
}

.tmeetic-card--img-left .tmeetic-card__image,
.tmeetic-card--img-right .tmeetic-card__image {
  height: 100%;
  min-height: 120px;
}

.tmeetic-card--img-left .tmeetic-card__body,
.tmeetic-card--img-right .tmeetic-card__body {
  flex: 1;
  min-width: 0;
}

.tmeetic-card__title {
  font-size: 1rem;                                /* iOS Headline */
  font-weight: 600;                               /* iOS semibold */
  margin: 0 0 4px;
  color: var(--2meet-text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.tmeetic-card__description {
  font-size: 0.875rem;                            /* iOS Footnote */
  font-weight: 400;
  color: var(--2meet-muted);
  margin: 0 0 var(--2meet-space-sm);
  line-height: 1.4;
}

/* --- CTA 按鈕（iOS Primary Button Style）------------------------------------ */
.tmeetic-card__cta {
  display: block;
  width: 100%;
  padding: 14px var(--2meet-space-md);            /* iOS 標準觸控目標 50px */
  border: none;
  border-radius: var(--2meet-radius-pill);        /* 膠囊形（App Store / IG 風格）*/
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: opacity var(--2meet-transition), transform 0.1s ease;
  box-sizing: border-box;
  line-height: 1.5;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tmeetic-card__cta:hover,
.tmeetic-card__cta:focus {
  opacity: 0.85;
  text-decoration: none;
}

.tmeetic-card__cta:active {
  opacity: 0.70;                                  /* iOS 按壓回饋 */
  transform: scale(0.97);
}


/* --- 共用工具元件（跨前台／後台）----------------------------------------- */

/* Status badges */
.tmeetic-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--2meet-radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.tmeetic-badge--gray    { background: #e9ecef; color: #6c757d; }
.tmeetic-badge--yellow  { background: #fff3cd; color: #856404; }
.tmeetic-badge--blue    { background: #cfe2ff; color: #084298; }
.tmeetic-badge--green   { background: #d1e7dd; color: #0a3622; }
.tmeetic-badge--red     { background: #f8d7da; color: #842029; }
.tmeetic-badge--orange  { background: #ffe5d0; color: #8a3000; }

/* iOS 語義色（v4.2.0 新增） */
.tmeetic-badge--success { background: var(--ios-green);  color: #fff; }
.tmeetic-badge--warning { background: var(--ios-orange); color: #fff; }
.tmeetic-badge--error   { background: var(--ios-red);    color: #fff; }
.tmeetic-badge--info    { background: var(--ios-blue);   color: #fff; }
.tmeetic-badge--muted   { background: var(--2meet-surface); color: var(--2meet-muted); border: 1px solid var(--2meet-border); }

/* Pagination */
.tmeetic-orders__pagination {
  display: flex;
  align-items: center;
  gap: var(--2meet-space-sm);
  justify-content: center;
  margin-top: var(--2meet-space-md);
}

.tmeetic-orders__page-info {
  font-size: 14px;
  color: var(--2meet-muted);
}

/* --- Dashboard 按鈕系統（v4.2.0，4 層）--------------------------------------- */

/* 基礎類別：所有 .tmeetic-btn 共用 */
.tmeetic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--2meet-radius-btn);
  font-family: var(--2meet-font-base);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition:
    opacity var(--2meet-transition),
    background var(--2meet-transition),
    border-color var(--2meet-transition);
  /* 無明確 modifier 時，預設為 secondary 外觀 */
  background: var(--2meet-surface);
  color: var(--2meet-text);
  border-color: var(--2meet-border);
}

.tmeetic-btn:hover {
  background: var(--ios-fill);
  text-decoration: none;
  color: var(--2meet-text);
}

.tmeetic-btn:active {
  opacity: 0.7;
  transform: scale(0.98);
}

/* Primary — 主要操作（藍底白字） */
.tmeetic-btn--primary {
  background: var(--2meet-primary);
  color: #fff;
  border-color: var(--2meet-primary);
}

.tmeetic-btn--primary:hover {
  opacity: 0.88;
  color: #fff;
  background: var(--2meet-primary);
}

/* Secondary — 次要操作（已是 base 預設，可顯式標記） */
.tmeetic-btn--secondary {
  background: var(--2meet-surface);
  color: var(--2meet-text);
  border-color: var(--2meet-border);
}

/* Tertiary — 文字按鈕（無底色） */
.tmeetic-btn--tertiary {
  background: transparent;
  color: var(--2meet-primary);
  border-color: transparent;
}

.tmeetic-btn--tertiary:hover {
  background: var(--ios-fill);
  color: var(--2meet-primary);
}

/* Danger — 危險操作（紅底白字） */
.tmeetic-btn--danger {
  background: var(--ios-red);
  color: #fff;
  border-color: var(--ios-red);
}

.tmeetic-btn--danger:hover {
  opacity: 0.88;
  color: #fff;
  background: var(--ios-red);
}

/* Disabled 狀態 */
.tmeetic-btn--disabled,
.tmeetic-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Small variant */
.tmeetic-btn--sm {
  font-size: 13px;
  padding: 5px 12px;
}

/* --- 響應式（iOS 小螢幕調整）--------------------------------------------------- */
@media (max-width: 480px) {
  .tmeetic-cards {
    padding: 0 12px;
    gap: 10px;
  }

  .tmeetic-card__body {
    padding: var(--2meet-space-sm);
  }

  .tmeetic-card__image {
    height: 160px;
  }

  /* 小螢幕卡片圓角微調 */
  .tmeetic-card,
  .tmeetic-card--social {
    border-radius: 14px;
  }
}

/* --- HivePress Vendor Profile：方案 Z 整合版面 ------------------------------ */

/*
 * 目標 body class（ExpertHive 注入）：
 *   hp-template--vendor-view-page  → 確認是 vendor 頁
 *   hp-template--page-sidebar-left → 原本的左側欄佈局（我們要覆蓋）
 */

/* 1. 整頁單欄化：hp-row 由 flex-row 改為 flex-column */
body.hp-template--vendor-view-page .hp-row {
  flex-direction: column !important;
  align-items: center !important;
}

body.hp-template--vendor-view-page .hp-page__sidebar,
body.hp-template--vendor-view-page .hp-page__content {
  width: 100% !important;
  max-width: 560px !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* 1b. Experts 列表頁：Avatar 強制 1:1 防止橢圓形（v5.0.0 F3）*/
.hp-vendor--view-block .hp-vendor__image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 2. Vendor 識別區（aside.hp-page__sidebar）：置中、去掉 widget 外框 */
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__summary {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--2meet-space-md) 0 0 !important;
  text-align: center;
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__image {
  display: flex;
  justify-content: center;
  margin-bottom: var(--2meet-space-sm);
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__image img {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 3px solid var(--2meet-bg);
  /* IG Stories 漸層光環（3 層 box-shadow 近似）*/
  box-shadow:
    0 0 0 1px var(--2meet-bg),
    0 0 0 4px #e1306c,
    0 0 0 5px #fcb045;
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__name {
  font-size: 1.25rem;                             /* iOS Large Title 縮版 */
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__description {
  font-size: 0.875rem;                            /* iOS Footnote */
  color: var(--2meet-muted);
  max-width: 360px;
  margin: 0 auto var(--2meet-space-sm);
  line-height: 1.45;
}

/* 3. Send Message 按鈕：置中 */
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__actions {
  justify-content: center !important;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* 4. 隱藏次要 meta（Member since 等，避免冗餘） */
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__attributes--secondary,
body.hp-template--vendor-view-page .hp-page__sidebar .hp-vendor__details--primary {
  display: none;
}

/* 4b. 停用 HivePress sticky-sidebar（單欄佈局下 position:fixed 會造成跑位）
 *     sticky-sidebar.js 對 .inner-wrapper-sticky 寫入 position:fixed inline style，
 *     用 !important 覆蓋使其恢復 static 文件流。 */
body.hp-template--vendor-view-page .inner-wrapper-sticky {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  transform: none !important;
}

/* 5. InfoCards 搬移後的外層容器 */
.tmeetic-vendor-profile-cards {
  max-width: 560px;
  margin: var(--2meet-space-md) auto 0;
  padding: 0 var(--2meet-space-sm);
}

/* JS 搬移前先隱藏（HP block 將卡片渲染在 .hp-page__content 內），防止閃現。
 * 規則只限定在 .hp-page__content 內部，一旦 JS 將元素搬移到
 * .tmeetic-vendor-profile-cards（aside 的 afterend sibling），
 * 此規則即不再匹配，卡片自動恢復可見，不需要 JS 額外操作。 */
body.hp-template--vendor-view-page .hp-page__content .tmeetic-cards {
  visibility: hidden;
  pointer-events: none;
}

/* 6. HP 供應商資料折疊區（<details> 由 JS 建立） */
.tmeetic-hp-profile-more {
  max-width: 560px;
  margin: var(--2meet-space-md) auto var(--2meet-space-lg);
  padding: 0 var(--2meet-space-sm);
}

.tmeetic-hp-profile-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px var(--2meet-space-sm);
  background: var(--ios-fill);                    /* iOS 填充背景 */
  border: 0.5px solid var(--ios-separator);
  border-radius: var(--2meet-radius-pill);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--2meet-muted);
  list-style: none;
  user-select: none;
  min-height: 44px;
  transition: background var(--2meet-transition);
}

.tmeetic-hp-profile-more > summary:hover {
  background: var(--ios-fill-active);
  color: var(--2meet-text);
}

/* 移除瀏覽器預設的 details marker */
.tmeetic-hp-profile-more > summary::-webkit-details-marker { display: none; }
.tmeetic-hp-profile-more > summary::marker { display: none; }

.tmeetic-hp-profile-more[open] > summary {
  border-radius: var(--2meet-radius-card) var(--2meet-radius-card) 0 0;
  border-bottom-color: var(--2meet-surface);
}

.tmeetic-hp-profile-more__content {
  border: 1px solid var(--2meet-border);
  border-top: none;
  border-radius: 0 0 var(--2meet-radius-card) var(--2meet-radius-card);
  padding: var(--2meet-space-md);
  background: var(--2meet-bg);
}

/* 讓折疊內容裡的 HP 元素恢復正常寬度 */
.tmeetic-hp-profile-more__content .hp-block,
.tmeetic-hp-profile-more__content .hp-listing {
  max-width: none;
}

/* --- 獨立落地頁 (Standalone Page) ------------------------------------------ */
.tmeetic-standalone-wrap {
  min-height: 100vh;
  background: var(--2meet-surface);
}

.tmeetic-standalone-page {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--2meet-space-md) var(--2meet-space-sm) var(--2meet-space-lg);
  font-family: var(--2meet-font-base);
  font-size: var(--2meet-font-size);
  line-height: var(--2meet-line-height);
  color: var(--2meet-text);
}

.tmeetic-standalone-page__header {
  text-align: center;
  padding: var(--2meet-space-md) 0 var(--2meet-space-sm);
}

.tmeetic-standalone-page__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--2meet-bg);
  /* IG Stories 漸層光環 */
  box-shadow:
    0 0 0 1px var(--2meet-bg),
    0 0 0 4px #e1306c,
    0 0 0 5px #fcb045;
  display: block;
  margin: 0 auto var(--2meet-space-sm);
}

.tmeetic-standalone-page__name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--2meet-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tmeetic-standalone-page__bio {
  font-size: 0.875rem;                            /* iOS Footnote */
  color: var(--2meet-muted);
  margin: 0 auto var(--2meet-space-md);
  max-width: 360px;
  line-height: 1.45;
}

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

/* Dark theme override（iOS Dark Mode 語義色彩）*/
.tmeetic-standalone-wrap[data-theme="dark"] {
  /* iOS Dark Mode 語義色 */
  --2meet-bg:           #1C1C1E;                  /* iOS systemBackground dark */
  --2meet-surface:      #000000;                  /* iOS systemGroupedBackground dark */
  --2meet-text:         #FFFFFF;                  /* iOS label dark */
  --2meet-muted:        rgba(235,235,245,0.60);   /* iOS secondaryLabel dark */
  --2meet-border:       rgba(84,84,88,0.36);      /* iOS separator dark */
  --ios-separator:      rgba(84,84,88,0.65);
  --ios-fill:           rgba(120,120,128,0.20);
  --ios-fill-active:    rgba(120,120,128,0.32);
  --2meet-shadow:       0 1px 3px rgba(0,0,0,0.40);
  --2meet-shadow-hover: 0 4px 16px rgba(0,0,0,0.50);
  background: #000000;
  color: #FFFFFF;
}

.tmeetic-standalone-wrap[data-theme="dark"] .tmeetic-standalone-page__name,
.tmeetic-standalone-wrap[data-theme="dark"] .tmeetic-card__title {
  color: #FFFFFF;
}

.tmeetic-standalone-wrap[data-theme="dark"] .tmeetic-card {
  background: var(--2meet-bg);
  box-shadow: var(--2meet-shadow);
}

/* =============================================================================
   Dark Mode — @media (prefers-color-scheme: dark)  v4.4.0
   iOS HIG Dark Mode 語義色對照：
     systemBackground      #000000
     systemGroupedBackground #1C1C1E
     label                 #FFFFFF
     secondaryLabel        rgba(235,235,245,0.60)
     separator             rgba(84,84,88,0.65)
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    /* ── 背景 ─────────────────────────────────────────────────────────────── */
    --2meet-bg:           #000000;                /* iOS systemBackground dark */
    --2meet-surface:      #1C1C1E;               /* iOS systemGroupedBackground dark */

    /* ── 文字 ─────────────────────────────────────────────────────────────── */
    --2meet-text:         #FFFFFF;               /* iOS label dark */
    --2meet-muted:        rgba(235,235,245,0.60);/* iOS secondaryLabel dark */

    /* ── 邊框 ─────────────────────────────────────────────────────────────── */
    --2meet-border:       rgba(84,84,88,0.65);   /* iOS separator dark */
    --ios-separator:      rgba(84,84,88,0.65);
    --ios-fill:           rgba(120,120,128,0.36);
    --ios-fill-active:    rgba(120,120,128,0.48);

    /* ── 品牌色（暗底提亮，符合 WCAG AA）─────────────────────────────────── */
    --2meet-primary:      #5B8BE0;               /* 亮藍，暗底對比 4.6:1 */
    --2meet-accent:       #FF7B47;               /* 亮橙，暗底對比 4.5:1 */

    /* ── 陰影（暗底改用 overlay border 感覺）──────────────────────────────── */
    --2meet-shadow:       0 0 0 1px rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.50);
    --2meet-shadow-hover: 0 0 0 1px rgba(255,255,255,0.12), 0 4px 16px rgba(0,0,0,0.70);
    --2meet-shadow-sm:    0 0 0 1px rgba(255,255,255,0.06);
    --2meet-shadow-md:    0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.40);
    --2meet-shadow-lg:    0 0 0 1px rgba(255,255,255,0.10), 0 8px 24px rgba(0,0,0,0.60);

    /* ── Focus Ring（暗底）────────────────────────────────────────────────── */
    --2meet-focus-ring:   0 0 0 3px rgba(91,139,224,0.35);
  }

  /* ── Story 頁面 ─────────────────────────────────────────────────────────── */
  .tmeetic-story-page {
    background: var(--2meet-bg);
    color: var(--2meet-text);
  }

  .tmeetic-story__title,
  .tmeetic-story__description {
    color: var(--2meet-text);
  }

  .tmeetic-story__cover {
    opacity: 0.90;
  }

  /* ── Countdown 卡片暗底 ─────────────────────────────────────────────────── */
  .tmeetic-card__countdown-unit {
    background: var(--2meet-surface);
    color: var(--2meet-text);
  }

  /* ── 訂閱表單 ───────────────────────────────────────────────────────────── */
  .tmeetic-subscribe-form input[type="email"],
  .tmeetic-subscribe-form input[type="text"] {
    background: var(--2meet-surface);
    color: var(--2meet-text);
    border-color: var(--2meet-border);
  }

  .tmeetic-subscribe-form input::placeholder {
    color: var(--2meet-muted);
  }

  /* ── Accordion（details/summary）───────────────────────────────────────── */
  .tmeetic-card--accordion summary {
    color: var(--2meet-text);
  }

  .tmeetic-card--accordion details[open] summary {
    border-bottom-color: var(--2meet-border);
  }

  /* ── Embed placeholder ──────────────────────────────────────────────────── */
  .tmeetic-card__embed-placeholder {
    background: var(--2meet-surface);
    color: var(--2meet-muted);
  }
}

/* ==========================================================================
   Hero Image（v5.0.0 — 所有瀏覽器顯示）
   ========================================================================== */

.tmeetic-hero {
  width: 100%;
  max-width: 100%;
  margin: 0 auto var(--2meet-space-md);
}

.tmeetic-hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.tmeetic-hero--fullwidth {
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

.tmeetic-hero--fullwidth img {
  aspect-ratio: auto;
  max-height: 50vh;
}

/* Hero Image 僅在獨立品牌主頁顯示，HP Vendor Profile 保留原生圓形 Avatar */

/* ==========================================================================
   IAB Fast Gateway Mode（v5.0.0）
   ========================================================================== */

/* IAB + Vendor Profile：單欄排版 */
body.tmeetic-iab.hp-template--vendor-view-page .hp-row {
  display: block !important;
}
body.tmeetic-iab.hp-template--vendor-view-page .hp-page__sidebar {
  width: 100% !important;
  float: none !important;
}

/* IAB：隱藏 HP 市集屬性 */
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__details--primary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__attributes--secondary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__attributes--ternary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__attributes--primary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__actions--primary,
body.tmeetic-iab.hp-template--vendor-view-page .hp-page__sidebar .widget,
body.tmeetic-iab.hp-template--vendor-view-page .hp-page__content {
  display: none !important;
}

/* IAB：保留 vendor_summary 中的 name + description，置中 */
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__summary {
  display: block !important;
}
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__name,
body.tmeetic-iab.hp-template--vendor-view-page .hp-vendor__description {
  display: block !important;
  text-align: center;
}

/* ==========================================================================
   Hero + Dark Mode 補充（v5.0.0）
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .tmeetic-hero img {
    opacity: 0.92;
  }
}

/* Instagram IAB -----------------------------------------------------------
   由 class-2meetic-instagram.php 載入 2meetic-instagram.css 覆蓋
   -------------------------------------------------------------------- */

/* ==========================================================================
   PWA Install Banner（v5.1.0）
   ========================================================================== */

.tmeetic-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: var(--2meet-bg, #fff);
  border-top: 1px solid var(--2meet-border, #efefef);
  padding: 12px var(--2meet-space-sm, 16px);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}

.tmeetic-install-banner.is-visible {
  transform: translateY(0);
}

.tmeetic-install-banner__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}

.tmeetic-install-banner__text {
  flex: 1;
  font-size: 14px;
  color: var(--2meet-text, #1a1a2e);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tmeetic-install-banner__share-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.tmeetic-install-banner__btn {
  border: none;
  border-radius: var(--2meet-radius-btn, 999px);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 18px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.tmeetic-install-banner__btn:active { opacity: 0.7; }

.tmeetic-install-banner__btn--primary {
  background: var(--2meet-primary, #2e4a8b);
  color: #fff;
}

.tmeetic-install-banner__btn--close {
  background: transparent;
  color: var(--2meet-muted, #6c757d);
  padding: 8px 10px;
}

@media (prefers-color-scheme: dark) {
  .tmeetic-install-banner {
    background: #1c1c1e;
    border-top-color: #3a3a3c;
  }
  .tmeetic-install-banner__text { color: #f5f5f7; }
}

/* ==========================================================================
   Web Push 訂閱按鈕（v5.1.0）
   ========================================================================== */

.tmeetic-push-sub {
  position: fixed;
  bottom: 80px; /* Banner 上方留空，避免重疊 */
  right: var(--2meet-space-sm, 16px);
  z-index: 9980;
}

.tmeetic-push-sub__btn {
  background: var(--2meet-bg, #fff);
  border: 1.5px solid var(--2meet-border, #efefef);
  border-radius: var(--2meet-radius-btn, 999px);
  color: var(--2meet-text, #1a1a2e);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  transition: box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
}
.tmeetic-push-sub__btn:active { transform: scale(0.96); }

.tmeetic-push-sub__btn.is-subscribed {
  background: var(--2meet-surface, #f8f9fa);
  color: var(--2meet-muted, #6c757d);
}

@media (prefers-color-scheme: dark) {
  .tmeetic-push-sub__btn {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f5f5f7;
  }
  .tmeetic-push-sub__btn.is-subscribed {
    background: #1c1c1e;
    color: #8e8e93;
  }
}

/* ── HivePress Social Links — LINE OA (v5.2.0) ──────────────────────────── */
.hp-social-links .hp-social-links__item--line-oa {
  background-color: #00C300;
}



/* Instagram Feed Grid (v5.3.0) */
.tmeetic-ig-feed {
  margin-top: var(--2meet-space-sm);
}
.tmeetic-ig-feed__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--2meet-text);
  text-decoration: none;
  padding: 0 0 var(--2meet-space-xs);
}
.tmeetic-ig-feed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.tmeetic-ig-feed__item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: block;
}
.tmeetic-ig-feed__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}
.tmeetic-ig-feed__item:hover img {
  opacity: 0.85;
}
@media (max-width: 480px) {
  .tmeetic-ig-feed__grid { gap: 2px; }
}
@media (prefers-color-scheme: dark) {
  .tmeetic-ig-feed__header { color: var(--2meet-text); }
}

/* ── HivePress Vendor Profile：暫時停用 Sticky 定位（v5.3.6 偵錯用）──────── */
.hp-vendor__attribute,
.hp-vendor__social-links,
.hp-vendor__action {
  position: static !important;
}