/* =========================================================================
   GlobeMarket sign in / sign up. Figma: Sign In - Sign Up (559:5575) and
   Sign in: edge cases (559:5651). Also the checkout sign-in prompt.
   ========================================================================= */

/* ---------- Page shell: minimal header, subtle background, no footer ---------- */
.gm-auth-page { background: var(--gm-color-bg-subtle); }
.gm-auth-page .egs-site { min-height: calc(100vh - 80px); }
.gm-auth-header {
	display: flex; align-items: center;
	height: 80px; min-height: 60px; padding: 18px var(--gm-gutter);
	background: var(--gm-color-bg-raised);
	border-bottom: 1px solid #dfe1e7;
}

/* WooCommerce notices (e.g. "password reset") sit above the card, styled as Figma alerts. */
.gm-auth-page .woocommerce-notices-wrapper:not(:empty) { max-width: 544px; margin: 40px auto -48px; padding: 0 16px; box-sizing: content-box; }
.gm-auth-page .woocommerce-message, .gm-auth-page .woocommerce-error, .gm-auth-page .woocommerce-info {
	margin: 0 0 12px; padding: 14px 16px; list-style: none;
	border: 1px solid; border-radius: 12px; box-shadow: none;
	font-size: 14px; line-height: 20px; font-weight: 400;
}
.gm-auth-page .woocommerce-message { background: #ecfdf3; border-color: #a9efc5; color: #067647; }
.gm-auth-page .woocommerce-error   { background: #fef3f2; border-color: #fda29b; color: #b42318; }
.gm-auth-page .woocommerce-info    { background: #f2f4f7; border-color: #d5d9dc; color: #2f3137; }
.gm-auth-page .woocommerce-message::before, .gm-auth-page .woocommerce-error::before, .gm-auth-page .woocommerce-info::before { display: none; }

/* ---------- Layout ---------- */
.gm-auth { display: flex; justify-content: center; padding: 80px var(--gm-gutter); font-family: var(--gm-font-sans); }
.gm-auth__col { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 544px; }
.gm-step { width: 100%; }
.gm-step[hidden] { display: none; }
.gm-auth__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: 0; color: #2f3137; }

.gm-auth__card {
	display: flex; flex-direction: column;
	width: 100%; margin: 16px 0 0; padding: var(--gm-spacing-2xl);
	background: var(--gm-color-bg-raised);
	border-radius: var(--gm-radius-md);
	filter: drop-shadow(0 2px 2px rgba(17, 15, 21, .05));
}
.gm-auth__card--stack { gap: 20px; }
.gm-auth__card:not(.gm-auth__card--stack) > .gm-alert, .gm-auth__alert:not([hidden]) { margin-bottom: 20px; }
.gm-auth__form { display: flex; flex-direction: column; gap: 24px; }
.gm-auth__actions { display: flex; flex-direction: column; gap: 14px; }
.gm-auth__actions > [hidden] { display: none; }
.gm-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gm-auth__note { margin: 0; font-size: 14px; line-height: 20px; color: var(--gm-color-text-secondary); }

.gm-auth__privacy {
	margin-top: 16px; padding: 0; border-radius: 6px;
	font-size: 16px; line-height: 24px; font-weight: 600; color: #110f15;
	text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font;
}
.gm-auth__privacy:hover { color: var(--gm-color-action-secondary-default); }

/* "sam@… · Change" row and inline links (Figma 07) */
.gm-auth__who { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }
.gm-auth__who > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gm-color-text-muted); }
.gm-auth__link {
	padding: 0; border: 0; background: none; cursor: pointer;
	font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .1px; color: #0d1b2a;
	text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font;
	white-space: nowrap;
}
.gm-auth__link:hover { color: var(--gm-color-action-primary-default); }
.gm-auth__forgot { display: flex; justify-content: flex-end; }
.gm-auth__legal { margin: -8px 0 0; font-size: 12px; line-height: 16px; color: var(--gm-color-text-muted); }
.gm-auth__legal a { color: #0d1b2a; font-weight: 600; text-decoration: underline; }

/* ---------- Input (Figma Input, Size=Large) ---------- */
.gm-field { display: flex; flex-direction: column; gap: var(--gm-spacing-xs); width: 100%; }
.gm-field__label { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .1px; color: var(--gm-color-text-primary); }
.gm-field__input {
	width: 100%; height: 48px; margin: 0; padding: 0 var(--gm-spacing-lg);
	background: var(--gm-color-bg-surface);
	border: 1px solid var(--gm-color-border-default); border-radius: var(--gm-radius-md);
	box-shadow: none; outline: none;
	font-family: var(--gm-font-sans); font-size: 16px; line-height: 24px; font-weight: 400; color: var(--gm-color-text-primary);
	transition: border-color var(--gm-dur, .25s) ease, box-shadow var(--gm-dur, .25s) ease;
	-webkit-appearance: none; appearance: none;
}
.gm-field__input::placeholder { color: var(--gm-color-text-muted); opacity: 1; }
.gm-field__input:hover { border-color: var(--gm-color-border-strong); }
.gm-field__input:not(:placeholder-shown) { border-color: var(--gm-color-border-strong); }          /* Filled */
.gm-field__input:focus { border-color: var(--gm-color-border-focus); box-shadow: var(--gm-focus-ring); } /* Focus */
.gm-field.is-error .gm-field__input { border-color: var(--gm-color-border-danger); }              /* Error */
.gm-field.is-error .gm-field__input:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .2); }
.gm-field__input:disabled { background: var(--gm-color-bg-disabled); border-color: var(--gm-color-bg-disabled); cursor: not-allowed; }
.gm-field__input:disabled::placeholder { color: var(--gm-color-text-disabled); }
.gm-field__help { margin: 0; font-size: 12px; line-height: 20px; font-weight: 400; color: var(--gm-color-text-danger); }
.gm-field__help:empty { display: none; }

/* Honeypot */
.gm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Buttons (Figma Button, Size=Large: 56px) ---------- */
.gm-auth-btn {
	display: flex; align-items: center; justify-content: center; gap: var(--gm-spacing-sm);
	width: 100%; height: var(--gm-size-control-xl); padding: 0 var(--gm-spacing-xl);
	border: 0; border-radius: var(--gm-radius-md);
	font-family: var(--gm-font-sans); font-size: 18px; line-height: 20px; font-weight: 600; letter-spacing: .1px;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background-color var(--gm-dur-fast, .15s) ease, box-shadow var(--gm-dur, .25s) ease, transform var(--gm-dur-fast, .15s) ease;
}
.gm-auth-btn--primary { background: var(--gm-color-action-primary-default); color: var(--gm-color-action-primary-text); }
.gm-auth-btn--primary:hover { background: #f06f00; color: var(--gm-color-action-primary-text); box-shadow: 0 6px 16px rgba(255, 122, 0, .28); }
.gm-auth-btn--secondary { background: var(--gm-color-action-secondary-default); color: var(--gm-color-action-secondary-text); border: 1px solid var(--gm-color-border-strong); }
.gm-auth-btn--secondary:hover { background: #172a3d; color: var(--gm-color-action-secondary-text); }
.gm-auth-btn:active { transform: scale(.99); }
.gm-auth-btn:focus-visible, .gm-provider:focus-visible, .gm-auth__link:focus-visible, .gm-auth__privacy:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); }
.gm-auth-btn[disabled], .gm-auth-btn.is-busy {
	background: var(--gm-color-action-disabled-bg); color: var(--gm-color-action-disabled-text);
	border-color: transparent; box-shadow: none; transform: none; cursor: not-allowed;
}

/* ---------- "or" divider + Google / Apple ---------- */
.gm-auth__or { display: flex; align-items: center; padding-top: var(--gm-spacing-2xl); }
.gm-auth__or span { flex: 1; height: 0; border-top: 1px solid #dfe1e7; }
.gm-auth__or em { flex: none; width: 48px; padding: 0 16px; font-style: normal; font-size: 16px; line-height: 24px; color: #5b5d62; text-align: center; }
.gm-auth__providers { display: flex; flex-direction: column; gap: 14px; padding: var(--gm-spacing-2xl) 0 4px; } /* Figma card is 402px: 4px under the last provider */
.gm-provider {
	display: flex; align-items: center; justify-content: center; gap: var(--gm-spacing-md);
	width: 100%; height: 56px; padding: 0 11px;
	background: transparent; border: 1px solid #2f3137; border-radius: var(--gm-radius-md);
	font-family: var(--gm-font-sans); font-size: 16px; line-height: 24px; font-weight: 600; color: #110f15;
	text-decoration: none; cursor: pointer;
	transition: background-color var(--gm-dur, .25s) ease;
}
.gm-provider:hover { background: var(--gm-color-bg-subtle); color: #110f15; }
.gm-provider__ic { position: relative; width: 20px; height: 20px; flex: none; overflow: hidden; }
.gm-provider__ic img { position: absolute; left: 0; top: 0; max-width: none; }

/* ---------- Alerts (Figma 09 / 10 / 11 / 12) ---------- */
.gm-alert { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 16px; border: 1px solid; border-radius: 12px; font-size: 14px; line-height: 20px; }
.gm-alert p { margin: 0; }
.gm-alert__title { font-weight: 600; letter-spacing: .1px; }
.gm-alert--danger  { background: #fef3f2; border-color: #fda29b; color: #b42318; }
.gm-alert--success { background: #ecfdf3; border-color: #a9efc5; color: #067647; }
.gm-alert--neutral { background: #f2f4f7; border-color: #d5d9dc; color: #2f3137; }

/* Step change: a short fade so the card does not jump. */
.gm-js .gm-step:not([hidden]) { animation: gm-auth-in .3s var(--gm-ease, ease) both; }
@keyframes gm-auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Checkout prompt (before payment) ---------- */
.gm-checkout-signin {
	display: flex; flex-direction: column; gap: 12px;
	margin: 0 0 20px; padding: 20px;
	background: var(--gm-color-bg-subtle); border: 1px solid var(--gm-color-border-default); border-radius: var(--gm-radius-md);
	font-family: var(--gm-font-sans);
}
.gm-checkout-signin[hidden] { display: none; }
.gm-checkout-signin__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: #2f3137; }
.gm-checkout-signin__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--gm-color-text-secondary); }
.gm-checkout-signin__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } /* stacked, as Figma case 12 */
.gm-checkout-signin .gm-auth-btn { height: 48px; font-size: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.gm-auth { padding: 32px 16px 48px; }
	.gm-auth-header { height: 64px; }
	.gm-auth__card { padding: 20px; }
	.gm-auth__row { grid-template-columns: 1fr; }
	.gm-auth-page .woocommerce-notices-wrapper:not(:empty) { margin: 24px auto -16px; }
}
@media (prefers-reduced-motion: reduce) {
	.gm-js .gm-step:not([hidden]) { animation: none; }
	.gm-field__input, .gm-auth-btn, .gm-provider { transition: none; }
}

/* ---------- Show/hide password (QA-054; owner-approved addition to Figma Input) ---------- */
.gm-pw { position: relative; display: block; width: 100%; }
.gm-pw > .woocommerce-password-strength { margin-top: var(--gm-spacing-xs); } /* WooCommerce adds its meter right after the field (now inside the wrapper): keep the field's 4px gap. */
.gm-pw-wrap .gm-field__input[data-gm-pw] { padding-right: 52px; }
.gm-pw-wrap .gm-field__input::-ms-reveal, .gm-pw-wrap .gm-field__input::-ms-clear { display: none; } /* Edge's own eye: one control only. */
.gm-pw-toggle {
	position: absolute; top: 2px; right: 2px; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: 0; padding: 0;
	border: 0; border-radius: 10px; background: transparent;
	color: var(--gm-color-text-secondary); cursor: pointer;
	-webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.gm-pw-toggle:hover { background: var(--gm-color-bg-subtle); }
.gm-pw-toggle:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); }
.gm-pw-toggle__icon {
	display: block; width: 24px; height: 24px; background-color: currentColor;
	-webkit-mask: url("../images/gm/ic-visibility.svg") center / 24px 24px no-repeat;
	mask: url("../images/gm/ic-visibility.svg") center / 24px 24px no-repeat;
}
.gm-pw-toggle.is-shown .gm-pw-toggle__icon {
	-webkit-mask-image: url("../images/gm/ic-visibility-off.svg");
	mask-image: url("../images/gm/ic-visibility-off.svg");
}
@media (forced-colors: active) { .gm-pw-toggle__icon { background-color: ButtonText; } }