/* ==========================================================================
   TDB Teacher Filter + Card v2.5 — Preply-inspired responsive redesign
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────────────── */
.tdf-wrap, .tdc-card {
  --tf-orange:        #FF6B1A;
  --tf-orange-dark:   #e0560c;
  --tf-orange-light:  #fff5f0;
  --tf-orange-glow:   rgba(255,107,26,0.15);
  --tf-orange-border: #ffd0b3;
  --tf-navy:          #1A3C8F;
  --tf-navy-dark:     #122b6a;
  --tf-navy-light:    #e8eefb;
  --tf-navy-glow:     rgba(26,60,143,0.18);
  --tf-blue-mid:      #b3c3ec;
  --tf-green:         #2E9E5B;
  --tf-green-light:   #e8f7ef;
  --tf-green-mid:     #9ddcba;
  --tf-ink:           #0d0d1a;
  --tf-ink-mid:       #3d3d55;
  --tf-ink-light:     #7878a0;
  --tf-ink-xlight:    #b0b0cc;
  --tf-surface:       #ffffff;
  --tf-raised:        #f4f5f9;
  --tf-border:        #e8eaf2;
  --tf-border-mid:    #d0d3e8;
  --tf-shadow-xs:     0 1px 3px rgba(13,13,26,0.06);
  --tf-shadow-sm:     0 2px 12px rgba(13,13,26,0.08);
  --tf-shadow-hover:  0 6px 24px rgba(255,107,26,0.13);
  --tf-r-sm: 8px; --tf-r-md: 12px; --tf-r-lg: 16px;
  --tf-r-xl: 20px; --tf-r-pill: 999px;
  --tf-font-head: 'Sora', system-ui, sans-serif;
  --tf-font-body: 'DM Sans', system-ui, sans-serif;
  --tf-dur: 140ms;
  --tf-ease: cubic-bezier(0.22,1,0.36,1);
}

.tdf-wrap *, .tdf-wrap *::before, .tdf-wrap *::after,
.tdc-card *, .tdc-card *::before, .tdc-card *::after { box-sizing: border-box; }
.tdf-wrap p,.tdf-wrap h1,.tdf-wrap h2,.tdf-wrap ul,
.tdc-card p,.tdc-card h3 { margin:0; padding:0; }

/* ══════════════════════════════════════════════════════════════════════════════
   WRAPPER + HEADER
   ══════════════════════════════════════════════════════════════════════════════ */

.tdf-wrap { font-family: var(--tf-font-body); max-width: 1000px; margin: 0 auto; }

.tdf-header { margin-bottom: 24px; }
.tdf-header__title { font-family: var(--tf-font-head); font-size: 28px; font-weight: 700; color: var(--tf-navy); letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 6px; }
.tdf-header__sub { font-size: 15px; color: var(--tf-ink-light); }
/* ══════════════════════════════════════════════════════════════════════════════
   FILTER — Mobile-first, responsive, clean modern design
   ══════════════════════════════════════════════════════════════════════════════ */

.tdf-wrap {
  font-family: var(--tf-font-body);
  max-width: 1060px;
  margin: 0 auto;
}

.tdf-header { margin-bottom: 24px; }
.tdf-header__title {
  font-family: var(--tf-font-head);
  font-size: 30px; font-weight: 700;
  color: var(--tf-navy); letter-spacing: -0.4px;
  line-height: 1.2; margin-bottom: 6px;
}
.tdf-header__sub { font-size: 15px; color: var(--tf-ink-light); }

/* ── Filter card wrapper ────────────────────────────────────────────────── */

.tdf-bar {
  background: #fff;
  border: 1.5px solid var(--tf-border-mid);
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(13,13,26,0.08);
  margin-bottom: 14px;
  overflow: visible;
  /* Desktop: single row with dividers */
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}

.tdf-bar__field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 18px;
  border-right: 1px solid var(--tf-border);
  position: relative;
  cursor: pointer;
  transition: background var(--tf-dur) ease;
  min-width: 0;
}
.tdf-bar__field:first-child { border-radius: 16px 0 0 16px; }
.tdf-bar__field:last-child  { border-right: none; border-radius: 0 16px 16px 0; }
.tdf-bar__field:hover       { background: var(--tf-raised) !important; }
.tdf-bar__field:focus-within { background: #fef9f6 !important; z-index: 2; }

.tdf-bar__label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--tf-ink-light); margin-bottom: 4px;
  display: block; pointer-events: none;
}

/* Subject input */
.tdf-bar__field--subject { overflow: visible; }

.tdf-bar__subject-input {
  border: none; outline: none; background: transparent;
  font-family: var(--tf-font-body);
  font-size: 15px; font-weight: 600; color: var(--tf-ink);
  padding: 0; width: 100%; cursor: text; line-height: 1.2;
}
.tdf-bar__subject-input::placeholder { color: var(--tf-ink-xlight); font-weight: 400; }

/* Subject dropdown */
.tdf-bar__subject-dropdown {
  position: absolute; top: calc(100% + 8px); left: -2px; right: -2px;
  background: #fff; border: 1.5px solid var(--tf-border-mid);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(13,13,26,0.14);
  z-index: 500; overflow: hidden;
}
.tdf-subject-dropdown__header {
  padding: 10px 16px 8px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.9px; text-transform: uppercase;
  color: var(--tf-ink-xlight); border-bottom: 1px solid var(--tf-border);
}
.tdf-bar__subject-list { max-height: 280px; overflow-y: auto; padding: 6px 0; }
.tdf-bar__subject-list::-webkit-scrollbar { width: 3px; }
.tdf-bar__subject-list::-webkit-scrollbar-thumb { background: var(--tf-border-mid); border-radius: 2px; }
.tdf-subject-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 14px; font-weight: 500; color: var(--tf-ink-mid);
  cursor: pointer; transition: background var(--tf-dur) ease;
  border: none; background: none; width: 100%; text-align: left;
}
.tdf-subject-option:hover { background: var(--tf-raised); color: var(--tf-ink); }
.tdf-subject-option svg   { color: var(--tf-ink-xlight); flex-shrink: 0; }

/* Price trigger button */
.tdf-bar__price-trigger {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 8px !important; background: none !important; border: none !important; outline: none !important;
  padding: 0 !important; font-family: var(--tf-font-body) !important;
  font-size: 15px !important; font-weight: 600 !important; color: var(--tf-ink) !important;
  cursor: pointer !important; width: 100% !important; text-align: left !important;
  box-shadow: none !important; border-radius: 0 !important;
  text-decoration: none !important;
}
.tdf-bar__price-trigger:hover,
.tdf-bar__price-trigger:focus,
.tdf-bar__price-trigger:active {
  background: none !important;
  background-color: transparent !important;
  color: var(--tf-ink) !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
}
.tdf-bar__price-trigger svg { color: var(--tf-ink-xlight) !important; flex-shrink: 0 !important; }
.tdf-bar__price-trigger[aria-expanded="true"] svg { transform: rotate(180deg) !important; }

/* Bar selects */
.tdf-bar__select-wrap { position: relative; }
.tdf-bar__select {
  width: 100%; appearance: none; -webkit-appearance: none;
  border: none; outline: none; background: transparent;
  font-family: var(--tf-font-body); font-size: 15px;
  font-weight: 600; color: var(--tf-ink); padding: 0 20px 0 0;
  cursor: pointer;
}
.tdf-bar__caret {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  pointer-events: none; color: var(--tf-ink-xlight);
}



/* ══════════════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════════
   PRICE PANEL — Variant 2 Dark (navy brand)
   ══════════════════════════════════════════════════════════════════════════ */

.tdf-price-panel {
  position: absolute; top: calc(100% + 10px); left: -2px;
  width: 300px; z-index: 400;
  background: #fff;
  border: 1.5px solid var(--tf-border-mid);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(13,13,26,0.12);
  overflow: hidden;
  padding: 20px;
}

/* Header — label + live price display */
.tdf-price-panel__top {
  background: var(--tf-navy);
  margin: -20px -20px 18px -20px;
  padding: 16px 20px;
}
.tdf-price-panel__title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px;
}

.tdf-price-panel__range-display {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0;
}
.tdf-price-panel__amount {
  font-family: var(--tf-font-head);
  font-size: 20px; font-weight: 700; color: #fff;
}
.tdf-price-panel__sep { font-size: 14px; color: rgba(255,255,255,0.4); }

.tdf-price-panel__hint {
  font-size: 11px; color: var(--tf-ink-xlight); text-align: center; margin-bottom: 6px;
}

/* Slider */
.tdf-price-slider-wrap {
  position: relative; height: 20px;
  margin: 10px 8px 10px; cursor: pointer;
  display: flex; align-items: center;
}

.tdf-price-track {
  position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 4px; background: var(--tf-border-mid); border-radius: 2px;
  pointer-events: none;
}

.tdf-price-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 4px;
  background: var(--tf-navy); border-radius: 2px;
  pointer-events: none;
}

.tdf-price-range {
  position: absolute !important; left: 0 !important; right: 0 !important; width: 100% !important;
  height: 100% !important; -webkit-appearance: none !important; appearance: none !important;
  background: transparent !important; pointer-events: none !important;
  outline: none !important; margin: 0 !important; padding: 0 !important;
  border: none !important; box-shadow: none !important;
}
.tdf-price-range--min { z-index: 3; }
.tdf-price-range--max { z-index: 4; }
.tdf-price-range--min.is-top { z-index: 5; }

/* Webkit thumb — !important to beat all theme overrides */
.tdf-price-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid #1A3C8F !important;
  pointer-events: all !important;
  cursor: grab !important;
  box-shadow: 0 2px 8px rgba(26,60,143,0.30) !important;
  transition: transform 0.12s ease !important;
  margin-top: -8px !important;
}
.tdf-price-range::-webkit-slider-thumb:hover {
  transform: scale(1.2) !important;
  border-color: #122b6a !important;
  background: #f0f4ff !important;
}
.tdf-price-range::-webkit-slider-thumb:active {
  cursor: grabbing !important;
  border-color: #FF6B1A !important;
  transform: scale(1.1) !important;
}

/* Firefox thumb */
.tdf-price-range::-moz-range-thumb {
  width: 20px !important; height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid #1A3C8F !important;
  pointer-events: all !important;
  cursor: grab !important;
  box-shadow: 0 2px 8px rgba(26,60,143,0.30) !important;
  -moz-appearance: none !important;
}
.tdf-price-range::-moz-range-track {
  background: transparent !important;
  border: none !important;
  height: 4px !important;
}

/* Webkit slider track */
.tdf-price-range::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none !important;
  height: 4px !important;
}

/* Live range display */
.tdf-price-range-display { display: none; }

/* Preset pills — hidden */
.tdf-price-presets { display: none !important; }
.tdf-price-preset  { display: none !important; }

/* Min/Max inputs */
.tdf-price-inputs {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}

.tdf-price-input-group { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tdf-price-input-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--tf-ink-xlight);
}

.tdf-price-input-box {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--tf-border-mid); border-radius: 8px;
  padding: 2px 10px; background: var(--tf-raised);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tdf-price-input-box:focus-within {
  border-color: var(--tf-navy);
  box-shadow: 0 0 0 3px var(--tf-navy-glow);
}

.tdf-price-currency { font-size: 11px; font-weight: 700; color: var(--tf-ink-xlight); flex-shrink: 0; }
.tdf-price-number {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--tf-font-body); font-size: 14px; font-weight: 600;
  color: var(--tf-ink); min-width: 0; padding: 0; width: 100%;
}
.tdf-price-number::-webkit-inner-spin-button,
.tdf-price-number::-webkit-outer-spin-button { -webkit-appearance: none; }

.tdf-price-sep { font-size: 14px; color: var(--tf-ink-xlight); flex-shrink: 0; padding-bottom: 0; }

/* Footer: Reset + Apply */
.tdf-price-footer {
  display: flex; gap: 8px; margin-top: 4px;
}

.tdf-price-reset {
  flex: 1 !important; padding: 10px !important; background: transparent !important;
  color: var(--tf-ink-mid) !important; border: 1.5px solid var(--tf-border-mid) !important;
  border-radius: 8px !important; font-family: var(--tf-font-body) !important;
  font-size: 13px !important; cursor: pointer !important; transition: all 0.15s !important;
  box-shadow: none !important; line-height: 1 !important; font-weight: 500 !important;
}
.tdf-price-reset:hover {
  border-color: var(--tf-navy) !important; color: var(--tf-navy) !important;
  background: var(--tf-navy-light) !important;
}

.tdf-price-apply {
  flex: 2 !important; padding: 10px !important;
  background: var(--tf-navy) !important; color: #fff !important;
  border: none !important; border-radius: 8px !important;
  font-family: var(--tf-font-body) !important;
  font-size: 13px !important; font-weight: 600 !important;
  cursor: pointer !important; transition: background 0.15s !important;
  box-shadow: none !important; line-height: 1 !important;
}
.tdf-price-apply:hover { background: var(--tf-navy-dark) !important; }


   /* ROW 2 — Curriculum, Language, Sort, Search + Button all on one line
   ══════════════════════════════════════════════════════════════════════════ */

.tdf-row2 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

/* Pill fields — compact, auto-width, no stretching */
.tdf-row2__field {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #fff !important;
  border: 1.5px solid var(--tf-border-mid) !important;
  border-radius: 999px !important;
  padding: 7px 13px !important;
  transition: border-color 0.15s !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
}
.tdf-row2__field:hover,
.tdf-row2__field:focus-within {
  border-color: var(--tf-navy) !important;
}

.tdf-row2__label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--tf-ink-mid) !important;
  flex-shrink: 0 !important;
}

.tdf-row2__select-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.tdf-row2__select {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: var(--tf-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--tf-navy) !important;
  padding: 0 16px 0 0 !important;
  cursor: pointer !important;
  max-width: 110px !important;
}
.tdf-row2__caret {
  position: absolute !important; right: 0 !important; top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important; color: var(--tf-ink-xlight) !important;
}

/* Sort pushed right */
.tdf-row2__field--sort { margin-left: auto !important; }

/* Search — fills remaining space */
.tdf-row2__search {
  flex: 1 !important;
  min-width: 160px !important;
  max-width: 340px !important;
}
.tdf-row2__search-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fff !important;
  border: 1.5px solid var(--tf-border-mid) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.tdf-row2__search-inner svg { color: var(--tf-ink-xlight) !important; flex-shrink: 0 !important; }
.tdf-row2__search-inner:focus-within {
  border-color: var(--tf-navy) !important;
  box-shadow: 0 0 0 3px var(--tf-navy-glow) !important;
}
.tdf-row2__search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: var(--tf-font-body) !important;
  font-size: 13px !important;
  color: var(--tf-ink) !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.tdf-row2__search-input::placeholder { color: var(--tf-ink-xlight) !important; }

/* Search button */
.tdf-search-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: var(--tf-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 9px 22px !important;
  font-family: var(--tf-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease !important;
  line-height: 1 !important;
  outline: none !important;
  box-shadow: none !important;
}
.tdf-search-btn:hover { background: var(--tf-navy-dark) !important; }

/* Results bar */
.tdf-results-bar {
  display: flex; align-items: center;
  justify-content: space-between; padding: 14px 0;
}
.tdf-results-bar__count {
  font-family: var(--tf-font-head);
  font-size: 18px; font-weight: 700; color: var(--tf-ink);
}
.tdf-results-bar__reset {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; color: var(--tf-ink-xlight);
  font-family: var(--tf-font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: all 0.15s; outline: none;
}
.tdf-results-bar__reset:hover { color: var(--tf-orange); background: var(--tf-orange-light); }

.tdf-results { display: flex; flex-direction: column; gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first breakdown
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablet: 2-column grid */
@media (max-width: 860px) {
  .tdf-bar {
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
  }
  .tdf-bar__field:nth-child(1) { border-radius: 12px 0 0 0; }
  .tdf-bar__field:nth-child(2) { border-right: none; border-radius: 0 12px 0 0; }
  .tdf-bar__field:nth-child(3) { border-right: 1px solid var(--tf-border); border-radius: 0 0 0 12px; border-top: 1px solid var(--tf-border); }
  .tdf-bar__field:nth-child(4) { border-right: none; border-radius: 0 0 12px 0; border-top: 1px solid var(--tf-border); }
  .tdf-row2__field--sort { margin-left: 0; }
}

/* Mobile: single column stack */
@media (max-width: 560px) {
  .tdf-bar {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
  .tdf-bar__field {
    border-right: none;
    border-bottom: 1px solid var(--tf-border);
    border-radius: 0 !important;
  }
  .tdf-bar__field:first-child { border-radius: 12px 12px 0 0 !important; }
  .tdf-bar__field:last-child  { border-bottom: none; border-radius: 0 0 12px 12px !important; }

  /* Price panel full-width on mobile */
  .tdf-price-panel { width: calc(100vw - 40px); left: 0; right: 0; }

  .tdf-header__title { font-size: 24px; }
  .tdf-row2 { gap: 6px; }
  .tdf-row2__field--sort { order: 10; }
  .tdf-row2__search { min-width: 100%; order: 20; }
  .tdf-search-btn { width: 100% !important; padding: 12px 22px !important; }
}



/* ══════════════════════════════════════════════════════════════════════════════
   CARD v2.5 — White background, shadow, hover lift
   ══════════════════════════════════════════════════════════════════════════════ */

/* Card base — white background + shadow so it separates from page */
.tdc-card {
  background: #fff;
  border: 1.5px solid var(--tf-border);
  border-radius: var(--tf-r-lg);
  box-shadow: var(--tf-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--tf-dur) var(--tf-ease),
              border-color var(--tf-dur) ease,
              transform var(--tf-dur) var(--tf-ease);
}

.tdc-card:hover {
  box-shadow: var(--tf-shadow-hover);
  border-color: var(--tf-orange-border);
  transform: translateY(-2px);
}

/* Inner row: photo + body + right panel all horizontal */
.tdc-card__inner-row {
  display: flex; align-items: stretch; width: 100%;
}

/* Photo col */
.tdc-card__photo-col {
  flex-shrink: 0; padding: 18px 12px 18px 18px;
  display: flex; align-items: flex-start;
}

.tdc-card__photo-link { display: block; text-decoration: none; }

.tdc-card__photo {
  width: 112px; height: 112px; border-radius: 10px;
  object-fit: cover; object-position: center top;
  display: block; border: 1px solid var(--tf-border);
  transition: border-color var(--tf-dur) ease;
}

.tdc-card:hover .tdc-card__photo { border-color: var(--tf-orange-border); }

.tdc-card__photo--placeholder {
  width: 112px; height: 112px; border-radius: 10px;
  background: var(--tf-raised); border: 1px solid var(--tf-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--tf-ink-xlight);
}

/* Body */
.tdc-card__body {
  flex: 1; padding: 18px 10px 18px 0;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}

/* Top row: name/badge left, mobile price right */
.tdc-card__top-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px;
}

.tdc-card__name-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.tdc-card__name {
  font-family: var(--tf-font-head); font-size: 16px; font-weight: 700;
  color: var(--tf-ink); text-decoration: none; transition: color var(--tf-dur) ease;
}
.tdc-card__name:hover { color: var(--tf-navy); }

/* Mobile price — hidden on desktop */
.tdc-card__price-mobile { display: none; text-align: right; flex-shrink: 0; }
.tdc-price-val { font-family: var(--tf-font-head); font-size: 18px; font-weight: 700; color: var(--tf-ink); display: block; line-height: 1; }
.tdc-price-sub { font-size: 11px; color: var(--tf-ink-xlight); display: block; margin-top: 2px; }

/* Meta row */
.tdc-card__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-family: var(--tf-font-body); font-size: 12.5px; color: var(--tf-ink-light);
}
.tdc-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.tdc-meta-item svg { color: var(--tf-ink-xlight); flex-shrink: 0; }
.tdc-meta-sep { color: var(--tf-ink-xlight); font-size: 12px; }

/* Headline */
.tdc-card__headline {
  font-size: 13.5px; font-weight: 700; color: var(--tf-ink); line-height: 1.4;
}

/* Intro */
.tdc-card__intro {
  font-size: 13px; color: var(--tf-ink-mid); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.tdc-intro-more {
  display: inline; font-size: 13px; font-weight: 600;
  color: var(--tf-navy); text-decoration: underline; margin-left: 4px;
}
.tdc-intro-more:hover { color: var(--tf-orange); }

/* Pills row: curriculum + mode */
.tdc-card__pills { display: flex; flex-wrap: wrap; gap: 5px; }

.tdc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; border-radius: 6px;
  padding: 3px 9px; font-family: var(--tf-font-body);
}

.tdc-pill--curriculum { background: var(--tf-navy-light); color: var(--tf-navy); border: 1px solid var(--tf-blue-mid); }

.tdc-pill--mode { background: var(--tf-raised); color: var(--tf-ink-light); border: 1px solid var(--tf-border-mid); font-weight: 500; }
.tdc-pill__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tdc-pill--mode-online  .tdc-pill__dot { background: var(--tf-green); }
.tdc-pill--mode-offline .tdc-pill__dot { background: var(--tf-orange); }
.tdc-pill--mode-both    .tdc-pill__dot { background: var(--tf-navy); }

/* Right panel */
.tdc-card__right {
  width: 190px; flex-shrink: 0;
  padding: 18px 18px 18px 12px;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  border-left: 1px solid var(--tf-border);
}

/* Rate block */
.tdc-rate { margin-bottom: 14px; }
.tdc-rate__value { font-family: var(--tf-font-head); font-size: 24px; font-weight: 700; color: var(--tf-ink); display: block; line-height: 1; letter-spacing: -0.5px; }
.tdc-rate__sub { font-size: 12px; color: var(--tf-ink-light); display: block; margin-top: 3px; }
.tdc-rate__free { font-size: 13px; color: var(--tf-ink-light); display: block; }

/* Action buttons */
.tdc-card__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.tdc-card .tdc-btn,
.tdc-card .tdc-btn:visited {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 6px !important;
  padding: 10px 14px !important; border-radius: var(--tf-r-md) !important;
  font-family: var(--tf-font-body) !important; font-size: 13px !important;
  font-weight: 600 !important; text-decoration: none !important;
  cursor: pointer !important; width: 100% !important;
  transition: all var(--tf-dur) ease !important;
  line-height: 1 !important; box-shadow: none !important;
  outline: none !important; border: 1.5px solid transparent !important;
}

.tdc-card .tdc-btn--book,
.tdc-card .tdc-btn--book:visited {
  background: var(--tf-orange) !important; color: #fff !important;
  border-color: var(--tf-orange) !important;
}
.tdc-card .tdc-btn--book:hover {
  background: var(--tf-orange-dark) !important; border-color: var(--tf-orange-dark) !important;
  color: #fff !important; transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px var(--tf-orange-glow) !important;
}

.tdc-card .tdc-btn--view,
.tdc-card .tdc-btn--view:visited {
  background: var(--tf-surface) !important; color: var(--tf-ink-mid) !important;
  border-color: var(--tf-border-mid) !important;
}
.tdc-card .tdc-btn--view:hover {
  border-color: var(--tf-navy) !important; color: var(--tf-navy) !important;
  background: var(--tf-navy-light) !important; text-decoration: none !important;
}

/* Mobile CTA bar — hidden on desktop */
.tdc-card__mobile-cta { display: none; }

/* ── RESPONSIVE CARD OVERRIDES ─────────────────────────────────────────────── */

@media (max-width: 860px) {
  .tdc-card__photo { width: 96px; height: 96px; }
  .tdc-card__photo--placeholder { width: 96px; height: 96px; }
  .tdc-card__right { width: 160px; }
  .tdc-rate__value { font-size: 20px; }
}

@media (max-width: 640px) {

  /* Inner row stays flex — photo + body horizontal at top */
  .tdc-card__inner-row {
    flex-direction: row; /* keep photo + body side by side */
    align-items: flex-start;
  }

  /* Photo: smaller on mobile */
  .tdc-card__photo-col { padding: 14px 10px 12px 14px; }
  .tdc-card__photo, .tdc-card__photo--placeholder { width: 72px; height: 72px; border-radius: 8px; }

  /* Body: padding adjusted */
  .tdc-card__body { padding: 14px 12px 12px 0; }

  /* Show mobile price inline */
  .tdc-card__price-mobile { display: block; }

  /* Hide desktop right panel */
  .tdc-card__right { display: none; }

  /* Show mobile CTA bar at bottom of card */
  .tdc-card__mobile-cta {
    display: flex; flex-direction: column; gap: 7px;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--tf-border);
    width: 100%;
  }

  .tdc-card .tdc-btn { width: 100% !important; }
}

@media (max-width: 380px) {
  .tdc-card__photo { width: 58px; height: 58px; }
  .tdc-card__name  { font-size: 14px; }
  .tdc-price-val   { font-size: 15px; }
}

/* ── TARGETED OVERRIDES — beat theme on price inputs + slider ── */

#tdf-price-min-input,
#tdf-price-max-input {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tf-ink) !important;
}

/* Kill grey native browser track line */
#tdf-price-min,
#tdf-price-max {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#tdf-price-min::-webkit-slider-runnable-track,
#tdf-price-max::-webkit-slider-runnable-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 4px !important;
}
#tdf-price-min::-moz-range-track,
#tdf-price-max::-moz-range-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}