/* ── Custom Field Header (title + description) ───────────────────── */

.craftor-field-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 14px;
}

/* Mirror .sd-title.sd-element__title + .sd-element__title span exactly */
.craftor-field-title {
	display: block;
	font-family: var(--sjs-font-questiontitle-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
	font-size: var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px));
	line-height: calc(1.5 * (var(--sjs-font-questiontitle-size, var(--sjs-font-size, 16px))));
	font-weight: var(--sjs-font-questiontitle-weight, 600);
	color: var(--sjs-font-questiontitle-color, var(--sjs-general-forecolor, var(--foreground, #161616)));
	margin: 0 0 calc(var(--sjs-base-unit, var(--base-unit, 8px)) * 0.5) 0;
}

/* Mirror .sd-description */
.craftor-field-description {
	display: block;
	font-family: var(--sjs-font-questiondescription-family, var(--sjs-font-family, var(--font-family, var(--sjs-default-font-family))));
	font-size: var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px));
	line-height: calc(1.5 * (var(--sjs-font-questiondescription-size, var(--sjs-font-size, 16px))));
	font-weight: var(--sjs-font-questiondescription-weight, 400);
	color: var(--sjs-font-questiondescription-color, var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
	margin: 0;
}

/*
 * SurveyJS html questions have withFrame:"" — they never get sd-element--with-frame
 * and therefore never get the white card box or padding in non-panelless mode.
 * When the survey is NOT compact (non-panelless), replicate the card frame manually
 * for the html questions that contain our custom fields.
 * In compact/panelless mode the rule doesn't apply, so the timeslots' own inner card
 * stays visible (matching the flat-but-styled look of a panelless form).
 */
.sd-root-modern:not(.sd-root--compact) .sd-question--html:has([data-craftor-timeslots]),
.sd-root-modern:not(.sd-root--compact) .sd-question--html:has([data-craftor-coupon]),
.sd-root-modern:not(.sd-root--compact) .sd-question--html:has([data-craftor-quantity]) {
	background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, #fff)));
	border-radius: var(--sjs-questionpanel-cornerRadius, var(--sjs-corner-radius, 4px));
	box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
	padding: var(--sd-base-padding, 24px);
	box-sizing: border-box;
}

/* When the outer html question card provides the frame, strip the timeslots inner card
   so we don't get a white box inside a white box. overflow:visible prevents the left/top
   slot border from being clipped when padding is 0 and border-radius is removed. */
.sd-root-modern:not(.sd-root--compact) .sd-question--html .craftor-form__timeslots {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}

/* ── Coupon applied tag: [hidden] attribute fix ───────────────────── */
/* Our display:inline-flex / display:flex rules override the browser's
   [hidden]{display:none} which has no !important in most user-agents. */
.craftor-coupon__row[hidden],
.craftor-coupon__applied[hidden] {
	display: none !important;
}

/* ── Time Slots Booking ───────────────────────────────────────────── */

/* In panelless mode (sd-root--compact) the timeslots card provides its own container */
.craftor-form__timeslots {
	width: 100%;
	background: #fff;
	border-radius: 20px;
	border: 1px solid #eef0f4;
	padding: 28px;
	overflow: hidden;
	box-sizing: border-box;
}

/* ── Date Navigation ─────────────────────────────────────────────── */

.craftor-ts__date-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.craftor-ts__date-label {
	font-weight: 700;
	font-size: 17px;
	color: #111827;
	letter-spacing: -0.02em;
}

.craftor-ts__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: #f3f4f6;
	cursor: pointer;
	color: #374151;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-user-select: none;
	user-select: none;
	font-size: 0;
	line-height: 0;
}

.craftor-ts__nav::after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	border-radius: 1px;
}

.craftor-ts__nav:first-child::after {
	transform: rotate(135deg);
	margin-left: 3px;
}

.craftor-ts__nav:last-child::after {
	transform: rotate(-45deg);
	margin-right: 3px;
}

.craftor-ts__nav:hover {
	background: var(--sjs-primary-backcolor, #6366f1);
	color: #fff;
	transform: scale(1.08);
}

.craftor-ts__nav:active {
	transform: scale(0.95);
}

/* ── Calendar Week Strip ─────────────────────────────────────────── */

.craftor-ts__calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #f3f4f6;
}

.craftor-ts__calendar.is-animating {
	animation: craftor-ts-slide 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.craftor-ts__calendar.is-animating-back {
	animation: craftor-ts-slide-back 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes craftor-ts-slide {
	0%   { opacity: 0; transform: translateX(24px); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes craftor-ts-slide-back {
	0%   { opacity: 0; transform: translateX(-24px); }
	100% { opacity: 1; transform: translateX(0); }
}

.craftor-ts__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 6px 14px;
	border: 2px solid #e8eaef;
	border-radius: 16px;
	background: transparent;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.craftor-ts__day::after {
	content: '';
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%) scale(0);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sjs-primary-backcolor, #6366f1);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.craftor-ts__day.is-today::after {
	transform: translateX(-50%) scale(1);
}

.craftor-ts__day:hover:not(.is-disabled) {
	background: #f5f5ff !important;
	border-color: var(--sjs-primary-backcolor, #a5b4fc);
	transform: translateY(-3px);
}

.craftor-ts__day.is-selected {
	background: var(--sjs-primary-backcolor, #6366f1) !important;
	border-color: var(--sjs-primary-backcolor, #6366f1);
	color: #fff !important;
	transform: translateY(-3px);
}

.craftor-ts__day.is-selected::after {
	background: rgba(255, 255, 255, 0.6);
}

.craftor-ts__day.is-selected .craftor-ts__day-name {
	color: #fff !important;
}

.craftor-ts__day.is-disabled {
	opacity: 0.25;
	cursor: default;
	pointer-events: none;
}

.craftor-ts__day-name {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.craftor-ts__day-num {
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* ── Service Selector ────────────────────────────────────────────── */

.craftor-ts__service-row {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #f3f4f6;
}

.craftor-ts__services {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.craftor-ts__service {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 18px;
	border: 2px solid #e5e7eb;
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s;
	text-align: left;
}

.craftor-ts__service:hover {
	border-color: #c7d2fe;
	background: #fafafe;
	transform: translateY(-1px);
}

.craftor-ts__service.is-selected {
	border-color: var(--sjs-primary-backcolor, #6366f1);
	background: #eef2ff;
}

.craftor-ts__service-name {
	font-size: 14px;
	font-weight: 700;
	color: #111827;
}

.craftor-ts__service-price {
	font-size: 12px;
	color: #6b7280;
}

.craftor-ts__service.is-selected .craftor-ts__service-name {
	color: var(--sjs-primary-backcolor, #4338ca);
}

/* ── Slots Section ───────────────────────────────────────────────── */

.craftor-ts__slots-label {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 12px;
}

.craftor-ts__slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
	gap: 10px;
	animation: craftor-ts-fade 0.3s ease;
}

@keyframes craftor-ts-fade {
	0%   { opacity: 0; transform: translateY(8px); }
	100% { opacity: 1; transform: translateY(0); }
}

.craftor-ts__hint {
	grid-column: 1 / -1;
	text-align: center;
	color: #94a3b8;
	font-size: 14px;
	padding: 32px 16px;
}

.craftor-ts__slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 14px 10px;
	border: 2px solid #e8eaef;
	border-radius: 14px;
	background: #fff;
	font-size: 15px;
	font-weight: 700;
	color: #1e293b;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.craftor-ts__slot::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--sjs-primary-backcolor, #6366f1);
	opacity: 0;
	transition: opacity 0.2s;
	z-index: 0;
}

.craftor-ts__slot > * {
	position: relative;
	z-index: 1;
}

.craftor-ts__slot:hover:not(.is-disabled) {
	border-color: var(--sjs-primary-backcolor, #a5b4fc);
	transform: translateY(-2px);
}

.craftor-ts__slot.is-selected {
	border-color: var(--sjs-primary-backcolor, #6366f1);
	color: #fff !important;
	transform: translateY(-2px);
}

.craftor-ts__slot.is-selected::before {
	opacity: 1;
}

.craftor-ts__slot.is-disabled {
	opacity: 0.3;
	cursor: default;
	background: #f9fafb;
	pointer-events: none;
}

.craftor-ts__slot.is-disabled span:first-child {
	text-decoration: line-through;
}

.craftor-ts__slot-price {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	margin-top: 1px;
}

.craftor-ts__slot.is-selected .craftor-ts__slot-price {
	color: #fff;
}

/* Capacity badge */
.craftor-ts__slot-capacity {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 2px 8px;
	border-radius: 20px;
	background: #ecfdf5;
	color: #059669;
	margin-top: 4px;
}

.craftor-ts__slot-capacity.is-low {
	background: #fffbeb;
	color: #d97706;
}

.craftor-ts__slot-capacity.is-full {
	background: #fef2f2;
	color: #dc2626;
}

.craftor-ts__slot.is-selected .craftor-ts__slot-capacity {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* ── Coupon Code ─────────────────────────────────────────────────── */

.craftor-form__coupon {
	max-width: 440px;
}

.craftor-coupon__row {
	display: flex;
	align-items: stretch;
	gap: 0;
	border-radius: 12px;
	border: 2px solid #e5e7eb;
	overflow: hidden;
	background: #fff;
	min-height: 52px;
	transition: border-color 0.2s;
}

.craftor-coupon__row:focus-within {
	border-color: var(--sjs-primary-backcolor, #818cf8);
	box-shadow: 0 0 0 3px rgba(var(--sjs-primary-backcolor-rgb, 99, 102, 241), 0.08);
}

.craftor-coupon__input {
	flex: 1;
	padding: 14px 18px;
	border: none;
	font-size: 14px;
	font-family: inherit;
	color: #1f2937;
	background: transparent;
	outline: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.craftor-coupon__input::placeholder {
	color: #9ca3af;
	text-transform: none;
	letter-spacing: 0;
}

.craftor-coupon__input:disabled {
	color: #6b7280;
	background: #f9fafb;
}

/*
 * SurveyJS's .sd-html button rule (0-1-1 specificity) overrides our single-class
 * selectors (0-1-0). Boost all our button selectors to two-class (0-2-0) so they win.
 * Also applies globally below for nav, day, slot, service, and qty buttons.
 */
.craftor-form__coupon .craftor-coupon__apply,
.sd-html .craftor-coupon__apply {
	display: flex !important;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
	border: none;
	border-radius: 0 !important;
	background: var(--sjs-primary-backcolor, #6366f1) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.2s;
	white-space: nowrap;
	letter-spacing: 0.02em;
	box-shadow: none !important;
	opacity: 1;
	min-width: 90px;
	flex-shrink: 0;
}

.craftor-form__coupon .craftor-coupon__apply:hover,
.sd-html .craftor-coupon__apply:hover {
	opacity: 0.88;
	background: var(--sjs-primary-backcolor, #6366f1) !important;
	color: #fff !important;
}

.craftor-form__coupon .craftor-coupon__apply:active,
.sd-html .craftor-coupon__apply:active {
	transform: scale(0.97);
}

.craftor-form__coupon .craftor-coupon__apply:disabled,
.sd-html .craftor-coupon__apply:disabled {
	opacity: 0.6;
	cursor: wait;
}

.craftor-form__coupon .craftor-coupon__apply--remove,
.sd-html .craftor-coupon__apply--remove {
	background: #ef4444 !important;
}

.craftor-form__coupon .craftor-coupon__apply--remove:hover,
.sd-html .craftor-coupon__apply--remove:hover {
	background: #dc2626 !important;
}

/* Shield other custom-field buttons from .sd-html button overrides (0-2-0 beats 0-1-1) */
.sd-html .craftor-ts__nav {
	border-radius: 50%;
	padding: 0;
	background: #f3f4f6;
	color: #374151;
	box-shadow: none;
	width: 44px;
	height: 44px;
}
.sd-html .craftor-ts__day {
	border-radius: 16px;
	padding: 12px 6px 14px;
	background: transparent;
	color: inherit;
	box-shadow: none;
}
.sd-html .craftor-ts__slot {
	border-radius: 14px;
	padding: 14px 10px;
	background: #fff;
	color: #1e293b;
	box-shadow: none;
}
.sd-html .craftor-ts__service {
	border-radius: 14px;
	padding: 12px 18px;
	background: #fff;
	color: inherit;
	box-shadow: none;
}
.sd-html .craftor-qty__btn {
	border-radius: 50% !important;
	padding: 0;
	background: #fff;
	color: var(--sjs-primary-backcolor, #6366f1);
	box-shadow: none;
	width: 40px;
	height: 40px;
}

.craftor-coupon__feedback {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	min-height: 20px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.craftor-coupon__feedback.is-valid {
	color: #059669;
}

.craftor-coupon__feedback.is-valid::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #059669;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L11 5l1 1z'/%3E%3C/svg%3E");
	background-size: 14px;
	background-position: center;
	background-repeat: no-repeat;
}

.craftor-coupon__feedback.is-invalid {
	color: #dc2626;
}

.craftor-coupon__feedback.is-invalid::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #dc2626;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.craftor-coupon__applied {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 8px 14px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #047857;
}

.craftor-coupon__applied-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 50%;
	background: #065f46;
	color: #fff;
	font-size: 11px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background 0.15s;
}

.craftor-coupon__applied-remove:hover {
	background: #dc2626;
}

/* ── Quantity Spinner ────────────────────────────────────────────── */

.craftor-form__quantity {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.craftor-qty__spinner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
}

.craftor-qty__btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	min-height: 40px !important;
	aspect-ratio: 1;
	flex: none !important;
	padding: 0 !important;
	border: 2px solid #e5e7eb !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
	color: var(--sjs-primary-backcolor, #6366f1);
	box-sizing: border-box;
	transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
	-webkit-user-select: none;
	user-select: none;
	line-height: 1;
	font-size: 0;
}

.craftor-qty__btn:hover:not(.is-disabled) {
	background: var(--sjs-primary-backcolor, #6366f1) !important;
	border-color: var(--sjs-primary-backcolor, #6366f1) !important;
	color: #fff !important;
}

.craftor-qty__btn:active:not(.is-disabled) {
	transform: scale(0.88);
}

.craftor-qty__btn.is-disabled {
	color: #d1d5db !important;
	border-color: #f0f0f0 !important;
	background: #fafafa !important;
	cursor: not-allowed;
}

.craftor-qty__btn svg {
	pointer-events: none;
	width: 16px;
	height: 16px;
	stroke-width: 2.5;
}

.craftor-qty__value {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 40px;
	padding: 0 10px;
	font-size: 20px;
	font-weight: 700;
	color: #111827;
	text-align: center;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	-webkit-user-select: none;
	user-select: none;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.craftor-qty__value.is-changing {
	animation: craftor-qty-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes craftor-qty-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}

.craftor-qty__price {
	font-size: 14px;
	color: #6b7280;
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.craftor-qty__price strong {
	color: #111827;
	font-size: 20px;
	font-weight: 800;
}

.craftor-qty__price-unit {
	color: #94a3b8;
	font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.craftor-form__timeslots {
		padding: 20px;
		border-radius: 16px;
	}

	.craftor-ts__calendar {
		gap: 5px;
	}

	.craftor-ts__day {
		padding: 10px 4px 12px;
		border-radius: 14px;
	}

	.craftor-ts__day-num {
		font-size: 16px;
	}

	.craftor-ts__slots {
		grid-template-columns: repeat(3, 1fr);
	}

	.craftor-ts__slot {
		padding: 12px 8px;
		font-size: 14px;
	}

	.craftor-ts__nav {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 480px) {
	.craftor-coupon__row {
		flex-direction: column;
		border-radius: 14px;
	}

	.craftor-coupon__apply {
		border-radius: 0 0 12px 12px;
	}

	.craftor-qty__btn {
		width: 36px;
		height: 36px;
	}

	.craftor-qty__value {
		min-width: 52px;
		height: 36px;
		font-size: 18px;
	}
}

/* ── Submit / Navigation buttons ─────────────────────────────────────────────
 * WordPress themes often zero out button padding globally. These two rules
 * restore it with enough specificity (.craftor-form .sd-btn = 2 classes +
 * element beats a bare `button {}` rule) without touching any layout props.
 * ─────────────────────────────────────────────────────────────────────────── */
.craftor-form .sd-btn {
	padding: 12px 24px !important;
	min-width: 80px !important;
	box-sizing: border-box;
	line-height: 1.2;
}