/*!
 * Sentio for Elementor - Shared Base Styles
 *
 * Contains utility classes shared across multiple widgets whose definitions
 * previously lived in the monolith frontend.css. Consolidated here 2026-04-20
 * during the CSS cross-contamination rescue so that the monolith can be
 * retired after the Base_Widget default-flip pass.
 *
 * Registered as the `sentio-shared-styles` handle in plugin.php. Every widget
 * that applies one of these utility classes to its rendered HTML must declare
 * `sentio-shared-styles` in `get_style_depends()` alongside its own per-widget
 * handle. Pairs with the JS-side `sentio-shared` handle for `window.SentioShared`
 * helpers — together they form the Sentio shared base.
 *
 * Current consumers:
 *   .sentio-btn-reset (6 widgets)    — alert, off-canvas, logo-carousel,
 *                                       scroll-to-top, single-page-navigation,
 *                                       social-share
 *   .sentio-sched-spinner (12 widgets) — acuity-, calendar-, calendly-, day-,
 *                                        gcal-, hubspot-, motion-, savvycal-,
 *                                        tidycal-, ycbm-, zencal-, zoom-schedule
 *
 * When adding new utility classes here, update the consumer list in the header
 * comment and add the handle to every consuming widget's `get_style_depends()`.
 */

/* =========================================================================
   Sentio Global Button Reset
   Apply .sentio-btn-reset to any utility button (close, nav arrows, toggles)
   to strip theme / user-agent styles from the button, its SVG and paths.
   Widget-specific CSS only needs to add positioning, sizing and color.
   NOTE: No `all: unset` — it nukes widget styles on :hover via specificity.
   ========================================================================= */

/* ── Button base ── */
.sentio-btn-reset {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0;
	line-height: 1;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	white-space: normal;
	word-spacing: normal;
	cursor: pointer;
	outline: none;
	box-shadow: none;
	overflow: visible;
	vertical-align: middle;
	min-width: 0;
	min-height: 0;
	-webkit-tap-highlight-color: transparent;
}

/* ── Hover / focus / active — only reset decorations, never layout ── */
.sentio-btn-reset:hover,
.sentio-btn-reset:focus,
.sentio-btn-reset:active,
.sentio-btn-reset:visited {
	border: none;
	background: transparent;
	outline: none;
	box-shadow: none;
	text-decoration: none;
	color: inherit;
}

/* ── SVG child ── */
.sentio-btn-reset svg {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	fill: none;
	stroke: currentColor;
	overflow: visible;
	vertical-align: middle;
	float: none;
	position: static;
	transform: none;
	opacity: 1;
}

/* ── SVG child on button hover — prevent theme colour overrides ── */
.sentio-btn-reset:hover svg,
.sentio-btn-reset:focus svg,
.sentio-btn-reset:active svg {
	fill: none;
	stroke: currentColor;
	opacity: 1;
	transform: none;
}

/* ── SVG path ── */
.sentio-btn-reset svg path {
	fill: none;
	stroke: inherit;
	stroke-width: inherit;
	stroke-linecap: inherit;
	stroke-linejoin: inherit;
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   SHARED SCHEDULER SPINNER
   Used by all 12 scheduling widgets as the default loading indicator.
   Each scheduler emits <div class="sentio-sched-spinner"><div class="sentio-sched-spinner__icon"></div></div>
   and toggles `.sentio-{slug}--loaded` on the wrapper to fade it out once the
   iframe/SDK is ready.
   ========================================================================== */
.sentio-sched-spinner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	transition: opacity 0.3s ease;
}
.sentio-sched-spinner__icon {
	width: 36px;
	height: 36px;
	border: 3px solid #6C63FF;
	border-top-color: transparent;
	border-radius: 50%;
	animation: sentio-sched-spin 0.8s linear infinite;
}
@keyframes sentio-sched-spin {
	to { transform: rotate(360deg); }
}
/* Hide spinner once embed / iframe has loaded.
   The `--loaded` modifier class is added by window.SentioShared.initSchedulerSpinner
   in sentio-shared.js — scheduler widget JS calls that helper from each
   element_ready handler. Base .sentio-sched-spinner already has transition:
   opacity 0.3s, so adding the modifier triggers the fade. */
.sentio-sched-spinner--loaded {
	opacity: 0;
	pointer-events: none;
}

/* Respect user's reduced-motion preference — no fade transition. */
@media (prefers-reduced-motion: reduce) {
	.sentio-sched-spinner,
	.sentio-sched-spinner--loaded {
		transition: none;
	}
}

/* Legacy per-widget wrapper selectors — retained for backward compatibility
   with any future scheduler widget JS that adds the wrapper `--loaded` class
   instead of calling the shared helper. All 12 entries below are inert today:
   no widget JS currently adds these wrapper classes. Safe to remove in a
   future cleanup session once every scheduler is confirmed using the shared
   helper. */
.sentio-ds--loaded .sentio-sched-spinner,
.sentio-hs--loaded .sentio-sched-spinner,
.sentio-ac--loaded .sentio-sched-spinner,
.sentio-mt--loaded .sentio-sched-spinner,
.sentio-cl--loaded .sentio-sched-spinner,
.sentio-cy--loaded .sentio-sched-spinner,
.sentio-sc--loaded .sentio-sched-spinner,
.sentio-tc--loaded .sentio-sched-spinner,
.sentio-zc--loaded .sentio-sched-spinner,
.sentio-zm--loaded .sentio-sched-spinner,
.sentio-yb--loaded .sentio-sched-spinner,
.sentio-gc--loaded .sentio-sched-spinner {
	opacity: 0;
	pointer-events: none;
}