.tt04 {
  background: #f0f1f1;
  padding: 0;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.tt04n {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 18px 22px;
  background: #fefefe;
  border-radius: 999px;
  margin: 14px;
  flex: 1;
  max-width: 480px;
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.12);
  font-size: 1em;
}
.tt04n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt04b {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  color: #d5dadd;
  transition:
    flex 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s;
}
.tt04b:hover {
  color: #9aa0a4;
}
/* Soft pink halo behind the active icon, top-left offset like the reference */
.tt04halo {
  position: absolute;
  top: 14%;
  left: 22%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fde4ec;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.tt04i {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt04l {
  position: relative;
  z-index: 2;
  font:
    800 15px/1 "Nunito",
    ui-sans-serif,
    system-ui;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #2dd4bf;
  /* Hidden until active — slides in to the right of the icon */
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s 0.1s,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt04n input:checked + .tt04b {
  flex: 2.6;
  color: #2dd4bf;
}
.tt04n input:checked + .tt04b .tt04halo {
  transform: scale(1);
}
.tt04n input:checked + .tt04b .tt04l {
  max-width: 200px;
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .tt04halo,
  .tt04l,
  .tt04b {
    transition: none;
  }
}