/* CRITICAL: HTML `hidden` attribute must always win over local display rules.
   Otherwise .sapr-submit-btn { display: inline-block } overrides hidden on
   the same-specificity universal `[hidden]` user-agent rule, and the submit
   button shows up on every wizard step. */
.sapr-wizard [hidden],
.sapr-wizard *[hidden] {
	display: none !important;
}

.sapr-form-container {
	max-width: 700px;
	margin: 2rem auto;
	padding: 1.5rem;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sapr-form-group {
	margin-bottom: 1.2rem;
}

.sapr-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.sapr-col-half {
	flex: 1;
	min-width: 200px;
}

.sapr-form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: #374151;
}

.sapr-form-group input,
.sapr-form-group textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background-color: #f9fafb;
	color: #111827;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sapr-form-group input:focus,
.sapr-form-group textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

.sapr-submit-btn {
	display: inline-block;
	width: auto; /* wizard nav uses inline buttons; legacy one-page forms can still expand via .sapr-submit-group */
	padding: 0.65rem 1.3rem;
	background-color: #2563eb;
	color: #ffffff;
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.sapr-submit-btn:hover {
	background-color: #1d4ed8;
}

.sapr-submit-btn:disabled {
	background-color: #93c5fd;
	cursor: not-allowed;
}

.sapr-message {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 6px;
	font-weight: 500;
	text-align: center;
}

.sapr-message.success {
	background-color: #d1fae5;
	color: #065f46;
	border: 1px solid #34d399;
}

.sapr-message.error {
	background-color: #fee2e2;
	color: #991b1b;
	border: 1px solid #f87171;
}

/* New Layout Styles */
.sapr-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

@media (max-width: 768px) {
	.sapr-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.sapr-required {
	color: #ef4444;
	font-weight: bold;
}

/* intl-tel-input styling */
.iti {
	display: block !important;
	width: 100%;
}
.iti__input {
	width: 100% !important;
}

.sapr-kvkk-group {
	margin: 1.5rem 0;
	padding-top: 1rem;
	border-top: 1px solid #e5e7eb;
}

.sapr-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	font-size: 0.875rem;
	color: #4b5563;
	line-height: 1.4;
}

.sapr-checkbox-label input[type="checkbox"] {
	margin-top: 0.2rem;
}

.sapr-submit-group {
	text-align: right;
}

.sapr-input-error {
	border-color: #ef4444 !important;
	background-color: #fef2f2 !important;
}

/* Honeypot — visually hidden, off-screen, untouchable by humans.
   Bots filling every input will trip it. */
.sapr-hp-wrap {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* =============================================================
 * 4-STEP WIZARD
 * ============================================================= */

.sapr-wizard .sapr-form { display: block; }

/* The container itself uses smaller padding on small screens. Done at the end. */

/* Stepper — tight by default, even tighter on mobile */
.sapr-stepper {
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2px;
	margin: 0 0 1.25rem;
	padding: 0;
	counter-reset: sapr-step;
}
.sapr-step-dot {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	position: relative;
	font-size: 0.72rem;
	color: #94a3b8;
	cursor: default;
	transition: color 0.15s;
	text-align: center;
}
.sapr-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e2e8f0;
	color: #64748b;
	font-weight: 700;
	font-size: 0.82rem;
	flex-shrink: 0;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}
.sapr-step-label {
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.sapr-step-dot::after {
	content: '';
	position: absolute;
	top: 14px;
	left: calc(50% + 18px);
	width: calc(100% - 36px);
	height: 2px;
	background: #e2e8f0;
	z-index: 0;
}
.sapr-step-dot:last-child::after { display: none; }
.sapr-step-num { position: relative; z-index: 1; }

.sapr-step-dot.is-complete {
	color: #2563eb;
	cursor: pointer;
}
.sapr-step-dot.is-complete .sapr-step-num {
	background: #2563eb;
	color: #fff;
}
.sapr-step-dot.is-complete::after { background: #2563eb; }
.sapr-step-dot.is-complete:hover .sapr-step-num { transform: scale(1.05); }

.sapr-step-dot.is-active {
	color: #1e293b;
}
.sapr-step-dot.is-active .sapr-step-num {
	background: #2563eb;
	color: #fff;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* Step panels */
.sapr-step {
	animation: sapr-step-in 0.25s ease-out;
}
.sapr-step[hidden] { display: none !important; }
.sapr-step-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 0.2rem;
}
.sapr-step-desc {
	color: #64748b;
	font-size: 0.85rem;
	margin: 0 0 1rem;
	line-height: 1.45;
}
.sapr-wizard .sapr-form-group { margin-bottom: 0.9rem; }
.sapr-wizard .sapr-form-group label {
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
}
.sapr-wizard .sapr-form-group input,
.sapr-wizard .sapr-form-group textarea,
.sapr-wizard .sapr-form-group select {
	padding: 0.6rem 0.7rem;
	font-size: 0.95rem;
}

@keyframes sapr-step-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* File chooser label */
.sapr-file-name {
	margin-top: 6px;
	font-size: 0.85rem;
	color: #475569;
}

/* Summary */
.sapr-summary {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px 16px;
	margin-bottom: 16px;
}
.sapr-summary-list { margin: 0; }
.sapr-summary-row {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #e2e8f0;
	font-size: 0.92rem;
}
.sapr-summary-row:last-child { border-bottom: 0; }
.sapr-summary-row dt {
	font-weight: 600;
	color: #64748b;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: 1px;
}
.sapr-summary-row dd {
	margin: 0;
	color: #0f172a;
	word-break: break-word;
	white-space: pre-wrap;
}
.sapr-summary-edit {
	margin: 12px 0 0;
	font-size: 0.82rem;
	color: #64748b;
}
.sapr-link-btn {
	background: none;
	border: none;
	color: #2563eb;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	font-size: inherit;
	text-decoration: underline;
}
.sapr-link-btn:hover { color: #1d4ed8; }

/* Step navigation */
.sapr-step-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 1.2rem;
	padding-top: 0.9rem;
	border-top: 1px solid #e5e7eb;
}
.sapr-btn-back {
	background: transparent;
	color: #475569;
	border: 1px solid #cbd5e1;
	padding: 0.55rem 0.95rem;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.15s;
	flex: 0 0 auto;
}
.sapr-btn-back:hover {
	border-color: #64748b;
	color: #0f172a;
	background: #f8fafc;
}
.sapr-step-counter {
	flex: 1;
	text-align: center;
	font-size: 0.8rem;
	color: #94a3b8;
	font-variant-numeric: tabular-nums;
}
.sapr-wizard .sapr-btn-next,
.sapr-wizard #sapr-submit {
	min-width: 130px;
	width: auto;
	flex: 0 0 auto;
	padding: 0.55rem 1.2rem;
	font-size: 0.95rem;
}

/* =============================================================
 * Mobile (small phones first, escalating breakpoints)
 * ============================================================= */
@media (max-width: 700px) {
	.sapr-form-container {
		margin: 0.75rem;
		padding: 1rem 0.9rem;
		border-radius: 10px;
	}
	.sapr-stepper { gap: 0; margin-bottom: 1rem; }
	.sapr-step-num { width: 26px; height: 26px; font-size: 0.78rem; }
	.sapr-step-label { font-size: 0.65rem; }
	.sapr-step-dot::after { top: 13px; height: 2px; }
	.sapr-step-title { font-size: 1rem; }
	.sapr-step-desc { font-size: 0.8rem; margin-bottom: 0.8rem; }
	.sapr-summary-row { grid-template-columns: 86px 1fr; gap: 6px; font-size: 0.85rem; }
	.sapr-summary-row dt { font-size: 0.7rem; }
	.sapr-form-row { gap: 0.6rem; }
	.sapr-col-half { min-width: 100%; }
	.sapr-step-nav { gap: 6px; }
	.sapr-wizard .sapr-btn-next,
	.sapr-wizard #sapr-submit { min-width: 0; padding: 0.55rem 0.9rem; }
	.sapr-btn-back { padding: 0.55rem 0.8rem; }
	.sapr-step-counter { font-size: 0.72rem; }
	.sapr-kvkk-text { font-size: 0.8rem; }
}

@media (max-width: 420px) {
	/* On very small screens, hide step labels — only numbers remain */
	.sapr-step-label { display: none; }
	.sapr-step-dot { gap: 0; }
	.sapr-step-dot::after { top: 13px; }
	.sapr-form-container { padding: 0.85rem 0.7rem; }
}