/* ==========================================================================
   Auto Social Share Pro — front-end styles
   All colours/sizes are driven by CSS custom properties printed inline
   from the saved settings (see maybe_print_inline_css_vars()).
   ========================================================================== */

:root{
	--assp-bg: #2563eb;
	--assp-icon: #ffffff;
	--assp-hover-bg: #1d4ed8;
	--assp-hover-icon: #ffffff;
	--assp-border: #2563eb;
	--assp-radius: 8px;
	--assp-icon-size: 20px;
	--assp-btn-size: 44px;
	--assp-spacing: 10px;
}

.assp-wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--assp-spacing);
	margin: 16px 0;
}

.assp-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--assp-btn-size);
	height: var(--assp-btn-size);
	background: var(--assp-bg);
	color: var(--assp-icon);
	border: 1px solid var(--assp-border);
	border-radius: var(--assp-radius);
	font-size: var(--assp-icon-size);
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, transform .12s ease;
	cursor: pointer;
}

.assp-btn:hover,
.assp-btn:focus-visible{
	background: var(--assp-hover-bg);
	color: var(--assp-hover-icon);
	transform: translateY(-2px);
}

.assp-btn svg{ width: 1em; height: 1em; display: block; }

/* Layout: horizontal (default) */
.assp-layout-horizontal{ flex-direction: row; }

/* Layout: vertical */
.assp-layout-vertical{ flex-direction: column; align-items: flex-start; }

/* Layout: inline (small, sits inside paragraph copy) */
.assp-layout-inline{ display: inline-flex; margin: 0 6px; vertical-align: middle; }
.assp-layout-inline .assp-btn{ width: calc(var(--assp-btn-size) * .75); height: calc(var(--assp-btn-size) * .75); }

/* Layout: floating left / right sidebar */
.assp-layout-floating-left,
.assp-layout-floating-right{
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	flex-direction: column;
	z-index: 9999;
	margin: 0;
}
.assp-layout-floating-left{ left: 16px; }
.assp-layout-floating-right{ right: 16px; }

/* Layout: bottom sticky bar */
.assp-layout-sticky-bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	justify-content: center;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(6px);
	box-shadow: 0 -2px 10px rgba(0,0,0,.08);
	padding: 10px var(--assp-spacing);
	margin: 0;
	z-index: 9999;
}

/* Visibility helpers */
.assp-hide-mobile{ display: none; }
.assp-hide-desktop{ display: none; }

@media (max-width: 767px){
	.assp-hide-mobile{ display: none !important; }
	.assp-hide-desktop{ display: flex !important; }
	.assp-layout-floating-left,
	.assp-layout-floating-right{
		left: auto;
		right: 8px;
		top: auto;
		bottom: 90px;
		transform: none;
		flex-direction: row;
	}
}
@media (min-width: 768px){
	.assp-hide-desktop{ display: none !important; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
	.assp-wrapper[data-dark-mode="auto"] .assp-btn{
		box-shadow: 0 0 0 1px rgba(255,255,255,.08);
	}
}
.assp-wrapper[data-dark-mode="on"] .assp-btn{
	box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}

/* RTL support */
body.rtl .assp-layout-horizontal,
[dir="rtl"] .assp-layout-horizontal{
	flex-direction: row-reverse;
}
body.rtl .assp-layout-floating-left{ left: auto; right: 16px; }
body.rtl .assp-layout-floating-right{ left: 16px; right: auto; }

/* Toast used by share.js for clipboard confirmations (e.g. Instagram) */
.assp-toast{
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #111827;
	color: #fff;
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 14px;
	z-index: 100000;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}
.assp-toast.assp-toast-visible{ opacity: 1; }

/* ==========================================================================
   Admin screen styles
   ========================================================================== */
.assp-admin-wrap .title{ margin-top: 28px; }

.assp-stat-cards{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 20px 0 28px;
}
.assp-card{
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.assp-card-label{ font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.assp-card-value{ font-size: 26px; font-weight: 600; color: #111827; }

.assp-charts-row{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin-bottom: 28px;
}
.assp-chart-box{
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 16px;
}