/* =============================================================================
   TRUPOINT – Collection Method Card Selector  v4
   Strategy: JS restructures the DOM. CSS only styles our injected elements.
   We do NOT fight the theme's form layout — we work around it.
   ============================================================================= */

:root {
  --tp-teal:       #0B7B8C;
  --tp-teal-dark:  #096b7a;
  --tp-teal-light: #edf6f8;
  --tp-teal-mid:   #b8dde3;
  --tp-dark:       #1A2B35;
  --tp-muted:      #6B7280;
  --tp-border:     #e2e8ea;
  --tp-bg:         #f8fafb;
  --tp-r:          10px;
  --tp-ease:       0.18s ease;
}

/* ── Hide original WooCommerce variation table & qty/button inside form ──────
   JS will re-insert qty + button below our wrapper in the page flow          */
.tp-original-hidden {
  display: none !important;
}

/* ── Our full-width wrapper sits OUTSIDE the constrained form flex context ── */
#tp-product-actions {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 16px 0 0 !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

#tp-product-actions *,
#tp-product-actions *::before,
#tp-product-actions *::after {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

/* ── Section label ───────────────────────────────────────────────────────── */
.tp-section-lbl {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--tp-muted) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 10px !important;
}

/* ── Cards container ─────────────────────────────────────────────────────── */
.tp-cards-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

/* ── Individual card ─────────────────────────────────────────────────────── */
.tp-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border: 1.5px solid var(--tp-border) !important;
  border-radius: var(--tp-r) !important;
  cursor: pointer !important;
  background: #fff !important;
  transition: border-color var(--tp-ease), background var(--tp-ease), box-shadow var(--tp-ease) !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  width: 100% !important;
  min-width: 0 !important;
}

.tp-card:hover {
  border-color: var(--tp-teal-mid) !important;
  background: var(--tp-teal-light) !important;
}

.tp-card.is-selected {
  border-color: var(--tp-teal) !important;
  background: var(--tp-teal-light) !important;
  box-shadow: 0 2px 12px rgba(11,123,140,.12) !important;
}

.tp-card.is-disabled {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* ── Radio dot ───────────────────────────────────────────────────────────── */
.tp-card__dot {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  border: 2px solid var(--tp-border) !important;
  position: relative !important;
  transition: border-color var(--tp-ease) !important;
}

.tp-card__dot::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) scale(0) !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--tp-teal) !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1) !important;
}

.tp-card.is-selected .tp-card__dot {
  border-color: var(--tp-teal) !important;
}

.tp-card.is-selected .tp-card__dot::after {
  transform: translate(-50%,-50%) scale(1) !important;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.tp-card__body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.tp-card__name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tp-dark) !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: normal !important;
  display: block !important;
}

.tp-card__desc {
  font-size: 12px !important;
  color: var(--tp-muted) !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height .28s ease, opacity .2s ease !important;
  display: block !important;
}

.tp-card.is-selected .tp-card__desc {
  max-height: 80px !important;
  opacity: 1 !important;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.tp-badge {
  display: inline-block !important;
  padding: 1px 7px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
  vertical-align: middle !important;
  margin-left: 5px !important;
}

.tp-badge-v { background: #ede9fe !important; color: #5b21b6 !important; }
.tp-badge-c { background: #fef3c7 !important; color: #92400e !important; }

/* ── Price ───────────────────────────────────────────────────────────────── */
.tp-card__price {
  flex-shrink: 0 !important;
  min-width: 52px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--tp-dark) !important;
  text-align: right !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
}

/* ── Summary strip ───────────────────────────────────────────────────────── */
.tp-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--tp-bg) !important;
  border: 1.5px solid var(--tp-border) !important;
  border-radius: var(--tp-r) !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
}

.tp-summary__lbl {
  font-size: 13px !important;
  color: var(--tp-muted) !important;
  text-transform: none !important;
}

.tp-summary__price {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--tp-teal) !important;
  text-transform: none !important;
}

/* ── Quantity input ──────────────────────────────────────────────────────── */
.tp-qty-wrap {
  margin-bottom: 12px !important;
  width: 100% !important;
}

.tp-qty-wrap input {
  width: 100% !important;
  height: 48px !important;
  border: 1.5px solid var(--tp-border) !important;
  border-radius: var(--tp-r) !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--tp-dark) !important;
  background: #fff !important;
  padding: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: textfield !important;
  appearance: textfield !important;
  display: block !important;
}

/* ── CTA button ──────────────────────────────────────────────────────────── */
#tp-cta-btn {
  width: 100% !important;
  height: 54px !important;
  background: var(--tp-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--tp-r) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background var(--tp-ease) !important;
  font-family: inherit !important;
}

#tp-cta-btn:hover { background: var(--tp-teal-dark) !important; }
#tp-cta-btn:disabled { background: #9ca3af !important; cursor: not-allowed !important; }

@keyframes tp-pop {
  0%   { transform: scale(.8); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.tp-pop { animation: tp-pop .25s cubic-bezier(.34,1.56,.64,1) forwards; }