/* == TDC FUNNEL BRAND OVERRIDES == */

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --tdc-primary:  #7C51A0;
  --tdc-gold:     #B99C56;
  --tdc-gold-alt: #C19D48;
  --tdc-bg:       #FFFFFF;
  --tdc-text:     #252C30;
  --tdc-light-bg: #F5F8F2;
  --tdc-muted:    #666666;
  --tdc-white:    #FFFFFF;
  --tdc-success:  #28a745;
  /* Task 11: #28a745 is 2.92:1 as text on --tdc-light-bg and 3.13:1 as the
     step-pill number badge's background (white text on top) -- both under
     WCAG AA. Only became reachable by this audit once the "done" step pills
     became clickable (Task 8R) and so counted as interactive elements; a
     purely decorative badge has a lower bar, an actionable one doesn't. A
     darker shade of the same green passes both uses. */
  --tdc-success-text: #1e7e34;
  --tdc-warning:  #E6A817;
  /* Task 16/16.5: cooling-off clause + other danger/urgent inline text. Same
     red already used by .tdc-myrv-hint-flash -- named for this generic use. */
  --text-danger:  #C0392B;

  --tdc-font: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --tdc-radius: 8px;
  --tdc-shadow: 0 4px 16px rgba(0,0,0,0.10);
  --tdc-shadow-lg: 0 8px 28px rgba(0,0,0,0.15);
}

/* == RESET & BASE == */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--tdc-font);
  color: var(--tdc-text);
  background: var(--tdc-bg);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tdc-font);
  font-weight: 700;
  color: var(--tdc-text);
}

img { max-width: 100%; height: auto; }

/* == STICKY NAV == */
.tdc-navbar {
  background: var(--tdc-primary);
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: var(--tdc-shadow);
  padding: 10px 0;
}
.tdc-navbar .navbar-brand img { height: 44px; }

.tdc-cart-badge { position: relative; }
.tdc-cart-badge .badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--tdc-gold);
  color: #000;
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* == HERO == */
.tdc-hero {
  background: linear-gradient(135deg, #5a3478 0%, var(--tdc-primary) 50%, #9b6bc4 100%);
  color: var(--tdc-white);
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tdc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="80" cy="20" r="40" fill="rgba(255,255,255,0.04)"/><circle cx="10" cy="80" r="30" fill="rgba(255,255,255,0.03)"/></svg>') center/cover no-repeat;
  pointer-events: none;
}
.tdc-hero h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--tdc-white);
  position: relative;
}
.tdc-hero .hero-sub {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  opacity: 0.88;
  margin-bottom: 2rem;
  position: relative;
}
.tdc-hero .hero-gold-line {
  display: inline-block;
  width: 60px;
  height: 3px;
  background: var(--tdc-gold);
  border-radius: 2px;
  margin: 0.5rem auto 1.5rem;
}

/* == TRUST BAR == */
.tdc-trust-bar {
  background: var(--tdc-bg);
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.tdc-trust-bar img {
  height: 52px;
  object-fit: contain;
}
.tdc-trust-stat {
  border-left: 2px solid #eee;
  padding-left: 1.5rem;
  margin-left: 1rem;
}

/* == SECTION TYPOGRAPHY == */
.tdc-section-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--tdc-primary);
  margin-bottom: 0.25rem;
}
.tdc-section-sub {
  color: var(--tdc-muted);
  font-size: 0.95rem;
  margin-bottom: 2.5rem;
}
.tdc-gold-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--tdc-gold);
  border-radius: 2px;
  margin: 0.5rem auto 1rem;
}

/* == BUTTONS == */
.btn-tdc-primary {
  background: var(--tdc-primary);
  color: var(--tdc-white);
  border: none;
  border-radius: var(--tdc-radius);
  font-family: var(--tdc-font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  transition: filter 0.15s, transform 0.1s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-tdc-primary:hover, .btn-tdc-primary:focus {
  /* re-assert background: Bootstrap's base .btn:hover resets it to transparent,
     which made the button turn fully white on hover (white text, no bg) */
  background: var(--tdc-primary);
  filter: brightness(1.12);
  color: var(--tdc-white);
  text-decoration: none;
}
.btn-tdc-primary:active { transform: scale(0.98); }

.btn-tdc-gold {
  background: var(--tdc-gold);
  color: #111;
  border: none;
  border-radius: var(--tdc-radius);
  font-family: var(--tdc-font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 28px;
  transition: filter 0.15s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-tdc-gold:hover, .btn-tdc-gold:focus { background: var(--tdc-gold); filter: brightness(1.1); color: #111; text-decoration: none; }

/* Secondary/outline action (e.g. modal Cancel). NOTE: this class was referenced in
   markup before it existed in CSS -- the button rendered invisible (transparent bg,
   no border) until hover. Every state is defined explicitly. */
.btn-tdc-outline {
  background: var(--tdc-white);
  color: var(--tdc-primary);
  border: 2px solid var(--tdc-primary);
  border-radius: var(--tdc-radius);
  font-family: var(--tdc-font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 26px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  display: inline-block;
}
.btn-tdc-outline:hover, .btn-tdc-outline:focus {
  background: var(--tdc-primary);
  color: var(--tdc-white);
  border-color: var(--tdc-primary);
  text-decoration: none;
}

/* Task 11: this used to be a SECOND .btn-tdc-outline definition -- same class
   name as the light-surface variant above, for the opposite (dark-surface)
   case. Later-in-file wins on equal specificity, so it silently overrode the
   light-surface one everywhere, including the confirm-modal Cancel button and
   the wizard's Back button, both on white surfaces: white text/border on a
   white modal/bar meant an invisible button in its default state, not just on
   hover. Renamed so both variants can coexist; only the 3 dark-surface CTAs
   below (all on .tdc-mlm-section/.tdc-cta-section/.tdc-hero backgrounds) use
   this one now. */
.btn-tdc-outline-light {
  /* Task 11: was fully transparent -- white text against the lightest point
     of .tdc-hero's diagonal gradient measures 3.97:1, under WCAG AA. A subtle
     dark scrim keeps the "outline" look while guaranteeing contrast
     regardless of which part of the gradient sits behind it. */
  background: rgba(0, 0, 0, 0.15);
  color: var(--tdc-white);
  border: 2px solid var(--tdc-white);
  border-radius: var(--tdc-radius);
  font-family: var(--tdc-font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 26px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-tdc-outline-light:hover, .btn-tdc-outline-light:focus {
  background: var(--tdc-white);
  color: var(--tdc-primary);
  text-decoration: none;
}

/* == PRODUCT CARDS == */
.tdc-product-card {
  border-radius: var(--tdc-radius);
  box-shadow: var(--tdc-shadow);
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  background: #fff;
  overflow: hidden;
  /* Cards in a row stretch to the tallest one; the body is a column so the CTA
     can be pushed to the bottom -- otherwise the buttons sit at different heights
     because product descriptions differ in length. */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tdc-product-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Badge strip: fixed height + vertical centring so cards with an extra badge (or
   the Malaysia Book of Records logo) do not push their title down relative to
   cards with three pills. This is what keeps every card's content -- and therefore
   every CTA -- on the same baseline in the desktop/laptop grid. */
.tdc-product-card .card-body > .mb-2:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 3.4rem;
}
/* Accreditation logo shown inline with the pill badges (Book of Records) */
.tdc-badge-logo {
  height: 30px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
/* the feature list absorbs the slack, so the CTA lands on the same baseline */
.tdc-product-card .card-body ul {
  flex: 1 1 auto;
}
.tdc-product-card .card-body .btn {
  margin-top: auto;
}
.tdc-product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--tdc-shadow-lg);
}
.tdc-product-card:focus {
  outline: 3px solid var(--tdc-gold);
  outline-offset: 2px;
}
.tdc-product-card .card-img-top {
  height: 220px;
  object-fit: contain;
  padding: 1.25rem;
  background: var(--tdc-light-bg);
  width: 100%;
}
.tdc-product-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--tdc-primary);
}
.tdc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ede7f6;
  color: #5e35b1;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 2px 1px;
}
.tdc-trust-badge.gold {
  background: #fff8e1;
  color: var(--tdc-gold-alt);
}

/* == CART BADGE ICON == */
.tdc-cart-icon-btn {
  position: relative;
  background: none;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: var(--tdc-radius);
  color: #fff;
  padding: 6px 12px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s;
}
.tdc-cart-icon-btn:hover { border-color: #fff; }

/* == CART DRAWER == */
.tdc-cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 400px;
  max-width: 95vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 32px rgba(0,0,0,0.18);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  border-radius: var(--tdc-radius) 0 0 var(--tdc-radius);
}
.tdc-cart-drawer.open { right: 0; }

.tdc-cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1099;
  backdrop-filter: blur(2px);
}
.tdc-cart-overlay.show { display: block; }

.tdc-cart-header {
  background: var(--tdc-primary);
  color: #fff;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--tdc-radius) 0 0 0;
}
.tdc-cart-header h5 { color: #fff; margin: 0; font-size: 1.05rem; }

.tdc-cart-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.tdc-cart-item img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--tdc-light-bg);
  border-radius: 6px;
  flex-shrink: 0;
}
.tdc-qty-btn {
  width: 28px;
  height: 28px;
  border: 1.5px solid #ddd;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: border-color 0.1s, background 0.1s;
}
.tdc-qty-btn:hover { border-color: var(--tdc-primary); background: #f3edf9; }

/* == FLOATING BUTTONS == */
.tdc-whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  z-index: 1050;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.tdc-whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,0.55);
  text-decoration: none;
}

/* == DEMO MODE RIBBON == */
.tdc-demo-ribbon {
  background: #ffc107;
  color: #000;
  text-align: center;
  font-family: var(--tdc-font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px;
  letter-spacing: 0.05em;
}

/* == FAQ ACCORDION == */
.tdc-faq .accordion-button {
  font-family: var(--tdc-font);
  font-weight: 600;
  color: var(--tdc-primary);
  background: var(--tdc-light-bg);
}
.tdc-faq .accordion-button:not(.collapsed) {
  background: var(--tdc-primary);
  color: #fff;
  box-shadow: none;
}
.tdc-faq .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}
.tdc-faq .en-answer {
  color: var(--tdc-muted);
  font-size: 0.88rem;
  font-style: italic;
  margin-top: 0.5rem;
  border-top: 1px dashed #ddd;
  padding-top: 0.5rem;
}

/* == TESTIMONIALS == */
.tdc-testimonial-card {
  border-radius: var(--tdc-radius);
  box-shadow: var(--tdc-shadow);
  border: none;
  padding: 1.5rem;
  background: #fff;
  height: 100%;
}
.tdc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tdc-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* == COUNTDOWN == */
.tdc-countdown-block {
  background: rgba(255,255,255,0.15);
  border-radius: var(--tdc-radius);
  padding: 12px 20px;
  min-width: 72px;
  text-align: center;
}
.tdc-countdown-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--tdc-white);
  line-height: 1;
  display: block;
}
.tdc-countdown-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.8);
  display: block;
  margin-top: 4px;
}

/* == BILINGUAL TOGGLE == */
/* BM is the default -- visible without JS. EN hidden until lang-en activated. */
[data-lang="en"] { display: none; }
body.lang-en [data-lang="en"] { display: revert; }
body.lang-en [data-lang="bm"] { display: none; }

/* Block-level language helpers */
.lang-en-block { display: none; }
body.lang-en .lang-en-block { display: block; }
body.lang-en .lang-bm-block { display: none; }

/* == WHY TDC CARDS == */
.tdc-why-card {
  border-radius: var(--tdc-radius);
  padding: 2rem 1.5rem;
  background: var(--tdc-light-bg);
  text-align: center;
  height: 100%;
  transition: box-shadow 0.2s;
}
.tdc-why-card:hover { box-shadow: var(--tdc-shadow); }
.tdc-why-icon {
  font-size: 2.5rem;
  color: var(--tdc-primary);
  margin-bottom: 1rem;
  display: block;
}

/* == MLM TEASER == */
.tdc-mlm-section {
  background: linear-gradient(135deg, #5a3478 0%, var(--tdc-primary) 100%);
  color: #fff;
  padding: 60px 0;
  text-align: center;
}
.tdc-mlm-section h2 { color: #fff; }

/* == FINAL CTA == */
.tdc-cta-section {
  background: linear-gradient(135deg, var(--tdc-primary) 0%, #9b6bc4 100%);
  color: #fff;
  padding: 70px 0;
  text-align: center;
}
.tdc-cta-section h2 { color: #fff; }

/* == FOOTER == */
.tdc-footer img { height: 48px; width: auto; }
.tdc-footer {
  background: var(--tdc-primary);
  color: rgba(255,255,255,0.85);
  padding: 50px 0 20px;
}
.tdc-footer h6 { color: #fff; font-weight: 700; margin-bottom: 1rem; }
/* Task 11: was rgba(255,255,255,0.75) -- 4.13:1 against the purple footer,
   under WCAG AA's 4.5:1. */
.tdc-footer a { color: rgba(255,255,255,0.92); text-decoration: none; transition: color 0.15s; }
.tdc-footer a:hover { color: #fff; }
.tdc-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: 2rem;
  padding-top: 1.25rem;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  text-align: center;
}
.tdc-social-icon {
  font-size: 1.4rem;
  transition: transform 0.2s, color 0.15s;
  display: inline-block;
}
/* Task 11: was color: var(--tdc-gold) -- gold-on-purple is ~2.25:1, well under
   WCAG AA, and actually WORSE than the default (unhovered) state. White
   matches .tdc-footer a:hover's own pattern and clears 4.5:1 comfortably. */
.tdc-social-icon:hover, .tdc-social-icon:focus { transform: translateY(-2px); color: #fff !important; }

/* == REGISTRATION FORM == */
.tdc-form-card {
  background: #fff;
  border-radius: var(--tdc-radius);
  box-shadow: var(--tdc-shadow-lg);
  padding: 2rem;
}
.tdc-form-card > img { height: 48px; width: auto; }
.tdc-form-card .form-label { font-weight: 600; font-size: 0.9rem; color: var(--tdc-text); }
/* Task 7: iOS Safari auto-zooms the page on focusing any input with a
   computed font-size below 16px -- pin it explicitly rather than relying on
   Bootstrap's current default. */
.tdc-form-card .form-control,
.tdc-form-card .form-select {
  font-size: 16px;
}
.tdc-form-card .form-control:focus,
.tdc-form-card .form-select:focus {
  border-color: var(--tdc-primary);
  box-shadow: 0 0 0 3px rgba(124,81,160,0.15);
}
.tdc-form-card .form-check-input:checked {
  background-color: var(--tdc-primary);
  border-color: var(--tdc-primary);
}

/* == TOAST CONTAINER == */
#toastContainer {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 2000;
  min-width: 280px;
  max-width: 360px;
}

/* == MOBILE FIRST RESPONSIVE == */
/* 360px — smallest target */
@media (max-width: 575px) {
  .tdc-hero { padding: 44px 0 36px; }
  .tdc-hero h1 { font-size: 1.6rem; }
  .tdc-product-card .card-img-top { height: 160px; }
  .tdc-cart-drawer { width: 100vw; max-width: 100vw; right: -100vw; border-radius: 0; }
  .tdc-form-card { padding: 1.25rem; }
  .tdc-whatsapp-float { bottom: 16px; right: 16px; width: 50px; height: 50px; }
}

/* Mobile product carousel */
@media (max-width: 767px) {
  .tdc-product-scroll {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tdc-product-scroll::-webkit-scrollbar { display: none; }
  .tdc-product-scroll .tdc-product-card {
    min-width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* Tablet grid */
@media (min-width: 768px) {
  .tdc-product-scroll {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    /* every grid row gets the same height (not just the tallest card per row),
       so with 5 cards laid out 3+2 the CTAs sit on one consistent baseline
       instead of stepping between rows */
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
}

/* Desktop grid */
@media (min-width: 1024px) {
  .tdc-product-scroll {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  .tdc-hero { padding: 100px 0 80px; }
}

/* == ACCESSIBILITY == */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

:focus-visible {
  outline: 3px solid var(--tdc-gold);
  outline-offset: 2px;
}

/* == PHASE 2 PART 1: REFERRER BANNER (Default.aspx) == */
.tdc-ref-banner {
  background: var(--tdc-light-bg);
  color: var(--tdc-text);
  padding: 8px 0;
  /* Task 16/16.6: bumped 1-2 steps from 0.85rem (Paul, more prominent chip);
     the rank badge has no fixed font-size of its own, so it scales with this. */
  font-size: 1.05rem;
  border-bottom: 1px solid #eee;
}
.tdc-rank-badge {
  background: var(--tdc-gold);
  color: #111;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
}

/* == ALERT PANELS (never javascript alert()) == */
.tdc-alert-panel {
  border-radius: var(--tdc-radius);
  padding: 14px 18px;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}
.tdc-alert-info    { background: #eef2fb; color: #2c4a7c; border: 1px solid #c9d8f2; }
.tdc-alert-warning  { background: #fdf3e2; color: #7a5a12; border: 1px solid #f2ddac; }
.tdc-alert-danger  { background: #fbe9e9; color: #7d2020; border: 1px solid #f1c2c2; }

/* == REGISTER WIZARD (Register.aspx / Task 4) == */
.tdc-wizard-topbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: var(--tdc-bg);
  box-shadow: var(--tdc-shadow);
}
.tdc-wizard-topbar img { height: 32px; width: auto; }
/* Task 16/16.6: bumped 1-2 steps from Bootstrap's "small" (~0.875rem) default
   on the parent span, same reasoning as .tdc-ref-banner above. Still fits on
   one line at 320px -- verified via the Task 7 device matrix (narrowest
   viewport tested). */
.tdc-wizard-ref-chip { font-size: 1.05rem; }
.tdc-wizard-ref-chip strong { color: var(--tdc-primary); }

.tdc-wizard-steps {
  background: var(--tdc-light-bg);
  border-top: 1px solid #eee;
  padding: 8px 0;
}
.tdc-step-list { max-width: 640px; margin: 0 auto; }
.tdc-step-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tdc-muted);
  font-size: 0.8rem;
  flex: 1;
  justify-content: center;
  /* Task 17/17.7: every pill in the row shares this exact height regardless of
     whether ITS OWN label wraps to one line or two (BM/ID wrap more than EN at
     this column width -- "Lokasi Anda" vs "Pilih Pakej"). Sized for two lines
     at this font-size/line-height (2 x 0.8rem x 1.2 = 1.92rem) plus a little
     breathing room. align-items:center (above) then centers the number badge
     AND the (1- or 2-line) label together within that fixed height, so every
     badge lands on the same horizontal band -- the row reads as one clean
     band instead of pills sitting at different heights. */
  min-height: 2.3rem;
}
.tdc-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ddd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.tdc-step-label {
  /* Explicit line-height so the min-height math above is predictable across
     browsers/fonts, instead of relying on the inherited default. */
  line-height: 1.2;
}
.tdc-step-item.tdc-step-active .tdc-step-num { background: var(--tdc-primary); }
.tdc-step-item.tdc-step-active { color: var(--tdc-primary); font-weight: 600; }
.tdc-step-item.tdc-step-done .tdc-step-num { background: var(--tdc-success-text); }
.tdc-step-item.tdc-step-done { color: var(--tdc-success-text); }
/* Task 8R: already-visited step pills are clickable (back-navigation only --
   goToStep() itself refuses to jump forward, this is just the visual cue). */
.tdc-step-item.tdc-step-clickable { cursor: pointer; touch-action: manipulation; }
.tdc-step-item.tdc-step-clickable:hover .tdc-step-num,
.tdc-step-item.tdc-step-clickable:focus-visible .tdc-step-num { filter: brightness(1.15); }
.tdc-step-item.tdc-step-clickable:focus-visible { outline: 2px solid var(--tdc-primary); outline-offset: 2px; border-radius: 4px; }

/* Bundle description "Read more" toggle -- brand color instead of Bootstrap blue */
.tdc-bundle-desc-toggle, .tdc-bundle-desc-toggle:hover, .tdc-bundle-desc-toggle:focus {
  color: var(--tdc-primary);
  text-decoration: underline;
}

.tdc-start-over-link {
  color: var(--tdc-muted);
  font-size: 0.78rem;
  text-decoration: underline;
  padding: 0;
}
.tdc-start-over-link:hover, .tdc-start-over-link:focus { color: var(--tdc-primary); }

.tdc-wizard-container {
  max-width: 860px;
  padding-top: 1.5rem;
  padding-bottom: 7rem; /* room for sticky bottom bar */
}
.tdc-wizard-h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--tdc-primary);
  margin-bottom: 1rem;
}

.tdc-pick-card {
  border: 2px solid #e5e5e5;
  border-radius: var(--tdc-radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--tdc-bg);
  height: 100%;
  touch-action: manipulation;
}
.tdc-pick-card:hover { border-color: var(--tdc-gold); }
.tdc-pick-card.tdc-pick-selected { border-color: var(--tdc-primary); background: #f7f2fb; }
.tdc-pick-card img { max-height: 90px; object-fit: contain; }
/* v1.2.0: the cards are keyboard-operable now (Enter/Space), so they need a visible focus. */
.tdc-pick-card:focus-visible { outline: 3px solid var(--tdc-gold); outline-offset: 2px; }

/* v1.2.0 step 2: "Buy Product" / "Build Income" choice above the package grid */
.tdc-intent-icon { font-size: 1.6rem; color: var(--tdc-primary); line-height: 1; }
.tdc-wizard-h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tdc-text);
  margin: 0 0 0.75rem;
}
/* Task 8.1: was a hard max-height clip that cut text mid-sentence -- line-clamp
   caps display at ~5 lines while the "Read more" toggle (added in JS only
   when content actually overflows) reveals the rest instead of truncating it. */
.tdc-bundle-desc {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tdc-bundle-desc.tdc-bundle-desc-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.tdc-bundle-desc p { margin: 0 0 0.4em; }

.tdc-default-strip {
  background: var(--tdc-light-bg);
  border-radius: var(--tdc-radius);
  padding: 12px;
}
.tdc-default-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--tdc-bg);
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  font-size: 0.8rem;
}
.tdc-default-chip img { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; background: var(--tdc-light-bg); }

.tdc-item-card {
  border: 1px solid #e5e5e5;
  border-radius: var(--tdc-radius);
  padding: 12px;
  height: 100%;
  text-align: center;
}
.tdc-item-img { max-height: 70px; object-fit: contain; margin-bottom: 6px; }
.tdc-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.tdc-stepper-val { min-width: 24px; font-weight: 700; }
/* Task 7: Bootstrap's .btn-sm is ~31px tall -- too small for a reliable touch
   target (WCAG/iOS guidance is >=44px) and prone to accidental double-tap zoom
   without touch-action. */
.tdc-stepper button {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

/* Task 8.6: no genuine HQ exterior photo exists in design-references/ (only a
   generic stock-style office interior shot) -- per the plan's own "no stock
   photos" fallback rule, this stays a clean address card (icon + text) rather
   than force-fitting an unrelated image. */
.tdc-hq-card {
  display: block;
  background: var(--tdc-light-bg);
  border: 1px solid #e5e5e5;
  border-left: 3px solid var(--tdc-gold);
  border-radius: var(--tdc-radius);
  overflow: hidden;
  padding: 0;
}
/* HQ exterior/team photo banner (cropped from tdchb.com about-page hero, 2026-08-11) */
.tdc-hq-photo {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.tdc-hq-addr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  margin-top: 4px;
}
.tdc-hq-card i {
  color: var(--tdc-gold);
  font-size: 1.2rem;
  line-height: 1;
  margin-top: 2px;
}

/* Task 16/16.1: Step 5's read-only country/zone/state recap next to the new
   Address/Postcode fields -- already captured in Step 1, shown here so the
   registrant sees the full destination without re-asking. */
.tdc-readonly-location {
  background: var(--tdc-light-bg);
  border-radius: var(--tdc-radius);
  padding: 12px 14px;
  font-size: 0.88rem;
  color: var(--tdc-muted);
}

/* Task 16/16.5: cooling-off block gains a live destination-address recap
   below the checkbox label, built from Step 5's address (or the self-collect
   office address when SELFCOLLECT). */
.tdc-coolingoff-destination {
  font-size: 0.85rem;
  color: var(--tdc-muted);
  margin-top: 4px;
  padding-left: 1.9rem; /* aligns under the checkbox label, not the box */
}

.tdc-wizard-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: var(--tdc-bg);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
  /* Task 7: iOS home-indicator / rounded-corner safe area -- without this the
     Teruskan button can sit under the gesture bar on notched iPhones. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tdc-wizard-bottombar #btnContinue,
.tdc-wizard-bottombar #btnBack {
  min-height: 44px;
  touch-action: manipulation;
}
.tdc-myrv-progress { padding-top: 10px; }
.tdc-myrv-bar-track {
  height: 10px;
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
}
.tdc-myrv-bar-fill {
  height: 100%;
  background: var(--tdc-primary);
  transition: width 0.2s ease;
}
/* D19 three-state band bar (Task 8.5): below threshold = neutral/purple
   (default, no extra class); >= threshold but < 100% = yellow ("can
   continue, but..."); exactly 100% = green ("perfect"). */
.tdc-myrv-progress.tdc-myrv-partial .tdc-myrv-bar-fill { background: var(--tdc-warning); }
.tdc-myrv-progress.tdc-myrv-partial .tdc-myrv-hint { color: var(--tdc-warning); font-weight: 600; }
.tdc-myrv-progress.tdc-myrv-full .tdc-myrv-bar-fill { background: var(--tdc-success); }
/* Task 11: text use reuses --tdc-success-text, not --tdc-success -- same
   under-threshold-as-text issue as the step pills above. */
.tdc-myrv-progress.tdc-myrv-full .tdc-myrv-hint { color: var(--tdc-success-text); font-weight: 600; }
.tdc-myrv-hint-flash { color: #c0392b !important; font-weight: 700; }

@media (max-width: 767.98px) {
  .tdc-step-label { display: none; }
  .tdc-wizard-container { padding-left: 1rem; padding-right: 1rem; }
}

/* -- D44: build version footer -------------------------------------------
   Deliberately quiet: this is for us, not a selling point. Muted, small, and
   centered so it reads as a build stamp rather than page content. Kept out of
   the normal flow's way with a small top margin so it never crowds a CTA.      */
.tdc-version-footer {
  text-align: center;
  font-size: 0.72rem;
  color: var(--tdc-muted, #666666);
  opacity: 0.75;
  padding: 0.75rem 0 1rem;
  margin-top: 1rem;
  letter-spacing: 0.02em;
}

/* == v1.2.0: footer office blocks (Paul CR 2026-09-25) == */
.tdc-footer-office {
  font-style: normal;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.tdc-footer-office strong { color: #fff; }

/* == v1.2.0: Terms of Use / Privacy Policy pages == */
.tdc-legal-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--tdc-bg);
  border-bottom: 1px solid #ececec;
}
/* The global `img { height: auto }` beats a height="32" attribute -- without this the
   logo renders at its full natural size and fills the header. */
.tdc-legal-top img { height: 32px; width: auto; }
.tdc-legal {
  max-width: 820px;
  padding-top: 1.75rem;
  padding-bottom: 2rem;
  color: var(--tdc-text);
  line-height: 1.7;
  /* Long unbroken strings (emails, addresses) must wrap on a 360px phone rather
     than push the page sideways. */
  overflow-wrap: anywhere;
}
.tdc-legal h1 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--tdc-primary);
  margin-bottom: 0.25rem;
}
.tdc-legal-meta { color: var(--tdc-muted); font-size: 0.875rem; margin-bottom: 0.25rem; }
.tdc-legal-note { color: var(--tdc-muted); font-size: 0.875rem; font-style: italic; }
.tdc-legal-contents {
  background: var(--tdc-light-bg);
  border-radius: var(--tdc-radius);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0 2rem;
}
.tdc-legal-contents h2 { font-weight: 700; margin-bottom: 0.5rem; }
.tdc-legal-contents li { margin: 0.2rem 0; font-size: 0.9rem; }
.tdc-legal-contents a { color: var(--tdc-primary); text-decoration: none; }
.tdc-legal-contents a:hover { text-decoration: underline; }
.tdc-legal h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tdc-primary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  /* the sticky header must not cover a heading reached through the contents list */
  scroll-margin-top: 72px;
}
.tdc-legal h3 { font-size: 1rem; font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.tdc-legal ul { padding-left: 1.25rem; }
.tdc-legal li { margin-bottom: 0.35rem; }
.tdc-legal a { color: var(--tdc-primary); }
.tdc-legal-bottom {
  border-top: 1px solid #ececec;
  padding: 1rem 0;
  color: var(--tdc-muted);
  text-align: center;
}