/* dba-course-registration v1.6.0 — sticky sidebar + bottom CTA bar.
 * Migrated from sen-xiao-fu-da-tutor-cta-sync/assets/css/sticky.css with three changes:
 *   1. CSS classes renamed sxfd-* → dba-* (component) / dba-sticky-* (body flags)
 *   2. Custom properties renamed --sxfd-* → --dba-cta-bar-*
 *   3. Layout-critical properties (position / transform / inset / z-index) on the
 *      bar are now written with selector specificity (0,2,1) AND `!important` so
 *      the Kadence theme's content rules — which load after this stylesheet —
 *      cannot override `position: fixed` and force the bar back into normal flow.
 *      v1.5.9 of this plugin shipped without this guard and the bar dropped into
 *      the document on production after Kadence's late content CSS loaded; this
 *      is the documented Step 0 fix from the v1.6.0 plan.
 *
 * Tokens mirror the live Kadence runtime + Tutor card observed values.
 * Sticky-sidebar offset aligns with the dba sidebar layout (top: 83px).
 */
:root {
  --dba-cta-bar-header-height: 67px;
  --dba-cta-bar-sticky-offset: calc(var(--dba-cta-bar-header-height) + 16px);
  --dba-cta-bar-tutor-gold: #e7b10a;
  --dba-cta-bar-tutor-gold-hover: #c2960a;
  --dba-cta-bar-olive: #5a6345;
  --dba-cta-bar-cream: #f4f3ed;
  --dba-cta-bar-orange: #ee9749;
  --dba-cta-bar-ink: #262626;
  --dba-cta-bar-slate: #4d4d4d;
  --dba-cta-bar-line: #cdcfd5;
  --dba-cta-bar-green-deep: #00603b;
}

/* Prevent horizontal scroll on mobile.
 * WC mini-cart drawer (.wc-block-components-drawer__screen-overlay) sits
 * outside #wrapper so the theme's overflow-x:clip doesn't catch it.
 * Use overflow-x: clip (not hidden) — clip doesn't create a scroll context
 * so position: sticky still works, and it doesn't trip mobile address-bar
 * collapse.
 */
@media (max-width: 960px) {
  html, body { overflow-x: clip; }
}

/* === Sticky sidebar (desktop + tablet portrait+) ===
 * Below 768px the sidebar flows normally — sticky on phones causes its
 * internal overflow:auto to fight page scroll, and the bar UX already
 * covers quick add-to-cart on phones.
 */
@media (min-width: 768px) {
  body.dba-sticky-sidebar-on .tutor-single-course-sidebar {
    position: sticky;
    top: var(--dba-cta-bar-sticky-offset);
    align-self: start;
    max-height: calc(100vh - var(--dba-cta-bar-sticky-offset) - 16px);
    overflow-y: auto;
  }
  body.dba-sticky-sidebar-on .tutor-single-course-sidebar::-webkit-scrollbar { width: 6px; }
  body.dba-sticky-sidebar-on .tutor-single-course-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
  }
}

/* === Bottom CTA bar ===
 * Layout-critical properties below use `body.dba-cta-bar-on .dba-cta-bar`
 * (specificity 0,2,1) + `!important` to defeat any theme rule that targets
 * `.site-container > *` or generic content layout selectors.
 */
body.dba-cta-bar-on .dba-cta-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 40 !important;
  transform: translateY(100%) !important;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -8px 24px -8px rgba(38, 38, 38, 0.18);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.dba-cta-bar-on .dba-cta-bar[data-dba-bar="visible"] {
  transform: translateY(0) !important;
}

.dba-cta-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px clamp(16px, 3vw, 32px);
}

/* Desktop variant — flex (not grid) so missing thumbnail / missing
 * marketing message / etc. don't leave empty columns. Three roles:
 *   thumb   (optional, fixed 56px)  flex: 0 0 56px
 *   meta    (title + sub-line)      flex: 1 1 auto, min-width: 0 (allow truncation)
 *   cta     (primary action)        flex: 0 0 auto (intrinsic width)
 */
.dba-cta-bar__desktop {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dba-cta-bar__mobile { display: none; }

.dba-cta-bar__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}
.dba-cta-bar__meta {
  flex: 1 1 auto;
  min-width: 0;
}
.dba-cta-bar__course {
  font-size: 16px;
  font-weight: 700;
  color: var(--dba-cta-bar-olive);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dba-cta-bar__sub {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 4px;
  font-size: 13px;
  color: var(--dba-cta-bar-slate);
}
.dba-cta-bar__date { color: var(--dba-cta-bar-ink); }
.dba-cta-bar__promo { color: var(--dba-cta-bar-orange); font-weight: 700; }

/* Price (desktop) — bolded and slightly larger so it leads the sub line.
 * Woo's get_price_html() emits .woocommerce-Price-amount + optional <del>
 * for sale strikethrough; let those keep their default Woo styling but
 * align them inline with our other sub spans. */
.dba-cta-bar__price {
  color: var(--dba-cta-bar-ink);
  font-weight: 700;
  font-size: 15px;
}
.dba-cta-bar__price del {
  color: var(--dba-cta-bar-slate);
  font-weight: 400;
  margin-left: 6px;
}
.dba-cta-bar__price ins {
  background: transparent;
  text-decoration: none;
}
.dba-cta-bar__price--free { color: var(--dba-cta-bar-green-deep); }

.dba-cta-bar__cta {
  flex: 0 0 auto;       /* desktop flex: never grow, never shrink */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dba-cta-bar-tutor-gold);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  padding: 10px 28px;
  min-height: 44px;     /* WCAG 2.5.5 target size */
  border-radius: 6px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s;
}
.dba-cta-bar__cta:hover { background: var(--dba-cta-bar-tutor-gold-hover); }

/* Mobile variant — 3-column pill: meta | price | CTA.
 * Price sits to the immediate left of the CTA so the buying signal
 * (price + action) stays visually grouped, while title + date occupy
 * the leftmost column.
 */
@media (max-width: 960px) {
  .dba-cta-bar__desktop { display: none; }
  .dba-cta-bar__mobile {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .dba-cta-bar__inner { padding: 10px 16px; }
  .dba-cta-bar__mobile-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1 1 0;
    min-width: 0;
  }
  .dba-cta-bar__mobile-course {
    font-size: 13px;
    font-weight: 700;
    color: var(--dba-cta-bar-olive);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dba-cta-bar__mobile-date {
    font-size: 11px;
    color: var(--dba-cta-bar-slate);
    margin-top: 2px;
  }
  .dba-cta-bar__mobile-price {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    font-size: 15px;
    font-weight: 700;
    color: var(--dba-cta-bar-ink);
    text-align: right;
  }
  .dba-cta-bar__mobile-price del {
    color: var(--dba-cta-bar-slate);
    font-weight: 400;
    font-size: 11px;
    margin-left: 0;
    order: -1;            /* Render strikethrough above the sale price */
  }
  .dba-cta-bar__mobile-price ins {
    background: transparent;
    text-decoration: none;
  }
  .dba-cta-bar__mobile-price .screen-reader-text { display: none; }
  .dba-cta-bar__mobile-price--free { color: var(--dba-cta-bar-green-deep); }
  .dba-cta-bar__cta--mobile {
    flex: 0 0 auto;
    max-width: 42vw;
    font-size: 14px;
    padding: 10px 16px;
    white-space: normal;
    text-align: center;
  }
}

/* Very narrow phones (≤360px): hide the strikethrough to save space.
 * Sale price + CTA still legible; del is decorative emphasis. */
@media (max-width: 360px) {
  .dba-cta-bar__mobile-price del { display: none; }
  .dba-cta-bar__mobile-course { font-size: 12px; }
  .dba-cta-bar__cta--mobile { padding: 10px 14px; font-size: 13px; }
}

/* Device gating via body class */
@media (min-width: 961px) {
  body.dba-cta-bar-device-mobile .dba-cta-bar { display: none !important; }
}
@media (max-width: 960px) {
  body.dba-cta-bar-device-pc .dba-cta-bar { display: none !important; }
}

/* ==========================================================================
 * v1.10.0 — Pre-sale (集資型預售) CTA bar variant.
 * Design contract: design/page-contracts/20260508-tutor-course-presale.md §4
 * ========================================================================== */

/* Wrapper modifier — slightly tinted bg signals pre-sale state */
.dba-cta-bar--pre_sale {
	background: linear-gradient(0deg, rgba(251, 233, 217, 0.08), rgba(251, 233, 217, 0.08)), #FFFFFF;
}

.dba-cta-bar__countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-variant-numeric: tabular-nums;
	font-size: 14px;
	font-weight: 600;
	color: #C8531A;
	margin-left: 6px;
}

.dba-cta-bar__countdown > span[data-role] {
	display: inline-block;
	min-width: 1ch;
	text-align: right;
	margin: 0 2px;
}

.dba-cta-bar__chip {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	margin-left: 6px;
}

.dba-cta-bar__chip--success {
	background: #E6F4EA;
	color: #2F855A;
	border: 1px solid #2F855A;
}

.dba-cta-bar__chip--muted {
	background: #F3F4F6;
	color: #9CA3AF;
	border: 1px solid #9CA3AF;
}

.dba-cta-bar__price--pre_sale {
	color: #B8422E;
	font-weight: 700;
}

.dba-cta-bar__price--muted {
	color: #9CA3AF;
}

.dba-cta-bar__cta--pre_sale {
	background: #B8422E;
	color: #FFFFFF;
}

.dba-cta-bar__cta--pre_sale:hover {
	background: #9C3923;
	color: #FFFFFF;
}

.dba-cta-bar__cta--disabled {
	background: #9CA3AF !important;
	color: #FFFFFF !important;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.85;
}

.dba-cta-bar__mobile-countdown {
	display: inline-flex;
	gap: 2px;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 600;
	color: #C8531A;
	font-variant-numeric: tabular-nums;
}

.dba-cta-bar__mobile-price--pre_sale {
	color: #B8422E;
	font-weight: 700;
}

.dba-cta-bar__mobile-price--muted {
	color: #9CA3AF;
}