/*
 * Prana Forms – Frontend Stylesheet
 *
 * Design language:
 *   • "The Season" serif  → form heading, survey title
 *   • Roboto sans-serif   → question labels, descriptions, inputs, buttons
 *   • Forest green #3A4D3D → primary actions / accents
 *   • No rounded corners anywhere
 *   • No separator lines or card chrome on questions
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

@font-face {
	font-family: 'The Season';
	src: url( '../fonts/The-Seasons-Regular.ttf' ) format( 'truetype' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'The Season';
	src: url( '../fonts/The-Seasons-Bold.ttf' ) format( 'truetype' );
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'The Season';
	src: url( '../fonts/The-Seasons-Italic.ttf' ) format( 'truetype' );
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
   Container
--------------------------------------------------------------------------- */

.prana-form-container {
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	background: #ffffff;
	border: none;
	border-radius: 0;
	box-sizing: border-box;
	overflow: hidden;
}

@media ( max-width: 600px ) {
	.prana-form-container {
		margin: 1rem;
		padding: 0;
	}
}

/* Optional title rendered above the container by the shortcode / block */
.prana-form-title {
	max-width: 800px;
	margin: 2rem auto 0.75rem;
	font-family: 'The Season', Georgia, serif;
	color: #2C4234;
}

@media ( max-width: 600px ) {
	.prana-form-title {
		margin-left: 1rem;
		margin-right: 1rem;
	}
}

/* ---------------------------------------------------------------------------
   Loading state
--------------------------------------------------------------------------- */

.prana-form-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.5rem;
	color: #8A9890;
	font-family: 'Roboto', sans-serif;
	font-size: 0.9rem;
}

.prana-form-loading::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid #E2D9CE;
	border-top-color: #3A4D3D;
	border-radius: 50%;
	animation: prana-spin 0.75s linear infinite;
	flex-shrink: 0;
}

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

/* ---------------------------------------------------------------------------
   Success state
--------------------------------------------------------------------------- */

.prana-form-success {
	padding: 2.5rem;
	background: #f5faf6;
	border: 1px solid #B8D4BC;
	border-radius: 0;
	color: #2C4234;
	text-align: center;
	font-family: 'Roboto', sans-serif;
}

.prana-form-success h3 {
	margin: 0 0 0.5rem;
	font-family: 'The Season', Georgia, serif;
	font-weight: 400;
	font-size: 1.4rem;
	color: #2C4234;
}

.prana-form-success p {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	color: #4A6A52;
	line-height: 1.65;
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------
   Error state
--------------------------------------------------------------------------- */

.prana-form-error {
	padding: 0.875rem 1rem;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 0;
	color: #991b1b;
	font-family: 'Roboto', sans-serif;
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Intake capture form (step 1 of 2)
--------------------------------------------------------------------------- */

.prana-intake-wrap {
	font-family: 'Roboto', sans-serif;
}

.prana-intake-wrap h3 {
	font-family: 'The Season', Georgia, serif;
	font-weight: 400;
	font-size: 1.5rem;
	color: #2C4234;
	margin: 0 0 0.375rem;
}

.prana-intake-wrap p {
	font-family: 'Roboto', sans-serif;
	color: #7A8880;
	font-size: 0.875rem;
	margin: 0 0 1.75rem;
	line-height: 1.55;
}

.prana-intake-wrap .prana-intake-field label {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 0.8125rem;
	color: #2C4234;
}

.prana-intake-wrap .prana-intake-field input {
	font-family: 'Roboto', sans-serif !important;
	border-radius: 0 !important;
}

.prana-intake-wrap .prana-intake-btn {
	font-family: 'Roboto', sans-serif !important;
	border-radius: 0 !important;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   SurveyJS — zero out all internal spacing via CSS custom properties.
   SurveyJS modern theme drives padding/margin through --base-unit and
   computed vars; overriding them on the container is the only reliable way
   to beat them without matching every generated calc() value.
--------------------------------------------------------------------------- */

.prana-form-container {
	--base-unit:                    4px;
	--sjs-base-unit:                4px;
	--sd-base-padding:              0px;
	--sd-page-vertical-padding:     0px;
	--sjs-corner-radius:            0px;
	/* Override SurveyJS border + shadow variables so they match intake inputs */
	--sjs-border-default:           #D4C9BC;
	--sjs-border-color:             #D4C9BC;
	--sjs-shadow-inner:             none;
	--sjs-shadow-inner-reset:       none;
	--sjs-shadow-small:             none;
	--sjs-shadow-medium:            none;
}

/* Transparent backgrounds + no chrome on every structural wrapper */
.prana-form-container .sd-root-modern,
.prana-form-container .sd-container-modern,
.prana-form-container .sd-page,
.prana-form-container .sd-body,
.prana-form-container .sd-body__page,
.prana-form-container .sd-body__navigation,
.prana-form-container .sd-row,
.prana-form-container .sd-row__panel,
.prana-form-container .sd-panel,
.prana-form-container .sd-panel__content {
	background: transparent !important;
	box-shadow: none !important;
}

/* Zero out all padding/margin on structural wrappers */
.prana-form-container .sd-body__page,
.prana-form-container .sd-page,
.prana-form-container .sd-row,
.prana-form-container .sd-panel,
.prana-form-container .sd-panel__content {
	padding: 0 !important;
	margin: 0 !important;
}

.prana-form-container .sd-body {
	min-height: unset !important;
	padding: 0 !important;
}

.prana-form-container .sd-root-modern {
	font-family: 'Roboto', sans-serif !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Survey title + description — The Season / Roboto, matches intake heading
--------------------------------------------------------------------------- */

.prana-form-container .sd-container-modern__title {
	padding: 0 0 1.5rem !important;
	margin: 0 !important;
}

.prana-form-container .sd-container-modern__title .sd-title,
.prana-form-container .sd-container-modern__title h3 {
	font-family: 'The Season', Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 1.5rem !important;
	color: #2C4234 !important;
	letter-spacing: 0.01em !important;
	margin: 0 0 0.375rem !important;
	padding: 0 !important;
}

.prana-form-container .sd-container-modern__title .sd-description {
	font-family: 'Roboto', sans-serif !important;
	font-size: 0.875rem !important;
	color: #7A8880 !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Page title (multi-page forms) */
.prana-form-container .sd-page__title {
	font-family: 'The Season', Georgia, serif !important;
	font-weight: 400 !important;
	color: #2C4234 !important;
	letter-spacing: 0.01em !important;
	padding: 0 0 1rem !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   Question rows — no separators, tight spacing identical to intake fields
--------------------------------------------------------------------------- */

.prana-form-container .sd-question,
.prana-form-container .sd-element {
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 1.25rem !important;
}

/* Question header: label sits tight above the input, just like intake */
.prana-form-container .sd-question__header,
.prana-form-container .sd-element__header {
	padding: 0 0 0.375rem !important;
	margin: 0 !important;
}

/* Question content: no top gap */
.prana-form-container .sd-question__content,
.prana-form-container .sd-element__content {
	padding: 0 !important;
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
   Question labels — Roboto 500, small, dark green (matches intake labels)
--------------------------------------------------------------------------- */

.prana-form-container .sd-question__title,
.prana-form-container .sd-element__title,
.prana-form-container .sd-question__title .sv-string-viewer,
.prana-form-container .sd-element__title .sv-string-viewer {
	font-family: 'Roboto', sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.8125rem !important;
	color: #2C4234 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Required asterisk — always inline next to the label text, never its own line */
.prana-form-container .sd-question__required-text {
	color: #C45A3A !important;
	font-family: 'Roboto', sans-serif !important;
	font-weight: 500 !important;
	font-size: 0.8125rem !important;
	display: inline !important;
	margin-left: 3px !important;
	white-space: nowrap !important;
}

/* The title element itself must be inline-flex so the asterisk stays on the same line */
.prana-form-container .sd-question__title,
.prana-form-container h5.sd-question__title {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	align-items: baseline !important;
	white-space: normal !important;
}

/* ---------------------------------------------------------------------------
   Question descriptions  →  Roboto muted
--------------------------------------------------------------------------- */

.prana-form-container .sd-description,
.prana-form-container .sd-question__description,
.prana-form-container .sd-question__description .sv-string-viewer {
	font-family: 'Roboto', sans-serif !important;
	font-size: 0.875rem !important;
	color: #7A8880 !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	padding: 0 !important;
	margin: 0.25rem 0 0 !important;
}

/* ---------------------------------------------------------------------------
   Input fields  →  Roboto, no rounded corners, warm beige bg
--------------------------------------------------------------------------- */

.prana-form-container .sd-input {
	font-family: 'Roboto', sans-serif !important;
	border-radius: 0 !important;
	border: 1px solid #D4C9BC !important;
	background: #FDFAF7 !important;
	color: #1A1A1A !important;
	font-size: 0.9375rem !important;
	padding: 0.625rem 0.875rem !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	transition: border-color 0.15s !important;
}

/* Catch both the CSS pseudo-class and SurveyJS's own --focused class */
.prana-form-container .sd-input:focus,
.prana-form-container .sd-input:focus-within,
.prana-form-container .sd-input--focused {
	border: 1px solid #3A4D3D !important;
	box-shadow: 0 0 0 2px rgba( 58, 77, 61, 0.15 ) !important;
	outline: none !important;
}

.prana-form-container .sd-input::placeholder {
	color: #A8B4AE !important;
	font-family: 'Roboto', sans-serif !important;
}

/* Date and tel inputs get the same padding as text inputs */
.prana-form-container .sd-input[type="date"],
.prana-form-container .sd-input[type="tel"],
.prana-form-container .sd-input[type="number"],
.prana-form-container .sd-input[type="email"] {
	padding: 0.625rem 0.875rem !important;
}

/* ---------------------------------------------------------------------------
   Radio / checkbox item labels  →  Roboto
--------------------------------------------------------------------------- */

.prana-form-container .sd-item__control-label,
.prana-form-container .sd-item__control-label .sv-string-viewer {
	font-family: 'Roboto', sans-serif !important;
	font-size: 0.9375rem !important;
	color: #2C4234 !important;
}

.prana-form-container .sd-item--checked .sd-item__decorator {
	background-color: #3A4D3D !important;
	border-color: #3A4D3D !important;
	border-radius: 0 !important;
}

.prana-form-container .sd-item__decorator {
	border-radius: 0 !important;
}

/* Radio circles stay round */
.prana-form-container .sd-radio__decorator,
.prana-form-container .sd-radio__decorator.sd-item__decorator {
	border-radius: 50% !important;
}

/* ---------------------------------------------------------------------------
   Dropdown / select
--------------------------------------------------------------------------- */

.prana-form-container .sd-dropdown__value,
.prana-form-container .sv-dropdown-popup,
.prana-form-container .sv-list__item {
	font-family: 'Roboto', sans-serif !important;
	border-radius: 0 !important;
}

.prana-form-container .sv-popup__container {
	border-radius: 0 !important;
	border: 1px solid #D4C9BC !important;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 ) !important;
}

/* ---------------------------------------------------------------------------
   Navigation buttons
--------------------------------------------------------------------------- */

.prana-form-container .sd-body__navigation {
	padding: 1.5rem 0 0 !important;
	margin-top: 0.5rem !important;
}

.prana-form-container .sd-action-bar {
	padding: 0 !important;
	background: transparent !important;
}

.prana-form-container .sd-btn {
	font-family: 'Roboto', sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em !important;
	border-radius: 0 !important;
	padding: 0.625rem 1.5rem !important;
	font-size: 0.875rem !important;
	cursor: pointer !important;
	transition: background-color 0.15s, color 0.15s !important;
}

.prana-form-container .sd-btn.sd-navigation__complete-btn,
.prana-form-container .sd-btn.sd-navigation__next-btn,
.prana-form-container .sd-navigation__complete-btn,
.prana-form-container .sd-navigation__next-btn {
	background-color: #3A4D3D !important;
	color: #ffffff !important;
	border: none !important;
}

.prana-form-container .sd-btn.sd-navigation__complete-btn:hover,
.prana-form-container .sd-btn.sd-navigation__next-btn:hover {
	background-color: #2C3A2E !important;
}

.prana-form-container .sd-btn.sd-navigation__prev-btn,
.prana-form-container .sd-navigation__prev-btn {
	background-color: transparent !important;
	color: #3A4D3D !important;
	border: 1px solid #3A4D3D !important;
}

.prana-form-container .sd-btn.sd-navigation__prev-btn:hover {
	background-color: #3A4D3D !important;
	color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Progress bar
--------------------------------------------------------------------------- */

.prana-form-container .sd-progress {
	border-radius: 0 !important;
	background: #EDE7DF !important;
	height: 2px !important;
}

.prana-form-container .sd-progress__bar {
	background-color: #3A4D3D !important;
	border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   Rating items
--------------------------------------------------------------------------- */

.prana-form-container .sd-rating__item-text {
	font-family: 'Roboto', sans-serif !important;
	border-radius: 0 !important;
}

.prana-form-container .sd-rating__item--selected .sd-rating__item-text {
	background-color: #3A4D3D !important;
	color: #ffffff !important;
	border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
   Matrix / table rows
--------------------------------------------------------------------------- */

.prana-form-container .sd-matrix__cell,
.prana-form-container .sd-table__cell {
	font-family: 'Roboto', sans-serif !important;
	font-size: 0.875rem !important;
}

.prana-form-container .sd-matrix__row-header,
.prana-form-container .sd-table__row td:first-child {
	font-family: 'Roboto', sans-serif !important;
}

/* ---------------------------------------------------------------------------
   Error messages
--------------------------------------------------------------------------- */

.prana-form-container .sd-question__erbox,
.prana-form-container .sv-string-viewer.sd-question__erbox {
	font-family: 'Roboto', sans-serif !important;
	border-radius: 0 !important;
	font-size: 0.8125rem !important;
}