/* Prodigy Account sign-in panel on the practitioner portal.
 *
 * The panel is the directory plugin's own `ph-portal-panel` card, so it
 * inherits the native card (white, 1px #ececec border, 8px radius, 22px pad),
 * the purple heading (#4c255f), and the native input styling (38px tall, 1px
 * #d8d8d8 border, 4px radius). The primary "Continue with Prodigy Account"
 * button carries the native `ph-portal-button ph-portal-submit` classes, so it
 * inherits the native teal button (#00a38d, hover #008976, 36px, 4px, 700).
 *
 * This stylesheet therefore only lays out this panel's own bits (lead text,
 * field spacing, the OAuth button stack, the error region) and gives the Google
 * and Apple buttons a distinct-but-matching look: the SAME 36px height, 4px
 * radius and full width as the primary so the stack reads as one native panel,
 * but Google white-with-a-border and Apple dark per brand.
 *
 * Palette (native): teal #00a38d, hover #008976, headings #4c255f, input
 * borders #d8d8d8, card border #ececec.
 */

.pab-portal .pab-lead {
	margin: 0 0 16px;
	color: #66706f;
	font-size: .96em;
	line-height: 1.55;
}

.pab-portal .pab-field {
	margin: 0 0 14px;
}

.pab-portal .pab-field label {
	display: block;
	margin: 0 0 4px;
	color: #4f5656;
	font-weight: 700;
}

/* Inputs inherit the native .ph-portal-panel input rule (38px, #d8d8d8, 4px);
   we only guarantee the box model and full width in case the panel class is
   ever unavailable. */
.pab-portal .pab-field input {
	width: 100%;
	box-sizing: border-box;
}

.pab-portal .pab-submit-row {
	margin: 0 0 14px;
}

/* The primary button is native (ph-portal-submit). Its full-width behavior is
   the one thing the native class does not give (native submits are inline), so
   we make just this one full width to match the OAuth stack below it. */
.pab-portal .pab-submit-row .ph-portal-submit {
	width: 100%;
	height: 44px !important;
	min-height: 44px !important;
	line-height: 1 !important;
}

/* The OAuth stack: same height / radius / width as the primary so the three
   controls read as one native-style column. A clear gap separates it from the
   primary button above (margin-top), and 10px between Apple and Google. */
.pab-portal .pab-oauth {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0 !important;
}

/* The theme's button styles (uppercase, inflated height, top-aligned text) win
   over plain declarations, so the layout-critical properties are forced. This
   is what makes the OAuth buttons match the native primary: same 44px height,
   text truly vertically centered, normal (not uppercased) casing. */
.pab-portal .pab-btn-oauth {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 16px !important;
	border-radius: 4px !important;
	font-size: inherit !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.pab-portal .pab-btn-oauth:disabled {
	opacity: .6;
	cursor: default;
}

/* Google: white with a thin border, dark label (brand-neutral, distinct from
   the teal primary). */
.pab-portal .pab-btn-google {
	background: #ffffff;
	border: 1px solid #d8d8d8;
	color: #3c4043;
}

.pab-portal .pab-btn-google:hover,
.pab-portal .pab-btn-google:focus {
	background: #f7f7f7;
	border-color: #c8c8c8;
}

/* Apple: dark per brand. */
.pab-portal .pab-btn-apple {
	background: #111111;
	border: 1px solid #111111;
	color: #ffffff;
}

.pab-portal .pab-btn-apple:hover,
.pab-portal .pab-btn-apple:focus {
	background: #000000;
	border-color: #000000;
}

/* Apple logo mark inside the Apple button (inherits the white text color).
   Forced past the theme, which otherwise strips the gap. margin-top nudges the
   optical center of the mark to the text baseline. */
.pab-portal .pab-apple-logo {
	width: 14px !important;
	height: 17px !important;
	margin: -2px 8px 0 0 !important;
	flex: 0 0 auto !important;
	vertical-align: middle;
}

.pab-portal .pab-error {
	margin: 14px 0 0;
	min-height: 1em;
	color: #b32d2e;
}