/* Date of birth: three boxes in the sign-in card's language (1.5px #D9D5E8
   frame, radius 9, 48px high, 16px text - 16px so iOS does not zoom the
   page when a box is focused; this question is answered on a phone).

   Specificity is (0,4,1) on the boxes on purpose: WooCommerce and the theme
   style `.woocommerce form .form-row input[type="text"]` at (0,3,1) with
   width:100% and their own padding, and a tie would be decided by source
   order, which we do not control. Measured against that rival in
   tests/measure-dob.js.                                                   */

.dotor-dob { display: block; margin-top: 6px; }

.dotor-dob .dotor-dob-hint {
	display: block;
	font-size: 14px;
	line-height: 20px;
	color: #5f5a7a;
	margin: 0 0 8px;
}

.dotor-dob .dotor-dob-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: flex-end;
}

.dotor-dob .dotor-dob-row .dotor-dob-item {
	display: flex;
	flex-direction: column;
	/* Shrinkable (never below 60px) so a 320px screen keeps all three on
	   one line instead of wrapping or scrolling; measured at 320. */
	flex: 0 1 84px;
	min-width: 60px;
	margin: 0;
	padding: 0;
}
.dotor-dob .dotor-dob-row .dotor-dob-item-y { flex-basis: 120px; min-width: 84px; }

.dotor-dob .dotor-dob-row .dotor-dob-item .dotor-dob-cap {
	display: block;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #211951;
	margin: 0 0 4px;
}

.dotor-dob .dotor-dob-row label.dotor-dob-item input.dotor-dob-box {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	min-height: 48px;
	margin: 0;
	padding: 0 12px;
	border: 1.5px solid #D9D5E8;
	border-radius: 9px;
	background: #fff;
	color: #211951;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	-moz-appearance: textfield;
	appearance: none;
	box-shadow: none;
}
.dotor-dob .dotor-dob-row label.dotor-dob-item input.dotor-dob-box:focus {
	outline: none;
	border-color: #211951;
	box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.22);
}

.dotor-dob.dotor-dob-invalid .dotor-dob-row label.dotor-dob-item input.dotor-dob-box {
	border-color: #b00020;
}
.dotor-dob .dotor-dob-msg {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: #b00020;
}
.dotor-dob .dotor-dob-msg[hidden] { display: none; }

/* The THWCFE input is kept in the form with its value - it is what posts -
   but off-screen rather than display:none, so anything that tests
   visibility still sees a field. Doubled class so a theme rule on
   input.input-text cannot put it back on screen.                          */
input.dotor-dob-store.dotor-dob-store {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
}