/* Custom overrides and enhancements for Instituto RA website */

/* Minimalistic style for testimonial slider dots inspired by Apple's design.
 * The actual button remains accessible (min 44×44 px), while the dot itself is drawn in a pseudo-element.
 * Active dot uses the clinic's accent color (var(--peach)). Inactive dots show a neutral outline.
 * Focus-visible state darkens the outline, aiding keyboard navigation visibility.
 */
.ti-dots .td {
  position: relative;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  padding: 0;
}
.ti-dots .td::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  margin: auto;
  /* Use a soft gray fill for inactive dots so they are visible on white backgrounds */
  background: var(--g4);
  border: none;
  transition: background-color .3s, border-color .3s;
}
.ti-dots .td.active::before {
  /* Active dot fills with the clinic accent color */
  background: var(--peach);
  border-color: var(--peach);
}
.ti-dots .td:focus-visible::before {
  border-color: var(--g2);
}