/* Explicit birth-date selectors only; keep the browser's native calendar. */
input.hu-birthdate[type="date"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: 0 12px;
    appearance: auto;
    -webkit-appearance: auto;
}
.hu-registration-card input.hu-birthdate[type="date"] { height: 42px; line-height: 20px; }
.hu-personal-info .hu-personal-info__field input.hu-birthdate[type="date"] { height: 50px; padding: 0 14px; }
.hu-birthdate-admin-control { width: 25ch; max-width: 100%; min-width: 0; }
.form-table input.hu-birthdate[type="date"] { min-height: 30px; padding: 0 8px; }
input.hu-birthdate[type="date"]::-webkit-datetime-edit { padding: 0; }
input.hu-birthdate[type="date"]::-webkit-date-and-time-value { min-height: 0; text-align: left; }

/* iOS WebKit uses a value div inside the native date input. Bootstrap's
 * display:block defeats its native flex centering; restore that layout only
 * on iOS, without changing appearance or the native picker. */
@supports (-webkit-touch-callout: none) {
    input.hu-birthdate[type="date"] {
        display: flex;
        align-items: center;
        overflow: hidden;
    }

    /* Bootstrap also gives native dates a 34px line-height, unlike text. */
    input.form-control.hu-birthdate[type="date"] { padding: 6px 12px; line-height: 1.42857143; }
    /* Also override the theme's more specific mobile signup date rule. */
    .hu-registration-card input.hu-birthdate[type="date"],
    .hu-signup-page .hu-signup-field--birthdate input.hu-birthdate[type="date"] {
        padding: 10px 12px;
        line-height: 1.42857143;
    }
    .hu-personal-info .hu-personal-info__field input.hu-birthdate[type="date"] { padding: 12px 14px; line-height: 1.5; }
    .form-table input.hu-birthdate[type="date"] {
        height: 40px;
        min-height: 40px;
        padding: 0 12px;
        line-height: normal;
    }

    input.hu-birthdate[type="date"]::-webkit-date-and-time-value {
        flex: 1 1 0%;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        line-height: inherit;
    }

    /* WordPress makes the neighbouring text inputs full width at this point. */
    @media (max-width: 782px) {
        .form-table .hu-birthdate-admin-control { width: 100%; }
    }
}
.hu-birthdate-note { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.hu-birthdate-note[hidden] { display: none; }