/* SmartDLR Engage — Frontend Form Styles  "Prestige Drive"
   CSS custom properties are set inline by PHP (sdle_get_css_variables()).
   Fallback values use the Prestige Drive navy/gold theme.
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;600&display=swap');

/* ---- CSS Custom Properties ---- */
:root {
	--sdle-primary:    #0d1b2a;
	--sdle-accent:     #c9a84c;
	--sdle-accent-dk:  #a8893d;
	--sdle-btn-text:   #ffffff;
	--sdle-radius:     6px;
	--sdle-font:       'DM Sans', system-ui, sans-serif;
	--sdle-maxw:       720px;
	--sdle-gold-grad:  linear-gradient(135deg, #c9a84c 0%, #a8893d 100%);
	--sdle-border:     #dce3ec;
	--sdle-bg-subtle:  #f7f8fa;
}

/* ---- Box Sizing ---- */
.sdle-form-wrap,
.sdle-form-wrap *,
.sdle-form-wrap *::before,
.sdle-form-wrap *::after {
	box-sizing: border-box;
}

/* ---- Wrapper ---- */
.sdle-form-wrap {
	max-width: var(--sdle-maxw);
	margin: 0 auto;
	font-family: var(--sdle-font);
	font-size: 16px;
	color: #2c3e50;
}

/* ---- Form card shell ---- */
.sdle-form {
	background: #fff;
	border-radius: var(--sdle-radius);
	box-shadow: 0 4px 32px rgba(13,27,42,.10), 0 1px 4px rgba(13,27,42,.06);
	overflow: hidden;
}

/* ---- Form Header ---- */
.sdle-form-header {
	background: var(--sdle-primary);
	padding: 28px 32px 22px;
	position: relative;
	overflow: hidden;
}

.sdle-form-header::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 3px;
	background: var(--sdle-gold-grad);
}

.sdle-form-header h2 {
	margin: 0 0 6px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.01em;
	line-height: 1.25;
}

.sdle-secure-note {
	margin: 0;
	font-size: 0.78rem;
	color: rgba(255,255,255,.65);
	display: flex;
	align-items: center;
	gap: 5px;
	letter-spacing: .02em;
}

/* ---- Sections ---- */
.sdle-section {
	padding: 24px 32px;
	border-bottom: 1px solid rgba(13,27,42,.07);
}

.sdle-section:last-of-type {
	border-bottom: none;
}

.sdle-section h3 {
	margin: 0 0 20px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--sdle-primary);
	letter-spacing: .01em;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sdle-border);
}

/* ---- Progress Bar (credit app) ---- */
.sdle-progress {
	display: flex;
	align-items: center;
	padding: 18px 32px;
	background: var(--sdle-bg-subtle);
	border-bottom: 1px solid var(--sdle-border);
}

.sdle-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	gap: 6px;
}

.sdle-step-dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #d8dde5;
	border: 2px solid #d8dde5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	font-weight: 600;
	color: #8899aa;
	transition: background .25s, border-color .25s, color .25s;
}

.sdle-progress-step.active .sdle-step-dot {
	background: var(--sdle-primary);
	border-color: var(--sdle-primary);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(13,27,42,.12);
}

.sdle-progress-step.done .sdle-step-dot {
	background: var(--sdle-gold-grad);
	border-color: var(--sdle-accent);
	color: #fff;
}

.sdle-progress-step.done .sdle-step-dot::before {
	content: '✓';
	font-weight: 700;
}

.sdle-progress-step.done .sdle-step-dot span { display: none; }

.sdle-step-label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #8899aa;
	white-space: nowrap;
}

.sdle-progress-step.active .sdle-step-label,
.sdle-progress-step.done .sdle-step-label {
	color: var(--sdle-primary);
}

.sdle-progress-connector {
	flex: 1;
	height: 2px;
	background: #d8dde5;
	margin: 0 6px 18px;
	transition: background .3s;
}

.sdle-progress-step.done + .sdle-progress-connector {
	background: var(--sdle-accent);
}

/* ---- Steps ---- */
.sdle-step {
	display: none;
	padding: 28px 32px;
}

.sdle-step.active {
	display: block;
	animation: sdle-reveal .2s ease;
}

@keyframes sdle-reveal {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.sdle-step h3 {
	margin: 0 0 22px;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--sdle-primary);
}

/* ---- Field Layout ---- */
.sdle-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 18px;
}

.sdle-field-row .sdle-field:only-child {
	grid-column: 1 / -1;
}

.sdle-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.sdle-field--sm {
	flex: 0 0 110px;
}

/* Single-field rows */
.sdle-section > .sdle-field,
.sdle-step > .sdle-field {
	margin-bottom: 18px;
}

/* ---- Labels ---- */
.sdle-field label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sdle-primary);
}

/* ---- Inputs ---- */
.sdle-field input[type="text"],
.sdle-field input[type="email"],
.sdle-field input[type="tel"],
.sdle-field input[type="number"],
.sdle-field input[type="password"],
.sdle-field input[type="date"],
.sdle-field input[type="url"],
.sdle-field select,
.sdle-field textarea {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 2px solid var(--sdle-border);
	border-radius: var(--sdle-radius);
	font-family: var(--sdle-font);
	font-size: 0.95rem;
	color: #1a2a3a;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none;
	appearance: none;
}

.sdle-field textarea {
	height: auto;
	padding: 12px 14px;
	resize: vertical;
}

.sdle-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230d1b2a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
	cursor: pointer;
}

.sdle-field input:focus,
.sdle-field select:focus,
.sdle-field textarea:focus {
	outline: none;
	border-color: var(--sdle-accent);
	box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}

.sdle-field input::placeholder,
.sdle-field textarea::placeholder {
	color: #aab4bf;
}

/* ---- Error state ---- */
.sdle-field.sdle-has-error input,
.sdle-field.sdle-has-error select,
.sdle-field.sdle-has-error textarea {
	border-color: #d94040;
	box-shadow: 0 0 0 3px rgba(217,64,64,.10);
}

.sdle-field-error-msg {
	font-size: 0.75rem;
	color: #d94040;
	font-weight: 500;
}

.sdle-field-note {
	font-size: 0.73rem;
	color: #7a8ea0;
	line-height: 1.4;
}

.sdle-req {
	color: var(--sdle-accent);
	font-weight: 700;
}

/* ---- Input prefix ($ symbol) ---- */
.sdle-input-prefix,
.sdle-input-suffix {
	display: flex;
	align-items: stretch;
}

.sdle-input-prefix span,
.sdle-input-suffix span {
	display: flex;
	align-items: center;
	padding: 0 12px;
	background: var(--sdle-bg-subtle);
	border: 2px solid var(--sdle-border);
	border-right: none;
	border-radius: var(--sdle-radius) 0 0 var(--sdle-radius);
	color: #66788a;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.sdle-input-suffix span {
	border-right: 2px solid var(--sdle-border);
	border-left: none;
	border-radius: 0 var(--sdle-radius) var(--sdle-radius) 0;
}

.sdle-input-prefix input {
	border-radius: 0 var(--sdle-radius) var(--sdle-radius) 0 !important;
}

.sdle-input-suffix input {
	border-radius: var(--sdle-radius) 0 0 var(--sdle-radius) !important;
}

/* ---- Radio pills ---- */
.sdle-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.sdle-radio-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	padding: 8px 14px;
	border: 2px solid var(--sdle-border);
	border-radius: 40px;
	color: #4a5a6a;
	transition: border-color .2s, background .2s, color .2s;
	user-select: none;
}

.sdle-radio-label:has(input:checked) {
	border-color: var(--sdle-primary);
	background: var(--sdle-primary);
	color: #fff;
}

.sdle-radio-label input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ---- Condition Cards ---- */
.sdle-condition-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
}

.sdle-condition-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px 10px 12px;
	border: 2px solid var(--sdle-border);
	border-radius: var(--sdle-radius);
	cursor: pointer;
	text-align: center;
	transition: border-color .2s, background .2s, box-shadow .2s;
	user-select: none;
	position: relative;
}

.sdle-condition-card::after {
	content: '';
	position: absolute;
	top: 8px; right: 8px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--sdle-border);
	transition: background .2s, border-color .2s;
}

.sdle-condition-card:has(input:checked) {
	border-color: var(--sdle-primary);
	background: rgba(13,27,42,.04);
	box-shadow: 0 0 0 1px var(--sdle-primary);
}

.sdle-condition-card:has(input:checked)::after {
	background: var(--sdle-accent);
	border-color: var(--sdle-accent);
}

.sdle-condition-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sdle-condition-label {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--sdle-primary);
	margin-bottom: 2px;
}

.sdle-condition-desc {
	font-size: 0.72rem;
	color: #7a8ea0;
	margin-top: 3px;
	line-height: 1.3;
}

/* ---- Photo Upload ---- */
.sdle-photo-drop {
	border: 2px dashed var(--sdle-border);
	border-radius: var(--sdle-radius);
	padding: 20px;
	text-align: center;
	background: var(--sdle-bg-subtle);
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.sdle-photo-drop:hover {
	border-color: var(--sdle-accent);
	background: rgba(201,168,76,.04);
}

.sdle-photo-drop input[type="file"] {
	display: none;
}

.sdle-photo-drop-label {
	font-size: 0.85rem;
	color: #66788a;
	cursor: pointer;
}

.sdle-photo-drop-label strong {
	color: var(--sdle-primary);
}

.sdle-photo-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.sdle-photo-preview img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--sdle-radius);
	border: 2px solid var(--sdle-border);
}

/* ---- Buttons ---- */
.sdle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 28px;
	height: 50px;
	font-family: var(--sdle-font);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	border-radius: var(--sdle-radius);
	border: 2px solid transparent;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s, opacity .15s, background .2s;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
}

.sdle-btn:active {
	transform: scale(0.98);
}

/* Submit — gold gradient */
.sdle-btn-submit {
	background: var(--sdle-gold-grad);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 2px 12px rgba(168,137,61,.25);
	width: 100%;
	height: 54px;
	font-size: 1rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sdle-btn-submit:hover:not([disabled]) {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(168,137,61,.35);
}

.sdle-btn-submit[disabled] {
	opacity: 0.65;
	cursor: wait;
}

/* Next — solid navy */
.sdle-btn-next {
	background: var(--sdle-primary);
	color: #fff;
	border-color: var(--sdle-primary);
}

.sdle-btn-next:hover {
	background: #1a2f44;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(13,27,42,.2);
}

/* Previous — ghost navy */
.sdle-btn-prev {
	background: transparent;
	color: var(--sdle-primary);
	border-color: var(--sdle-border);
}

.sdle-btn-prev:hover {
	border-color: var(--sdle-primary);
	background: rgba(13,27,42,.04);
}

/* ---- Spinner ---- */
.sdle-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2.5px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sdle-spin .7s linear infinite;
}

.sdle-btn-submit.is-loading .sdle-spinner { display: block; }
.sdle-btn-submit.is-loading .sdle-btn-text { opacity: 0.7; }

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

/* ---- Step Navigation ---- */
.sdle-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--sdle-border);
}

.sdle-step-nav .sdle-btn-next {
	margin-left: auto;
}

/* ---- Form Footer ---- */
.sdle-form-footer {
	padding: 20px 32px 28px;
}

.sdle-form-footer .sdle-btn-submit {
	width: 100%;
}

/* ---- Messages ---- */
.sdle-form-messages {
	padding: 0 32px;
}

.sdle-form-messages:empty { display: none; }

.sdle-success-msg {
	background: #f0faf4;
	border: 1.5px solid #6bc98a;
	color: #1a5c35;
	border-radius: var(--sdle-radius);
	padding: 18px 22px;
	margin: 16px 0;
	font-weight: 500;
	font-size: 0.95rem;
	line-height: 1.5;
}

.sdle-error-msg {
	background: #fff5f5;
	border: 1.5px solid #e88080;
	color: #8b1a1a;
	border-radius: var(--sdle-radius);
	padding: 18px 22px;
	margin: 16px 0;
	font-size: 0.93rem;
	line-height: 1.5;
}

/* ---- Review Table (credit app step 4) ---- */
.sdle-review-table {
	overflow: hidden;
	border-radius: var(--sdle-radius);
	border: 1.5px solid var(--sdle-border);
	margin-bottom: 24px;
}

.sdle-review-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

.sdle-review-table tr:nth-child(even) {
	background: var(--sdle-bg-subtle);
}

.sdle-review-table td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--sdle-border);
}

.sdle-review-table tr:last-child td {
	border-bottom: none;
}

.sdle-review-table td:first-child {
	color: #66788a;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	width: 38%;
}

/* ---- Calculator ---- */
.sdle-calc-wrap {
	background: #fff;
	border-radius: var(--sdle-radius);
	box-shadow: 0 4px 32px rgba(13,27,42,.10), 0 1px 4px rgba(13,27,42,.06);
	overflow: hidden;
}

.sdle-calc-layout {
	display: flex;
}

.sdle-calc-inputs {
	flex: 1;
	border-right: 1px solid var(--sdle-border);
}

.sdle-calc-results {
	flex: 0 0 260px;
	padding: 28px 24px;
	background: var(--sdle-primary);
	display: flex;
	flex-direction: column;
}

.sdle-result-panel {
	position: sticky;
	top: 20px;
	color: #fff;
}

.sdle-result-monthly {
	text-align: center;
	padding: 16px 0 24px;
	border-bottom: 1px solid rgba(255,255,255,.12);
	margin-bottom: 20px;
}

.sdle-result-label {
	display: block;
	font-size: 0.72rem;
	color: rgba(255,255,255,.6);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 10px;
}

.sdle-result-value {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 2.8rem;
	font-weight: 700;
	color: var(--sdle-accent);
	line-height: 1;
}

.sdle-result-rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sdle-result-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.83rem;
	color: rgba(255,255,255,.65);
}

.sdle-result-row strong {
	color: #fff;
	font-weight: 600;
}

.sdle-calc-cta {
	margin-top: 24px;
}

.sdle-calc-cta .sdle-btn {
	width: 100%;
	height: 48px;
}

.sdle-calc-disclaimer {
	font-size: 0.7rem;
	color: rgba(255,255,255,.35);
	text-align: center;
	margin-top: 14px;
	line-height: 1.5;
}

/* ---- Responsive ---- */
@media (max-width: 599px) {
	.sdle-form-header {
		padding: 22px 20px 18px;
	}

	.sdle-form-header h2 {
		font-size: 1.4rem;
	}

	.sdle-section,
	.sdle-step {
		padding: 20px;
	}

	.sdle-form-footer,
	.sdle-form-messages {
		padding: 16px 20px;
	}

	.sdle-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sdle-field-row > .sdle-field {
		margin-bottom: 16px;
	}

	.sdle-step-nav {
		flex-direction: column-reverse;
	}

	.sdle-step-nav .sdle-btn {
		width: 100%;
	}

	.sdle-progress {
		padding: 14px 16px;
	}

	.sdle-step-label {
		display: none;
	}

	.sdle-condition-group {
		grid-template-columns: 1fr 1fr;
	}

	.sdle-calc-layout {
		flex-direction: column;
	}

	.sdle-calc-inputs {
		border-right: none;
		border-bottom: 1px solid var(--sdle-border);
	}

	.sdle-calc-results {
		flex: none;
		padding: 24px 20px;
	}

	.sdle-result-value {
		font-size: 2.2rem;
	}
}