/* Card chrome + field boxes — match e-gov mockups */

.egov-card,
.app-card,
.calc-card,
.appr-card,
.soc-card {
	position: relative;
	background: linear-gradient(
		180deg,
		#fbfdff 0%,
		#f3f8fe 42%,
		#eaf1fb 100%
	);
	border: 2px solid #ffffff;
	outline: 1px solid #c8daf0;
	border-radius: 24px;
	box-shadow:
		0 20px 44px rgba(7, 36, 84, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.soc-card {
	box-shadow:
		0 28px 60px rgba(7, 36, 84, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.app-card--wide,
.egov-card--wide {
	width: min(392px, 100%);
}

@media (min-width: 400px) {
	.egov-card,
	.app-card,
	.calc-card,
	.appr-card {
		width: min(392px, 100%);
	}
}

/* Stepper with connectors */
.app-steps--line {
	display: flex;
	gap: 0;
	align-items: stretch;
	margin-bottom: 18px;
	background: transparent;
}

.app-steps--line .app-step {
	flex: 1;
	border-radius: 14px;
	padding: 10px 6px 8px;
	margin: 0 3px;
	font-size: 8.5px;
	line-height: 1.15;
	border: 1.5px solid #c5d8ef;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: none;
	min-height: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

.app-steps--line .app-step::before {
	font-size: 14px;
	line-height: 1;
}

.app-steps--line .app-step[data-step="1"]::before,
.app-steps--line .app-step[data-step="2"]::before,
.app-steps--line .app-step[data-step="3"]::before {
	content: "";
	width: 16px;
	height: 16px;
	background: center/contain no-repeat;
	opacity: 0.85;
}

.app-steps--line .app-step[data-step="1"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230a2f66' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a7 7 0 0114 0v1'/%3E%3C/svg%3E");
}

.app-steps--line .app-step[data-step="2"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230a2f66' stroke-width='2'%3E%3Cpath d='M12 21s7-5.2 7-11a7 7 0 10-14 0c0 5.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.app-steps--line .app-step[data-step="3"]::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230a2f66' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

.app-steps--line .app-step.is-done {
	border-color: #6aa8f5;
	background: linear-gradient(180deg, #f3f8ff, #e8f2ff);
	color: #0d47a1;
}

.app-steps--line .app-step.is-done::before {
	content: "✓";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #3b8cff;
	font-size: 10px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1a5fc9;
}

.app-steps--line .app-step.is-active {
	border-color: #1a5fc9;
	background: linear-gradient(180deg, #1f6fd6 0%, #0b4fa8 100%);
	color: #fff;
	box-shadow: 0 8px 18px rgba(11, 79, 168, 0.35);
	transform: translateY(-1px);
}

.app-steps--line .app-step.is-active::before {
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* Floating label field cards */
.egov-field-card {
	background: #fff;
	border: 1.5px solid #c9d8ea;
	border-radius: 16px;
	padding: 10px 12px 12px;
	margin-bottom: 10px;
	box-shadow:
		0 2px 6px rgba(12, 55, 120, 0.06),
		inset 0 1px 0 #fff;
}

.egov-field-card > label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #2f4568;
	margin-bottom: 8px;
}

.egov-field-card .req {
	color: #e53935;
	font-weight: 700;
}

.egov-field-card__body {
	display: flex;
	align-items: center;
	gap: 8px;
}

.egov-field-card__ico {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
	opacity: 0.85;
	color: #3d5f8f;
}

.egov-field-card__ico svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.egov-field-card__ico svg [fill]:not([fill="none"]) {
	fill: inherit;
	stroke: none;
}

.flow-hero-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 14px;
}

.flow-hero-icons .egov-field-card__ico {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid #c5daf7;
	box-shadow: 0 4px 10px rgba(12, 55, 120, 0.08);
}

.flow-hero-icons .egov-field-card__ico svg {
	width: 24px;
	height: 24px;
}

.app-haypost__title {
	display: flex;
	align-items: center;
	gap: 6px;
}

.app-haypost__title .egov-field-card__ico {
	width: 18px;
	height: 18px;
}

.egov-field-card input,
.egov-field-card select,
.egov-field-card textarea {
	flex: 1;
	border: 0;
	padding: 6px 4px;
	font-size: 16px; /* iOS: <16px triggers auto-zoom on focus */
	background: transparent;
	outline: none;
	color: #1a2c48;
	width: 100%;
}

.egov-field-card input::placeholder {
	color: #8a9bb6;
}

.egov-field-card--locked {
	background: linear-gradient(180deg, #f7fafd, #eef4fb);
}

.egov-field-card--locked .egov-field-card__body {
	justify-content: space-between;
	font-weight: 600;
	color: #1b3155;
}

.egov-field-card--locked .lock {
	opacity: 0.55;
	font-size: 14px;
}

/* Haypost info card */
.app-haypost {
	border: 1.5px solid #9ec0ef;
	border-radius: 16px;
	background: linear-gradient(90deg, #fff9e8 0%, #fffdf6 55%, #fff 100%);
	padding: 12px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.app-haypost__title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #0a3d8f;
	margin-bottom: 6px;
}

/* Primary CTA on cards */
.app-btn {
	border-radius: 14px;
	font-weight: 700;
	padding: 14px 16px;
}

.app-btn--primary {
	border: 0;
	color: #fff;
	letter-spacing: 0.01em;
}

.app-btn--ghost {
	border: 1.5px solid #c5d4e8;
	background: #fff;
	color: #1a4785;
}

/* Soc login card — circle badge must not clip */
.soc-card {
	overflow: visible;
	padding: 0;
}

.soc-card .egov-card-brand {
	border-radius: 22px 22px 0 0;
}

.soc-card__inner {
	padding: 0 14px 14px;
}

.soc-card .soc-card__close {
	top: 10px;
	right: 12px;
	z-index: 8;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 30, 80, 0.15);
	font-size: 22px;
	line-height: 30px;
}

.soc-form-wrap .egov-field-card,
.soc-form-wrap .soc-field {
	margin-bottom: 8px;
}

.soc-card__title {
	font-size: 16px;
	font-weight: 800;
	color: #0a2f66;
}

.soc-form-wrap {
	border: 1.5px solid #c5daf7;
	box-shadow: inset 0 1px 0 #fff;
}

/* Calc / approval illustration row */
.calc-hero,
.appr-hero {
	background: rgba(255, 255, 255, 0.45);
	border-radius: 16px;
	padding: 10px 8px;
	border: 1px solid #d2e3f6;
}

.app-close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #d0ddeb;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}