/*
 * Craftor's own form theme. Colors/spacing come from CSS custom properties
 * set by app/shared/utils/formTheme.ts via survey.applyTheme(); the things
 * SurveyJS's Default V2 CSS can't express as variables — real input borders
 * (it fakes one with an inset box-shadow), pill/underline/sharp input
 * shapes, card framing, and focus/hover animations — are hand-written here,
 * gated by the `craftor-theme-{family}` class the widget renders on its
 * wrapper (see FormWidget::render()).
 */

/* ── Shared across every theme ─────────────────────────────────────────── */

.sd-root-modern:not( .sd-root-modern--mobile ) {
	border: 1px solid var( --sjs-border-light, #e2e6ee );
	overflow: hidden;
}

.sd-input,
.sd-btn {
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, background-color 0.18s ease;
}

.sd-input {
	border: 1px solid var( --sjs-border-default, #e2e6ee );
	box-shadow: none;
}

.sd-input:focus,
.sd-input:focus-within {
	border-color: var( --sjs-primary-backcolor, #2451e0 );
	box-shadow: 0 0 0 3px var( --sjs-primary-backcolor-light, rgba( 36, 81, 224, 0.12 ) );
}

.sd-btn--action {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.sd-btn--action:hover {
	transform: translateY( -1px );
	box-shadow: 0 6px 16px -4px var( --sjs-primary-backcolor-light, rgba( 36, 81, 224, 0.35 ) );
}

.sd-btn--action:active {
	transform: translateY( 0 );
	box-shadow: none;
}

/* ── Craftor (default): soft card, rounded-lg inputs, pill button ─────── */

.craftor-theme-craftor .sd-root-modern:not( .sd-root-modern--mobile ) {
	border-radius: 16px;
}

.craftor-theme-craftor .sd-btn--action {
	border-radius: 9999px !important;
}

/* ── Soft: friendly, fully-rounded pill inputs ─────────────────────────── */

.craftor-theme-soft .sd-root-modern:not( .sd-root-modern--mobile ) {
	border-radius: 24px;
	border-color: transparent;
	box-shadow: var( --sjs-shadow-medium, 0px 2px 8px 0px rgba( 16, 20, 28, 0.06 ) );
}

.craftor-theme-soft .sd-input:not( .sd-comment ) {
	border-radius: 9999px !important;
	padding-left: 20px;
	padding-right: 20px;
}

.craftor-theme-soft .sd-comment {
	border-radius: 20px !important;
}

.craftor-theme-soft .sd-btn--action {
	border-radius: 9999px !important;
}

.craftor-theme-soft .sd-input:focus,
.craftor-theme-soft .sd-input:focus-within {
	box-shadow: 0 0 0 4px var( --sjs-primary-backcolor-light, rgba( 36, 81, 224, 0.15 ) );
	transform: translateY( -1px );
}

/* ── Sharp: crisp corners, higher-contrast border, technical feel ──────── */

.craftor-theme-sharp .sd-root-modern:not( .sd-root-modern--mobile ) {
	border-radius: 4px;
}

.craftor-theme-sharp .sd-input {
	border-width: 1.5px;
	border-radius: 4px !important;
}

.craftor-theme-sharp .sd-btn--action {
	border-radius: 4px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.craftor-theme-sharp .sd-input:focus,
.craftor-theme-sharp .sd-input:focus-within {
	box-shadow: 0 0 0 2px var( --sjs-primary-backcolor, #2451e0 );
}

/* ── Minimal: no card, underline-only inputs — for colored sections ────── */

.craftor-theme-minimal .sd-root-modern:not( .sd-root-modern--mobile ) {
	border: none;
	border-radius: 0;
	background: transparent !important;
}

.craftor-theme-minimal .sd-input {
	border: none;
	border-bottom: 2px solid var( --sjs-border-default, #e2e6ee );
	border-radius: 0 !important;
	background: transparent !important;
	padding-left: 2px;
	padding-right: 2px;
}

.craftor-theme-minimal .sd-input:focus,
.craftor-theme-minimal .sd-input:focus-within {
	border-bottom-color: var( --sjs-primary-backcolor, #2451e0 );
	box-shadow: none;
}

.craftor-theme-minimal .sd-btn--action {
	border-radius: 9999px !important;
}