/**
 * DataFirefly Social Connect — front-end styles
 * Buttons, layouts, checkout box and connected-accounts panel.
 */

.dfsc-wrap {
	margin: 1em 0;
	font-family: inherit;
}

/* Heading with divider ("ou continuer avec") */
.dfsc-heading {
	display: flex;
	align-items: center;
	text-align: center;
	gap: .75em;
	margin: 0 0 1em;
	color: #6b7280;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.dfsc-heading::before,
.dfsc-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

/* Button container */
.dfsc-buttons {
	display: flex;
	gap: .6em;
}
.dfsc-layout-stacked .dfsc-buttons { flex-direction: column; }
.dfsc-layout-inline  .dfsc-buttons { flex-direction: row; flex-wrap: wrap; }
.dfsc-layout-inline  .dfsc-btn      { flex: 1 1 0; min-width: 140px; }

/* Base button */
.dfsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: .7em 1.1em;
	font-size: .95em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.dfsc-btn:hover  { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.dfsc-btn:active { transform: translateY(0); }
.dfsc-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.dfsc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.dfsc-icon svg { width: 18px; height: 18px; display: block; }
.dfsc-label { white-space: nowrap; }

/* Shapes */
.dfsc-shape-rounded .dfsc-btn { border-radius: 8px; }
.dfsc-shape-pill    .dfsc-btn { border-radius: 999px; }
.dfsc-shape-square  .dfsc-btn { border-radius: 0; }

/* ---- FILLED style (brand colours) ---- */
.dfsc-style-filled .dfsc-btn-google {
	background: #fff;
	color: #3c4043;
	border-color: #dadce0;
}
.dfsc-style-filled .dfsc-btn-google:hover { background: #f7f8f8; }

.dfsc-style-filled .dfsc-btn-apple {
	background: #000;
	color: #fff;
}
.dfsc-style-filled .dfsc-btn-apple:hover { background: #1a1a1a; }

.dfsc-style-filled .dfsc-btn-facebook {
	background: #1877f2;
	color: #fff;
}
.dfsc-style-filled .dfsc-btn-facebook:hover { background: #166fe0; }

/* ---- OUTLINE style ---- */
.dfsc-style-outline .dfsc-btn {
	background: #fff;
	box-shadow: none;
}
.dfsc-style-outline .dfsc-btn-google   { color: #3c4043; border-color: #dadce0; }
.dfsc-style-outline .dfsc-btn-apple    { color: #000;    border-color: #d1d5db; }
.dfsc-style-outline .dfsc-btn-facebook { color: #1877f2; border-color: #1877f2; }
.dfsc-style-outline .dfsc-btn:hover    { background: #f9fafb; }

/* ---- MINIMAL (icon-leaning) style ---- */
.dfsc-style-minimal .dfsc-btn {
	background: #f3f4f6;
	color: #111827;
	box-shadow: none;
}
.dfsc-style-minimal .dfsc-btn-facebook .dfsc-icon { color: #1877f2; }
.dfsc-style-minimal .dfsc-btn:hover { background: #e5e7eb; }

/* Icon-only format */
.dfsc-wrap .dfsc-btn:not(:has(.dfsc-label)) { padding: .7em; width: 48px; }

/* Checkout box wrapper */
.dfsc-checkout-box {
	margin: 0 0 1.5em;
	padding: 1.1em 1.2em;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fafafa;
}
.dfsc-checkout-box .dfsc-wrap { margin: 0; }

/* ---- Connected-accounts panel (My Account) ---- */
.dfsc-account-panel {
	margin: 1.5em 0;
	padding: 1.25em 1.4em;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
}
.dfsc-account-panel h3 { margin: 0 0 1em; font-size: 1.05em; }
.dfsc-linked-list { list-style: none; margin: 0; padding: 0; }
.dfsc-linked-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .75em 0;
	border-bottom: 1px solid #f1f5f9;
}
.dfsc-linked-item:last-child { border-bottom: 0; }
.dfsc-linked-name {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-weight: 600;
}
.dfsc-linked-name svg { width: 18px; height: 18px; }
.dfsc-badge {
	display: inline-block;
	padding: .2em .7em;
	border-radius: 999px;
	font-size: .78em;
	font-weight: 600;
}
.dfsc-badge-ok { background: #dcfce7; color: #166534; }
.dfsc-unlink {
	margin-left: .8em;
	font-size: .85em;
	color: #b91c1c;
	text-decoration: none;
}
.dfsc-unlink:hover { text-decoration: underline; }
.dfsc-link-btn {
	font-size: .88em;
	font-weight: 600;
	padding: .4em 1em;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	text-decoration: none;
	color: #111827;
	background: #f9fafb;
}
.dfsc-link-btn:hover { background: #f3f4f6; }

/* Dark theme awareness for filled Google button on dark backgrounds */
@media (prefers-color-scheme: dark) {
	.dfsc-account-panel { background: #111827; border-color: #1f2937; }
	.dfsc-linked-item { border-color: #1f2937; }
}

/* ---- v1.1: additional providers ---- */

/* FILLED */
.dfsc-style-filled .dfsc-btn-microsoft {
	background: #fff;
	color: #3c4043;
	border-color: #dadce0;
}
.dfsc-style-filled .dfsc-btn-microsoft:hover { background: #f7f8f8; }

.dfsc-style-filled .dfsc-btn-linkedin {
	background: #0a66c2;
	color: #fff;
}
.dfsc-style-filled .dfsc-btn-linkedin:hover { background: #095bab; }

.dfsc-style-filled .dfsc-btn-x {
	background: #000;
	color: #fff;
}
.dfsc-style-filled .dfsc-btn-x:hover { background: #1a1a1a; }

/* OUTLINE */
.dfsc-style-outline .dfsc-btn-microsoft { color: #3c4043; border-color: #dadce0; }
.dfsc-style-outline .dfsc-btn-linkedin  { color: #0a66c2; border-color: #0a66c2; }
.dfsc-style-outline .dfsc-btn-x         { color: #000;    border-color: #d1d5db; }

/* MINIMAL */
.dfsc-style-minimal .dfsc-btn-linkedin .dfsc-icon { color: #0a66c2; }
.dfsc-style-minimal .dfsc-btn-x .dfsc-icon        { color: #000; }