/**
 * Sona3 Smart Forms — Public Frontend Stylesheet
 * Strictly isolated and namespaced under .sona3-form / .sona3-form-wrapper
 * Brand color: #7EC1C9 via CSS Custom Property --sona3-primary
 */

:root {
	--sona3-primary: #7EC1C9;
	--sona3-primary-hover: #6cb3bb;
	--sona3-primary-active: #5ca1a9;
	--sona3-text: #1e293b;
	--sona3-text-muted: #64748b;
	--sona3-bg: #ffffff;
	--sona3-input-bg: #ffffff;
	--sona3-border: #cbd5e1;
	--sona3-border-focus: #7EC1C9;
	--sona3-radius: 8px;
	--sona3-error: #ef4444;
	--sona3-error-bg: #fef2f2;
	--sona3-success: #10b981;
	--sona3-success-bg: #f0fdf4;
	--sona3-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	--sona3-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   1. Form Container & Typography
   ========================================================================= */
.sona3-form,
.sona3-form-wrapper {
	width: 100%;
	max-width: var(--sona3-container-max-width, 680px);
	margin: 20px auto;
	padding: var(--sona3-container-padding, 28px);
	background: var(--sona3-container-bg, var(--sona3-bg));
	border: 1px solid var(--sona3-container-border, var(--sona3-border));
	border-radius: var(--sona3-container-radius, var(--sona3-radius));
	box-shadow: var(--sona3-shadow);
	box-sizing: border-box;
	font-family: var(--sona3-font-family, inherit);
	font-size: var(--sona3-font-size, 15px);
	line-height: var(--sona3-line-height, 1.6);
	color: var(--sona3-text);
	position: relative;
}

.sona3-form *,
.sona3-form-wrapper * {
	box-sizing: border-box;
}

.sona3-form-title {
	margin: 0 0 8px 0;
	font-size: 24px;
	font-weight: 700;
	color: var(--sona3-text);
}

.sona3-form-description {
	margin: 0 0 20px 0;
	color: var(--sona3-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* =========================================================================
   2. Fields Grid & Items
   ========================================================================= */
.sona3-fields-container {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.sona3-form__field,
.sona3-field-item {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.sona3-width-100 {
	width: 100%;
}

.sona3-width-50 {
	width: calc(50% - 8px);
}

.sona3-width-33 {
	width: calc(33.333% - 11px);
}

.sona3-width-25 {
	width: calc(25% - 12px);
}

@media (max-width: 640px) {
	.sona3-width-50,
	.sona3-width-33,
	.sona3-width-25,
	.sona3-form__field.sona3-width-50,
	.sona3-form__field.sona3-width-33,
	.sona3-form__field.sona3-width-25,
	.sona3-field-item.sona3-width-50,
	.sona3-field-item.sona3-width-33,
	.sona3-field-item.sona3-width-25 {
		width: 100% !important;
	}
}

.sona3-form__label,
.sona3-field-label {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
	display: inline-block;
	color: var(--sona3-text);
}

.sona3-required-mark {
	color: var(--sona3-error);
	margin-inline-start: 4px;
}

/* =========================================================================
   3. Modern Field Container / Control Architecture (Part A)
   Contains Icon + Stacked Content Layer (Input/Placeholder + Description)
   No extra space between field and description!
   Identical to Live Preview and immune to Elementor theme resets.
   ========================================================================= */
.sona3-form__control,
.sona3-field-control,
.sona3-input-wrapper {
	position: relative !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	box-sizing: border-box !important;
	direction: ltr !important; /* Locks physical Left and physical Right across all layouts */
	background: var(--sona3-input-bg, #ffffff) !important;
	border: 1px solid var(--sona3-input-border, #cbd5e1) !important;
	border-radius: var(--sona3-input-radius, 8px) !important;
	min-height: var(--sona3-input-height, 46px) !important;
	padding: 6px 14px !important;
	transition: border-color 0.15s, box-shadow 0.15s !important;
	cursor: text !important;
}

.sona3-form__control:focus-within,
.sona3-field-control:focus-within,
.sona3-input-wrapper:focus-within {
	border-color: var(--sona3-border-focus, var(--sona3-primary, #7EC1C9)) !important;
	box-shadow: 0 0 0 2px rgba(126, 193, 201, 0.25) !important;
}

/* Content Stack: Line 1 = Input/Placeholder, Line 2 = Description */
.sona3-form__content,
.sona3-field-content {
	order: 2 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	position: relative !important;
	direction: rtl !important;
	text-align: right !important;
}

/* Text direction inside content layer for LTR */
.sona3-ltr .sona3-form__content,
.sona3-ltr .sona3-field-content,
[dir="ltr"] .sona3-form__content,
[dir="ltr"] .sona3-field-content {
	direction: ltr !important;
	text-align: left !important;
}

/* Line 1: Real Native Input (with protection against Elementor & theme global resets) */
.sona3-form__input,
.sona3-field-content .sona3-input,
.sona3-form input[type="text"],
.sona3-form input[type="email"],
.sona3-form input[type="tel"],
.sona3-form input[type="number"],
.sona3-form input[type="url"],
.sona3-form input[type="date"],
.sona3-form input[type="time"],
.sona3-form input[type="datetime-local"],
.elementor .sona3-form input[type="text"],
.elementor .sona3-form input[type="email"],
.elementor .sona3-form input[type="tel"],
.elementor .sona3-form input[type="number"],
.elementor .sona3-form input[type="url"],
.elementor .sona3-form input[type="date"],
.elementor .sona3-form input[type="time"],
.elementor .sona3-form input[type="datetime-local"] {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	font-size: var(--sona3-font-size, 14px) !important;
	font-weight: 500 !important;
	color: var(--sona3-input-text, var(--sona3-text, #1e293b)) !important;
	line-height: 1.35 !important;
	height: auto !important;
	min-height: 0 !important;
	font-family: inherit !important;
	direction: inherit !important;
	text-align: inherit !important;
}

.sona3-form__input::placeholder,
.sona3-field-content .sona3-input::placeholder,
.sona3-form input::placeholder {
	font-weight: 600 !important;
	color: #475569 !important;
	opacity: 0.9 !important;
}

/* Line 1: Select Dropdown Placeholder or Selected Option Label */
.sona3-form__placeholder,
.sona3-field-placeholder {
	font-size: var(--sona3-font-size, 14px) !important;
	font-weight: 600 !important;
	color: #475569 !important;
	line-height: 1.35 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	user-select: none !important;
	direction: inherit !important;
	text-align: inherit !important;
}

/* Line 2: Description inside the same container */
.sona3-form__description,
.sona3-field-description {
	font-size: 11px !important;
	font-weight: 400 !important;
	color: var(--sona3-text-muted, #94a3b8) !important;
	line-height: 1.3 !important;
	margin-top: 2px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	pointer-events: none !important;
	direction: inherit !important;
	text-align: inherit !important;
}

/* Field Icons */
.sona3-form__icon,
.sona3-field-icon,
.sona3-form .sona3-field-icon,
.elementor .sona3-form .sona3-field-icon {
	color: var(--sona3-primary, #7EC1C9) !important;
	font-size: 20px !important;
	width: 20px !important;
	height: 20px !important;
	line-height: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: none !important;
	flex-shrink: 0 !important;
	position: static !important;
}

/* =========================================================================
   Icon Position = Left:
   [ ICON ]                                                    [ TEXT ]
   - Icon is at physical LEFT (order: 1)
   - Text is at physical RIGHT (text-align: right)
   - Full space distributed across the field
   ========================================================================= */
.icon-left .sona3-form__icon,
.icon-left .sona3-field-icon,
.icon-left > .dashicons:not(.sona3-select-chevron),
.sona3-field-control.icon-left .sona3-field-icon,
.sona3-input-wrapper.icon-left .sona3-field-icon,
.sona3-form .icon-left .sona3-field-icon,
.elementor .sona3-form .icon-left .sona3-field-icon,
.rtl .icon-left .sona3-form__icon,
.rtl .icon-left .sona3-field-icon,
.rtl .sona3-form .icon-left .sona3-field-icon {
	order: 1 !important;
	margin-right: 14px !important;
	margin-left: 0 !important;
	position: static !important;
}

.icon-left .sona3-form__content,
.icon-left .sona3-field-content,
.icon-left .sona3-form__input,
.icon-left .sona3-input,
.icon-left input,
.icon-left textarea,
.icon-left .sona3-field-placeholder,
.icon-left .sona3-form__placeholder,
.icon-left .sona3-field-description,
.icon-left .sona3-form__description,
.sona3-form .icon-left input,
.elementor .sona3-form .icon-left input,
.rtl .icon-left .sona3-form__input,
.rtl .icon-left .sona3-input,
.rtl .icon-left input,
.rtl .sona3-form .icon-left input,
.elementor .rtl .sona3-form .icon-left input {
	text-align: right !important;
	direction: rtl !important;
}

.icon-left.is-select .sona3-select-chevron,
.icon-left .sona3-select-chevron {
	order: 4 !important;
	margin-left: 10px !important;
	margin-right: 0 !important;
}

/* =========================================================================
   Icon Position = Right:
   [ TEXT ]                                                    [ ICON ]
   - Text is at physical LEFT (text-align: left)
   - Icon is at physical RIGHT (order: 3)
   - Full space distributed across the field
   ========================================================================= */
.icon-right .sona3-form__icon,
.icon-right .sona3-field-icon,
.icon-right > .dashicons:not(.sona3-select-chevron),
.sona3-field-control.icon-right .sona3-field-icon,
.sona3-input-wrapper.icon-right .sona3-field-icon,
.sona3-form .icon-right .sona3-field-icon,
.elementor .sona3-form .icon-right .sona3-field-icon,
.rtl .icon-right .sona3-form__icon,
.rtl .icon-right .sona3-field-icon,
.rtl .sona3-form .icon-right .sona3-field-icon {
	order: 3 !important;
	margin-left: 14px !important;
	margin-right: 0 !important;
	position: static !important;
}

.icon-right .sona3-form__content,
.icon-right .sona3-field-content,
.icon-right .sona3-form__input,
.icon-right .sona3-input,
.icon-right input,
.icon-right textarea,
.icon-right .sona3-field-placeholder,
.icon-right .sona3-form__placeholder,
.icon-right .sona3-field-description,
.icon-right .sona3-form__description,
.sona3-form .icon-right input,
.elementor .sona3-form .icon-right input,
.rtl .icon-right .sona3-form__input,
.rtl .icon-right .sona3-input,
.rtl .icon-right input,
.rtl .sona3-form .icon-right input,
.elementor .rtl .sona3-form .icon-right input {
	text-align: left !important;
	direction: ltr !important;
}

.icon-right.is-select .sona3-select-chevron,
.icon-right .sona3-select-chevron {
	order: 1 !important;
	margin-right: 10px !important;
	margin-left: 0 !important;
}

/* Default alignment when no icon is present */
.no-icon .sona3-form__content,
.no-icon .sona3-field-content,
.no-icon .sona3-form__input,
.no-icon .sona3-input,
.no-icon input,
.no-icon textarea,
.no-icon .sona3-field-placeholder,
.no-icon .sona3-form__placeholder,
.sona3-rtl .no-icon input,
.rtl .sona3-form .no-icon input {
	text-align: right !important;
	direction: rtl !important;
}

.sona3-ltr .no-icon input,
[dir="ltr"] .sona3-form .no-icon input {
	text-align: left !important;
	direction: ltr !important;
}

/* Inline SVG School / Institution icon */
.sona3-school-svg {
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
	flex-shrink: 0;
}

/* Dashicon school / academy / institution: small horizontal educational institution building (SVG Mask) */
.sona3-school:before,
.dashicons.sona3-school:before,
.dashicons-sona3-school:before,
.dashicons-school:before,
.dashicons.school:before,
.dashicons-institution:before,
.dashicons.institution:before,
.dashicons-academy:before,
.dashicons.academy:before,
.dashicons-bank:before,
.dashicons.bank:before {
	content: "" !important;
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	vertical-align: middle !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3.5L2 8.5v1.5h20V8.5L12 3.5zM3 11v8h2.5v-8H3zm5.25 0v8h2.5v-8h-2.5zm5.25 0v8h2.5v-8h-2.5zm5.25 0v8h2.5v-8h-2.5zM1 20v2h22v-2H1z'/%3E%3C/svg%3E") no-repeat center / contain !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 3.5L2 8.5v1.5h20V8.5L12 3.5zM3 11v8h2.5v-8H3zm5.25 0v8h2.5v-8h-2.5zm5.25 0v8h2.5v-8h-2.5zm5.25 0v8h2.5v-8h-2.5zM1 20v2h22v-2H1z'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* Dashicon study level / degree / education: graduation cap / mortarboard \f118 (dashicons-welcome-learn-more) */
.dashicons-welcome-learn-more:before,
.dashicons.welcome-learn-more:before,
.dashicons-education:before,
.dashicons.education:before {
	content: "\f118" !important;
}

/* Label Icon for choice groups / headings */
.sona3-label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline-end: 10px;
	margin-inline-start: 4px;
	vertical-align: middle;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Choice Icon for single checkbox */
.sona3-choice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-inline: 8px;
	vertical-align: middle;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* =========================================================================
   4. Select Dropdown (Chevron + Full Overlay Select)
   ========================================================================= */
.sona3-form__control.is-select,
.sona3-field-control.is-select,
.sona3-input-wrapper.is-select {
	cursor: pointer;
}

.sona3-form__select,
.sona3-field-control.is-select select,
.sona3-input-wrapper.is-select select,
.sona3-form select.sona3-select,
.elementor .sona3-form select.sona3-select {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	cursor: pointer !important;
	z-index: 5 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.sona3-form__chevron,
.sona3-select-chevron,
.sona3-form .sona3-select-chevron,
.elementor .sona3-form .sona3-select-chevron {
	order: 4 !important;
	color: #94a3b8 !important;
	font-size: 16px !important;
	width: 16px !important;
	height: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: none !important;
	flex-shrink: 0 !important;
	margin-left: 10px !important;
	margin-right: 0 !important;
	position: static !important;
}

/* =========================================================================
   5. Textarea Control
   ========================================================================= */
.sona3-form__control.is-textarea,
.sona3-field-control.is-textarea,
.sona3-input-wrapper.is-textarea {
	min-height: 84px;
	align-items: flex-start;
	padding-top: 10px;
	padding-bottom: 10px;
}

.sona3-form__textarea,
.sona3-field-content .sona3-textarea {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	font-size: var(--sona3-font-size, 14px) !important;
	color: var(--sona3-input-text, var(--sona3-text, #1e293b)) !important;
	min-height: 64px;
	resize: vertical;
	font-family: inherit;
}

/* =========================================================================
   6. Choices: Radio & Checkboxes
   ========================================================================= */
.sona3-choice-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sona3-choice-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	user-select: none;
}

.sona3-choice-item input {
	accent-color: var(--sona3-primary);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.sona3-field-desc {
	font-size: 12px;
	color: var(--sona3-text-muted);
	margin-top: 4px;
}

/* =========================================================================
   7. Submit Button & Alignment (Part B)
   ========================================================================= */
.sona3-form__submit-wrapper,
.sona3-form-actions {
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin-top: 24px;
}

/* Alignment Classes */
.sona3-form__submit-wrapper.sona3-align-left,
.sona3-form-actions.sona3-align-left {
	justify-content: flex-start !important;
}

.sona3-form__submit-wrapper.sona3-align-center,
.sona3-form-actions.sona3-align-center {
	justify-content: center !important;
}

.sona3-form__submit-wrapper.sona3-align-right,
.sona3-form-actions.sona3-align-right {
	justify-content: flex-end !important;
}

/* Button Width & Margins */
.sona3-form__submit-wrapper.is-full-width .sona3-submit-btn,
.sona3-form-actions.is-full-width .sona3-submit-btn {
	width: 100% !important;
	display: block !important;
	margin: 0 !important;
}

.sona3-form__submit-wrapper.is-auto-width.sona3-align-left .sona3-submit-btn,
.sona3-form-actions.is-auto-width.sona3-align-left .sona3-submit-btn {
	width: auto !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.sona3-form__submit-wrapper.is-auto-width.sona3-align-center .sona3-submit-btn,
.sona3-form-actions.is-auto-width.sona3-align-center .sona3-submit-btn {
	width: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.sona3-form__submit-wrapper.is-auto-width.sona3-align-right .sona3-submit-btn,
.sona3-form-actions.is-auto-width.sona3-align-right .sona3-submit-btn {
	width: auto !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}

.sona3-form__submit-button,
.sona3-submit-btn {
	background-color: var(--sona3-btn-bg, var(--sona3-primary, #7EC1C9));
	color: var(--sona3-btn-text, #ffffff);
	border: none;
	padding: var(--sona3-btn-padding, 12px 28px);
	border-radius: var(--sona3-btn-radius, 8px);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--sona3-transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: 0 2px 8px rgba(126, 193, 201, 0.35);
}

.sona3-form__submit-button:hover,
.sona3-submit-btn:hover {
	filter: brightness(0.93);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(126, 193, 201, 0.45);
}

.sona3-form__submit-button:disabled,
.sona3-submit-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

/* =========================================================================
   8. Alerts & Notices
   ========================================================================= */
.sona3-form-alert-container {
	padding: 12px 16px;
	border-radius: var(--sona3-radius);
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
}

.sona3-alert-success {
	background-color: var(--sona3-success-bg);
	border: 1px solid var(--sona3-success);
	color: #065f46;
}

.sona3-alert-error {
	background-color: var(--sona3-error-bg);
	border: 1px solid var(--sona3-error);
	color: #991b1b;
}

.sona3-notice-box {
	padding: 14px 18px;
	border-radius: var(--sona3-radius);
	font-size: 13px;
	margin: 10px 0;
}

.sona3-notice-warning {
	background: #fffbeb;
	border-inline-start: 4px solid #f59e0b;
	color: #92400e;
}

.sona3-heading-text {
	margin: 16px 0 6px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--sona3-text);
}

.sona3-divider-line {
	border: none;
	border-top: 1px solid var(--sona3-border);
	margin: 12px 0;
	width: 100%;
}

/* Field Error State & Validation UI */
.sona3-field-item.has-field-error .sona3-field-control,
.sona3-field-item.has-field-error .sona3-input-wrapper,
.sona3-field-control.has-error,
.sona3-field-control.sona3-input-error,
.sona3-input-wrapper.has-error,
.sona3-input-wrapper.sona3-input-error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

.sona3-field-error-msg {
	display: none;
	color: #dc2626 !important;
	font-size: 12px !important;
	margin-top: 6px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

/* Hide inner guidance / description when field has value */
.sona3-field-control.has-value .sona3-form__description,
.sona3-field-control.has-value .sona3-field-description,
.sona3-input-wrapper.has-value .sona3-form__description,
.sona3-input-wrapper.has-value .sona3-field-description {
	display: none !important;
}

/* =========================================================================
   9. Dynamic Ineligible Academic Level Notice
   ========================================================================= */
.sona3-ineligible-notice {
	display: none;
	background-color: #fffbeb;
	border: 1px solid #fde68a;
	border-inline-start: 4px solid #f59e0b;
	color: #92400e;
	padding: 14px 18px;
	border-radius: var(--sona3-radius, 8px);
	margin-top: 12px;
	margin-bottom: 16px;
	font-size: 14px;
	line-height: 1.6;
	box-shadow: 0 2px 10px rgba(245, 158, 11, 0.08);
	animation: sona3FadeIn 0.25s ease-in-out;
}

.sona3-ineligible-notice .sona3-ineligible-text {
	font-weight: 500;
}

@keyframes sona3FadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}