/*
 * 手機底部報名列：預設桌機不顯示（desktop 開啟時桌機也固定在底部）；手機固定在畫面底部，高度含 iPhone 安全區域。
 * 頁面有報名列時 body 底部加上等高留白，捲到最底時頁尾不會被蓋住。
 * 編輯器預覽（.is-preview）改為一般排版，不固定、不加留白。
 * 不是 .lws-section（blocks-base 的按鈕樣式都以 .lws-section 為範圍），按鈕樣式在這裡自己定義。
 */
.lws-mobile-bar {
  display: none;
  box-sizing: border-box;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding-inline: var(--space-4);
  border-top: 1px solid var(--line-inverse);
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font-family: var(--font-body);
}
.lws-mobile-bar .lws-mobile-bar__info {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.lws-mobile-bar .lws-mobile-bar__text,
.lws-mobile-bar .lws-mobile-bar__promo {
  margin: 0;
  overflow: hidden;
  color: var(--fg-inverse);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lws-mobile-bar .lws-mobile-bar__text strong,
.lws-mobile-bar .lws-mobile-bar__promo strong {
  color: var(--accent-inverse);
}
/* 兩行時上排讓位給優惠：縮一級、變淡；下排粗體，折扣碼用橘色跳出來 */
.lws-mobile-bar.has-promo .lws-mobile-bar__text {
  color: var(--fg-inverse-muted);
  font-size: var(--text-xs);
}
.lws-mobile-bar .lws-mobile-bar__promo {
  font-weight: 700;
}
.lws-mobile-bar .lws-mobile-bar__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--accent-inverse);
  color: var(--accent-inverse-fg);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-snug);
  text-decoration: none;
}
.lws-mobile-bar .lws-mobile-bar__btn:focus-visible {
  outline: 2px solid var(--fg-inverse);
  outline-offset: 2px;
}
/*
 * 價格排版（填了優惠價才輸出）：上排「標籤＋劃掉的原價＋優惠價」，下排倒數＋優惠文字。
 * 截止後（html 由 sale.js 或伺服器加 is-expired）只顯示原價，標籤與倒數都收起。
 */
.lws-mobile-bar .lws-mobile-bar__prices {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lws-mobile-bar .lws-sale__live {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.lws-mobile-bar .lws-sale__ended {
  display: none;
  font-weight: 700;
}
.lws-mobile-bar.is-expired .lws-sale__live,
.lws-mobile-bar.is-expired .lws-sale__count,
.lws-mobile-bar.is-expired .lws-sr-only {
  display: none;
}
.lws-mobile-bar.is-expired .lws-sale__ended {
  display: inline;
}
.lws-mobile-bar .lws-mobile-bar__tag {
  align-self: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-inverse);
  color: var(--accent-inverse-fg);
  font-size: var(--text-xs);
  font-weight: 700;
}
.lws-mobile-bar .lws-mobile-bar__tag strong {
  color: inherit;
}
.lws-mobile-bar .lws-sale__orig {
  color: var(--fg-inverse-muted);
  font-size: var(--text-sm);
}
.lws-mobile-bar .lws-sale__now {
  color: var(--accent-inverse);
  font-family: var(--font-display);
  font-weight: 700;
}
.lws-mobile-bar .lws-mobile-bar__sub {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}
/* 倒數在腳本沒執行（或已到期被清空）時是空的，不留空殼 */
.lws-mobile-bar .lws-sale__count {
  flex: none;
  color: var(--fg-inverse-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.lws-mobile-bar .lws-sale__count:empty {
  display: none;
}
.lws-mobile-bar .lws-mobile-bar__sub .lws-mobile-bar__promo {
  min-width: 0;
  font-size: var(--text-xs);
}
/* 給螢幕報讀的截止日說明，畫面上看不到 */
.lws-mobile-bar .lws-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (max-width: 767px) {
  /* .lws-mobile-bar.lws-mobile-bar：提高權重蓋過 Blocksy 對內容區塊子元素設的 max-width／margin，不用 !important */
  .lws-mobile-bar.lws-mobile-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--layout-z-sticky);
    display: flex;
    width: auto;
    max-width: none;
    margin: 0;
    height: calc(var(--layout-mobile-bar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    /* 左右留白與間距各縮一級，320 寬的手機第一行才放得下「優惠價＋倒數」 */
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }
  /*
   * 手機寬度放不下「原價＋優惠價」和「倒數＋折扣碼」各一行：劃掉的原價收起（方案卡上有），
   * 第一行改成「優惠價＋倒數」，第二行整行給折扣碼與複製鈕；按鈕縮一級。
   * 只套在有價格的排法（:has(.lws-mobile-bar__prices)），純文字的報名列不受影響。
   */
  .lws-mobile-bar .lws-mobile-bar__info:has(.lws-mobile-bar__prices) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-2);
  }
  .lws-mobile-bar .lws-mobile-bar__info:has(.lws-mobile-bar__prices) .lws-mobile-bar__sub {
    display: contents;
  }
  .lws-mobile-bar .lws-mobile-bar__info:has(.lws-mobile-bar__prices) .lws-mobile-bar__prices {
    grid-row: 1;
    grid-column: 1;
  }
  .lws-mobile-bar .lws-mobile-bar__info:has(.lws-mobile-bar__prices) .lws-sale__count {
    grid-row: 1;
    grid-column: 2;
  }
  .lws-mobile-bar .lws-mobile-bar__info:has(.lws-mobile-bar__prices) .lws-mobile-bar__promo {
    grid-row: 2;
    grid-column: 1 / -1;
  }
  .lws-mobile-bar .lws-sale__orig {
    display: none;
  }
  .lws-mobile-bar .lws-mobile-bar__btn {
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }
  .lws-mobile-bar .lws-sale__count {
    white-space: nowrap;
  }
  /* prettier-ignore */
  body:has(.lws-mobile-bar:not(.is-preview)) {
    padding-bottom: calc(var(--layout-mobile-bar) + env(safe-area-inset-bottom));
  }
  /*
   * 固定在底部的報名列會蓋住鍵盤焦點（Tab／表單送出後瀏覽器把畫面捲到底部元素）移到的畫面底部
   * 內容（WCAG 2.4.11）：body 底部留白只保護「捲到最底」，捲動定位（scrollIntoView、# 錨點、
   * 表單自動對焦）另外由 scroll-padding-bottom 保護，兩者高度算法相同
   */
  /* prettier-ignore */
  html:has(.lws-mobile-bar:not(.is-preview)) {
    scroll-padding-bottom: calc(var(--layout-mobile-bar) + env(safe-area-inset-bottom));
  }
}
/*
 * 桌機也顯示（desktop）：固定在畫面底部，內容限寬 --layout-content 並置中；
 * body 留白與 scroll-padding-bottom 在桌機也要加（手機的在上面的媒體查詢裡）。
 */
.lws-mobile-bar.lws-mobile-bar.is-desktop {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--layout-z-sticky);
  display: flex;
  width: auto;
  max-width: none;
  margin: 0;
  height: calc(var(--layout-mobile-bar) + env(safe-area-inset-bottom));
  padding-inline: max(var(--space-4), calc((100% - var(--layout-content)) / 2));
  padding-bottom: env(safe-area-inset-bottom);
}
/* prettier-ignore */
body:has(.lws-mobile-bar.is-desktop:not(.is-preview)) {
  padding-bottom: calc(var(--layout-mobile-bar) + env(safe-area-inset-bottom));
}
/* prettier-ignore */
html:has(.lws-mobile-bar.is-desktop:not(.is-preview)) {
  scroll-padding-bottom: calc(var(--layout-mobile-bar) + env(safe-area-inset-bottom));
}
/* 桌機也顯示的報名列在手機上：左右留白跟手機版一致（上面 is-desktop 的限寬留白排在後面，要在這裡蓋回來） */
@media (max-width: 767px) {
  .lws-mobile-bar.lws-mobile-bar.is-desktop {
    padding-inline: var(--space-3);
  }
}
/*
 * 捲過首屏才滑入（reveal）：sale.js 加上 is-armed 後才藏到畫面外，再依捲動位置切換 is-visible；
 * 腳本沒執行時沒有 is-armed，報名列直接顯示。減少動態效果時沒有過場，直接出現。
 */
.lws-mobile-bar.is-armed:not(.is-visible) {
  visibility: hidden;
  transform: translateY(100%);
}
@media (prefers-reduced-motion: no-preference) {
  .lws-mobile-bar.is-armed {
    transition:
      transform var(--duration-base) var(--ease-standard),
      visibility var(--duration-base) var(--ease-standard);
  }
}
.lws-mobile-bar.is-preview {
  position: static;
  display: flex;
  height: var(--layout-mobile-bar);
  max-width: var(--layout-card-single);
  margin-inline: auto;
  padding-bottom: 0;
}
.lws-mobile-bar-editor .lws-mobile-bar-editor__note {
  max-width: var(--layout-card-single);
  margin: 0 auto var(--space-2);
  font-size: var(--text-xs);
  text-align: center;
}