/*
 * FixPro Florida — public-facing component and form styles.
 * All values use CSS custom properties injected by the plugin via wp_head.
 * Do NOT hard-code colours or font names here.
 */

/* ── Auth card (register / verify-phone pages) ──────────────────────────── */

.fp-auth-wrap {
	min-height:      calc(100vh - 120px);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         2rem 1rem;
	background-color: var(--fp-bg);
}

.fp-auth-card {
	background:    #ffffff;
	border-radius: calc(var(--fp-border-radius) * 2);
	box-shadow:    0 4px 28px rgba(0, 0, 0, .08);
	padding:       2.5rem 2rem;
	width:         100%;
	max-width:     480px;
}

@media (max-width: 520px) {
	.fp-auth-card {
		border-radius: var(--fp-border-radius);
		padding:       1.75rem 1.25rem;
	}
}

.fp-auth-logo {
	text-align:    center;
	margin-bottom: 1.5rem;
}

.fp-auth-logo a {
	font-size:       1.375rem;
	font-weight:     700;
	color:           var(--fp-primary);
	text-decoration: none;
}

.fp-auth-title {
	font-size:   1.375rem;
	font-weight: 700;
	color:       var(--fp-text);
	margin:      0 0 .375rem;
	text-align:  center;
}

.fp-auth-subtitle {
	font-size:   .9375rem;
	color:       #6b7280;
	text-align:  center;
	margin:      0 0 1.75rem;
	line-height: 1.55;
}

/* ── Alert banners ───────────────────────────────────────────────────────── */

.fp-alert {
	display:       flex;
	align-items:   flex-start;
	gap:           .5rem;
	padding:       .8125rem 1rem;
	border-radius: var(--fp-border-radius);
	font-size:     .9rem;
	line-height:   1.5;
	margin-bottom: 1.25rem;
}

.fp-alert ul {
	margin:       0;
	padding-left: 1.2em;
}

.fp-alert--error {
	background: #fef2f2;
	color:      #991b1b;
	border:     1px solid #fecaca;
}

.fp-alert--success {
	background: #f0fdf4;
	color:      #166534;
	border:     1px solid #bbf7d0;
}

.fp-alert--info {
	background: #eff6ff;
	color:      #1e40af;
	border:     1px solid #bfdbfe;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */

.fp-field-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1rem;
}

@media (max-width: 420px) {
	.fp-field-row {
		grid-template-columns: 1fr;
	}
}

.fp-field {
	display:        flex;
	flex-direction: column;
	gap:            .375rem;
	margin-bottom:  1.125rem;
}

.fp-field label {
	font-size:   .875rem;
	font-weight: 500;
	color:       var(--fp-text);
}

.fp-required {
	color:       #ef4444;
	margin-left: 2px;
}

.fp-field input[type="text"],
.fp-field input[type="email"],
.fp-field input[type="tel"],
.fp-field input[type="password"],
.fp-field input[type="number"],
.fp-field select,
.fp-field textarea {
	border:        1.5px solid #d1d5db;
	border-radius: var(--fp-border-radius);
	padding:       .5625em .875em;
	font-size:     var(--fp-font-size-body);
	font-family:   var(--fp-font-family);
	color:         var(--fp-text);
	background:    #ffffff;
	width:         100%;
	box-sizing:    border-box;
	transition:    border-color .15s ease, box-shadow .15s ease;
}

.fp-field input:focus,
.fp-field select:focus,
.fp-field textarea:focus {
	outline:      none;
	border-color: var(--fp-primary);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--fp-primary) 15%, transparent);
}

.fp-field--error input,
.fp-field--error select,
.fp-field--error textarea {
	border-color: #ef4444;
}

.fp-field-hint {
	font-size: .8rem;
	color:     #6b7280;
}

/* ── Checkbox ────────────────────────────────────────────────────────────── */

.fp-field--checkbox {
	flex-direction: row;
	align-items:    flex-start;
	gap:            .625rem;
}

.fp-field--checkbox input[type="checkbox"] {
	width:        1.125rem;
	height:       1.125rem;
	margin-top:   .125rem;
	flex-shrink:  0;
	accent-color: var(--fp-primary);
	cursor:       pointer;
}

.fp-field--checkbox label {
	font-size:   .875rem;
	font-weight: 400;
	line-height: 1.55;
	cursor:      pointer;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.fp-btn-full {
	width:       100%;
	padding:     .75em 1.5em;
	font-size:   var(--fp-font-size-button);
	font-weight: 600;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.fp-divider {
	border:     none;
	border-top: 1px solid #e5e7eb;
	margin:     1.5rem 0;
}

.fp-auth-footer {
	text-align: center;
	font-size:  .875rem;
	color:      #6b7280;
	margin:     1.25rem 0 0;
}

.fp-auth-footer a {
	color:       var(--fp-primary);
	font-weight: 500;
}

/* ── OTP code input ──────────────────────────────────────────────────────── */

.fp-otp-input {
	text-align:     center !important;
	letter-spacing: .4em;
	font-size:      1.625rem !important;
	font-weight:    700;
	padding:        .5em .25em !important;
}

.fp-otp-hint {
	text-align: center;
	font-size:  .8375rem;
	color:      #6b7280;
}

.fp-resend-wrap {
	text-align:  center;
	margin-top:  1.25rem;
	font-size:   .875rem;
	color:       #6b7280;
	line-height: 1.6;
}

.fp-resend-wrap p {
	margin: 0 0 .25rem;
}

.fp-resend-btn {
	background:      none !important;
	border:          none !important;
	padding:         0 !important;
	color:           var(--fp-primary) !important;
	font-weight:     500;
	font-size:       .875rem;
	cursor:          pointer;
	text-decoration: underline;
	font-family:     var(--fp-font-family);
}