/**
 * Contact Form Block - Frontend Styles
 *
 * @package groupBK
 * @version 1.0.0
 *
 * Uses design tokens from design-tokens.css
 */

/* ===========================================
 * Utility
 * =========================================== */
.is-hidden {
	display: none !important;
}

/* ===========================================
 * Block Section Wrapper
 * =========================================== */
.wp-block-groupbk-form {
	background: var(--color-brand-secondary-200);
	padding: var(--space-80) var(--space-16);
}

/* ===========================================
 * Form Wrapper (max-width centering)
 * =========================================== */
.groupbk-form__wrapper {
	max-width: 600px;
	margin: 0 auto;
}

/* ===========================================
 * Card
 * =========================================== */
.groupbk-form__card {
	background: var(--color-bg-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-32);
}

/* ===========================================
 * Form Heading
 * =========================================== */
.groupbk-form__heading {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-24);
}

/* ===========================================
 * Form Layout
 * =========================================== */
.groupbk-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* ===========================================
 * Field Group
 * =========================================== */
.groupbk-form__field-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

/* ===========================================
 * Label
 * =========================================== */
.groupbk-form__label {
	font-size: var(--label-font-size, 0.875rem);
	font-weight: var(--label-font-weight, 500);
	color: var(--label-color, var(--color-text-primary));
}

/* ===========================================
 * Inputs, Textarea, Select — Shared
 * =========================================== */
.groupbk-form__input,
.groupbk-form__textarea,
.groupbk-form__select {
	width: 100%;
	border: var(--input-border-width, 1px) solid var(--input-border, var(--color-brand-secondary-500));
	border-radius: var(--input-border-radius, var(--radius-md));
	padding: var(--input-padding-y, 0.25rem) var(--input-padding-x, 1rem);
	background: var(--input-bg, #fff);
	color: var(--input-text, var(--color-text-primary));
	font-size: var(--font-size-body-1);
	font-family: inherit;
	transition: border-color var(--transition-fast, 0.15s ease);
	box-sizing: border-box;
}

.groupbk-form__input {
	height: var(--input-height, 3rem);
}

.groupbk-form__textarea {
	height: 8rem;
	resize: vertical;
}

.groupbk-form__select {
	height: var(--input-height, 3rem);
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23135A70' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

/* Focus state */
.groupbk-form__input:focus,
.groupbk-form__textarea:focus,
.groupbk-form__select:focus {
	outline: none;
	border-color: var(--input-border-focus, var(--color-brand-primary));
}

/* Hover state */
.groupbk-form__input:hover,
.groupbk-form__textarea:hover,
.groupbk-form__select:hover {
	border-color: var(--input-border-hover, var(--color-text-secondary));
}

/* ===========================================
 * Error State — Field Group
 * =========================================== */
.groupbk-form__field-group.has-error .groupbk-form__input,
.groupbk-form__field-group.has-error .groupbk-form__textarea,
.groupbk-form__field-group.has-error .groupbk-form__select {
	border-color: var(--input-border-error, var(--color-text-error, #FF5000));
}

.groupbk-form__field-group.has-error .groupbk-form__phone-prefix,
.groupbk-form__field-group.has-error .groupbk-form__phone-input-wrapper {
	border-color: var(--input-border-error, var(--color-text-error, #FF5000));
}

/* ===========================================
 * Field Error Message
 * =========================================== */
.groupbk-form__field-error {
	font-size: var(--helper-font-size, 0.75rem);
	color: var(--helper-color-error, var(--color-text-error, #FF5000));
	display: none;
}

.groupbk-form__field-group.has-error .groupbk-form__field-error {
	display: block;
}

/* ===========================================
 * Phone Wrapper
 * =========================================== */
.groupbk-form__phone-wrapper {
	display: flex;
	align-items: stretch;
}

.groupbk-form__phone-prefix {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding: 0 var(--space-12);
	border: var(--input-border-width, 1px) solid var(--input-border, var(--color-brand-secondary-500));
	border-right: none;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	background: var(--input-bg, #fff);
	white-space: nowrap;
	font-size: var(--font-size-body-1);
	color: var(--color-text-secondary);
}

.groupbk-form__phone-input-wrapper {
	display: flex;
	align-items: center;
	flex: 1;
	height: var(--input-height, 3rem);
	gap: var(--space-8);
	border: var(--input-border-width, 1px) solid var(--input-border, var(--color-brand-secondary-500));
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: 0 var(--input-padding-x, 1rem);
	background: var(--input-bg, #fff);
}

.groupbk-form__phone-input-wrapper .groupbk-form__input.groupbk-form__input--phone {
	border: none;
	outline: none;
	flex: 1;
	height: 100%;
	background: transparent;
	font-size: var(--font-size-body-1);
	font-family: inherit;
	color: var(--input-text, var(--color-text-primary));
	padding: 0;
	width: 100%;
}

/* ===========================================
 * Character Counter
 * =========================================== */
.groupbk-form__char-counter {
	text-align: right;
	font-size: var(--helper-font-size, 0.75rem);
	color: var(--helper-color, var(--color-text-tertiary));
}

/* ===========================================
 * Checkbox Field Group
 * =========================================== */
.groupbk-form__field-group--checkbox {
	gap: var(--space-8);
}

.groupbk-form__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	cursor: pointer;
}

.groupbk-form__checkbox {
	width: var(--checkbox-size, 1.25rem);
	height: var(--checkbox-size, 1.25rem);
	border: var(--checkbox-border-width, 1px) solid var(--checkbox-border, var(--color-brand-secondary-500));
	border-radius: var(--checkbox-border-radius, var(--radius-sm));
	cursor: pointer;
	flex-shrink: 0;
	margin-top: 0.125rem;
	accent-color: var(--color-brand-primary);
}

.groupbk-form__checkbox-text {
	font-size: var(--font-size-body-1);
	color: var(--color-text-primary);
	line-height: 1.5;
}

.groupbk-form__privacy-link {
	color: inherit;
	text-decoration: underline;
}

/* ===========================================
 * Server Error
 * =========================================== */
.groupbk-form__server-error {
	color: var(--color-text-error, #FF5000);
	font-size: var(--helper-font-size, 0.75rem);
	padding: var(--space-8) var(--space-12);
	background: rgba(255, 80, 0, 0.08);
	border-radius: var(--radius-sm);
	display: none;
}

.groupbk-form__server-error:not(.is-hidden) {
	display: block;
}

/* ===========================================
 * Submit Button
 * =========================================== */
.groupbk-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	height: var(--btn-height-md, 3rem);
	padding: 0 var(--btn-padding-x-lg, 2.5rem);
	background: var(--btn-primary-bg, var(--color-brand-primary));
	color: var(--btn-primary-text, #fff);
	font-size: var(--font-size-button-lg, 1rem);
	font-weight: var(--font-weight-button, 600);
	letter-spacing: var(--letter-spacing-button, 0);
	border: none;
	border-radius: var(--btn-border-radius, var(--radius-lg));
	cursor: pointer;
	transition: background var(--transition-fast, 0.15s ease);
	align-self: flex-start;
	font-family: inherit;
}

.groupbk-form__submit:hover {
	background: var(--btn-primary-bg-hover, var(--color-brand-primary-700));
}

.groupbk-form__submit:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: 2px;
}

.groupbk-form__submit:disabled {
	background: var(--btn-primary-bg-disabled, var(--color-brand-secondary-400));
	color: var(--btn-primary-text-disabled, var(--color-text-disabled));
	cursor: not-allowed;
}

/* Submit spinner */
.groupbk-form__submit-spinner {
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: groupbk-spin 0.8s linear infinite;
}

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

/* ===========================================
 * Thank-you Panel
 * =========================================== */
.groupbk-form__thankyou {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-24);
	padding: var(--space-48) var(--space-32);
	border-radius: var(--radius-lg);
	background: linear-gradient(-11deg, #D0DEE2 22%, #135A70 80%);
	min-height: 400px;
}

.groupbk-form__thankyou-icon {
	color: #D0DEE2;
	width: 4.5rem;
	height: auto;
}

.groupbk-form__thankyou-heading {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-semibold);
	color: #D0DEE2;
	margin: 0;
}

.groupbk-form__thankyou-subtext {
	font-size: 1.25rem;
	font-weight: var(--font-weight-semibold);
	color: #A1BDC6;
	margin: 0;
}

/* ===========================================
 * Responsive — Tablet (≥768px)
 * =========================================== */
@media (min-width: 768px) {
	.wp-block-groupbk-form {
		padding: var(--space-128) var(--space-24);
	}
}

/* ===========================================
 * Responsive — Desktop (≥1024px)
 * =========================================== */
@media (min-width: 1024px) {
	.wp-block-groupbk-form {
		padding: var(--space-128) var(--grid-margin-desktop);
	}

	.groupbk-form__card {
		padding: var(--space-48);
	}
}

/* ===========================================
 * Accessibility — Reduced Motion
 * =========================================== */
@media (prefers-reduced-motion: reduce) {
	.groupbk-form__submit,
	.groupbk-form__submit-spinner,
	.groupbk-form__input,
	.groupbk-form__textarea,
	.groupbk-form__select {
		transition: none;
	}

	.groupbk-form__submit-spinner {
		animation: none;
	}
}