/* === 全局樣式 === */
:root {
  --green-main: #2e7d32;
  --green-light: #e8f5e9;
  --green-hover: #1b5e20;
  --gray-text: #333333;
  --gray-border: #e0e0e0;
  --danger: #d32f2f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: #f5f5f7;
  color: var(--gray-text);
  line-height: 1.5;
}

/* 共用容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ========== Header / Navbar ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e8e8e8;
}

.nav-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left / center / right */
  align-items: center;
  gap: 12px;
}

.nav-left { justify-self: start; }
.nav-center { justify-self: center; }
.nav-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brand,
.logo a {
  font-weight: 800;
  color: var(--green-main);
  text-decoration: none;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.nav-link {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.nav-link:hover {
  text-decoration: underline;
}

.nav-text {
  font-size: 14px;
  color: var(--green-main);
  font-weight: 700;
  white-space: nowrap;
}

.nav-sep {
  color: #bbbbbb;
}

/* 手機 nav 排版 */
@media (max-width: 640px) {
  .nav-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "center center";
  }
  .nav-left  { grid-area: left; }
  .nav-right { grid-area: right; justify-content: flex-end; }
  .nav-center{ grid-area: center; justify-self: start; }
}

/* ========== Flash 訊息 ========== */
.flash-wrap {
  max-width: 1080px;
  margin: 16px auto;
  padding: 0 16px;
}

.flash {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 15px;
}

.flash.warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.flash.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.flash.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.flash.info {
  background: #e7f3fe;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

/* ========== 主內容區 / Banner / Hero ========== */
.main-content,
.page-main,
.page {
  padding: 20px 0 32px;
}

.banner {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
}

.banner img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}

@media (max-width: 1024px) {
  .banner img {
    height: 140px;
    border-radius: 10px;
  }
}

@media (max-width: 768px) {
  .banner img {
    height: 110px;
    border-radius: 8px;
  }
}

/* Hero 區塊 */
.hero {
  margin-top: 8px;
}

.hero h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.hero p {
  margin: 0;
  color: #666666;
  font-size: 14px;
}

/* ========== 商品列表 Grid + 卡片 ========== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

/* 舊 .card + .p-card 都視為產品卡片 */
.card,
.p-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eee;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover,
.p-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* 商品圖片區 */
.product-card-img,
.p-img,
.product-image {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-img,
.p-img img,
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 沒圖片時 */
.p-img-placeholder,
.no-image {
  width: 100%;
  height: 100%;
  background: #888;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
}

/* 卡片文字與底部 */
.card .name,
.p-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin-top: 4px;
}

.card .muted,
.p-cat {
  font-size: 13px;
  color: #777777;
  margin-bottom: 8px;
  min-height: 36px;
  overflow: hidden;
}

.card .price,
.p-price {
  font-weight: 800;
  font-size: 18px;
  color: #d35400;
}

.p-bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* ========== 按鈕 / Cart 按鈕 ========== */
.btn,
.btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--green-main);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.15s, transform 0.05s;
}

.btn:hover,
.btn-green:hover {
  background: var(--green-hover);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.btn.gray {
  background: #f0f0f0;
  color: #555555;
}

.btn.gray:hover {
  background: #e5e5e5;
}

/* 外框版 */
.btn-green.outline {
  background: transparent;
  color: var(--green-main);
  border: 1px solid var(--green-main);
}

.btn-green.outline:hover {
  background: var(--green-main);
  color: #ffffff;
}

/* 滿寬 */
.full {
  width: 100%;
}

.cart-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 0;
  margin-top: 8px;
  text-decoration: none;
  color: #ffffff;
}

/* ========== 登入導向 Modal ========== */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.auth-modal-overlay.active {
  display: flex;
}

.auth-modal {
  background: #ffffff;
  padding: 24px 20px;
  border-radius: 10px;
  width: 280px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.auth-modal-actions .btn-green {
  margin-top: 8px;
}

/* ========== Admin Dashboard Cards / Layout ========== */
.admin-page {
  max-width: 1100px;
  margin: 20px auto;
}

.admin-back-row {
  margin-bottom: 16px;
}

.admin-card-gap {
  margin-bottom: 20px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

/* 報表橫跨整列 */
.admin-card-full {
  grid-column: 1 / -1;
}

.admin-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e5e5;
}

.admin-card-lg {
  padding: 20px 24px;
}

.admin-card-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.admin-card-col {
  flex: 1;
  min-width: 280px;
}

.admin-card h2 {
  margin: 0 0 12px;
  font-size: 18px;
  color: #333333;
}

.admin-card p {
  margin: 0 0 20px;
  color: #555555;
  line-height: 1.6;
  font-size: 14px;
}

.admin-text-row {
  margin: 4px 0;
}

.admin-order-no {
  font-family: "Consolas", "Courier New", monospace;
}

.admin-status-form {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-select,
.admin-input-short,
.admin-input-long {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cccccc;
}

.admin-input-short { max-width: 260px; width: 100%; }
.admin-input-long  { max-width: 320px; width: 100%; }

.admin-form-actions-right {
  margin-top: 8px;
  text-align: right;
}

/* Admin 表格 */
.admin-order-table-wrap {
  overflow-x: auto;
}

.admin-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-order-table th,
.admin-order-table td {
  padding: 8px 10px;
}

.admin-order-table thead tr {
  background: #f5f7fa;
  border-bottom: 1px solid #e5e5e5;
}

.admin-order-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
}

.admin-order-table th {
  text-align: left;
}

.admin-order-table td.text-right {
  text-align: right;
}

.admin-order-table td.text-center {
  text-align: center;
}

.admin-total-row {
  margin-top: 12px;
  text-align: right;
  font-size: 14px;
}

.admin-total-strong {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #d9534f;
}

/* Admin 卡片用按鈕 */
.admin-card .btn-green {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
}

.admin-card .btn-green[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Admin RWD */
@media (max-width: 768px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-card-full {
    grid-column: auto;
  }
}

.banner-snap {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 8px;
  margin: 8px 0 18px;
}

.banner-snap img {
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
}

/* ===== Banner Slider（3 張圖自動輪播） ===== */

.banner-slider {
  width: 100%;
  overflow: hidden;
  margin: 8px 0 18px;
  border-radius: 12px;
}

.banner-track {
  display: flex;
  width: 300%;              /* 3 張圖 → 3 倍寬 */
  animation: banner-slide-3 18s infinite ease-in-out;
}

.banner-track img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* RWD 高度調整 */
@media (max-width: 1024px) {
  .banner-track img {
    height: 150px;
  }
}

@media (max-width: 768px) {
  .banner-track img {
    height: 120px;
  }
}

/* 3 張圖輪播 keyframes：每張顯示一段時間再滑到下一張 */
@keyframes banner-slide-3 {
  0%   { transform: translateX(0%); }       /* 第 1 張 */
  25%  { transform: translateX(0%); }

  35%  { transform: translateX(-33.333%); } /* 第 2 張 */
  60%  { transform: translateX(-33.333%); }

  70%  { transform: translateX(-66.666%); } /* 第 3 張 */
  95%  { transform: translateX(-66.666%); }

  100% { transform: translateX(0%); }       /* 回到第 1 張，重頭來 */
}

.marquee-bar {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  background: #2b6cb0;       /* 深藍色背景，可自行調整 */
  color: #fff;
  padding: 6px 0;
  font-size: 14px;
}

.marquee-inner {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 18s linear infinite;
}

.marquee-bar:hover .marquee-inner {
  animation-play-state: paused;  /* 滑鼠移上去暫停 */
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.home-banner {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.home-banner {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
}

.product-image { width: 100%; }

.product-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  background: #f2f2f2;
  display: block;
}

/* === 商品卡片細部強化（新增） === */

.p-title {
  margin-bottom: 2px;
}

.p-cat {
  margin-top: 0;
  margin-bottom: 4px;
}

/* 標籤列排版 */
.p-tags {
  margin: 4px 0 6px;
}

.p-tags .badge {
  font-size: 11px;
  border-radius: 999px;
  padding: 3px 8px;
}

/* 商品圖片 hover 效果 */
.product-image {
  margin-top: 4px;
  margin-bottom: 8px;
  border-radius: 12px;
  overflow: hidden;
}

.product-img {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.p-card:hover .product-img {
  transform: scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* 底部區塊間距 */
.p-bottom {
  margin-top: 10px;
}

/* === 商品詳情 Modal 美化（新增） === */

#productModal .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}

#productModal .modal-header {
  border-bottom: none;
}

#productModal .modal-title {
  font-weight: 700;
}

#productModal .modal-body p {
  font-size: 14px;
}

#productModal .ratio {
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}
/* === 商品詳情 Modal 視覺優化 === */

.product-modal {
  border-radius: 18px;
  border: none;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

.product-modal .modal-header {
  border-bottom: none;
}

.product-modal-tagline {
  font-size: 12px;
  color: #6b7280;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.product-modal .modal-title {
  font-size: 20px;
  font-weight: 700;
}

.product-modal-image-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
}

.product-modal-spec p {
  margin: 0 0 4px;
  font-size: 14px;
}

.product-modal-spec .spec-label {
  display: inline-block;
  width: 52px;
  color: #6b7280;
}

.product-modal-desc {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.product-modal-desc .desc-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.product-modal-desc p {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}
/* === 手機版優化（小於 576px） === */
@media (max-width: 575.98px) {

  /* 商品 Grid 單欄顯示，卡片留呼吸空間 */
  .grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .p-card {
    padding: 12px;
    min-height: auto;
  }

  .p-title {
    font-size: 1rem;
  }

  .p-cat {
    font-size: 12px;
    min-height: auto;
  }

  .p-price {
    font-size: 16px;
  }

  .product-img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* 跑馬燈字變小一點，避免擋畫面 */
  .marquee-bar {
    font-size: 12px;
    padding: 4px 0;
  }

  /* Modal：改成上下排，不擠在左右 */
  #productModal .modal-dialog {
    margin: 0.75rem;
  }

  #productModal .modal-body .row {
    flex-direction: column;
  }

  #productModal .modal-body .col-md-5,
  #productModal .modal-body .col-md-7 {
    max-width: 100%;
  }

  .product-modal-desc p {
    font-size: 13px;
  }

  .product-modal .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .product-modal .modal-footer .btn-green {
    width: 100%;
  }
}
/* static/css/order.css */

.od-page {
  background: #f6f8fb;
  min-height: calc(100vh - 60px);
  padding: 28px 14px;
}

.od-container {
  max-width: 980px;
  margin: 0 auto;
}

.od-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.od-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #0f172a;
}

.od-sub {
  margin-top: 6px;
  font-size: 13px;
  color: #64748b;
}

.od-back {
  text-decoration: none;
  color: #166534;
  font-weight: 800;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.od-back:hover {
  background: #f8fafc;
}

.od-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.od-orderinfo {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.od-info-block {
  min-width: 220px;
}

.od-label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.od-value {
  font-weight: 800;
  color: #0f172a;
}

.od-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
}

.od-badge-success {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.od-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.od-card-title {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 12px;
}

.od-kv {
  display: grid;
  gap: 10px;
}

.od-kv-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.od-kv-row span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.od-kv-row b {
  color: #0f172a;
  font-weight: 900;
}

.od-kv-row-full {
  grid-template-columns: 70px 1fr;
}

.od-break {
  word-break: break-all;
}

.od-summary {
  display: grid;
  gap: 10px;
}

.od-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #0f172a;
}

.od-summary-row span:first-child {
  color: #64748b;
  font-weight: 700;
}

.od-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

.od-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 950;
  font-size: 20px;
  color: #e11d48;
}

.od-table-wrap {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.od-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.od-table thead {
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.od-table th,
.od-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
}

.od-table tbody tr:hover {
  background: #f8fafc;
}

.od-item-name {
  font-weight: 900;
  color: #0f172a;
}

.od-item-line {
  font-weight: 900;
  color: #0f172a;
}

.od-right { text-align: right; }
.od-center { text-align: center; }

.od-footer-total {
  margin-top: 14px;
  text-align: right;
  color: #64748b;
  font-size: 14px;
  line-height: 1.8;
}

.od-grand {
  font-size: 18px;
  font-weight: 950;
  color: #0f172a;
}

.od-grand span {
  color: #e11d48;
}

@media (max-width: 860px) {
  .od-grid {
    grid-template-columns: 1fr;
  }
  .od-info-block {
    min-width: unset;
  }
}
/* ============================= */
/* Order Detail – Print Styles  */
/* ============================= */
@media print {

  /* 全站基礎 */
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* 不列印導覽與互動按鈕 */
  .od-back,
  nav,
  footer,
  button {
    display: none !important;
  }

  /* 主要容器 */
  .od-page {
    background: #fff !important;
    padding: 0 !important;
  }

  .od-container {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* 卡片樣式簡化（列印不要陰影） */
  .od-card {
    box-shadow: none !important;
    border: none !important;
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
  }

  /* 表格：適合 A4 */
  .od-table {
    font-size: 12px !important;
  }

  .od-table th,
  .od-table td {
    padding: 6px 8px !important;
    border-bottom: 1px solid #666 !important;
  }

  .od-table thead {
    background: none !important;
  }

  /* 避免頁面被切斷 */
  .od-card,
  .od-table-wrap,
  table,
  tr {
    page-break-inside: avoid;
  }

}
/* ============================= */
/* 強化「列印 / 另存 PDF」按鈕 */
/* ============================= */

/* 金額摘要區內的列印按鈕 */
.od-card .od-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  margin-top: 14px;
  padding: 12px 18px;

  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;

  color: #fff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border: none;
  border-radius: 14px;

  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover 效果 */
.od-card .od-back:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(34, 197, 94, 0.45);
  background: linear-gradient(135deg, #15803d, #16a34a);
}

/* active（點擊瞬間） */
.od-card .od-back:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
}
/* ============================= */
/* Header「回我的訂單」按鈕樣式 */
/* ============================= */

/* Header 右上的回訂單按鈕 */
.od-header .od-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;

  color: #166534;
  background: linear-gradient(135deg, #ecfdf5, #dcfce7);
  border: 1px solid #86efac;
  border-radius: 14px;

  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.2);
  transition: all 0.2s ease;
}

/* hover */
.od-header .od-back:hover {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.3);
  transform: translateY(-1px);
}

/* active */
.od-header .od-back:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.25);
}
/* ============================= */
/* Mobile CTA：列印按鈕滿版       */
/* ============================= */
@media (max-width: 768px) {

  /* 只針對「金額摘要卡片內」的按鈕做滿版 */
  .od-grid .od-card .od-back {
    width: 100%;
    display: flex;
  }

  /* 如果按鈕外層有 inline margin-left，手機上拿掉比較乾淨 */
  .od-grid .od-card .od-back + .od-back {
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
}
/* ============================= */
/* Mobile CTA：列印按鈕滿版（方案A） */
/* ============================= */
@media (max-width: 768px) {
  /* 只針對「金額摘要卡片內」的 od-back 變滿版 */
  .od-grid .od-card .od-back {
    width: 100%;
    display: flex;
  }

  /* 若同區塊未來有第二顆按鈕（例如下載 PDF），改成上下排列 */
  .od-grid .od-card .od-back + .od-back {
    margin-left: 0 !important;
    margin-top: 10px !important;
  }
}
@media print {
  .od-header {
    margin-bottom: 6px !important;
  }

  .od-title {
    margin-bottom: 4px !important;
  }

  .od-sub {
    font-size: 12px !important;
    color: #333 !important;
  }
}
@media print {
  .od-table-wrap,
  .od-footer-total {
    page-break-inside: avoid;
  }
}
@media print {
  .od-title {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }

  .od-sub {
    font-size: 12px !important;
    color: #333 !important;
  }
}
@media print {
  /* 公司抬頭（純文字，無需改 HTML） */
  body::before {
    content: "小農生鮮直賣所｜訂單明細\n電話：0907-496-777　地址：鼓山區鼓山三路8-17號";
    white-space: pre-line;
    display: block;
    padding: 0 0 10px 0;
    margin: 0 0 12px 0;
    border-bottom: 1px solid #333;
    font-size: 12px;
    font-weight: 700;
    color: #111;
  }
}
/* === Chat Widget（唯一版本） === */

/* 浮動聊天容器：固定在右下角 */
.chat-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

/* 聊天視窗本體 */
#chat-window {
  display: none;               /* 預設關閉，由 JS 控制顯示 */
  width: 320px;
  height: 420px;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-bottom: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
}

/* 標題列 */
.chat-header {
  background-color: #198754;
  color: #fff;
  padding: 8px 12px;
  font-weight: 600;
}

/* 訊息區 */
.chat-messages {
  flex: 1;
  padding: 8px 10px;
  overflow-y: auto;
}

/* 輸入框 */
#chat-input {
  border: none;
  border-top: 1px solid #ccc;
  padding: 8px 10px;
  outline: none;
}
/* ===== Chatbot 固定右下角（保證可見） ===== */
.chat-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
}

/* 聊天視窗 */
#chat-window {
  width: 320px;
  max-height: 420px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  overflow: hidden;
}

/* 💬 圓形按鈕 */
#chat-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 20px;
  z-index: 100000;
}
/* =========================================================
   Chatbot：不可能消失版（Desktop + Mobile）
   ========================================================= */

/* 右下角按鈕：永遠固定在視窗右下 */
#chat-toggle{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  z-index: 2147483647 !important; /* 幾乎最高 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 容器也固定（避免被頁面流推走） */
.chat-container{
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2147483646 !important;
  pointer-events: none !important; /* 只讓按鈕與視窗可點 */
}

/* 聊天視窗本體（預設：右下角浮窗） */
#chat-window{
  position: fixed !important;
  right: 16px !important;
  bottom: 84px !important; /* 在按鈕上方 */
  width: 340px !important;
  max-height: 480px !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.25) !important;
  overflow: hidden !important;
  z-index: 2147483646 !important;
  pointer-events: auto !important;
}

/* 讓聊天視窗內容可以捲 */
#chat-messages{
  max-height: 360px;
  overflow: auto;
  padding: 10px 12px;
}

/* Mobile：改成「近全螢幕」超好用、不會被擋 */
@media (max-width: 576px){
  #chat-window{
    left: 12px !important;
    right: 12px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 70vh !important;
    border-radius: 16px !important;
  }

  #chat-toggle{
    right: 14px !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: 58px !important;
    height: 58px !important;
  }
}
.chat-messages {
  height: 260px;          /* 你想要的高度 */
  overflow-y: auto;       /* 這行讓它出現直向卷軸 */
  padding: 8px 12px;
}