/**
 * SBDR Birthday field (Revisions 4–5) — one horizontal row of Day / Month /
 * Year fields inside the <details> collapsible, stacking vertically on
 * narrow screens. Layout mechanics only; colors inherit from the theme.
 * Enqueued only where the field renders (My Account + checkout).
 */

.sbdr-birthday-field summary {
  cursor: pointer;
}

.sbdr-birthday-field summary .description {
  display: inline;
}

.sbdr-birthday-fields {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.sbdr-birthday-fields__group {
  display: flex;
  flex-direction: column;
}

.sbdr-birthday-fields #sbdr_birthday_day {
  max-width: 6em;
}

.sbdr-birthday-fields #sbdr_birthday_year {
  max-width: 8em;
}

/*
 * Month select (Revision 5): reserve room for the native dropdown chevron so
 * the 3-letter month label ("Aug", "May") never collides with it, with a
 * balanced left inset and a floor width that fits every month name.
 *
 * box-sizing: border-box (2026-07-19 fix — see CLAUDE.md / spec revision
 * note): the Day/Year inputs pick up border-box from a theme/WC-core reset
 * that targets `input`/`textarea` but not `select`, so #sbdr_birthday_month
 * was left on the UA-default content-box model for <select>. Under
 * content-box, the 3em of horizontal padding added by this rule is added
 * on top of the element's specified width/min-width rather than being
 * carved out of it, which grows the native menulist control's total
 * rendered box (width AND, on this control, height — the native
 * menulist widget recalculates its box together, not axis-independently)
 * beyond the Day/Year fields' box-border-box-computed size, breaking
 * vertical parity between the three fields. Pinning box-sizing here
 * confines the padding to the declared min-width, matching the Day/Year
 * inputs' box model and restoring the pre-Revision-5 height without
 * touching Day/Year sizing or removing the chevron-clearance padding.
 */
.sbdr-birthday-fields #sbdr_birthday_month {
  box-sizing: border-box;
  min-width: 6.5em;
  padding-right: 2.25em;
  padding-left: 0.75em;
}

/*
 * Invalid-field feedback (Revision 5): temporary outline + a subtle ~120ms
 * horizontal nudge on the invalid birthday fields only — added by birthday.js
 * from the fields' `invalid` events, removed on input / animation end.
 */
.sbdr-birthday-fields .sbdr-birthday-invalid {
  outline: 2px solid #b32d2e;
  outline-offset: 1px;
}

.sbdr-birthday-fields .sbdr-birthday-nudge {
  animation: sbdr-birthday-nudge 120ms ease-in-out;
}

@keyframes sbdr-birthday-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbdr-birthday-fields .sbdr-birthday-nudge {
    animation: none;
  }
}

.sbdr-birthday-clear-row {
  margin: 0.25rem 0 0;
}

.sbdr-birthday-clear {
  font-size: 0.85em;
  text-decoration: underline;
}

@media (width <= 480px) {
  .sbdr-birthday-fields {
    flex-direction: column;
    align-items: stretch;
  }

  .sbdr-birthday-fields #sbdr_birthday_day,
  .sbdr-birthday-fields #sbdr_birthday_year {
    max-width: none;
  }
}