body {
  background-color: #fff;
  font-family: "Microsoft JhengHei", sans-serif;
}

/* 自定義滾動條樣式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #0070a8;
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

/* 預設為手機版樣式 */
.navbar-custom {
  background-color: #0070a8;
  height: 80px;
}

.navbar-line-btn {
  background-color: #00c300;
  color: #fff;
  border-radius: 25px;
  font-weight: bold;
  border: none;
  padding: 0.5rem 1rem;
  flex-shrink: 0;
}

.navbar-line-btn:hover {
  color: #fff;
  background-color: #00a85e;
}


.navbar-line-btn:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
}

.nav-link {
  color: #fff !important;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-width: 80px;
  text-align: center;
}

.nav-link:hover,
li.nav-item.active a.nav-link {
  font-weight: bold;
  color: #a4ffe0 !important;
}

/* 導覽列的左側佔位符，在手機版隱藏 */
.navbar-placeholder {
  display: none;
}

/* 調整手機版導覽列的排版 */
.navbar-custom .d-flex.justify-content-between.align-items-center {
  /* 在手機版中，按鈕會與選單並排 */
  flex-wrap: nowrap;
}

/* 橫幅區塊 */
.banner-section {
  background-color: #a4ffe0;
  text-align: center;
  padding-top: 80px;
  /* 修正為導覽列高度 */
}

.banner-section img {
  max-width: 100%;
  height: auto;
}

/* 主要內容區塊 */
.container-custom {
  max-width: 820px;
}


.ticket-option {
  border: 1px solid #ccc;
  border-radius: 25px;
  background-color: #fff;
  padding: 0;
  margin-bottom: 1rem;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

/* Active 狀態 */
.ticket-option.active {
  background-color: #0070a8;
  border-color: #0070a8;
}

/* Disabled 狀態 */
.ticket-option.disabled {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  cursor: not-allowed;
  color: #aaa;
  /* 調整為一個統一的顏色控制 */
}

/* 修正 disabled 按鈕內的文字顏色，強制為淺灰色 */
.ticket-option.disabled .ticket-name,
.ticket-option.disabled .ticket-price {
  color: #aaa;
}

/* 票種名稱樣式 */
.ticket-name {
  font-weight: bold;
  font-size: 1.3rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-right: 1px solid #ccc;
  white-space: pre-line;
}

/* 價格容器 */
.ticket-prices-container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 0.75rem 1rem;
  flex-shrink: 0;
  min-width: 120px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

/* 價格樣式 */
.ticket-price {
  font-weight: bold;
  font-size: 0.95rem;
  color: #0070a8;
}

.ticket-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.85rem;
}

/* Active 狀態下的文字顏色 */
.ticket-option.active .ticket-name {
  color: #fff;
  border-color: #0070a8;
}


/* 購票區塊(待刪) */
.ticket-box {
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
}

.ticket-title {
  background-color: #0070a8;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem;
  font-size: 1rem;
}

.ticket-price {
  font-weight: bold;
  font-size: 1.1rem;
}

.ticket-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9rem;
}

.checkout-box {
  border-top: 2px dashed #eee;
  padding-top: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
}

.checkout-btn {
  background-color: #a4ffe0;
  color: #000;
  font-weight: bold;
  border-radius: 5px;
  padding: 0.5rem 1rem;
}


/* 購票須知區塊的樣式 */
.guideline-alert {
  background-color: #f1f7fe;
  color: #0070a8;
  border: 1px solid #0070a8;
  border-radius: 0.5rem;
}


/* ================================ */
/* == 我的票券表格樣式===== */
.my-tickets-card {
  border-radius: 1rem;
  border: 1px solid #eee;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  background-color: #f8f9fa;
}

.my-tickets-table {
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: none;
}

.my-tickets-table thead {
  background-color: #0070a8;
  color: #fff;
}

.my-tickets-table th {
  font-weight: bold;
  padding: 1rem 0.75rem;
  text-align: center;
  border: none;
}

.my-tickets-table td {
  background-color: #fff;
  padding: 1.5rem 0.75rem;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
  text-align: center;
}

.my-tickets-table tr:last-child td {
  border-bottom: none;
}

/* 領取按鈕樣式 */
.tickets-claim-btn {
  background-color: #e53e3e;
  color: white;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-weight: bold;
  border: none;
  transition: background-color 0.3s;
}

.tickets-claim-btn:hover {
  background-color: #c53030;
}

/* 付款資訊樣式 */
.tickets-atm-btn {
  background-color: #0070a8;
  color: white;
  border-radius: 9999px;
  padding: 0.5rem 1.5rem;
  font-weight: bold;
  border: none;
  transition: background-color 0.3s;
}

.tickets-atm-btn:hover {
  background-color: #004ea8;
}

.tickets-status-complete {
  color: #0070a8;
  font-weight: bold;
}

/* 新增樣式：購票成功頁面專用 */
.ticket-success-title {
  font-weight: bold;
  font-size: 1.5rem;
  color: #0070a8;
  text-align: center;
  margin-bottom: 1.5rem;
}

.ticket-guideline-box {
  background-color: #fff;
  border: 1px solid #eee;
  border-left: 5px solid #00a85e;
  /* 綠色左邊線 */
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.ticket-guideline-title {
  color: #e53e3e;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* 新增的樣式來置中按鈕 */
.line-bind-box {
  background-color: #f1f7fe;
  border: 1px solid #0070a8;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  /* 使用 flexbox 佈局 */
  flex-direction: column;
  /* 將內容垂直排列 */
  align-items: center;
  /* 讓按鈕在水平方向置中 */
}

/* 更新按鈕樣式 */
.line-bind-btn {
  background-color: #00c300;
  color: white;
  /* 為了確保文字可讀，將文字顏色設為白色 */
  border: none;
  /* 移除預設邊框 */
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 25px;
  /* 已更新為 25px */
  cursor: pointer;
}

/* 新增樣式以使文字靠左對齊 */
.line-bind-box-text {
  width: 100%;
  /* 讓文字區塊佔滿父容器寬度 */
  text-align: left;
  /* 將文字靠左對齊 */
  margin-bottom: 10px;
  /* 在文字和按鈕之間增加間距 */
}

/* 浮動協助按鈕 */
.help-btn {
  position: fixed;
  right: 0;
  top: 40%;
  background-color: #00c16e;
  color: #fff;
  padding: 0.6rem 0.8rem;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  text-align: center;
  font-weight: bold;
  z-index: 1000;
}

.help-btn:hover {
  text-decoration: none;
  background-color: #00a85e;
  color: #fff;
}

/* Modal 標頭樣式 */
.modal-header-custom {
  background-color: #00a85e;
  color: white;
  position: relative;
  display: flex;
}

/* 新增標題文字的樣式 */
.modal-header-title {
  flex-grow: 1.5;
  /* 讓文字佔滿剩餘空間 */
  font-size: 1rem;
  /* 調整字體大小 */
  margin-bottom: 0;
  /* 移除段落預設的下邊距 */
  font-weight: bold;
}

.modal-header-custom .close {
  color: #fff;
  font-size: 2 rem;
  /* 放大關閉按鈕 */
}

/* Modal 內容樣式 */
.modal-content-custom {
  border-radius: 0.5rem;
}

.btn-line-agree:hover {
  background-color: #00a85e;
  border-color: #00a85e;
  color: #fff;
}

/* 按鈕樣式：停用時的灰色按鈕 */
.btn-line-disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border-color: #e0e0e0;
  cursor: not-allowed;
}

/* 自訂選單樣式 */
.sm-select {
  width: 6rem;
}

/* 桌面版樣式 */
@media (min-width: 768px) {

  /* 導覽列選單間距調整 */
  .navbar-nav .nav-item {
    margin: 0 2rem;
    /* 增加選單項目左右間距 */
  }

  .nav-link {
    min-width: auto;
    /* 在桌面版取消固定寬度，讓間距調整生效 */
  }

  /* 三欄式結構 - 左側佔位符與右側按鈕區塊的寬度相同 */
  .navbar-placeholder {
    display: flex;
    width: 180px;
  }

  .navbar-right {
    align-items: center;
    justify-content: flex-end;
    width: 180px;
    /* 桌面版設定固定寬度 */
  }
}

/* ================================ */
/* == 影片 == */
/* ================================ */
.video-container {
  /* 設定容器的相對位置，以便子元素可以絕對定位 */
  position: relative;
  /* 設定長寬比。例如 16:9 的影片，高度是寬度的 9/16，即 56.25% */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  /* 讓 iframe 填滿父容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ================================ */
/* == 結帳頁面專用 CSS 樣式區域 == */
/* ================================ */
.checkout-page-padding {
  padding-top: 2rem;
}

/* 結帳表單區塊容器 */
.form-box {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

/* 購票品項區塊 */
.checkout-ticket-box {
  border: 1px solid #ddd;
  margin-bottom: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
}

.checkout-ticket-title {
  background-color: #0070a8;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem;
  font-size: 1rem;
}

.checkout-ticket-price {
  font-weight: bold;
  font-size: 1.1rem;
  color: #0070a8;
}

.checkout-ticket-original {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9rem;
}

.btn-return {
  color: #6c757d;
  background-color: #f8f9fa;
  border: 1px solid #6c757d;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: fit-content;
  display: block;
  margin: 0 auto;
}

.btn-return:hover {
  background-color: #e2e6ea;
  border-color: #545b62;
  color: #545b62;
}

/* 表單標題樣式 */
.form-section-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #0070a8;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* 結帳小計區塊 */
.summary-box {
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 1.5rem;
}

/* 總金額樣式 */
.total-price {
  font-size: 2rem;
  font-weight: bold;
  color: #0070a8;
}

/* 結帳按鈕 */
.checkout-pay-btn {
  background-color: #a4ffe0;
  color: #000;
  font-weight: bold;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
}

.checkout-pay-btn:hover {
  background-color: #84ddc0;
}

/* 調整 form-control 的外觀 */
.form-control {
  border-radius: 8px;
}

.form-group label {
  font-weight: bold;
}

/* 訂單品項表格樣式 */
.items-list {
  display: flex;
  flex-direction: column;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.item-row:not(:last-child) {
  border-bottom: 1px dashed #e0e0e0;
}

.item-info {
  font-weight: bold;
}

.item-price {
  font-weight: bold;
  color: #0070a8;
}

/* 調整小計和價格的樣式 */
.summary-label {
  font-size: 2rem;
  font-weight: bold;
  color: #0070a8;
}

/* Modal 增加自定義樣式 */
.modal-body {
  max-height: 70vh;
  overflow-y: auto;
}


/* ================================ */
/* == 購票活動介紹 == */
/* ================================ */

/* 頁面標題樣式 */
.page-header {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1.5rem;
}

/* 區塊標題樣式 */
.section-header {
  font-size: 1.25rem;
  font-weight: bold;
  color: #333;
  margin-top: 2rem;
  margin-bottom: 0.5rem; /* 移除 position: relative，並調整底部外邊距 */
}

/* 區塊標題下的橫線 */
.section-header-underline {
  width: 100%;
  height: 2px;
  background-color: #0070a8;
  margin-bottom: 1rem; /* 調整底部外邊距 */
}

/* 內容段落樣式 */
.content-paragraph {
  line-height: 2;
  color: #555;
  margin-bottom: 1rem;
}

/* 資訊列表樣式 */
.info-list li {
  margin-bottom: 0.75rem;
  line-height: 1.8;
  color: #555;
}

.info-list li .font-weight-bold {
  color: #0070a8;
}

/* 列表中的文字高亮 */
.highlight-text {
  color: #0070a8;
  font-weight: bold;
}

/* 統一 LINE@ 文字樣式 */
.line-friend {
  font-weight: bold;
  color: #04a800;
}

/* 新增購票按鈕樣式 */
.cta-buy-btn {
    background-color: #a4ffe0;
    color: #000;
    font-weight: bold;
    border-radius: 25px;
    padding: 0.75rem 1.5rem;
    text-decoration: none; /* 移除連結下劃線 */
    transition: background-color 0.3s ease;
}

.cta-buy-btn:hover {
    background-color: #84ddc0;
    color: #000;
}

/* 新增樣式：線上獨賣區塊外框 */
.vip-ticket-box {
    border: 2px solid #0070a8;
    border-radius: 1rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.vip-ticket-box ul li {
    line-height: 1.2;
}

/* 新增樣式：超級VIP標題區塊 */
.vip-header-title {
    background-color: #0070a8;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}