/* Stackably Book a Demo — front-end styles.
   Scoped under .sbd-widget so it won't fight the theme. */

.sbd-widget {
	/* ---- CHANGE THE BUTTON COLOR HERE ----
	   Set these two to whatever you want; every button and the date/time
	   chips follow. You can also override them from Elementor Custom CSS
	   without editing this file (see the plugin notes). */
	--sbd-accent: #FF9401;
	--sbd-accent-dark: #E07E00;
	--sbd-text: #05132F;
	--sbd-muted: #6b7280;
	--sbd-border: #d1d5db;
	--sbd-bg-soft: #f9fafb;
	--sbd-radius: 10px;
	max-width: 640px;
	margin: 0 auto;
	color: var(--sbd-text);
	font-size: 16px;
	line-height: 1.5;
}

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

/* Make the HTML5 hidden attribute always win, even over our own
   display:flex/grid rules (otherwise hidden elements like the loader
   stay visible). */
.sbd-widget [hidden] {
	display: none !important;
}

/* Header: icon tile on the left, title + intro stacked beside it. */
.sbd-header {
	display: flex;
	align-items: flex-start;
	gap: 1em;
	margin-bottom: 1.75em;
}

.sbd-header-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: #fef1de;
	color: var(--sbd-accent);
}

.sbd-header-icon svg {
	display: block;
	width: 26px;
	height: 26px;
}

.sbd-header-text {
	min-width: 0;
}

.sbd-title {
	margin: 0 0 .3em;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	text-transform: none;
}

.sbd-intro {
	margin: 0;
	color: var(--sbd-muted);
	text-align: left;
	max-width: 52ch;
	line-height: 1.55;
}

/* Loading + spinner */
.sbd-loading {
	display: flex;
	align-items: center;
	gap: .6em;
	color: var(--sbd-muted);
	padding: 1.5em 0;
}

.sbd-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--sbd-border);
	border-top-color: var(--sbd-accent);
	border-radius: 50%;
	animation: sbd-spin .7s linear infinite;
	display: inline-block;
}

@keyframes sbd-spin {
	to { transform: rotate(360deg); }
}

.sbd-step-title {
	margin: 0 0 .25em;
	font-size: 1.15em;
	font-weight: 700;
	text-transform: none;
}

.sbd-tz {
	margin: 0 0 1em;
	font-size: .85em;
	color: var(--sbd-muted);
}

/* "Step 1 of 2" line under a step title in the details-first layout. */
.sbd-substep {
	margin: 0 0 1.2em;
	font-size: .9em;
	color: var(--sbd-muted);
}

/* Calm, non-alarming panel: used when there is no calendar to show but the
   visitor's details are already safely captured. */
.sbd-notice {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
	border-radius: var(--sbd-radius);
	padding: .9em 1.1em;
	margin: 0 0 1em;
}

/* Date chips — one pill per open day, each with a calendar glyph. The
   selected day fills with the accent color. */
.sbd-dates {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin-bottom: 1.1em;
}

.sbd-widget .sbd-date {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	border: 1px solid #e5e7eb !important;
	background: #fff !important;
	border-radius: var(--sbd-radius) !important;
	padding: .8em 1.1em !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	cursor: pointer;
	font: inherit;
	font-size: .95em;
	font-weight: 600;
	line-height: 1.2;
	color: var(--sbd-text) !important;
	transition: border-color .15s, background .15s, box-shadow .15s, color .15s;
}

.sbd-date__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--sbd-accent);
	transition: color .15s;
}

.sbd-widget .sbd-date:hover,
.sbd-widget .sbd-date:focus {
	background-color: #FFF3E0 !important;
	border-color: var(--sbd-accent) !important;
	color: var(--sbd-accent-dark) !important;
}

.sbd-widget .sbd-date:hover .sbd-date__icon,
.sbd-widget .sbd-date:focus .sbd-date__icon {
	color: var(--sbd-accent-dark);
}

.sbd-widget .sbd-date.is-active,
.sbd-widget .sbd-date.is-active:hover {
	background-color: var(--sbd-accent) !important;
	border-color: var(--sbd-accent) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(255, 148, 1, .3);
}

.sbd-widget .sbd-date.is-active .sbd-date__icon,
.sbd-widget .sbd-date.is-active:hover .sbd-date__icon {
	color: #fff;
}

/* Time grid */
.sbd-times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: .55em;
}

.sbd-widget .sbd-time {
	border: 1px solid #e5e7eb !important;
	background: #fff !important;
	border-radius: var(--sbd-radius) !important;
	padding: .7em .4em !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	cursor: pointer;
	font: inherit;
	font-size: .95em;
	font-weight: 500;
	color: var(--sbd-text) !important;
	text-align: center;
	transition: border-color .15s, background .15s, box-shadow .15s;
}

.sbd-widget .sbd-time:hover,
.sbd-widget .sbd-time:focus {
	background-color: #FFF3E0 !important;
	border-color: var(--sbd-accent) !important;
	color: var(--sbd-accent-dark) !important;
}

.sbd-widget .sbd-time.is-active,
.sbd-widget .sbd-time.is-active:hover {
	background-color: var(--sbd-accent) !important;
	border-color: var(--sbd-accent) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(255, 148, 1, .35);
}

.sbd-empty {
	grid-column: 1 / -1;
	color: var(--sbd-muted);
	padding: .5em 0;
}

/* Details step */
.sbd-chosen {
	background: var(--sbd-bg-soft);
	border: 1px solid var(--sbd-border);
	border-radius: var(--sbd-radius);
	padding: .7em 1em;
	margin: 0 0 1.1em;
	font-weight: 600;
}

/* Instant layout: the time the visitor did not have to pick. Informational,
   not a control — no hover state, nothing to click. */
.sbd-chosen--auto {
	display: flex;
	align-items: center;
	gap: .75em;
	background: #fff7ed;
	border-color: #fed7aa;
	font-weight: 400;
}

.sbd-chosen__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fef1de;
	color: var(--sbd-accent);
}

.sbd-chosen__icon svg {
	display: block;
	width: 19px;
	height: 19px;
}

.sbd-chosen__text {
	min-width: 0;
}

.sbd-chosen__eyebrow {
	display: block;
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sbd-muted);
}

.sbd-chosen__when {
	display: block;
	font-weight: 700;
}

.sbd-field {
	margin-bottom: 1em;
}

.sbd-field-row {
	display: flex;
	gap: 1em;
}

.sbd-field-row .sbd-field {
	flex: 1;
}

.sbd-field label {
	display: block;
	font-weight: 600;
	margin-bottom: .3em;
	font-size: .95em;
}

.sbd-widget .sbd-field input[type="text"],
.sbd-widget .sbd-field input[type="email"],
.sbd-widget .sbd-field input[type="tel"],
.sbd-widget .sbd-field input[type="url"],
.sbd-widget .sbd-field select,
.sbd-widget .sbd-field textarea {
	width: 100% !important;
	padding: .6em .7em !important;
	border: 1px solid var(--sbd-border) !important;
	border-radius: var(--sbd-radius) !important;
	font: inherit;
	color: var(--sbd-text) !important;
	background: #fff !important;
}

.sbd-widget .sbd-field input:focus,
.sbd-widget .sbd-field select:focus,
.sbd-widget .sbd-field textarea:focus {
	outline: none;
	border-color: var(--sbd-accent) !important;
	box-shadow: 0 0 0 3px rgba(255, 148, 1, .15);
}

.sbd-field textarea {
	min-height: 80px;
	resize: vertical;
}

.sbd-req {
	color: #dc2626;
}

.sbd-consent label {
	display: flex;
	align-items: center;
	gap: .5em;
	font-weight: 400;
	font-size: .95em;
}

.sbd-consent input {
	width: auto;
}

/* Honeypot — visually hidden, still in DOM */
.sbd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Buttons */
.sbd-actions {
	display: flex;
	gap: .75em;
	margin-top: 1.2em;
}

.sbd-btn {
	font: inherit;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: capitalize;
	border-radius: var(--sbd-radius);
	padding: .8em 1.6em;
	cursor: pointer;
	border: 1px solid transparent;
	position: relative;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .15s ease;
}

.sbd-btn:active {
	transform: translateY(1px);
}

/* Instant layout has no Back button, so the CTA takes the whole row. */
.sbd-form--instant .sbd-actions .sbd-btn--primary {
	flex: 1;
}

.sbd-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 148, 1, .35);
}

/* Primary: gradient + depth, lifts on hover.
   !important keeps the theme/Elementor global button hover color (e.g. pink)
   from overriding these. */
.sbd-widget .sbd-btn--primary,
.sbd-widget .sbd-btn--primary:hover,
.sbd-widget .sbd-btn--primary:focus {
	background-color: var(--sbd-accent) !important;
	background-image: linear-gradient( 135deg, var(--sbd-accent) 0%, var(--sbd-accent-dark) 100% ) !important;
	color: #fff !important;
	border-color: transparent !important;
}

.sbd-btn--primary {
	box-shadow: 0 4px 14px rgba(255, 148, 1, .35);
}

.sbd-btn--primary:hover {
	box-shadow: 0 6px 20px rgba(255, 148, 1, .45);
	transform: translateY(-2px);
}

.sbd-btn--primary:active {
	transform: translateY(0);
	box-shadow: 0 3px 10px rgba(255, 148, 1, .35);
}

/* Subtle sheen sweep on hover */
.sbd-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, .35), transparent );
	transform: skewX(-20deg);
	transition: left .6s ease;
}

.sbd-btn--primary:hover::after {
	left: 140%;
}

/* Ghost: clean outline that fills toward the accent on hover */
.sbd-widget .sbd-btn--ghost {
	background-color: #fff !important;
	background-image: none !important;
	color: var(--sbd-text) !important;
	border-color: var(--sbd-border) !important;
}

.sbd-widget .sbd-btn--ghost:hover {
	border-color: var(--sbd-accent) !important;
	color: var(--sbd-accent-dark) !important;
	background-color: rgba(255, 148, 1, .06) !important;
	transform: translateY(-2px);
}

.sbd-btn[disabled] {
	opacity: .55;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.sbd-btn[disabled]::after {
	display: none;
}

/* Errors */
.sbd-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: var(--sbd-radius);
	padding: .7em 1em;
	margin: 1em 0 0;
}

/* Success */
.sbd-success {
	text-align: center;
	padding: 1.5em 1em;
}

.sbd-check {
	width: 56px;
	height: 56px;
	line-height: 56px;
	border-radius: 50%;
	background: #dcfce7;
	color: #15803d;
	font-size: 28px;
	margin: 0 auto .6em;
}

.sbd-success-title {
	margin: 0 0 .4em;
	text-transform: capitalize;
}

.sbd-success-when {
	font-weight: 600;
}

@media (max-width: 480px) {
	.sbd-header {
		gap: .8em;
		margin-bottom: 1.4em;
	}
	.sbd-header-icon {
		width: 44px;
		height: 44px;
		border-radius: 12px;
	}
	.sbd-header-icon svg {
		width: 22px;
		height: 22px;
	}
	.sbd-title {
		font-size: 1.3em;
	}
	.sbd-widget .sbd-date {
		padding: .7em .9em !important;
	}
	.sbd-field-row {
		flex-direction: column;
		gap: 0;
	}
	.sbd-actions {
		flex-direction: column-reverse;
	}
	.sbd-btn {
		width: 100%;
	}
}