/**
 * Sign in with Apple button — Apple Human Interface Guidelines compliant.
 *
 * Two color variants (`--black`, `--white`) and two shapes (`--round` =
 * Apple's pill form, `--square` = 6pt radius rectangle). Style knobs
 * exposed as CSS custom properties so Elementor / Bricks controls can
 * recolour without server-side re-render. Min-height 44pt and 19pt
 * font-size match Apple's published button specs.
 */

.appress-apple-login-btn {
	--appress-apple-bg: #000000;
	--appress-apple-fg: #ffffff;
	--appress-apple-border-color: #000000;
	--appress-apple-border-width: 0;
	--appress-apple-radius: 22px;
	--appress-apple-padding-y: 0;
	--appress-apple-padding-x: 16px;
	--appress-apple-min-height: 44px;
	--appress-apple-font-size: 17px;
	--appress-apple-icon-size: 20px;
	--appress-apple-icon-gap: 8px;
	--appress-apple-width: auto;
	--appress-apple-min-width: 200px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--appress-apple-icon-gap);
	width: var(--appress-apple-width);
	min-width: var(--appress-apple-min-width);
	min-height: var(--appress-apple-min-height);
	padding: var(--appress-apple-padding-y) var(--appress-apple-padding-x);
	border: var(--appress-apple-border-width) solid var(--appress-apple-border-color);
	border-radius: var(--appress-apple-radius);
	background: var(--appress-apple-bg);
	color: var(--appress-apple-fg);
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
	font-size: var(--appress-apple-font-size);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.4px;
	cursor: pointer;
	transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* White variant — Apple HIG mandates a 1pt border so the button stays
   visible against light backgrounds. */
.appress-apple-login-btn--white {
	--appress-apple-bg: #ffffff;
	--appress-apple-fg: #000000;
	--appress-apple-border-color: #000000;
	--appress-apple-border-width: 1px;
}

/* Square shape — alternative pill that page builders sometimes prefer. */
.appress-apple-login-btn--square {
	--appress-apple-radius: 6px;
}

.appress-apple-login-btn:hover,
.appress-apple-login-btn:focus-visible {
	opacity: 0.92;
	outline: none;
}

.appress-apple-login-btn:active {
	opacity: 0.85;
}

.appress-apple-login-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.appress-apple-login-btn__icon {
	width: var(--appress-apple-icon-size);
	height: var(--appress-apple-icon-size);
	flex-shrink: 0;
	/* Nudge the Apple logo's optical centre — the SVG sits a touch
	   high relative to the cap-height of "Sign in with Apple". */
	margin-top: -2px;
}

.appress-apple-login-btn__label {
	white-space: nowrap;
}