/* Accessible floating labels for Taymetic signup and password recovery. */
.tay-float-field { position: relative; width: 100%; min-width: 0; }
.tay-float-field > input { display: block; width: 100%; padding-top: 17px !important; padding-bottom: 6px !important; }
.tay-float-field > .tay-float-label {
  display: block !important; position: absolute !important;
  z-index: 1; left: 18px; top: 50%; width: calc(100% - 36px);
  transform: translateY(-50%); pointer-events: none;
  font-size: 15px; font-weight: 550; line-height: 1.3;
  color: #b8b8c0; transition: top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  clip: auto; clip-path: none;
}
.tay-float-field:focus-within > .tay-float-label,
.tay-float-field.has-value > .tay-float-label {
  top: 9px; transform: translateY(0); font-size: 11px; color: #9da9bc;
}
.tay-float-field:focus-within > .tay-float-label { color: #80baff; }
.tay-float-field.is-invalid > input,
.tay-float-field.is-invalid > input:focus { border-color: #e57480 !important; box-shadow: 0 0 0 1px rgba(229,116,128,.18) !important; }
.tay-float-field.is-invalid > .tay-float-label { color: #ff8b94 !important; }
.tay-email-invalid { margin: 4px 0 0; color: #ff8b94; font-size: 13px; line-height: 1.45; }
.tay-email-invalid[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .tay-float-field > .tay-float-label { transition: none; } }

/* Native birthday selectors: same floating-label pattern as the login inputs.
   The default option is visually hidden in the closed select to avoid showing
   "Monat" twice; accessible name and native list of options remain intact. */
.tay-float-select > select {
  display: block;
  width: 100%;
  padding-top: 17px !important;
  padding-bottom: 5px !important;
}
.tay-float-select:not(.has-value) > select { color: transparent !important; }
.tay-float-select > select > option { color: #f5f5f7; background: #1f1f1f; }
.tay-float-select > .tay-float-label {
  left: 13px;
  width: calc(100% - 42px);
  font-size: 14px;
}
.tay-float-select:focus-within > .tay-float-label,
.tay-float-select.has-value > .tay-float-label {
  top: 7px;
  font-size: 10px;
}
@media (max-width: 520px) {
  .tay-float-select > .tay-float-label { left: 10px; width: calc(100% - 30px); font-size: 13px; }
  .tay-float-select:focus-within > .tay-float-label,
  .tay-float-select.has-value > .tay-float-label { top: 6px; font-size: 10px; }
  .tay-float-select > select { padding-top: 16px !important; padding-bottom: 3px !important; }
}