.family-date-source { display: none !important; }
.family-date-widget { min-width: 0; width: 100%; }
.family-event-form-grid:has(.family-date-widget) { grid-template-columns: minmax(0, 1fr); }
.family-date-widget .family-date-parts { display: grid; grid-template-columns: minmax(60px, .7fr) minmax(120px, 1.6fr) minmax(85px, 1fr); gap: 10px; }
.family-date-widget .family-date-part-label { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; min-width: 0; color: #566152; font: 500 12px/1.4 'Readex Pro', sans-serif; text-transform: none; letter-spacing: normal; }
.family-date-widget .family-date-part-label > span { display: block; padding: 0; color: #566152 !important; font-size: 12px; font-weight: 500; }
.family-date-widget .family-date-parts :is(input.family-date-part, select.family-date-part) { display: block; width: 100%; min-width: 0; min-height: 48px; height: 48px; border: 1px solid #cfdacf; border-radius: 12px; background: #fffdf9; padding: 10px 12px; color: #213e2d; font: 500 16px/1.4 'Readex Pro', sans-serif; box-shadow: none; text-indent: 0; }
.family-date-widget .family-date-parts select.family-date-part { padding-right: 6px; cursor: pointer; appearance: auto; }
/* The older modal rules add calendar icons and left padding to every text field. */
:is(.family-onboarding-page, .family-event-page) .family-date-widget .family-date-parts .family-date-part { background: #fffdf9 !important; padding: 10px 12px !important; font-size: 16px !important; min-height: 48px; }
.family-date-widget .family-date-parts .family-date-part::placeholder { color: #a5ac9f; font-weight: 400; }
.family-date-widget .family-date-parts .family-date-part:focus { outline: 2px solid #2f7a56; outline-offset: 2px; border-color: #2f7a56; }
.family-date-widget .family-date-hint { display: block; font-size: 11px; line-height: 1.5; color: #71806b; margin-top: 9px; }
.family-date-widget .family-date-error { display: block; font-size: 12px; line-height: 1.5; color: #a33025; margin-top: 6px; }
.family-date-widget .family-date-error[hidden] { display: none; }
.family-date-widget .family-date-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.family-date-widget .family-date-shortcuts button { width: auto; min-height: 36px; border: 1px solid #d8e2cc; border-radius: 999px; background: #edf2e5; padding: 7px 14px; color: #2b573b; font: 500 12px/1.4 'Readex Pro', sans-serif; cursor: pointer; }
.family-date-widget .family-date-shortcuts button:hover { background: #e2ebd7; }
.family-date-widget .family-date-shortcuts button:focus-visible { outline: 3px solid #d6ac42; outline-offset: 2px; }
@media (max-width: 400px) {
    .family-date-widget .family-date-parts { grid-template-columns: minmax(50px, .65fr) minmax(102px, 1.5fr) minmax(74px, 1fr); gap: 7px; }
    :is(.family-onboarding-page, .family-event-page) .family-date-widget .family-date-parts .family-date-part { padding: 10px 8px !important; }
}