/**
 * FAM Auction Login Popup — front-end styles.
 * Enqueued only for guests, only on a running auction's single product
 * page (see fam_alp_should_load() in the main plugin file).
 *
 * 1.1.1: responsive/mobile pass — sizing, safe viewport handling, and
 * 16px form inputs (prevents iOS Safari's automatic zoom-on-focus).
 * No selectors, structure, or JS hooks changed here — visuals only.
 */
html.fam-alp-opened, body.fam-alp-opened { overflow: hidden; }
#fam-alp { display: none; }
#fam-alp {
	/* Theme tokens — change these to re-theme the whole popup in one place. */
	--fam-alp-accent: #e42313;
	--fam-alp-accent-hover: #c81d10;
	--fam-alp-accent-active: #ab170c;
	--fam-alp-accent-tint: #fde9e8;
	--fam-alp-accent-tint-border: #f7d6d4;
}
#fam-alp, #fam-alp * { box-sizing: border-box; }
#fam-alp .fam-alp-overlay {
	position: fixed; inset: 0; z-index: 100000; display: none;
	background: rgba(0,0,0,.55);
}
#fam-alp .fam-alp-wrapper {
	position: fixed; inset: 0; z-index: 100001; overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	pointer-events: none; display: flex; align-items: center; justify-content: center;
}
#fam-alp .fam-alp-region { padding: 20px; width: 100%; max-width: 590px; }
#fam-alp .fam-alp-popup { pointer-events: all; display: none; width: 100%; }
#fam-alp .fam-alp-inner {
	position: relative; background: #fff; color: #1a1a1a; border-radius: 10px;
	box-shadow: 0 11px 15px -7px rgba(24,53,62,.1), 0 24px 38px 3px rgba(24,53,62,.07), 0 9px 46px 8px rgba(24,53,62,.06);
	animation: fam-alp-fade-in .2s ease;
	max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#fam-alp.fam-alp-blocked .fam-alp-inner { pointer-events: none; }
#fam-alp .fam-alp-close {
	position: absolute; right: 6px; top: 2px; font-size: 24px; line-height: 1;
	cursor: pointer; color: #888;
	width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
}
#fam-alp .fam-alp-close:hover { color: #333; }
#fam-alp .fam-alp-header { padding: 20px 30px 0; }
#fam-alp .fam-alp-header h4 { margin: 0; font-size: 18px; word-break: break-word; }
#fam-alp .fam-alp-body { padding: 15px 30px 30px; }
#fam-alp .fam-alp-text { font-size: 14px; color: #555; margin: 0 0 18px; word-break: break-word; }
#fam-alp .fam-alp-field { margin: 0 0 16px; }
#fam-alp .fam-alp-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
#fam-alp .fam-alp-field input[type="text"],
#fam-alp .fam-alp-field input[type="email"],
#fam-alp .fam-alp-field input[type="password"] {
	width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px;
	/* 16px stops iOS Safari from auto-zooming the page when a field is focused. */
	font-size: 16px; box-sizing: border-box; -webkit-appearance: none; appearance: none;
}
#fam-alp .fam-alp-field input:focus {
	outline: none; border-color: var(--fam-alp-accent); box-shadow: 0 0 0 3px rgba(228,35,19,.13);
}
#fam-alp .fam-alp-field.fam-alp-inline {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
#fam-alp .fam-alp-checkbox { font-size: 13px; font-weight: 400; display: flex; gap: 6px; align-items: center; }
#fam-alp .fam-alp-checkbox input[type="checkbox"] { accent-color: var(--fam-alp-accent); width: 17px; height: 17px; }
#fam-alp a { color: var(--fam-alp-accent); text-decoration: none; font-size: 13px; }
#fam-alp a:hover { color: var(--fam-alp-accent-hover); }
#fam-alp .fam-alp-button-link { display: inline-block; margin-top: 4px; }
#fam-alp .fam-alp-submit {
	width: 100%; padding: 13px 12px; border: none; border-radius: 6px; background: var(--fam-alp-accent); color: #fff;
	font-size: 15px; font-weight: 600; cursor: pointer; min-height: 44px;
}

/* reCAPTCHA — login (sign-in) step only, inserted by fam-alp.js right
   before the submit button when the "Advanced Google reCAPTCHA" plugin
   is enabled for login. Empty/collapsed when not present. */
#fam-alp .fam-alp-recaptcha { margin: 0 0 16px; display: flex; justify-content: center; }
#fam-alp .fam-alp-recaptcha > div { max-width: 100%; }
#fam-alp .fam-alp-submit:hover { background: var(--fam-alp-accent-hover); }
#fam-alp .fam-alp-submit:active { background: var(--fam-alp-accent-active); }
#fam-alp .fam-alp-message { margin: 0 0 16px; padding: 10px 12px; border-radius: 6px; font-size: 13px; word-break: break-word; }
#fam-alp .fam-alp-message.error { background: #fdecea; color: #b3261e; }
#fam-alp .fam-alp-message.success { background: #eaf7ea; color: #1e7a1e; }
@keyframes fam-alp-fade-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Small phones / narrow viewports: tighten the popup so nothing crowds edges. */
@media (max-width: 480px) {
	#fam-alp .fam-alp-region { padding: 12px; max-width: 100%; }
	#fam-alp .fam-alp-inner { border-radius: 12px; max-height: 92vh; }
	#fam-alp .fam-alp-header { padding: 18px 20px 0; }
	#fam-alp .fam-alp-body { padding: 14px 20px 24px; }
	#fam-alp .fam-alp-header h4 { font-size: 17px; padding-right: 30px; }
}

/* Short viewports (landscape phones, or keyboard eating vertical space). */
@media (max-height: 480px) {
	#fam-alp .fam-alp-wrapper { align-items: flex-start; }
	#fam-alp .fam-alp-region { padding-top: 12px; padding-bottom: 12px; }
	#fam-alp .fam-alp-inner { max-height: 96vh; }
}

/**
 * ------------------------------------------------------------------
 * 1.4.0 — "Welcome back" login step: avatar/photo, section lead, and
 * an in-field password show/hide toggle. Purely visual — no selector
 * used by the JS logic (form submit, AJAX, close/back handlers) was
 * removed or renamed.
 * ------------------------------------------------------------------
 */
#fam-alp .fam-alp-header-plain { padding: 24px 30px 0; }

#fam-alp .fam-alp-welcome {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 26px 30px 22px; border-bottom: 1px solid #eee;
}
#fam-alp .fam-alp-avatar {
	flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%;
	overflow: hidden; border: 1px solid #eee; box-shadow: 0 1px 3px rgba(0,0,0,.08);
	display: flex; align-items: center; justify-content: center; background: #f5f2f4;
}
#fam-alp .fam-alp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#fam-alp .fam-alp-avatar-fallback { color: var(--fam-alp-accent); display: flex; }
#fam-alp .fam-alp-welcome-text { min-width: 0; padding-top: 2px; }
#fam-alp .fam-alp-welcome-text h4 {
	margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #1a1a1a;
	word-break: break-word; line-height: 1.25;
}
#fam-alp .fam-alp-welcome-email {
	display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
	font-size: 13px; color: #666; word-break: break-all;
}
#fam-alp .fam-alp-welcome-email svg { flex: 0 0 auto; color: #999; }
#fam-alp .fam-alp-not-you { margin: 0; font-size: 13px; color: #777; }
#fam-alp .fam-alp-not-you a { font-weight: 600; }
#fam-alp .fam-alp-identifier { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1a1a1a; word-break: break-all; }
#fam-alp .fam-alp-register-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }

#fam-alp .fam-alp-body-tight { padding: 22px 30px 28px; }

#fam-alp .fam-alp-section-lead {
	display: flex; align-items: flex-start; gap: 12px; margin: 0 0 20px;
}
#fam-alp .fam-alp-section-icon {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
	background: var(--fam-alp-accent-tint); color: var(--fam-alp-accent); display: flex; align-items: center; justify-content: center;
}
#fam-alp .fam-alp-section-lead h5 { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: #1a1a1a; }
#fam-alp .fam-alp-section-lead p { margin: 0; font-size: 13px; color: #888; }

#fam-alp .fam-alp-password-wrap { position: relative; display: block; }
#fam-alp .fam-alp-password-wrap input[type="password"],
#fam-alp .fam-alp-password-wrap input[type="text"] { padding-right: 44px; }
#fam-alp .fam-alp-toggle-password {
	position: absolute; top: 0; right: 2px; height: 100%; width: 40px;
	display: flex; align-items: center; justify-content: center;
	background: transparent; border: none; padding: 0; margin: 0;
	color: #909090; cursor: pointer;
}
#fam-alp .fam-alp-toggle-password:hover,
#fam-alp .fam-alp-toggle-password:focus-visible { color: var(--fam-alp-accent); }
#fam-alp .fam-alp-toggle-password:focus-visible { outline: 2px solid var(--fam-alp-accent); outline-offset: 2px; border-radius: 4px; }

#fam-alp .fam-alp-submit-accent { display: flex; align-items: center; justify-content: center; gap: 8px; }

#fam-alp .fam-alp-secure-note {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin: 16px 0 0; font-size: 12px; color: #9a9a9a;
}
#fam-alp .fam-alp-secure-note svg { flex: 0 0 auto; }

/**
 * Centered loading spinner, shown over the popup card whenever it is
 * "blocked" (i.e. an AJAX call or step transition is in progress). Toggled
 * purely via the existing #fam-alp.fam-alp-blocked class — no new JS hooks.
 */
#fam-alp .fam-alp-loader {
	position: absolute; inset: 0; z-index: 5; display: none;
	align-items: center; justify-content: center;
	background: rgba(255,255,255,.72); border-radius: inherit;
}
#fam-alp.fam-alp-blocked .fam-alp-loader { display: flex; }
#fam-alp .fam-alp-spinner {
	width: 34px; height: 34px; border-radius: 50%;
	border: 3px solid var(--fam-alp-accent-tint-border);
	border-top-color: var(--fam-alp-accent);
	animation: fam-alp-spin .7s linear infinite;
}
@keyframes fam-alp-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
	#fam-alp .fam-alp-header-plain { padding: 18px 20px 0; }
	#fam-alp .fam-alp-welcome { padding: 20px 20px 18px; gap: 12px; }
	#fam-alp .fam-alp-avatar { width: 54px; height: 54px; }
	#fam-alp .fam-alp-welcome-text h4 { font-size: 17px; }
	#fam-alp .fam-alp-body-tight { padding: 18px 20px 24px; }
}