/* Social login buttons — scoped under .ch-sl-*, safe in any theme or page
   builder: no generic selectors (a, button), local box-sizing.
   Customisable from a theme with the --ch-sl-* variables below. */

.ch-sl-buttons {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	margin: 0 0 18px;
}
.ch-sl-buttons * { box-sizing: border-box; }

.ch-sl-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	height: var(--ch-sl-height, 44px);
	margin: 0;
	padding: 0 16px;
	border-radius: var(--ch-sl-radius, 6px);
	border: 1px solid var(--ch-sl-border, #DADCE0);
	background: var(--ch-sl-bg, #fff);
	color: var(--ch-sl-text, #3C4043);
	font-family: var(--ch-sl-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	font-size: var(--rmp-fs-body, 14px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s, box-shadow .15s;
}
/* a.ch-sl-btn: same weight as the usual theme "a:hover / a:visited" rules, declared
   later — the link colour of the theme never leaks into the button. */
a.ch-sl-btn:visited { color: var(--ch-sl-text, #3C4043); }
a.ch-sl-btn:hover,
a.ch-sl-btn:focus { background: var(--ch-sl-bg-hover, #F7F8F8); color: var(--ch-sl-text, #3C4043); text-decoration: none; }
.ch-sl-btn:focus  { outline: 2px solid #4285F4; outline-offset: 1px; }
.ch-sl-btn svg    { flex-shrink: 0; display: block; }
.ch-sl-btn span   { color: inherit; }

.ch-sl-btn--facebook.ch-sl-btn--style-official,
a.ch-sl-btn--facebook.ch-sl-btn--style-official:visited {
	background: #1877F2;
	border-color: #1877F2;
	color: #fff;
}
a.ch-sl-btn--facebook.ch-sl-btn--style-official:hover,
a.ch-sl-btn--facebook.ch-sl-btn--style-official:focus { background: #166FE5; color: #fff; }

.ch-sl-btn--apple.ch-sl-btn--style-official,
a.ch-sl-btn--apple.ch-sl-btn--style-official:visited {
	background: #000;
	border-color: #000;
	color: #fff;
}
a.ch-sl-btn--apple.ch-sl-btn--style-official:hover,
a.ch-sl-btn--apple.ch-sl-btn--style-official:focus { background: #1a1a1a; color: #fff; }

/* ── Layout ─────────────────────────────────────────────────── */
.ch-sl-buttons--inline {
	flex-direction: row;
	flex-wrap: wrap;
}
.ch-sl-buttons--inline .ch-sl-btn {
	width: auto;
	flex: 1 1 160px;
}

/* ── Shape ──────────────────────────────────────────────────── */
.ch-sl-btn--shape-square { border-radius: 4px; }
.ch-sl-btn--shape-rounded { border-radius: 6px; }
.ch-sl-btn--shape-pill { border-radius: 999px; }

/* ── Monochrome: every button in the same neutral style, only the
   coloured logo tells the providers apart ─────────────────────── */
.ch-sl-btn--style-mono {
	background: #fff;
	border-color: var(--ch-sl-border, #DADCE0);
	color: #3C4043;
}
a.ch-sl-btn--style-mono:hover { background: #F7F8F8; color: #3C4043; }

/* ── Outline: transparent background, border and text in the
   provider's brand colour ─────────────────────────────────────── */
.ch-sl-btn--style-outline {
	background: transparent;
}
.ch-sl-btn--google.ch-sl-btn--style-outline,
a.ch-sl-btn--google.ch-sl-btn--style-outline:visited {
	border: 1.5px solid #4285F4;
	color: #4285F4;
}
a.ch-sl-btn--google.ch-sl-btn--style-outline:hover { color: #4285F4; }
a.ch-sl-btn--google.ch-sl-btn--style-outline:hover { background: rgba(66,133,244,.06); }

.ch-sl-btn--facebook.ch-sl-btn--style-outline,
a.ch-sl-btn--facebook.ch-sl-btn--style-outline:visited {
	border: 1.5px solid #1877F2;
	color: #1877F2;
}
a.ch-sl-btn--facebook.ch-sl-btn--style-outline:hover { color: #1877F2; }
a.ch-sl-btn--facebook.ch-sl-btn--style-outline:hover { background: rgba(24,119,242,.06); }

.ch-sl-btn--apple.ch-sl-btn--style-outline,
a.ch-sl-btn--apple.ch-sl-btn--style-outline:visited {
	border: 1.5px solid #000;
	color: #000;
}
a.ch-sl-btn--apple.ch-sl-btn--style-outline:hover { color: #000; }
a.ch-sl-btn--apple.ch-sl-btn--style-outline:hover { background: rgba(0,0,0,.05); }

/* ── Logo-only mini buttons (quick login, small space) ────────── */
.ch-sl-icon-buttons {
	box-sizing: border-box;
	display: flex;
	gap: 10px;
}
.ch-sl-icon-buttons * { box-sizing: border-box; }

.ch-sl-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ch-sl-border, #DADCE0);
	background: var(--ch-sl-bg, #fff);
	transition: background-color .15s, border-color .15s;
}
.ch-sl-icon-btn:hover   { background: #F7F8F8; }
.ch-sl-icon-btn:focus   { outline: 2px solid #4285F4; outline-offset: 1px; }
.ch-sl-icon-btn svg     { flex-shrink: 0; display: block; }

/* Some themes underline every link of the content area with very specific selectors
   (e.g. ".entry-content a:not(.button)"): a button is never underlined. */
a.ch-sl-btn,
a.ch-sl-btn:hover,
a.ch-sl-btn:focus,
a.ch-sl-icon-btn { text-decoration: none !important; }