.twf-embed-results .twf-card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}

/* twf-embed.css */

/* hide horizontal scrollbar, keep scrolling */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE / Edge */
  scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}

/* breadcrumb link + current item color/transition */
.breadcrumb-text {
  color: var(--clr-primary-600);
  transition: color var(--transition);
}

/* reset list style & left margin for breadcrumb container */
.breadcrumb-list {
  list-style: none;
  margin-left: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Custom Tailwind-style utilities for your brand teal --- */

.bg-primary-600 {
  background-color: var(--clr-primary-600);
}

.bg-primary-700 {
  background-color: var(--clr-primary-700);
}

.text-primary-600 {
  color: var(--clr-primary-600);
}

.text-primary-700 {
  color: var(--clr-primary-700);
}

/* Hover variants */
.bg-primary-600:hover {
  background-color: var(--clr-primary-700);
}

/* Optional: lighter background */
.bg-primary-100 {
  background-color: var(--clr-primary-100);
}

/* Border utility */
.border-primary-600 {
  border-color: var(--clr-primary-600);
}

/* Brand teal background utilities */
.bg-teal-600 {
  background-color: var(--clr-primary-600);
}

.bg-teal-700 {
  background-color: var(--clr-primary-700);
}

/* Text color utilities */
.text-teal-600 {
  color: var(--clr-primary-600);
}

.text-teal-700 {
  color: var(--clr-primary-700);
}

/* Hover variants */
.bg-teal-600:hover {
  background-color: var(--clr-primary-700);
}

/* Optional lighter shade */
.bg-teal-100 {
  background-color: var(--clr-primary-100);
}

/* --- Runtime dual-range slider --- */

.twf-runtime-slider {
  width: 100%;
}

.twf-runtime-track-wrapper {
  position: relative;
  width: 100%;
  height: 24px; /* space for thumbs */
  margin-top: 0.5rem;
}

.twf-runtime-track,
.twf-runtime-range {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 9999px;
}

.twf-runtime-track {
  background-color: var(--clr-grey-300);
}

.twf-runtime-range {
  background-color: var(--clr-primary-600);
}

/* Base range inputs: overlayed, track hidden, only thumbs visible */
.twf-runtime-thumb-min,
.twf-runtime-thumb-max {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none; /* thumbs themselves will still be draggable */
  -webkit-appearance: none;
  appearance: none;
}

/* WebKit thumb */
.twf-runtime-thumb-min::-webkit-slider-thumb,
.twf-runtime-thumb-max::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid var(--clr-primary-600);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* WebKit track (hide) */
.twf-runtime-thumb-min::-webkit-slider-runnable-track,
.twf-runtime-thumb-max::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

/* Firefox */
.twf-runtime-thumb-min::-moz-range-thumb,
.twf-runtime-thumb-max::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid var(--clr-primary-600);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
}

.twf-runtime-thumb-min::-moz-range-track,
.twf-runtime-thumb-max::-moz-range-track {
  height: 4px;
  background: transparent;
}

/* Edge/IE (fallback) */
.twf-runtime-thumb-min::-ms-thumb,
.twf-runtime-thumb-max::-ms-thumb {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #fff;
  border: 2px solid var(--clr-primary-600);
}

/* Fine-tune thumb vertical alignment on WebKit (Chrome, Safari, Edge) */
.twf-runtime-thumb-min::-webkit-slider-thumb,
.twf-runtime-thumb-max::-webkit-slider-thumb {
  margin-top: -4px; /* move the thumb up slightly */
}

/* Optional: similar nudge for Firefox if needed */
.twf-runtime-thumb-min::-moz-range-thumb,
.twf-runtime-thumb-max::-moz-range-thumb {
  margin-top: -2px;
}

.twf-embed-results #rmgCopyListBtn {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}

.twf-generator-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .twf-generator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .twf-generator-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mb-5 {
  margin-bottom: 1.25rem; /* 20px — the standard Tailwind 5-spacing value */
}

.rounded-xl {
  border-radius: 0.75rem; /* 12px */
}

.twf-embed .btn-primary:hover,
.twf-embed .btn-primary:focus,
.twf-embed .btn-primary:active,
.twf-embed .btn-primary.active,
.twf-embed .open .dropdown-toggle.btn-primary {
  color: #000;
  background-color: #fff;
  border-color: #000;
}

.pt-8 {
  padding-top: 2rem; /* 32px */
}

.pb-8 {
  padding-bottom: 2rem; /* 32px */
}


.normal-case{
  text-transform: none;
}

.twf-embed .btn-secondary:hover,
.twf-embed .btn-secondary:focus{
    background-color: var(--clr-primary-600);
    color: #ffffff;
    border-color: var(--clr-primary-600);
    box-shadow: none;
}