/* =================================================================
   Social Login Pro — Public styles
   Theme system with CSS variables. Default = Inherit theme.
   ================================================================= */

.slp-social-login {
	/* Default vars (Inherit theme — match WordPress theme typography/colours).
	   Each named theme below overrides these in a single block. */
	--slp-bg:        #ffffff;
	--slp-bg-hover:  #f9fafb;
	--slp-text:      #1f2937;
	--slp-border:    #d1d5db;
	--slp-divider:   #6b7280;
	--slp-radius:    6px;
	--slp-error-bg:  #fef2f2;
	--slp-error-fg:  #b91c1c;
	--slp-error-bd:  #fecaca;
	--slp-shadow:    0 1px 2px rgba(17, 24, 39, 0.06);
	--slp-shadow-h:  0 4px 12px rgba(17, 24, 39, 0.10);
	--slp-gap:       10px;
	--slp-pad-y:     10px;
	--slp-pad-x:     16px;
	--slp-fs:        0.95em;
	--slp-fw:        500;

	/* Always inherit the host theme's typography so the widget never feels
	   bolted-on. Sizes scale via em so they sit naturally next to the
	   surrounding form controls. */
	font-family: inherit;
	font-size: 1em;
	color: var(--slp-text);
	margin: 1.25em 0;
	box-sizing: border-box;
}

.slp-social-login *,
.slp-social-login *::before,
.slp-social-login *::after {
	box-sizing: border-box;
}

/* ── Inherit theme — explicit overrides for harmony ──────────────────────── */
.slp-theme-inherit {
	/* Inherit pulls colour from the host theme; we keep neutral defaults so
	   buttons remain visible even on themes that don't set body colour. */
	--slp-bg:       transparent;
	--slp-bg-hover: rgba(0, 0, 0, 0.04);
	--slp-text:     inherit;
	--slp-border:   currentColor;
	--slp-divider:  currentColor;
}
.slp-theme-inherit .slp-btn {
	border-color: rgba(0, 0, 0, 0.18);
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
.slp-theme-light {
	--slp-bg:       #ffffff;
	--slp-bg-hover: #f3f4f6;
	--slp-text:     #111827;
	--slp-border:   #e5e7eb;
	--slp-divider:  #6b7280;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
.slp-theme-dark {
	--slp-bg:       #1f2937;
	--slp-bg-hover: #2d3a4f;
	--slp-text:     #f9fafb;
	--slp-border:   #374151;
	--slp-divider:  #9ca3af;
	--slp-shadow:   0 1px 2px rgba(0, 0, 0, 0.4);
	--slp-shadow-h: 0 4px 12px rgba(0, 0, 0, 0.5);
	--slp-error-bg: #4c1d24;
	--slp-error-fg: #fca5a5;
	--slp-error-bd: #7f1d1d;
}

/* ── Professional theme ──────────────────────────────────────────────────── */
.slp-theme-professional {
	--slp-bg:       #ffffff;
	--slp-bg-hover: #f8fafc;
	--slp-text:     #0f172a;
	--slp-border:   #cbd5e1;
	--slp-divider:  #475569;
	--slp-radius:   4px;
	--slp-shadow:   inset 0 0 0 1px rgba(15, 23, 42, 0.04);
	--slp-shadow-h: 0 2px 6px rgba(15, 23, 42, 0.08);
	--slp-fw:       600;
}

/* ── Custom theme ────────────────────────────────────────────────────────── */
/* No declarations needed — user-set CSS variables come in via inline `style`. */

/* ── Divider ─────────────────────────────────────────────────────────────── */
.slp-divider {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin-bottom: 0.875em;
	color: var(--slp-divider);
	font-size: 0.85em;
	font-weight: 500;
	font-family: inherit;
}
.slp-divider::before,
.slp-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
}

/* ── Button group ────────────────────────────────────────────────────────── */
.slp-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--slp-gap);
}

/* ── Base button ─────────────────────────────────────────────────────────── */
.slp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625em;
	width: 100%;
	padding: var(--slp-pad-y) var(--slp-pad-x);
	background: var(--slp-bg);
	color: var(--slp-text);
	border: 1px solid var(--slp-border);
	border-radius: var(--slp-radius);
	box-shadow: var(--slp-shadow);
	font-family: inherit;
	font-size: var(--slp-fs);
	font-weight: var(--slp-fw);
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.slp-btn:hover,
.slp-btn:focus-visible {
	background: var(--slp-bg-hover);
	box-shadow: var(--slp-shadow-h);
	color: var(--slp-text);
	text-decoration: none;
	transform: translateY(-1px);
	outline: none;
}
.slp-btn:focus-visible {
	box-shadow: var(--slp-shadow-h), 0 0 0 3px rgba(99, 102, 241, 0.35);
}
.slp-btn:active {
	transform: translateY(0);
}

/* SVG logo sizing — flow with text size, never larger than the line. */
.slp-btn .slp-logo {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
}
.slp-btn-text { white-space: nowrap; }

/* Provider colour cues, expressed via SVG currentColor so themes can override. */
.slp-btn-facebook     .slp-logo { color: #1877F2; }
.slp-btn-github       .slp-logo { color: var(--slp-text); }
.slp-btn-linkedin     .slp-logo { color: #0A66C2; }
.slp-btn-twitter      .slp-logo { color: var(--slp-text); }
.slp-btn-apple        .slp-logo { color: var(--slp-text); }
.slp-btn-discord      .slp-logo { color: #5865F2; }
.slp-btn-twitch       .slp-logo { color: #9146FF; }
.slp-btn-reddit       .slp-logo { color: #FF4500; }
.slp-btn-gitlab       .slp-logo { /* multi-colour SVG, no override */ }
.slp-btn-yahoo        .slp-logo { color: #6001D2; }
.slp-btn-amazon       .slp-logo { color: #FF9900; }
.slp-btn-spotify      .slp-logo { color: #1DB954; }
.slp-btn-paypal       .slp-logo { color: #003087; }
.slp-btn-wordpresscom .slp-logo { color: #117AC9; }
.slp-btn-dropbox      .slp-logo { color: #0061FF; }
/* Google, Microsoft, Slack, GitLab logos are multi-colour fixed-fill SVGs. */

/* Dark theme — keep brand SVGs visible. */
.slp-theme-dark .slp-btn-github   .slp-logo,
.slp-theme-dark .slp-btn-twitter  .slp-logo,
.slp-theme-dark .slp-btn-apple    .slp-logo,
.slp-theme-dark .slp-btn-paypal   .slp-logo { color: #f9fafb; }

/* ── Button styles (corner radius variants) ──────────────────────────────── */
.slp-style-rounded .slp-btn { border-radius: var(--slp-radius); }
.slp-style-square  .slp-btn { border-radius: 0; }
.slp-style-pill    .slp-btn { border-radius: 999px; }

/* ── Sizes ───────────────────────────────────────────────────────────────── */
.slp-size-small  { --slp-fs: 0.825em; --slp-pad-y: 7px;  --slp-pad-x: 12px; }
.slp-size-medium { --slp-fs: 0.95em;  --slp-pad-y: 10px; --slp-pad-x: 16px; }
.slp-size-large  { --slp-fs: 1.05em;  --slp-pad-y: 13px; --slp-pad-x: 20px; }

/* ── Layout variants ─────────────────────────────────────────────────────── */
.slp-layout-stack .slp-buttons {
	flex-direction: column;
}
.slp-layout-grid .slp-buttons {
	flex-direction: row;
	flex-wrap: wrap;
}
.slp-layout-grid .slp-buttons .slp-btn {
	flex: 1 1 calc(50% - var(--slp-gap) / 2);
	min-width: 180px;
}
.slp-layout-inline .slp-buttons {
	flex-direction: row;
	flex-wrap: wrap;
}
.slp-layout-inline .slp-buttons .slp-btn {
	flex: 1 1 auto;
	width: auto;
}

/* On narrow viewports, grid + inline collapse to a single column. */
@media (max-width: 480px) {
	.slp-layout-grid .slp-buttons,
	.slp-layout-inline .slp-buttons {
		flex-direction: column;
	}
	.slp-layout-grid .slp-buttons .slp-btn,
	.slp-layout-inline .slp-buttons .slp-btn {
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
	}
}

/* ── Error banner ────────────────────────────────────────────────────────── */
.slp-error {
	margin-top: 0.75em;
	padding: 0.625em 0.875em;
	background: var(--slp-error-bg);
	color: var(--slp-error-fg);
	border: 1px solid var(--slp-error-bd);
	border-radius: var(--slp-radius);
	font-family: inherit;
	font-size: 0.875em;
	line-height: 1.45;
}

/* ── WooCommerce checkout notice ─────────────────────────────────────────── */
.slp-checkout-notice {
	background: var(--slp-bg, #f9fafb);
	color: var(--slp-text, #1f2937);
	border: 1px solid var(--slp-border, #e5e7eb);
	border-radius: var(--slp-radius, 8px);
	padding: 1em 1.25em;
	margin-bottom: 1.5em;
	font-family: inherit;
}
.slp-checkout-notice > p {
	margin: 0 0 0.625em;
	font-size: 0.95em;
}

/* ── WP login page touch-up ──────────────────────────────────────────────── */
#login .slp-social-login {
	margin: 1em 0 1.5em;
}
.slp-login-error {
	color: #b91c1c !important;
}

/* ── Reduced-motion respect ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.slp-btn { transition: none; }
	.slp-btn:hover, .slp-btn:active { transform: none; }
}