@charset "UTF-8";
/*
 Theme Name: EzPage React
 Theme URI: https://ezpage.tw/
 Description: Headless-style Vite + React theme for the EzPage main site.
 Author: zerohua
 Author URI: https://zerohua.com/
 Version: 1.0.0
 Text Domain: ezpage-react
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;700;800&display=swap');

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eff6ff;
  background-image: radial-gradient(at 0% 0%, rgba(219, 234, 254, 0.5) 0, transparent 50%), radial-gradient(at 100% 100%, rgba(219, 234, 254, 0.5) 0, transparent 50%);
  background-attachment: fixed;
  color: #111827;
}

/* 完全隱藏所有 WooCommerce 訊息通知 */
.woocommerce-message,
.blocksy-woo-messages-default,
.woocommerce-notices-wrapper,
.woocommerce-cart-notice {
  display: none !important;
}

/* ==================================================
   Woo Global UI tokens（讓 Woo 所有頁面同一個世界）
   範圍：所有 Woo 頁（account/cart/checkout/order）
   ================================================== */
/* ==================================================
   Woo Global UI tokens（讓 Woo 所有頁面同一個世界）
   範圍：所有 Woo 頁（account/cart/checkout/order）
   ================================================== */
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-order-received {
  --ez-bg: #eff6ff;
  /* Blue 50 - Light Blue BG */
  --ez-text: #111827;
  /* Gray 900 - Dark Text */
  --ez-text-muted: #6b7280;
  /* Gray 500 */
  --ez-card-bg: #ffffff;
  /* Pure White Card */
  --ez-border: #dbeafe;
  /* Blue 100 Border for cleaner look */
  --ez-shadow: 0 10px 40px -10px rgba(37, 99, 235, 0.15), 0 0 2px 0 rgba(37, 99, 235, 0.05);
  /* Premium Blue Tint Shadow */
  /* Soft Shadow */
  --ez-radius: 16px;
  --ez-radius-sm: 12px;
  --ez-accent: #2563eb;
  /* Standard Blue for better contrast */
  --ez-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --ez-gradient-hover: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);

  background-color: var(--ez-bg);
  color: var(--ez-text);
}

/* ==================================================
   Woo pages base（背景 + 外框 spacing）
   ================================================== */
body.woocommerce-cart main.woo-main,
body.woocommerce-checkout main.woo-main,
body.woocommerce-order-received main.woo-main,
body.woocommerce-account main.woo-main {
  background: var(--ez-bg);
  color: var(--ez-text);
  padding: 80px 16px 64px;
  min-height: 100vh;
}

body.woocommerce-cart main.woo-main .woo-container,
body.woocommerce-checkout main.woo-main .woo-container,
body.woocommerce-order-received main.woo-main .woo-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* ==================================================
   Woo Global components（按鈕 / 表單 / 表格 / notice）
   ================================================== */
body.woocommerce-page .woocommerce-Button,
body.woocommerce-page button.button,
body.woocommerce-page a.button,
body.woocommerce-page input.button,
body.woocommerce-page button[type="submit"],
body.woocommerce-page .wc-block-components-button.contained {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding: 12px 32px;
  font-weight: 600;
  border: none;
  background: var(--ez-gradient);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

body.woocommerce-page .woocommerce-Button:hover,
body.woocommerce-page button.button:hover,
body.woocommerce-page a.button:hover,
body.woocommerce-page input.button:hover,
body.woocommerce-page button[type="submit"]:hover,
body.woocommerce-page .wc-block-components-button.contained:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  background: var(--ez-gradient-hover);
  filter: brightness(1.05);
}

/* Blocks submit button（部分結帳確認付款會走這個） */
body.woocommerce-checkout form button[type="submit"].wc-block-components-button,
body.woocommerce-checkout form button[type="submit"].wc-block-components-button:hover {
  background: var(--ez-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* focus/active 不回預設 */
body.woocommerce-page .wc-block-components-button.contained:focus,
body.woocommerce-page .wc-block-components-button.contained:active,
body.woocommerce-checkout form button[type="submit"].wc-block-components-button:focus,
body.woocommerce-checkout form button[type="submit"].wc-block-components-button:active {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

body.woocommerce-page input[type="text"],
body.woocommerce-page input[type="email"],
body.woocommerce-page input[type="password"],
body.woocommerce-page input[type="tel"],
body.woocommerce-page select,
body.woocommerce-page textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ez-border);
  padding: 10px 12px;
  background: #ffffff;
  color: var(--ez-text);
  box-sizing: border-box;
  transition: all 0.2s ease;
}

body.woocommerce-page input:focus,
body.woocommerce-page textarea:focus,
body.woocommerce-page select:focus {
  outline: none;
  border-color: var(--ez-accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body.woocommerce-page table.shop_table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius-sm);
  overflow: hidden;
}

body.woocommerce-page table.shop_table th,
body.woocommerce-page table.shop_table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ez-border);
  color: var(--ez-text);
}

body.woocommerce-page table.shop_table th {
  color: var(--ez-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

body.woocommerce-page table.shop_table tr:last-child td {
  border-bottom: 0;
}

body.woocommerce-page .woocommerce-message,
body.woocommerce-page .woocommerce-info,
body.woocommerce-page .woocommerce-error {
  border-radius: var(--ez-radius-sm);
}

/* ==================================================
   My Account layout + sidebar（單一來源）
   ================================================== */
body.woocommerce-account {
  --ez-nav: 260px;
  --ez-gap: 32px;
  --ez-card: 988px;
  /* 1280 - 260 - 32 = 988 */
}

@media (min-width: 901px) {

  body.woocommerce-account main.woo-main .woo-container,
  body.woocommerce-account main.woo-main .woocommerce {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--ez-gap);
    align-items: flex-start;
  }

  body.woocommerce-account main.woo-main .woo-container {
    max-width: 1280px;
    margin: 0 auto !important;
    padding: 0 24px;
    box-sizing: border-box;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 var(--ez-nav);
    width: var(--ez-nav);
    background: var(--ez-card-bg);
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius-sm);
    padding: 18px;
    box-shadow: var(--ez-shadow);
    box-sizing: border-box;

    position: sticky;
    top: 104px;
    align-self: flex-start;
    height: fit-content;
    max-height: calc(100vh - 48px);
    overflow: auto;
    scrollbar-gutter: stable both-edges;

    transition: box-shadow .2s ease, transform .2s ease;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation.ez-stuck {
    box-shadow:
      0 12px 24px rgba(17, 24, 39, 0.12),
      0 24px 48px rgba(17, 24, 39, 0.10);
    transform: scale(0.985);
  }

  body.woocommerce-account .woocommerce-MyAccount-content {
    flex: 0 0 var(--ez-card);
    width: var(--ez-card);
    max-width: var(--ez-card);
    background: var(--ez-card-bg);
    border: 1px solid var(--ez-border);
    border-radius: var(--ez-radius);
    padding: 24px;
    box-shadow: var(--ez-shadow);
    box-sizing: border-box;
    min-width: 0;
  }
}

@media (max-width: 900px) {

  body.woocommerce-account main.woo-main .woo-container,
  body.woocommerce-account main.woo-main .woocommerce {
    flex-direction: column;
    flex-wrap: wrap;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation,
  body.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
}

/* Mobile Specific Tweaks for Dashboard Cards */
@media (max-width: 768px) {
  /* Reverted content padding to restore size feel */
  /* body.woocommerce-account .woocommerce-MyAccount-content { padding: 16px !important; } */

  /* Make cards WIDER by reducing the page container padding */
  body.woocommerce-account main.woo-main,
  body.woocommerce-checkout main.woo-main,
  body.woocommerce-cart main.woo-main {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Try to force standard grid/flex containers in root to behave if they are squeezing */
  body.woocommerce-account #root .grid-cols-3 {
    gap: 12px !important;
    /* Reduce gap on mobile */
  }
}

/* Sidebar nav */
body.woocommerce-account .woocommerce-MyAccount-navigation::before {
  content: "EzPage｜會員管理中心";
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ez-text);
  padding: 2px 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--ez-border);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0 0 12px 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  margin-bottom: 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a,
body.woocommerce-account .woocommerce-MyAccount-navigation a:visited,
body.woocommerce-account .woocommerce-MyAccount-navigation a:focus {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ez-text);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.4;
  transition: all 0.2s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: #f9fafb;
  color: var(--ez-accent);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--ez-accent);
  border: 1px solid #dbeafe;
  background: #eff6ff;
  box-shadow: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation a::before {
  width: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
  content: "•";
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
  content: "🏠";
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
  content: "🧾";
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
  content: "👤";
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--subscriptions a::before,
body.woocommerce-account .woocommerce-MyAccount-navigation-link--my-subscription a::before {
  content: "📦";
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
  content: "🚪";
}

/* icon stuck 微調 */
@media (min-width: 901px) {
  body.woocommerce-account .woocommerce-MyAccount-navigation a::before {
    transition: transform .2s ease, filter .2s ease;
  }

  body.woocommerce-account .woocommerce-MyAccount-navigation.ez-stuck a::before {
    transform: translateY(-1px) scale(1.08);
    filter: saturate(1.25) contrast(1.1);
  }
}

/* React dashboard：解除自帶容器/背景 */
body.woocommerce-account #root .max-w-7xl {
  max-width: 100% !important;
}

body.woocommerce-account #root .mx-auto {
  margin: 0 !important;
}

body.woocommerce-account #root .min-h-screen {
  min-height: auto !important;
}

body.woocommerce-account #root .bg-gray-50 {
  background: transparent !important;
}

/* ==================================================
   Checkout（Blocks）：左摘要卡 + 右表單卡 + sticky
   ================================================== */
body.woocommerce-checkout {
  --ez-card-radius: 16px;
  --ez-card-border: var(--ez-border);
  --ez-card-shadow: var(--ez-shadow);
}

@media (min-width: 901px) {
  body.woocommerce-checkout main.woo-main .woo-container {
    max-width: 1600px;
    margin-left: max(24px, calc(50% - 640px)) !important;
    margin-right: auto !important;
    padding: 0 24px;
    box-sizing: border-box;
  }

  body.woocommerce-checkout .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 32px !important;
    /* Increased gap slightly for better separation, still fits */
    align-items: start !important;
  }

  body.woocommerce-checkout .wc-block-components-sidebar {
    width: 360px !important;
    max-width: 360px !important;
  }

  body.woocommerce-checkout .wc-block-components-main {
    min-width: 0 !important;
  }
}

/* 平板縮小左欄 */
@media (min-width: 901px) and (max-width: 1100px) {
  body.woocommerce-checkout .wc-block-components-sidebar-layout {
    grid-template-columns: 340px minmax(0, 1fr) !important;
  }

  body.woocommerce-checkout .wc-block-components-sidebar {
    width: 340px !important;
    max-width: 340px !important;
  }
}

/* 左卡片（訂單摘要） */
body.woocommerce-checkout .wc-block-components-sidebar {
  background: var(--ez-card-bg);
  border: 1px solid var(--ez-card-border);
  border-radius: var(--ez-card-radius);
  box-shadow: var(--ez-card-shadow);
  padding: 20px;
  box-sizing: border-box;

  position: sticky;
  top: 104px;
  align-self: start;
  height: fit-content;
  max-height: calc(100vh - 48px);
  overflow: auto;
  scrollbar-gutter: stable both-edges;

  transition: box-shadow .2s ease, transform .2s ease;
}

body.woocommerce-checkout .wc-block-components-sidebar::before {
  content: "EzPage｜結帳";
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ez-text);
  padding: 2px 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--ez-border);
}

body.woocommerce-checkout .wc-block-components-sidebar>*,
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-sidebar__content,
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-order-summary {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
}

body.woocommerce-checkout .wc-block-components-sidebar * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.woocommerce-checkout .wc-block-components-sidebar.ez-stuck {
  box-shadow:
    0 12px 24px rgba(17, 24, 39, 0.12),
    0 24px 48px rgba(17, 24, 39, 0.10);
  transform: scale(0.985);
}

/* Fix: Disable sticky on mobile to avoid overlap */
@media (max-width: 900px) {
  body.woocommerce-checkout .wc-block-components-sidebar {
    position: static !important;
    transform: none !important;
    box-shadow: var(--ez-card-shadow) !important;
    z-index: 1;
  }
}

/* 右卡片（表單/付款資訊） */
body.woocommerce-checkout .wc-block-components-main {
  background: var(--ez-card-bg);
  border: 1px solid var(--ez-card-border);
  border-radius: var(--ez-card-radius);
  box-shadow: var(--ez-card-shadow);
  padding: 20px;
  box-sizing: border-box;
}

body.woocommerce-checkout .wc-block-components-main .wc-block-components-form,
body.woocommerce-checkout .wc-block-components-main .wc-block-components-checkout-step,
body.woocommerce-checkout .wc-block-components-main .wc-block-components-checkout-step__container {
  width: 100% !important;
  max-width: 100% !important;
}

/* 右卡片區塊標題層級（聯絡資訊/付款方式/帳單） */
body.woocommerce-checkout .wc-block-components-main h2,
body.woocommerce-checkout .wc-block-components-main h3,
body.woocommerce-checkout .wc-block-components-main legend {
  font-size: 16px;
  font-weight: 800;
  color: var(--ez-text);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

/* step 間距 */

body.woocommerce-checkout .wc-block-components-main .wc-block-components-checkout-step {
  padding-top: 14px;
  margin-top: 18px;
  border-top: 1px solid var(--ez-border);
}

body.woocommerce-checkout .wc-block-components-main .wc-block-components-checkout-step:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

body.woocommerce-checkout .wc-block-components-main p,
body.woocommerce-checkout .wc-block-components-main .wc-block-components-text {
  color: var(--ez-text-muted);
}

body.woocommerce-checkout .wc-block-components-main .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-components-main .wc-block-components-payment-methods {
  border: 1px solid var(--ez-border);
  border-radius: 12px;
  padding: 12px;
  background: #f9fafb;
}

/* ==================================================
   Cart（Blocks）：卡片外觀（跟 Account / Checkout 同節奏）
   只影響 Woo Blocks Cart
   ================================================== */

/* Blocks Cart 的主要容器通常是 .wc-block-cart（也可能包在 .woocommerce 裡） */
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wp-block-woocommerce-cart {
  background: var(--ez-card-bg);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
  box-shadow: var(--ez-shadow);
  padding: 24px;
  box-sizing: border-box;
}

/* Blocks Cart 內部常見區塊：避免被內層限寬/overflow 影響 */
body.woocommerce-cart .wc-block-cart *,
body.woocommerce-cart .wp-block-woocommerce-cart * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 讓左側「購物車項目」跟右側「小計/結帳按鈕」看起來像兩張卡（桌機） */
@media (min-width: 901px) {

  body.woocommerce-cart .wc-block-cart__main,
  body.woocommerce-cart .wc-block-cart__sidebar {
    background: #ffffff;
    border: 1px solid var(--ez-border);
    border-radius: 12px;
    padding: 18px;
    box-sizing: border-box;
  }

  /* 兩欄間距跟你前面一致 */
  body.woocommerce-cart .wc-block-cart__content {
    gap: 24px;
  }

  /* Sidebar（小計/前往結賬）做 sticky（可選，和 checkout/account 一致） */
  body.woocommerce-cart .wc-block-cart__sidebar {
    position: sticky;
    top: 104px;
    align-self: start;
    height: fit-content;
    max-height: calc(100vh - 48px);
    overflow: auto;
    scrollbar-gutter: stable both-edges;
    transition: box-shadow .2s ease, transform .2s ease;
  }

  body.woocommerce-cart .wc-block-cart__sidebar.ez-stuck {
    box-shadow:
      0 12px 24px rgba(17, 24, 39, 0.12),
      0 24px 48px rgba(17, 24, 39, 0.10);
    transform: scale(0.985);
  }
}

/* 小標題：讓 cart 頁也有同一層級（像 Account/Checkout） */
body.woocommerce-cart .wc-block-cart__title,
body.woocommerce-cart .wc-block-cart__heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--ez-text);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

/* 讓 cart 頁的「繼續購物 / 更新購物車」等按鈕與主 CTA 一致 */
body.woocommerce-cart .wc-block-components-button.contained,
body.woocommerce-cart .wc-block-components-button.contained:hover {
  background: var(--ez-accent) !important;
  border-color: var(--ez-accent) !important;
  color: #fff !important;
}

/* ==================================================
   FIX：Cart 背景只鋪到一半（露出 body 黑底）
   ================================================== */
body.woocommerce-cart {
  background: var(--ez-bg) !important;
  color: var(--ez-text) !important;
}

/* 確保 Woo wrapper 真的是全寬全高 */
body.woocommerce-cart main.woo-main {
  width: 100% !important;
  min-height: 100vh !important;
  background: var(--ez-bg) !important;
}

/* 有些主題/Block Theme 會讓內容區只剩半邊，補強外層容器 */
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wp-block-woocommerce-cart {
  width: 100% !important;
  max-width: 1280px;
  /* 你要滿版就改成 100% */
}

/* 避免右半邊容器透明露黑底（保守補一層） */
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-cart #page,
body.woocommerce-cart #content,
body.woocommerce-cart .site,
body.woocommerce-cart .site-content {
  background: var(--ez-bg) !important;
}

/* ==================================================
   Cart（Blocks）最終版：桌機左右並排 + gap + 標題放大
   ================================================== */

/* 1) 桌機：強制兩欄 grid（左商品、右總計） */
@media (min-width: 901px) {

  body.woocommerce-cart .wc-block-cart .wc-block-cart__content,
  body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__content,
  body.woocommerce-cart .wc-block-cart__content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px !important;
    /* 左自適應，右固定 */
    gap: 24px !important;
    align-items: start !important;
  }

  /* 左：商品 */
  body.woocommerce-cart .wc-block-cart__main {
    min-width: 0 !important;
  }

  /* 右：購物車總計 */
  body.woocommerce-cart .wc-block-cart__sidebar {
    width: 380px !important;
    max-width: 380px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* 平板：右欄變窄避免擠 */
@media (min-width: 901px) and (max-width: 1100px) {
  body.woocommerce-cart .wc-block-cart__content {
    grid-template-columns: minmax(0, 1fr) 340px !important;
  }

  body.woocommerce-cart .wc-block-cart__sidebar {
    width: 340px !important;
    max-width: 340px !important;
  }
}

/* 2) 標題放大：商品 & 總計（更廣泛命中） */
body.woocommerce-cart .wc-block-cart__main h2,
body.woocommerce-cart .wc-block-cart__main h3,
body.woocommerce-cart .wc-block-cart__main .wc-block-components-title,
body.woocommerce-cart .wc-block-cart__main .wc-block-cart__title,
body.woocommerce-cart .wc-block-cart__main .wc-block-cart-items__header,
body.woocommerce-cart .wc-block-cart__main .wc-block-cart-items__header-title,
body.woocommerce-cart .wc-block-cart__main .wc-block-cart-items__title {
  font-size: 18px !important;
  /* 要更大改 20px */
  font-weight: 800 !important;
  color: var(--ez-text) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

/* 總計標題（你已經有命中，保留但統一） */
body.woocommerce-cart .wc-block-cart__sidebar h2,
body.woocommerce-cart .wc-block-cart__sidebar h3,
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-title,
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals__title,
body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals__title-text {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ez-text) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

/* 3) 手機：上下排列時留距離 */
@media (max-width: 900px) {
  body.woocommerce-cart .wc-block-cart__main {
    margin-bottom: 16px;
  }
}

/* ==================================================
   Cart（Blocks）FIX：左右貼在一起 → 強制留縫
   ================================================== */
@media (min-width: 901px) {

  /* 1) 優先：若 Woo 用 layout 容器控兩欄，就在外層強制 gap */
  body.woocommerce-cart .wc-block-cart__content,
  body.woocommerce-cart .wc-block-cart__main+.wc-block-cart__sidebar,
  body.woocommerce-cart .wc-block-cart__content>.wc-block-cart__main,
  body.woocommerce-cart .wc-block-cart__content>.wc-block-cart__sidebar {
    gap: 24px !important;
    column-gap: 24px !important;
  }

  /* 2) 保險：就算 gap 被吃掉，也一定有距離（不會影響上下） */
  body.woocommerce-cart .wc-block-cart__sidebar {
    margin-left: 24px !important;
  }

  /* 3) 避免 margin 造成撐爆換行：主欄允許縮 */
  body.woocommerce-cart .wc-block-cart__main {
    min-width: 0 !important;
  }
}

/* ==================================================
   Order Received（付款完成頁）— EzPage 風格
   只影響 body.woocommerce-order-received
   ================================================== */

body.woocommerce-order-received main.woo-main {
  background: var(--ez-bg);
  color: var(--ez-text);
  padding: 48px 16px 64px;
}

body.woocommerce-order-received main.woo-main .woo-container {
  max-width: 1400px;
  margin-left: max(24px, calc(50% - 700px)) !important;
  margin-right: auto !important;
}

/* 主卡（整頁容器） */
body.woocommerce-order-received .woocommerce-order {
  background: var(--ez-card-bg);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
  box-shadow: var(--ez-shadow);
  padding: 24px;
  box-sizing: border-box;
}

/* EzPage 標題（跟 checkout/account 同節奏） */
body.woocommerce-order-received .woocommerce-order::before {
  content: "EzPage｜付款完成";
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ez-text);
  padding: 2px 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--ez-border);
}

/* 成功訊息 */
body.woocommerce-order-received .woocommerce-notice.woocommerce-thankyou-order-received {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ez-text);
}

/* 訂單概覽（編號/日期/Email/總計/付款）做成小卡網格 */
body.woocommerce-order-received ul.woocommerce-order-overview {
  list-style: none;
  padding: 16px;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  background: #f9fafb;
  border: 1px solid var(--ez-border);
  border-radius: 12px;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
  margin: 0;
  padding: 10px 16px;
  /* Restore horizontal padding so text doesn't touch border */
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--ez-border);
  color: var(--ez-text-muted);
  line-height: 1.35;
  min-width: 0;
  text-align: left;
  display: flex !important;
  /* Use flex to align text node and strong */
  align-items: center;
  /* Vertical center */
  flex-wrap: wrap;
  /* Allow wrap if content is too long */
}

/* 確保最後一個項目（付款方式）也有邊框 (Override Woo default no-border) */
body.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
  border: 1px solid var(--ez-border) !important;
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
  display: inline-block;
  /* Changed from block to inline/inline-block */
  margin-top: 0;
  /* Remove top margin */
  margin-left: 8px;
  /* Add spacing between label and value */
  font-size: 14px;
  font-weight: 800;
  color: var(--ez-text);
}

@media (max-width: 640px) {
  body.woocommerce-order-received ul.woocommerce-order-overview {
    grid-template-columns: 1fr;
  }
}

/* 子卡（訂單詳細 / 帳單地址 / Additional info）統一外觀 */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-silkypress-input-field-block {
  margin-top: 18px;
  padding: 18px;
  background: #f9fafb;
  border: 1px solid var(--ez-border);
  border-radius: 12px;
}

/* 區塊標題層級 */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received .woocommerce-silkypress-input-field-block h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ez-text);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

/* Table 跟你的 global shop_table 搭配，補間距 */
body.woocommerce-order-received table.shop_table {
  margin: 0;
}

/* 帳單地址看起來更像 SaaS 卡片內資訊 */
body.woocommerce-order-received .woocommerce-customer-details address {
  font-style: normal;
  color: var(--ez-text-muted);
  line-height: 1.6;
}

body.woocommerce-order-received .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details--email {
  margin: 10px 0 0;
}

/* Additional Information（站台資訊）列表美化 */
/* Additional Information（站台資訊）列表美化 */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  /* Change to Row (One Line) */
  flex-wrap: wrap !important;
  /* Allow wrap on small screens */
  gap: 24px;
  /* Gap between items in the single line */
  align-items: center;
}

body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li {
  margin: 0;
  padding: 0;
  /* No padding needed if it's just text in a row */
  background: transparent;
  border: none;
  border-bottom: none;
  border-radius: 0;
  color: var(--ez-text-muted);
  line-height: 1.4;
  width: auto;
  /* Auto width for horizontal layout */
  flex: 0 1 auto;
}

/* Remove border from last item */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li:last-child {
  border-bottom: none;
}

body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li strong {
  color: var(--ez-text);
  font-weight: 800;
}

@media (max-width: 900px) {
  body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   Order Received：SaaS 風格成功訊息（綠色提示條）
   ================================================== */

body.woocommerce-order-received .woocommerce-notice--success,
body.woocommerce-order-received .woocommerce-thankyou-order-received {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  background: #ecfdf5;
  /* 淡綠底 */
  border: 1px solid #10b981;
  /* 綠框 */
  color: #047857;
  /* 深綠字 */

  padding: 14px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;

  margin: 0 0 18px;
  /* 跟下方卡片拉開 */
  box-sizing: border-box;
}

/* 左側 icon（check circle） */
body.woocommerce-order-received .woocommerce-notice--success::before,
body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: "✔";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  background: #10b981;
  /* SaaS 綠 */
  color: #ffffff;
  border-radius: 999px;

  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  margin-top: 2px;
  /* 視覺微調 */
}

/* 讓訊息本體更乾淨（避免 Woo 預設影響） */
body.woocommerce-order-received .woocommerce-notice--success p,
body.woocommerce-order-received .woocommerce-thankyou-order-received p {
  margin: 0;
}

/* 小螢幕：保持舒服的閱讀節奏 */
@media (max-width: 640px) {

  body.woocommerce-order-received .woocommerce-notice--success,
  body.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-size: 14px;
    padding: 12px 14px;
  }
}

/* ==================================================
   Order Received：Copy / Badges / CTA（只影響付款完成頁）
   ================================================== */

/* 訂單編號那格：讓它能放 copy 按鈕，並且佔滿整行 (Full Width) */
body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__order {
  grid-column: 1 / -1;
  /* Span all columns (Full Width) */
  width: 100%;
  display: flex !important;
  /* Ensure flex for horizontal layout */
  align-items: center;
  /* Removed gap:8px to match standard items */
}

body.woocommerce-order-received .woocommerce-order-overview__order strong {
  /* Inherit standard strong styles (margin-left: 8px, inline-block) */
  display: inline-block;
  font-weight: 800;
  color: var(--ez-text);
}

/* Copy 按鈕（會由 JS 插入） */
body.woocommerce-order-received .ez-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  border-radius: 10px;
  padding: 6px 10px;

  border: 1px solid var(--ez-border);
  background: #ffffff;
  color: var(--ez-text);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;

  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

body.woocommerce-order-received .ez-copy-btn:hover {
  border-color: var(--ez-accent);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

body.woocommerce-order-received .ez-copy-btn:active {
  transform: translateY(0);
}

/* 複製成功狀態 */
body.woocommerce-order-received .ez-copy-btn.is-copied {
  border-color: #10b981;
  background: #ecfdf5;
  color: #047857;
}

/* Additional Information（站台名稱/帳號/密碼）做成 badge */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  /* Force left alignment */
  gap: 12px;
}

body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li strong {
  display: inline-block;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 600;
  line-height: inherit;
  white-space: normal;

  /* Reset any margins that might push it to the right */
  margin: 0 !important;
  float: none !important;
}

/* 站台名稱：藍色 (Blue) */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li:nth-child(1) strong {
  color: #2563eb;
  /* Blue 600 */
}

/* 管理者帳號：紅色 + 敏感訊息 */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li:nth-child(2) strong {
  color: #dc2626;
  /* Red 600 */
}

/* 管理者密碼：紅色 + 敏感訊息 + 模糊遮罩 */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li:nth-child(3) strong {
  color: #dc2626;
  /* Red 600 */
  filter: blur(4px);
  transition: filter 0.2s ease;
  user-select: all;
  /* Allow easier selection */
}

/* 懸停時顯示密碼 (Reveal on hover) */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li:nth-child(3) strong:hover {
  filter: none;
}

/* Add "(敏感訊息)" label for Account and Password */
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li:nth-child(2) strong::after,
body.woocommerce-order-received .woocommerce-silkypress-input-field-block ul.order_details li:nth-child(3) strong::after {
  content: " (敏感訊息)";
  font-size: 12px;
  color: #999;
  font-weight: 400;
  margin-left: 6px;
  display: inline-block;
  filter: none;
  /* Ensure label isn't blurred if part of strong (it usually is) */
  /* If ::after is blurred because parent is blurred, we need a different strategy for password.
     The filter applies to the element and its children (pseudo-elements included).
     So for the password (li:nth-child(3)), the label will also be blurred. 
     This matches "Do not expose" generally, but user might want to see the label.
     Let's keep it blurred until hover, which reinforces "Secure". 
  */
}

/* 主 CTA（會由 JS 插入） */
body.woocommerce-order-received .ez-cta-wrap {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body.woocommerce-order-received .ez-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 12px;
  padding: 12px 16px;

  background: var(--ez-gradient);
  border: none;
  color: #fff;

  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

body.woocommerce-order-received .ez-cta-primary:hover {
  filter: brightness(1.05);
}

body.woocommerce-order-received .ez-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  padding: 12px 16px;

  background: #ffffff;
  border: 1px solid var(--ez-border);
  color: var(--ez-text);

  font-weight: 900;
  text-decoration: none;
}

/* ==================================================
   Empty Cart Customization
   ================================================== */

/* Hide default sad face and add custom icon */
/* Hide default sad face and add custom icon */


p.cart-empty {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ez-text);
  margin: 40px 0;
}

/* Return to Shop Button - Blue Gradient */
p.return-to-shop {
  text-align: center;
  margin-bottom: 60px;
}

p.return-to-shop .button.wc-backward {
  background: var(--ez-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

p.return-to-shop .button.wc-backward:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4) !important;
}

/* Cross Sells (Product Grid) - Centering */
.cross-sells>h2 {
  text-align: center;
  margin-bottom: 32px;
  font-size: 1.8rem;
  color: var(--ez-text);
}

.cross-sells ul.products {
  display: flex !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.cross-sells ul.products li.product {
  float: none !important;
  margin: 0 !important;
  width: 280px !important;
  background: var(--ez-card-bg);
  border: 1px solid var(--ez-border);
  border-radius: var(--ez-radius);
  box-shadow: var(--ez-shadow);
  padding: 24px;
  transition: transform 0.3s;
}

.cross-sells ul.products li.product:hover {
  transform: translateY(-5px);
}

/* ==================================================
   Password Reset Page (Split Layout & Navbar)
   ================================================== */

/* 1) Static Navbar */
.ez-static-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ez-border);
}

.ez-navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.ez-logo {
  display: none;
  /* Hide text logo */
}

.ez-nav-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.ez-nav-logo-img {
  height: 40px;
  /* Adjust as needed */
  width: auto;
}

.ez-back-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--ez-text-muted);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
  /* Ensure pointer */
  position: relative;
  /* Ensure z-index context */
  z-index: 1001;
}

.ez-back-link:hover {
  color: var(--ez-text);
  text-decoration: underline;
}

/* 2) Split Layout Container */
.ez-split-page.woo-main {
  padding: 0 !important;
  /* Override default woo padding */
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  background: #fff;
  /* Reset bg */
}

/* Left Side (Image/Gradient) */
.ez-split-side {
  flex: 1;
  position: relative;
  background: var(--ez-accent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ez-side-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  mix-blend-mode: overlay;
}

.ez-split-side::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.9), rgba(30, 64, 175, 0.8));
}

.ez-side-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 48px;
  max-width: 480px;
}

.ez-side-content h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 16px;
  color: #fff;
  letter-spacing: -0.02em;
}

.ez-side-content p {
  font-size: 18px;
  opacity: 0.9;
  line-height: 1.6;
}

/* Right Side (Content/Form) */
.ez-split-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 120px 24px 48px;
  /* Top padding for navbar space */
  background: #fff;
  max-width: 640px;
  /* Limit width */
  width: 100%;
}

.ez-split-main .woo-container {
  width: 100%;
  max-width: 420px;
  /* Form width */
  margin: 0 auto;
  padding: 0;
}

/* 3) Form Styling Override */
.woocommerce-ResetPassword {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

.woocommerce-ResetPassword p {
  margin-bottom: 20px;
}

.woocommerce-ResetPassword .woocommerce-form-row {
  margin-bottom: 24px;
}

.woocommerce-ResetPassword label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--ez-text);
}

.woocommerce-ResetPassword button[type="submit"] {
  width: auto !important;
  /* Fix excessive width */
  min-width: 160px;
  height: 48px;
  font-size: 16px;
  margin-top: 12px;
  padding: 0 32px;
  border-radius: 50px;
  /* Make it pill shaped like empty cart button */
}

/* Global Icon Style (for Password Reset & Empty Cart) */
.ez-nuclear-icon {
  font-size: 80px;
  margin-bottom: 20px;
  line-height: 1;
  text-align: center;
  width: 100%;
  display: block !important;
}

/* Navbar Container Override - MATCH REACT Exactly */
/* Navbar Container Override - MATCH REACT Exactly */
.ez-static-navbar {
  height: var(--nav-height);
  width: 100%;
  /* Ensure it handles fixed/sticky if needed, but for now just height */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Subtle border if needed */
}

.ez-navbar-container {
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  display: flex !important;
  /* Force flex */
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  width: 100%;
}

@media (max-width: 768px) {
  .ez-navbar-container {
    padding: 0 20px !important;
    /* Match React Mobile Padding */
  }
}

/* Mobile Responsive Logic Consolidated */
@media (max-width: 768px) {
  .ez-static-navbar .desktop-only {
    display: none !important;
  }
}

.ez-static-navbar .mobile-only {
  display: flex !important;
}

.ez-navbar-container {
  justify-content: space-between;
}


@media (min-width: 769px) {
  .ez-static-navbar .mobile-only {
    display: none !important;
  }
}

/* ==================================================
   Edit Account Page (帳戶詳細資料)
   ================================================== */

/* Remove default fieldset styling */
body.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin: 0 0 24px;
  background: transparent;
}

/* Style Section Legends as Headings */
body.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  font-size: 16px;
  font-weight: 800;
  color: var(--ez-text);
  margin-bottom: 16px;
  display: block;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ez-border-subtle, #f3f4f6);
}

/* Form Rows Spacing */
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row {
  margin-bottom: 18px;
}

/* Labels */
body.woocommerce-account .woocommerce-EditAccountForm label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ez-text);
  font-size: 14px;
}

/* Inputs (Ensure correct override if needed, though global usually covers it) */
body.woocommerce-account .woocommerce-EditAccountForm input.input-text,
body.woocommerce-account .woocommerce-EditAccountForm input[type="text"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="email"],
body.woocommerce-account .woocommerce-EditAccountForm input[type="password"] {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--ez-border);
  background: #ffffff;
  font-size: 15px;
  line-height: normal;
}

body.woocommerce-account .woocommerce-EditAccountForm input:focus {
  border-color: var(--ez-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

/* Password Visibility Toggle (if present in theme features, ensure position) */
body.woocommerce-account .woocommerce-EditAccountForm .password-input {
  position: relative;
  display: block;
}

body.woocommerce-account .woocommerce-EditAccountForm .show-password-input {
  top: 50% !important;
  transform: translateY(-50%);
  right: 12px !important;
  color: var(--ez-text-muted);
}

/* Save Button */
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] {
  margin-top: 12px;
  width: auto;
  min-width: 140px;
}