/* Smart Click to Call — frontend styles
 * All selectors are scoped under .sctc-widget to avoid theme conflicts.
 */

.sctc-widget {
	--sctc-primary: #2563eb;
	--sctc-primary-dark: #1d4ed8;
	--sctc-text: #111827;
	--sctc-secondary-text: #475569;
	--sctc-card-bg: #ffffff;
	--sctc-button-bg: #2563eb;
	--sctc-radius: 20px;
	--sctc-card-width: 360px;
	--sctc-btn-size: 64px;
	--sctc-btn-size-mobile: 58px;
	--sctc-shadow: 0 10px 25px -5px rgba(17, 24, 39, 0.12), 0 4px 6px -2px rgba(17, 24, 39, 0.06);
	--sctc-zindex: 9999;
	--sctc-offset-v: 24px;
	--sctc-offset-h: 24px;
	--sctc-offset-v-mobile: 16px;
	--sctc-offset-h-mobile: 16px;
	--sctc-display-desktop: flex;
	--sctc-display-tablet: flex;
	--sctc-display-mobile: flex;

	position: fixed;
	z-index: var(--sctc-zindex);
	display: var(--sctc-display-desktop);
	flex-direction: column;
	align-items: flex-end;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	line-height: 1.4;
}

.sctc-widget * {
	box-sizing: border-box;
}

/* ---------- Positioning ---------- */
.sctc-widget.sctc-pos-bottom-right {
	inset-block-end: var(--sctc-offset-v);
	inset-inline-end: var(--sctc-offset-h);
	align-items: flex-end;
}
.sctc-widget.sctc-pos-bottom-left {
	inset-block-end: var(--sctc-offset-v);
	inset-inline-start: var(--sctc-offset-h);
	align-items: flex-start;
}
.sctc-widget.sctc-pos-top-right {
	inset-block-start: var(--sctc-offset-v);
	inset-inline-end: var(--sctc-offset-h);
	align-items: flex-end;
}
.sctc-widget.sctc-pos-top-left {
	inset-block-start: var(--sctc-offset-v);
	inset-inline-start: var(--sctc-offset-h);
	align-items: flex-start;
}

/* ---------- Collapsed action row ---------- */
.sctc-widget .sctc-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sctc-widget .sctc-label {
	background: #ffffff;
	color: var(--sctc-text);
	border: none;
	border-radius: 999px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--sctc-shadow);
	transition: box-shadow 180ms ease, transform 180ms ease;
	white-space: nowrap;
}
.sctc-widget .sctc-label:hover {
	box-shadow: 0 14px 28px -6px rgba(17, 24, 39, 0.18);
}
.sctc-widget .sctc-label:focus-visible {
	outline: 2px solid var(--sctc-primary);
	outline-offset: 2px;
}

.sctc-widget .sctc-phone-button {
	position: relative;
	width: var(--sctc-btn-size);
	height: var(--sctc-btn-size);
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background: var(--sctc-button-bg);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--sctc-shadow);
	color: #ffffff;
	transition: transform 180ms ease, box-shadow 180ms ease;
	flex-shrink: 0;
}
.sctc-widget .sctc-phone-button:hover {
	transform: scale(1.04);
	box-shadow: 0 16px 32px -6px rgba(37, 99, 235, 0.35);
}
.sctc-widget .sctc-phone-button:active {
	transform: scale(0.97);
}
.sctc-widget .sctc-phone-button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 4px var(--sctc-primary);
}

.sctc-widget .sctc-icon {
	width: 26px;
	height: 26px;
	position: relative;
	z-index: 2;
}

/* ---------- Pulse rings ---------- */
.sctc-widget .sctc-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--sctc-button-bg);
	opacity: 0;
	animation: sctc-pulse 2.6s ease-out infinite;
	pointer-events: none;
}
.sctc-widget .sctc-ring-2 {
	animation-delay: 1.3s;
}

@keyframes sctc-pulse {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

/* ---------- Expanded card ---------- */
.sctc-widget .sctc-card {
	width: var(--sctc-card-width);
	max-width: calc(100vw - 24px);
	background: var(--sctc-card-bg);
	border-radius: var(--sctc-radius);
	box-shadow: var(--sctc-shadow), 0 25px 50px -12px rgba(17, 24, 39, 0.2);
	padding: 24px 24px 20px;
	margin-block-end: 16px;
	position: relative;
	color: var(--sctc-text);
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 220ms ease, transform 220ms ease;
	pointer-events: none;
}

.sctc-widget .sctc-card.sctc-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sctc-widget .sctc-card[hidden] {
	display: none;
}

.sctc-widget .sctc-close {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	width: 28px;
	height: 28px;
	border: none;
	background: transparent;
	color: #9ca3af;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
}
.sctc-widget .sctc-close:hover {
	background: #f3f4f6;
	transform: rotate(90deg);
}
.sctc-widget .sctc-close:focus-visible {
	outline: 2px solid var(--sctc-primary);
	outline-offset: 2px;
}
.sctc-widget .sctc-close .sctc-icon {
	width: 16px;
	height: 16px;
}

.sctc-widget .sctc-heading {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	margin-block-end: 4px;
}

.sctc-widget .sctc-subtitle {
	font-size: 13px;
	font-weight: 500;
	color: var(--sctc-secondary-text);
	text-align: center;
	margin-block-end: 14px;
}

.sctc-widget .sctc-description {
	font-size: 14px;
	color: var(--sctc-text);
	text-align: center;
	margin: 0 0 18px;
	line-height: 1.5;
}

.sctc-widget .sctc-offline-message {
	color: var(--sctc-secondary-text);
}

.sctc-widget .sctc-phone-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-block-end: 8px;
}

.sctc-widget .sctc-phone {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #eff6ff;
	background: color-mix(in srgb, var(--sctc-primary) 8%, #eff6ff);
	color: var(--sctc-primary-dark);
	border-radius: 14px;
	padding: 14px 16px;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	word-break: break-word;
	transition: background 180ms ease;
}
.sctc-widget .sctc-phone:hover {
	background: #dbeafe;
	background: color-mix(in srgb, var(--sctc-primary) 16%, #eff6ff);
}
.sctc-widget .sctc-phone:focus-visible {
	outline: 2px solid var(--sctc-primary);
	outline-offset: 2px;
}
.sctc-widget .sctc-phone .sctc-icon {
	width: 20px;
	height: 20px;
	color: var(--sctc-primary);
	flex-shrink: 0;
}
.sctc-widget .sctc-phone-label {
	font-weight: 700;
	margin-inline-end: 4px;
}

.sctc-widget .sctc-call-now-btn {
	display: block;
	text-align: center;
	margin-block-start: 14px;
	background: var(--sctc-button-bg);
	color: #ffffff;
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 16px;
	border-radius: 999px;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.sctc-widget .sctc-call-now-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -6px rgba(37, 99, 235, 0.5);
}
.sctc-widget .sctc-call-now-btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--sctc-primary);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.sctc-widget .sctc-ring {
		animation: none !important;
		display: none !important;
	}
	.sctc-widget .sctc-card,
	.sctc-widget .sctc-phone-button,
	.sctc-widget .sctc-label,
	.sctc-widget .sctc-close,
	.sctc-widget .sctc-call-now-btn {
		transition: none !important;
	}
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.sctc-widget {
		display: var(--sctc-display-tablet);
	}
}

@media (max-width: 768px) {
	.sctc-widget {
		display: var(--sctc-display-mobile);
	}
	.sctc-widget.sctc-pos-bottom-right,
	.sctc-widget.sctc-pos-bottom-left {
		inset-block-end: var(--sctc-offset-v-mobile);
	}
	.sctc-widget.sctc-pos-top-right,
	.sctc-widget.sctc-pos-top-left {
		inset-block-start: var(--sctc-offset-v-mobile);
	}
	.sctc-widget.sctc-pos-bottom-right,
	.sctc-widget.sctc-pos-top-right {
		inset-inline-end: var(--sctc-offset-h-mobile);
	}
	.sctc-widget.sctc-pos-bottom-left,
	.sctc-widget.sctc-pos-top-left {
		inset-inline-start: var(--sctc-offset-h-mobile);
	}

	.sctc-widget .sctc-phone-button {
		width: var(--sctc-btn-size-mobile);
		height: var(--sctc-btn-size-mobile);
	}

	.sctc-widget .sctc-card {
		width: calc(100vw - 24px);
		max-width: 340px;
		padding: 20px 18px 16px;
	}

	.sctc-widget .sctc-label {
		padding: 10px 14px;
		font-size: 13px;
	}

	.sctc-widget .sctc-phone {
		font-size: 15px;
	}
}

@media (max-width: 360px) {
	.sctc-widget .sctc-label span,
	.sctc-widget .sctc-label {
		font-size: 12px;
	}
}