/**
 * Briefify — front-end stepper form styles.
 * Ported from the "[portfolio_quote_form]" prototype, generalized and
 * namespaced under .briefify-* so it never leaks into the host theme.
 * Typography intentionally inherits the active WordPress theme.
 *
 * Every color in this file resolves through the custom properties below —
 * no color literal appears anywhere else in the stylesheet. Alpha-blended
 * colors use an "-rgb" triplet variable consumed via rgba(var(--x-rgb), a)
 * since CSS custom properties can't carry partial opacity on their own.
 * This is what lets Briefify Pro's custom branding drop in a client's own
 * palette by overriding this block alone, no CSS rewrite required.
 */

.briefify-wrap {
	/* Brand palette — override these to re-brand the form. */
	--briefify-accent: #2bd4bf;
	--briefify-accent-rgb: 43, 212, 191;
	--briefify-accent-2: #4f7cff;
	--briefify-accent-2-rgb: 79, 124, 255;
	--briefify-bg-rgb: 8, 18, 32;
	--briefify-ink: #04111f;
	--briefify-surface: rgba( 13, 26, 43, 0.9 );
	--briefify-surface-2: rgba( var( --briefify-bg-rgb ), 0.95 );
	--briefify-line: rgba( 101, 150, 214, 0.28 );
	--briefify-text-0: #f4f8ff;
	--briefify-text-1: #b3c3d7;
	--briefify-text-1-rgb: 179, 195, 215;
	--briefify-error: #ff6b6b;
	--briefify-error-rgb: 255, 107, 107;
	--briefify-success: #5dcaa5;
	--briefify-success-rgb: 93, 202, 165;
	--briefify-overlay-rgb: 255, 255, 255;
	--briefify-shadow-rgb: 0, 0, 0;

	max-width: 880px;
	margin: 0 auto;
	box-sizing: border-box;
}

.briefify-wrap *,
.briefify-wrap *::before,
.briefify-wrap *::after {
	box-sizing: border-box;
}

.briefify-form {
	background: linear-gradient( 160deg, var( --briefify-surface ), var( --briefify-surface-2 ) );
	border: 1px solid var( --briefify-line );
	border-radius: 22px;
	padding: 3rem;
	box-shadow: 0 24px 60px rgba( var( --briefify-shadow-rgb ), 0.45 ), inset 0 1px 0 rgba( var( --briefify-overlay-rgb ), 0.06 );
	color: var( --briefify-text-0 );
}

/* Progress bar */
.briefify-progress-bar {
	height: 3px;
	background: rgba( var( --briefify-overlay-rgb ), 0.07 );
	border-radius: 2px;
	margin-bottom: 1.75rem;
	overflow: hidden;
}

.briefify-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient( 90deg, var( --briefify-accent ), var( --briefify-accent-2 ) );
	border-radius: 2px;
	transition: width 0.4s ease;
}

/* Stepper header */
.briefify-stepper-header {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: 2.5rem;
	padding-bottom: 1.75rem;
	border-bottom: 1px solid rgba( var( --briefify-overlay-rgb ), 0.06 );
	flex-wrap: nowrap;
	overflow: hidden;
}

.briefify-step-item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.briefify-bubble {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	background: rgba( var( --briefify-overlay-rgb ), 0.06 );
	border: 1px solid rgba( var( --briefify-overlay-rgb ), 0.12 );
	color: var( --briefify-text-0 );
	transition: all 0.3s ease;
}

.briefify-bubble--active {
	background: rgba( var( --briefify-accent-rgb ), 0.18 );
	border-color: var( --briefify-accent );
	color: var( --briefify-accent );
	box-shadow: 0 0 14px rgba( var( --briefify-accent-rgb ), 0.22 );
}

.briefify-bubble--done {
	background: rgba( var( --briefify-accent-rgb ), 0.15 );
	border-color: rgba( var( --briefify-accent-rgb ), 0.6 );
	color: var( --briefify-accent );
}

.briefify-step-label {
	font-size: 12px;
	font-weight: 600;
	color: var( --briefify-text-0 );
	white-space: nowrap;
}

.briefify-step-label--muted {
	color: var( --briefify-text-1 );
	font-weight: 400;
}

.briefify-connector {
	flex: 1;
	height: 1px;
	background: rgba( var( --briefify-overlay-rgb ), 0.08 );
	margin: 0 8px;
	min-width: 12px;
}

.briefify-connector--done {
	background: linear-gradient( 90deg, var( --briefify-accent ), rgba( var( --briefify-accent-rgb ), 0.4 ) );
}

/* Steps */
.briefify-step--hidden {
	display: none;
}

.briefify-step-title {
	font-size: 19px;
	font-weight: 700;
	color: var( --briefify-text-0 );
	margin: 0 0 1.75rem;
}

.briefify-step-note {
	font-size: 13px;
	color: var( --briefify-text-1 );
	line-height: 1.65;
	background: rgba( var( --briefify-accent-rgb ), 0.06 );
	border-left: 2px solid rgba( var( --briefify-accent-rgb ), 0.4 );
	border-radius: 0 8px 8px 0;
	padding: 10px 14px;
	margin-bottom: 1.75rem;
}

.briefify-step-error {
	background: rgba( var( --briefify-error-rgb ), 0.1 );
	border: 1px solid rgba( var( --briefify-error-rgb ), 0.25 );
	border-radius: 8px;
	padding: 10px 16px;
	color: var( --briefify-error );
	font-size: 14px;
	margin-bottom: 1.5rem;
}

/* Type grid (step 1) */
.briefify-type-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
	margin-bottom: 2rem;
}

.briefify-type-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 20px 18px;
	border-radius: 14px;
	border: 1px solid rgba( var( --briefify-overlay-rgb ), 0.08 );
	background: rgba( var( --briefify-overlay-rgb ), 0.03 );
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.briefify-type-card input[type="radio"] {
	display: none;
}

.briefify-type-card:hover {
	transform: translateY( -3px );
	border-color: rgba( var( --briefify-accent-rgb ), 0.5 );
	background: rgba( var( --briefify-accent-rgb ), 0.12 );
}

.briefify-type-card.is-selected {
	border-color: var( --briefify-accent );
	background: rgba( var( --briefify-accent-rgb ), 0.12 );
	box-shadow: 0 0 20px rgba( var( --briefify-accent-rgb ), 0.12 );
}

.briefify-type-card.is-selected .briefify-type-icon {
	transform: scale( 1.2 );
}

.briefify-type-icon {
	display: flex;
	align-items: center;
	color: var( --briefify-accent );
	transition: transform 0.25s ease, color 0.25s ease;
}

.briefify-type-label {
	font-size: 15px;
	font-weight: 700;
	color: var( --briefify-text-0 );
	margin: 0;
}

.briefify-type-sub {
	font-size: 12px;
	color: var( --briefify-text-1 );
	line-height: 1.45;
}

/* Chips (steps 2-5) */
.briefify-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
}

.briefify-chip {
	padding: 10px 22px;
	border-radius: 24px;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	border: 1px solid rgba( var( --briefify-overlay-rgb ), 0.18 );
	background: rgba( var( --briefify-overlay-rgb ), 0.07 );
	color: var( --briefify-text-0 );
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.briefify-chip:hover {
	border-color: rgba( var( --briefify-accent-rgb ), 0.55 );
	background: rgba( var( --briefify-accent-rgb ), 0.08 );
	color: var( --briefify-accent );
	transform: translateY( -2px );
}

.briefify-chip.is-selected {
	border-color: var( --briefify-accent );
	background: rgba( var( --briefify-accent-rgb ), 0.14 );
	color: var( --briefify-accent );
	font-weight: 600;
	box-shadow: 0 0 12px rgba( var( --briefify-accent-rgb ), 0.15 );
}

/* Labels, hints, fields */
.briefify-field-group {
	margin-bottom: 2rem;
}

.briefify-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: rgba( var( --briefify-text-1-rgb ), 0.9 );
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.briefify-label-hint {
	font-size: 11px;
	font-weight: 400;
	font-style: normal;
	color: var( --briefify-text-1 );
	opacity: 0.7;
	text-transform: none;
	letter-spacing: 0;
}

.briefify-label-hint--block {
	display: block;
	font-size: 12px;
	color: var( --briefify-text-1 );
	margin-bottom: 10px;
	opacity: 0.75;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.briefify-required {
	color: var( --briefify-accent );
}

.briefify-input {
	width: 100%;
	background: rgba( var( --briefify-overlay-rgb ), 0.04 );
	border: 1px solid rgba( var( --briefify-overlay-rgb ), 0.1 );
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 14px;
	color: var( --briefify-text-0 );
	font-family: inherit;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.briefify-input::placeholder {
	color: var( --briefify-text-1 );
	opacity: 0.5;
}

.briefify-input:focus {
	outline: none;
	border-color: rgba( var( --briefify-accent-rgb ), 0.6 );
	background: rgba( var( --briefify-accent-rgb ), 0.04 );
	box-shadow: 0 0 0 3px rgba( var( --briefify-accent-rgb ), 0.08 );
}

.briefify-input.briefify-input--invalid {
	border-color: var( --briefify-error );
}

.briefify-textarea {
	resize: vertical;
	min-height: 100px;
}

.briefify-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Recap */
.briefify-recap {
	background: rgba( var( --briefify-accent-rgb ), 0.04 );
	border: 1px solid rgba( var( --briefify-accent-rgb ), 0.15 );
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
}

.briefify-recap-title {
	font-size: 11px;
	font-weight: 600;
	color: var( --briefify-accent );
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 12px;
}

.briefify-recap-empty {
	font-size: 13px;
	color: var( --briefify-text-1 );
	margin: 0;
}

.briefify-recap-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 7px 0;
	border-bottom: 1px solid rgba( var( --briefify-overlay-rgb ), 0.05 );
	font-size: 13px;
}

.briefify-recap-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.briefify-recap-key {
	color: var( --briefify-text-1 );
	flex-shrink: 0;
	margin-right: 1rem;
}

.briefify-recap-val {
	color: var( --briefify-text-0 );
	font-weight: 600;
	text-align: right;
	max-width: 65%;
	line-height: 1.4;
}

/* Actions */
.briefify-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba( var( --briefify-overlay-rgb ), 0.06 );
}

.briefify-actions--right {
	justify-content: flex-end;
}

.briefify-btn-back {
	background: none;
	border: none;
	color: var( --briefify-text-1 );
	font-size: 14px;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	transition: color 0.2s ease;
}

.briefify-btn-back:hover {
	color: var( --briefify-text-0 );
}

.briefify-btn-primary {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	border-radius: 10px;
	font-weight: 700;
	font-family: inherit;
	font-size: 14px;
	padding: 0.72rem 1.4rem;
	color: var( --briefify-ink );
	background: linear-gradient( 90deg, var( --briefify-accent ), var( --briefify-accent-2 ) );
	border: 1px solid rgba( var( --briefify-overlay-rgb ), 0.16 );
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.briefify-btn-primary:hover {
	box-shadow: 0 12px 30px rgba( var( --briefify-accent-rgb ), 0.28 );
	transform: translateY( -1px );
}

.briefify-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Success state */
.briefify-success {
	text-align: center;
	padding: 3rem 2rem;
	background: linear-gradient( 160deg, var( --briefify-surface ), var( --briefify-surface-2 ) );
	border: 1px solid var( --briefify-line );
	border-radius: 22px;
	box-shadow: 0 24px 60px rgba( var( --briefify-shadow-rgb ), 0.45 );
}

.briefify-success-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba( var( --briefify-accent-rgb ), 0.15 );
	border: 2px solid var( --briefify-accent );
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.25rem;
	color: var( --briefify-accent );
}

.briefify-success h3 {
	font-size: 20px;
	font-weight: 700;
	color: var( --briefify-text-0 );
	margin: 0 0 0.5rem;
}

.briefify-success p {
	color: var( --briefify-text-1 );
	font-size: 15px;
	margin: 0;
}

/* Responsive */
@media ( max-width: 900px ) {
	.briefify-form {
		padding: 2rem 1.75rem;
	}

	.briefify-stepper-header .briefify-step-label:not( .briefify-step-label--active ) {
		display: none;
	}
}

@media ( max-width: 767px ) {
	.briefify-form {
		padding: 1.5rem 1.25rem;
	}

	.briefify-type-grid {
		grid-template-columns: 1fr 1fr;
	}

	.briefify-row-2col {
		grid-template-columns: 1fr;
	}

	.briefify-stepper-header .briefify-step-label {
		display: none;
	}

	.briefify-connector {
		min-width: 8px;
		margin: 0 4px;
	}

	.briefify-bubble {
		width: 28px;
		height: 28px;
		font-size: 11px;
	}
}

@media ( max-width: 480px ) {
	.briefify-type-grid {
		grid-template-columns: 1fr;
	}
}