/**
 * Cassiopeia HTSprout - 活動 Event Booking 樣式
 *
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_htsprout
 * @copyright   Copyright (C) 2026 HTSprout. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

.eb-form-heading {
  font-size: var(--htsprout-fs-16);
}

.eb-taskbar .btn-secondary {
  color: var(--htsprout-text-50);
}

/* 活動詳情頁 Hero 區塊 */
.eb-event-hero {
  display: flex;
  gap: 1.5rem;
}

.eb-event-hero__info {
  flex: 1;
}

.eb-event-large-image {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* ============================================
   活動列表搜尋框
   ============================================ */
.eb-search-box {
  margin-bottom: 28px;
  padding: 0 20px;
}

.eb-search-box .input-group {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 20px;
  gap: 16px;
  background: var(--htsprout-text-50);
  border: 1px solid var(--htsprout-blue-200);
  border-radius: var(--htsprout-radius-md);
}

.eb-search-box .input-group > * {
  border-radius: 0;
}

.eb-search-box .btn.btn-primary {
  background: transparent;
  border: none;
  padding: 0;
  min-width: auto;
  min-height: auto;
  width: 24px;
  height: 24px;
  color: var(--htsprout-text-400);
  box-shadow: none;
  flex-shrink: 0;
}

.eb-search-box .btn.btn-primary:hover,
.eb-search-box .btn.btn-primary:focus,
.eb-search-box .btn.btn-primary:active {
  background: transparent;
  border: none;
  color: var(--htsprout-text-400);
  box-shadow: none;
}

.eb-search-box .form-control {
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--htsprout-fs-20);
  font-weight: var(--htsprout-fw-regular);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-800);
  height: auto;
}

.eb-search-box .form-control::placeholder {
  color: var(--htsprout-text-400);
}

.eb-search-box .form-control:focus {
  box-shadow: none;
  background: transparent;
}

/* ============================================
   活動列表頁面 — 內容區域最大寬度
   ============================================ */
body.layout-eventlist .container-component {
  /*max-width: 1144px;*/
  margin-inline: auto;
}

body.layout-eventlist #eb-category-eventlist {
  margin-bottom: 128px;
}

/* ============================================
   活動列表頁面 — 卡片網格（比照活動紀錄 .news-layout-grid）
   ============================================ */
body.layout-eventlist .eb-events-grid-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 0 0 28px;
  padding: 0 20px;
}

/* 覆蓋 Bootstrap col-md-4 寬度限制 */
body.layout-eventlist .eb-events-grid-items > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

@media (min-width: 768px) {
  .eb-search-box {
    padding: 0 40px;
    max-width: 480px;
  }

  body.layout-eventlist .eb-events-grid-items {
    padding: 0 40px;
  }
}

@media (min-width: 992px) {
  .eb-search-box {
    padding: 0 20px;
    max-width: 440px;
  }

  body.layout-eventlist .eb-events-grid-items {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 20px;
  }
}

/* ============================================
   活動列表頁面 — 卡片樣式（手機版）
   ============================================ */

/* --- 卡片外層 wrapper 撐滿 grid row 高度 --- */
body.layout-eventlist .eb-events-grid {
  display: flex;
}

/* --- 卡片容器 --- */
body.layout-eventlist .eb-event-item-grid-default-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  margin-bottom: 0;
  background: var(--htsprout-text-50);
  box-shadow: 0 4px 14px rgba(167, 117, 83, 0.2);
  border-radius: 0;
}

/* --- 圖片 --- */
body.layout-eventlist .eb-event-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* --- 各子元素間距（依 Figma 設計稿） --- */
body.layout-eventlist .eb-event-thumb-container {
  margin: 0 0 21px;
  border-radius: 0;
}

body.layout-eventlist .eb-event-title-container {
  margin: 0 0 6px;
}

body.layout-eventlist .eb-event-short-description {
  margin: 0 0 6px;
}

body.layout-eventlist .eb-event-dates {
  margin: 0 0 6px;
}

body.layout-eventlist .eb-event-capacity {
  margin: 0 0 6px;
}

body.layout-eventlist .eb-event-price-text {
  margin: 0 0 6px;
}

/* --- 標題 --- */
body.layout-eventlist .eb-event-title {
  font-size: var(--htsprout-fs-24);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-green-500);
  text-decoration: none;
}

body.layout-eventlist .eb-event-title:hover {
  color: var(--htsprout-green-700);
  text-decoration: underline;
}

/* --- 簡述 --- */
body.layout-eventlist .eb-event-short-description {
  font-size: var(--htsprout-fs-16);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-700);
}

/* --- 日期區塊（含上方分隔線） --- */
body.layout-eventlist .eb-event-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #D7CFC2;
  padding-top: 6px;
}

/* --- 日期、名額、價格共用文字 --- */
body.layout-eventlist .eb-event-date-row,
body.layout-eventlist .eb-event-capacity,
body.layout-eventlist .eb-event-price-text {
  font-size: var(--htsprout-fs-14);
  line-height: var(--htsprout-lh-150);
  color: #4A4245;
}

/* --- 標籤 vs 數值字重 --- */
body.layout-eventlist .eb-event-label {
  font-weight: var(--htsprout-fw-regular);
}

body.layout-eventlist .eb-event-value {
  font-weight: var(--htsprout-fw-medium);
}

/* --- 價格數值特殊顏色 --- */
body.layout-eventlist .eb-event-price-text .eb-event-value {
  color: #537362;
}

/* --- 狀態訊息（登入提示等） --- */
body.layout-eventlist .eb-notice-message {
  margin: 12px 0;
}

/* --- 按鈕區（含上方分隔線） --- */
body.layout-eventlist .eb-taskbar {
  border-top: 1px solid var(--htsprout-blue-100);
  padding: 21px 0 0;
  margin: auto 0 0;
}

body.layout-eventlist .eb-taskbar ul {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.layout-eventlist .eb-taskbar ul li {
  flex: 1;
}

body.layout-eventlist .eb-taskbar .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--htsprout-radius-btn);
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-50);
  border: none;
}

body.layout-eventlist .btn-outline-secondary {
  border: 0;
}

body.layout-eventlist .eb-individual-registration-button {
  background: var(--htsprout-blue-800);
}

body.layout-eventlist .eb-individual-registration-button:hover {
  background: var(--htsprout-blue-900);
  box-shadow: 0 4px 14px rgba(167, 117, 83, 0.2);
}

body.layout-eventlist .eb-individual-registration-button:active {
  background: var(--htsprout-blue-900);
  box-shadow: 0 4px 14px rgba(167, 117, 83, 0.2);
}

body.layout-eventlist .eb-group-registration-button {
  background: var(--htsprout-green-800);
}

body.layout-eventlist .eb-group-registration-button:hover {
  background: var(--htsprout-green-800);
  box-shadow: 0 4px 14px rgba(27, 105, 103, 0.3);
}

body.layout-eventlist .eb-group-registration-button:active {
  background: var(--htsprout-blue-900);
  box-shadow: 0 4px 14px rgba(27, 105, 103, 0.3);
}

/* ============================================
   活動列表頁面 — 分頁
   ============================================ */

/* --- 分頁容器置中 --- */
body.layout-eventlist .pagination {
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

/* --- 所有頁碼／導航按鈕共用 --- */
body.layout-eventlist .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--htsprout-fs-16);
  font-weight: 400;
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-800);
  border-radius: 30px;
  transition: background 0.2s, color 0.2s;
}

/* --- Hover 狀態 --- */
body.layout-eventlist .page-link:hover {
  background: var(--htsprout-text-100);
  color: var(--htsprout-text-800);
}

/* --- Active 頁碼 --- */
body.layout-eventlist .page-item.active .page-link {
  background: var(--htsprout-blue-800);
  color: var(--htsprout-text-50);
  border-radius: 8px;
  border: none;
}

/* --- Disabled 狀態 --- */
body.layout-eventlist .page-item.disabled .page-link {
  background: transparent;
  color: var(--htsprout-text-400);
  opacity: 0.5;
  border: none;
}

/* --- 導航箭頭按鈕 --- */
body.layout-eventlist .page-item:first-child .page-link,
body.layout-eventlist .page-item:nth-child(2) .page-link,
body.layout-eventlist .page-item:nth-last-child(2) .page-link,
body.layout-eventlist .page-item:last-child .page-link {
  border-radius: 3px;
}

/* ============================================
   已結束活動 — 卡片淡化與徽章
   ============================================ */

/* --- 縮圖輕微淡化（保留彩色，僅降透明度作為已結束提示）--- */
body.layout-eventlist .eb-event-item-grid-default-layout.eb-event-ended .eb-event-thumb {
  opacity: 0.5;
  transition: opacity var(--htsprout-transition-base);
}

/* --- 標題連結顏色降調 --- */
body.layout-eventlist .eb-event-item-grid-default-layout.eb-event-ended .eb-event-title {
  color: var(--htsprout-text-600);
}

body.layout-eventlist .eb-event-item-grid-default-layout.eb-event-ended .eb-event-title:hover {
  color: var(--htsprout-text-700);
}

/* --- 已結束徽章：基礎視覺樣式 --- */
body.layout-eventlist .eb-event-ended-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--htsprout-badge-ended-bg);
  color: var(--htsprout-badge-ended-color);
  font-size: var(--htsprout-fs-12);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  border-radius: var(--htsprout-radius-sm);
  white-space: nowrap;
  vertical-align: middle;
}

/* --- 徽章疊在縮圖右上角（有圖時） --- */
body.layout-eventlist .eb-event-thumb-container .eb-event-ended-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* --- 無縮圖 fallback：徽章跟在標題旁（inline 保持） --- */
body.layout-eventlist .eb-event-ended-badge--inline {
  margin-left: 6px;
  vertical-align: middle;
}
/* --- EventBooking 報到頁面樣式 --- */
div#eb-checkin-page {
    padding: 0 20px 64px;
}

div#eb-checkin-page #reader {
    border: 1px solid var(--htsprout-blue-100)!important;
    border-radius: var(--htsprout-radius-btn)!important;
}

div#eb-checkin-page #reader button {
    display: inline-flex;
    align-items: center;
    margin-bottom: 32px;
    padding: 7px 12px;
    min-height: auto;
    font-weight: var(--htsprout-fw-regular);
    color: var(--htsprout-text-1000);
    background-color: var(--htsprout-text-50);
    border: 1px solid rgba(43, 114, 152, 0.3);
    border-radius: 0;
    text-decoration: none;
    line-height: 26px;
    transition: border-color var(--htsprout-transition-base), opacity var(--htsprout-transition-base);
}

/* ── Tingle Modal 覆寫（覆蓋 com_eventbooking 的 tingle.min.css） ── */
.com_eventbooking .tingle-modal {
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1021;
}

.com_eventbooking .tingle-modal--visible .tingle-modal-box {
  width: calc(100% - 20px * 2);
}

/* ── Event Booking checkin QR 掃描器（html5-qrcode）介面中文化 ──
   函式庫文字寫死於 JS、無法經 Joomla 語言檔翻譯，
   故以「font-size:0 隱藏原文 + ::after 偽元素覆蓋中文」處理。
   所有選擇器僅作用於 checkin 頁的 #reader 容器。 */

/* 要求相機權限（排除有 class 的 start/stop 按鈕，只命中無 class 的權限鈕） */
#reader__dashboard_section_csr button:not(.eb-btn-start-scan):not(.eb-btn-stop-scan) {
  font-size: 0;
}
#reader__dashboard_section_csr button:not(.eb-btn-start-scan):not(.eb-btn-stop-scan)::after {
  content: "要求相機權限";
  font-size: var(--htsprout-fs-16);
}

/* 開始掃描 */
#reader .eb-btn-start-scan {
  font-size: 0;
}
#reader .eb-btn-start-scan::after {
  content: "開始掃描";
  font-size: var(--htsprout-fs-16);
}

/* 停止掃描 */
#reader .eb-btn-stop-scan {
  font-size: 0;
}
#reader .eb-btn-stop-scan::after {
  content: "停止掃描";
  font-size: var(--htsprout-fs-16);
}

/* 選擇圖片（檔案掃描） */
#reader__dashboard_section_fsr span {
  font-size: 0;
}
#reader__dashboard_section_fsr span::after {
  content: "選擇圖片";
  font-size: var(--htsprout-fs-16);
}