/* ===== RESET & BASE ===== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

:root {
	--or: #E8571A;
	--or2: #FF7A40;
	--or-bg: #FEF0E8;
	--or-mid: #FDD5BC;
	--blk: #151515;
	--wh: #fff;
	--g50: #F7F7F5;
	--g100: #EFEFEC;
	--g200: #DDDDD8;
	--g400: #9B9B95;
	--g600: #5C5C58;
	--g800: #2A2A28;
	--r: 14px;
	--rlg: 20px;
	--rxl: 28px;
	--sh: 0 2px 12px rgba(0, 0, 0, .07);
	--sho: 0 6px 32px rgba(232, 87, 26, .18);
	--fs-xs: 11px;
	--fs-sm: 13px;
	--fs-base: 15px;
	--fs-md: 17px;
	--fs-lg: 22px;
	--fs-xl: 30px;
	--fs-2xl: 42px;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%
}

body {
	font-family: 'DM Sans', system-ui, sans-serif;
	color: var(--blk);
	background: var(--wh);
	overflow-x: hidden;
	line-height: 1.6
}

img {
	max-width: 100%;
	display: block
}

a {
	color: inherit;
	text-decoration: none
}

button {
	cursor: pointer;
	font-family: inherit
}

input, select, textarea {
	font-family: inherit
}

/* ===== UTILITIES ===== */
.hidden {
	display: none !important
}

.or {
	color: var(--or)
}

.fw7 {
	font-weight: 700
}

.ta-c {
	text-align: center
}

.mt8 {
	margin-top: 8px
}

.mt12 {
	margin-top: 12px
}

.mt16 {
	margin-top: 16px
}

.mt24 {
	margin-top: 24px
}

.mt32 {
	margin-top: 32px
}

.mt48 {
	margin-top: 48px
}

.mb8 {
	margin-bottom: 8px
}

.mb16 {
	margin-bottom: 16px
}

.mb24 {
	margin-bottom: 24px
}

.mb32 {
	margin-bottom: 32px
}

/* ===== LAYOUT ===== */
.container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px
}

.section {
	padding: 72px 0
}

.section-sm {
	padding: 48px 0
}

.section-alt {
	background: var(--g50)
}

/* ===== TYPOGRAPHY ===== */
.eyebrow {
	display: inline-block;
	background: var(--or-bg);
	color: var(--or);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 5px 14px;
	border-radius: 50px;
	margin-bottom: 12px
}

.h1 {
	font-size: clamp(32px, 6vw, 60px);
	font-weight: 700;
	letter-spacing: -.5px;
	line-height: 1.08
}

.h2 {
	font-size: clamp(24px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -.3px;
	line-height: 1.1
}

.h3 {
	font-size: clamp(18px, 2.5vw, 24px);
	font-weight: 700;
	letter-spacing: -.2px
}

.h4 {
	font-size: var(--fs-base);
	font-weight: 700
}

.lead {
	font-size: clamp(15px, 2vw, 18px);
	color: var(--g600);
	line-height: 1.7;
	font-weight: 400
}

/* ===== BUTTONS ===== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 24px;
	border-radius: 50px;
	font-size: var(--fs-sm);
	font-weight: 600;
	border: none;
	transition: all .2s;
	white-space: nowrap;
	cursor: pointer
}

.btn-primary {
	background: var(--or);
	color: #fff
}

.btn-primary:hover {
	background: var(--or2);
	transform: translateY(-1px);
	box-shadow: var(--sho)
}

.btn-secondary {
	background: transparent;
	color: var(--or);
	border: 1.5px solid var(--or)
}

.btn-secondary:hover {
	background: var(--or-bg)
}

.btn-ghost {
	background: transparent;
	color: var(--g600);
	border: 1.5px solid var(--g200)
}

.btn-ghost:hover {
	border-color: var(--g400);
	color: var(--blk)
}

.btn-sm {
	padding: 8px 18px;
	font-size: var(--fs-xs)
}

.btn-lg {
	padding: 16px 32px;
	font-size: var(--fs-base)
}

.btn-full {
	width: 100%
}

/* ===== NAVIGATION ===== */
#navbar {
	position: sticky;
	top: 0;
	z-index: 300;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--g100)
}

.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62px;
	gap: 16px
}

.logo {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-shrink: 0
}

.logo-mark {
	width: 32px;
	height: 32px;
	background: var(--or);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: -.3px
}

.logo-name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.3px
}

.logo-name span {
	color: var(--or)
}

.nav-links {
	display: flex;
	gap: 6px;
	list-style: none
}

.nav-links a {
	padding: 7px 12px;
	border-radius: 8px;
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--g600);
	transition: all .15s;
	white-space: nowrap
}

.nav-links a:hover {
	color: var(--blk);
	background: var(--g50)
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 10px
}

/* Lang switcher */
.lang-sw {
	display: flex;
	background: var(--g100);
	border-radius: 50px;
	padding: 3px;
	gap: 2px
}

.lb {
	border: none;
	background: none;
	padding: 5px 10px;
	border-radius: 50px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--g400);
	letter-spacing: .4px;
	transition: all .15s
}

.lb.active, .lb:hover {
	background: var(--or);
	color: #fff
}

/* Hamburger */
.ham {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 6px;
	background: none;
	border: none;
	border-radius: 8px
}

.ham span {
	width: 22px;
	height: 2px;
	background: var(--blk);
	border-radius: 2px;
	transition: all .3s;
	display: block
}

.ham.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg)
}

.ham.open span:nth-child(2) {
	opacity: 0
}

.ham.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg)
}

/* Mobile menu */
#mobile-menu {
	display: none;
	position: fixed;
	inset: 62px 0 0;
	background: var(--wh);
	z-index: 250;
	padding: 24px 20px;
	flex-direction: column;
	gap: 6px;
	overflow-y: auto
}

#mobile-menu.open {
	display: flex
}

.mob-link {
	padding: 14px 16px;
	border-radius: var(--r);
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--blk);
	transition: background .15s;
	border: none;
	background: none;
	text-align: left;
	width: 100%
}

.mob-link:hover {
	background: var(--g50)
}

.mob-divider {
	height: 1px;
	background: var(--g100);
	margin: 8px 0
}

/* ===== HERO ===== */
.hero {
	padding: 80px 0 72px;
	text-align: center
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--or-bg);
	color: var(--or);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 50px;
	margin-bottom: 20px
}

.hero-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	background: var(--or);
	border-radius: 50%;
	animation: pulse 2s infinite
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1)
	}
	50% {
		opacity: .5;
		transform: scale(.8)
	}
}

.hero h1 {
	margin-bottom: 16px
}

.hero .lead {
	max-width: 540px;
	margin: 0 auto 36px
}

.hero-btns {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap
}

.hero-stats {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: 56px;
	border-top: 1px solid var(--g100);
	padding-top: 40px;
	flex-wrap: wrap
}

.stat {
	padding: 0 32px;
	text-align: center;
	border-right: 1px solid var(--g100)
}

.stat:last-child {
	border-right: none
}

.stat-num {
	font-size: var(--fs-xl);
	font-weight: 700;
	letter-spacing: -1px;
	color: var(--blk)
}

.stat-label {
	font-size: var(--fs-xs);
	color: var(--g400);
	margin-top: 2px;
	letter-spacing: .3px;
	text-transform: uppercase;
	font-weight: 600
}

/* ===== TRUST STRIP ===== */
.trust {
	padding: 32px 0;
	border-top: 1px solid var(--g100);
	border-bottom: 1px solid var(--g100)
}

.trust-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	color: var(--g400);
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px
}

.trust-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap
}

.trust-logo {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--g200);
	transition: color .2s;
	letter-spacing: -.2px
}

.trust-logo:hover {
	color: var(--or)
}

/* ===== PRODUCT CARDS ===== */
.products-header {
	text-align: center;
	margin-bottom: 48px
}

.products-header .lead {
	max-width: 480px;
	margin: 10px auto 0
}

.cards-grid {
	display: grid;
	grid-template-columns:repeat(4, 1fr);
	gap: 14px
}

.pcard {
	background: var(--or-bg);
	border-radius: var(--rlg);
	padding: 24px 20px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all .25s;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation
}

.pcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--sho);
	border-color: var(--or-mid)
}

.pcard.open {
	border-color: var(--or);
	background: var(--wh);
	box-shadow: var(--sho)
}

.pcard-icon {
	width: 50px;
	height: 50px;
	background: var(--or-mid);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 16px;
	transition: background .25s
}

.pcard-empty {
	border: 2px dashed var(--g100);
	background: var(--g50);
	cursor: default;
	pointer-events: none
}

.pcard-empty:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--g100)
}

.pcard-icon-empty {
	background: var(--g100);
	color: var(--g400);
	font-size: 20px;
	font-weight: 300
}

/* Insurance calculator button states */
.ic-sex-btn {
	flex: 1;
	padding: 10px;
	border-radius: var(--r);
	border: 1.5px solid var(--g200);
	background: var(--wh);
	color: var(--g600);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: all .15s
}

.ic-sex-btn.sel {
	border-color: var(--or);
	background: var(--or-bg);
	color: var(--or)
}

.ic-sex-btn:hover:not(.sel) {
	border-color: var(--g400);
	color: var(--blk)
}

.ic-term-btn {
	padding: 6px 13px;
	border-radius: 50px;
	border: 1.5px solid var(--g200);
	background: var(--wh);
	font-size: 11px;
	font-weight: 700;
	color: var(--g600);
	cursor: pointer;
	font-family: inherit;
	transition: all .15s
}

.ic-term-btn.sel {
	border-color: var(--or);
	background: var(--or-bg);
	color: var(--or)
}

.ic-term-btn:hover:not(.sel) {
	border-color: var(--g400)
}

.ic-submit-btn {
	width: 100%;
	padding: 13px;
	background: var(--or);
	color: #fff;
	border: none;
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: opacity .2s
}

.ic-submit-btn:hover {
	opacity: .88
}

.ic-field-inp {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--g200);
	border-radius: var(--r);
	font-size: 13px;
	font-family: inherit;
	outline: none;
	transition: border-color .2s;
	color: var(--blk);
	background: var(--wh)
}

.ic-field-inp:focus {
	border-color: var(--or)
}

.pcard-title {
	font-size: var(--fs-base);
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1.3
}

.pcard-desc {
	font-size: var(--fs-sm);
	color: var(--g600);
	line-height: 1.6
}

.pcard-more {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 14px;
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--or)
}

.pcard-arrow {
	transition: transform .25s;
	font-size: 16px
}

.pcard.open .pcard-arrow {
	transform: rotate(90deg)
}

/* ===== DETAIL PANEL ===== */
.detail-panel {
	display: none;
	border-radius: var(--rlg);
	border: 2px solid var(--or);
	overflow: hidden;
	margin-top: 16px;
	animation: dpIn .28s ease both
}

.detail-panel.open {
	display: block
}

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

.dp-grid {
	display: grid;
	grid-template-columns:1fr 1fr
}

.dp-left {
	padding: 36px 32px;
	border-right: 1px solid var(--g100)
}

.dp-right {
	padding: 36px 32px;
	background: var(--g50)
}

.dp-tag {
	display: inline-block;
	background: var(--or-bg);
	color: var(--or);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 50px;
	margin-bottom: 14px
}

.dp-h {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 1.2
}

.dp-desc {
	font-size: var(--fs-sm);
	color: var(--g600);
	line-height: 1.7;
	margin-bottom: 20px
}

.dp-features {
	list-style: none
}

.dp-features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: var(--fs-sm);
	padding: 8px 0;
	border-bottom: 1px solid var(--g100)
}

.dp-features li:last-child {
	border: none
}

.dp-features li::before {
	content: '✓';
	color: var(--or);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px
}

.dp-prices-h {
	font-size: var(--fs-base);
	font-weight: 700;
	margin-bottom: 16px
}

.price-cards {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.price-card {
	background: var(--wh);
	border-radius: var(--r);
	padding: 14px 16px;
	border: 1.5px solid var(--g100);
	transition: border-color .2s;
	cursor: pointer;
}

.price-card:hover, .price-card.feat {
	border-color: var(--or)
}

.price-card.feat {
	background: var(--or-bg)
}

.price-card:hover {
	background: var(--or-bg)
}

.pc-label {
	font-size: 10px;
	font-weight: 700;
	color: var(--g400);
	letter-spacing: .6px;
	text-transform: uppercase;
	margin-bottom: 3px
}

.pc-name {
	font-size: var(--fs-sm);
	font-weight: 700;
	margin-bottom: 5px
}

.pc-val {
	font-size: 20px;
	font-weight: 700;
	color: var(--or)
}

.pc-val small {
	font-size: var(--fs-xs);
	color: var(--g400);
	font-weight: 400
}

.pc-note {
	font-size: 11px;
	color: var(--g400);
	margin-top: 3px;
	line-height: 1.5
}

/* ===== HOW IT WORKS ===== */
.steps {
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	gap: 32px;
	margin-top: 48px;
	position: relative
}

.steps::before {
	content: '';
	position: absolute;
	top: 34px;
	left: calc(16.666% + 16px);
	right: calc(16.666% + 16px);
	height: 2px;
	background: linear-gradient(90deg, var(--or-mid), var(--or), var(--or-mid))
}

.step {
	text-align: center;
	padding: 0 8px
}

.step-icon {
	width: 68px;
	height: 68px;
	background: var(--or-bg);
	border: 2px solid var(--or-mid);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin: 0 auto 18px;
	position: relative;
	z-index: 1;
	transition: all .25s;
	background: var(--wh)
}

.step:hover .step-icon {
	background: var(--or);
	border-color: var(--or)
}

.step-h {
	font-size: var(--fs-base);
	font-weight: 700;
	margin-bottom: 8px
}

.step-p {
	font-size: var(--fs-sm);
	color: var(--g600);
	line-height: 1.6
}

/* ===== MORTGAGE GATE ===== */
.gate-wrap {
	max-width: 520px;
	margin: 0 auto
}

.gate-box {
	background: var(--wh);
	border: 2px solid var(--or);
	border-radius: var(--rxl);
	padding: 40px 36px;
	text-align: center
}

.gate-icon {
	font-size: 44px;
	margin-bottom: 14px
}

.gate-h {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: 8px
}

.gate-sub {
	font-size: var(--fs-sm);
	color: var(--g600);
	line-height: 1.7;
	margin-bottom: 28px
}

.gate-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left
}

.f-row {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 12px
}

.f-group {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.f-group label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--g600);
	letter-spacing: .4px;
	text-transform: uppercase
}

.f-inp {
	border: 1.5px solid var(--g200);
	border-radius: var(--r);
	padding: 12px 14px;
	font-size: var(--fs-sm);
	color: var(--blk);
	outline: none;
	transition: border-color .2s;
	background: var(--wh);
	width: 100%
}

.f-inp:focus {
	border-color: var(--or)
}

.f-inp::placeholder {
	color: var(--g200)
}

.f-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239B9B95' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center
}

.consent-row {
	display: flex;
	align-items: flex-start;
	gap: 9px
}

.consent-row input[type=checkbox] {
	margin-top: 3px;
	accent-color: var(--or);
	flex-shrink: 0;
	width: 16px;
	height: 16px
}

.consent-row label {
	font-size: 12px;
	color: var(--g600);
	line-height: 1.5;
	cursor: pointer
}

.gate-error {
	color: #D32F2F;
	font-size: var(--fs-xs);
	font-weight: 600;
	display: none;
	padding: 8px 12px;
	background: #FEE;
	border-radius: 8px;
	border: 1px solid #FFCDD2
}

/* ===== MORTGAGE CALCULATOR ===== */
.calc-wrap {
	display: none;
	animation: dpIn .35s ease both
}

.calc-wrap.visible {
	display: block
}

.calc-grid {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 24px;
	margin-top: 0
}

.calc-panel {
	background: var(--wh);
	border-radius: var(--rlg);
	padding: 28px 24px;
	border: 1.5px solid var(--g100)
}

.calc-panel-title {
	font-size: var(--fs-base);
	font-weight: 700;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 8px
}

.calc-panel-title::before {
	content: '';
	width: 3px;
	height: 18px;
	background: var(--or);
	border-radius: 2px;
	flex-shrink: 0
}

/* Range */
.cf-group {
	margin-bottom: 20px
}

.cf-lbl {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 9px
}

.cf-lbl-text {
	font-size: var(--fs-sm);
	color: var(--g600);
	font-weight: 500
}

.cf-val {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--or)
}

.range-track {
	position: relative;
	padding: 4px 0
}

input[type=range] {
	width: 100%;
	height: 4px;
	border-radius: 2px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background: linear-gradient(to right, var(--or) var(--pct, 30%), var(--g200) var(--pct, 30%));
	touch-action: none
}

input[type=range]::-webkit-slider-thumb {
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--or);
	border: 3px solid var(--wh);
	box-shadow: 0 2px 10px rgba(232, 87, 26, .35)
}

input[type=range]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--or);
	border: 3px solid var(--wh);
	box-shadow: 0 2px 10px rgba(232, 87, 26, .35)
}

.range-mm {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--g400);
	margin-top: 4px
}

/* Seg buttons */
.seg-row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap
}

.seg-btn {
	border: 1.5px solid var(--g200);
	background: var(--wh);
	padding: 7px 13px;
	border-radius: 50px;
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--g600);
	transition: all .18s;
	touch-action: manipulation
}

.seg-btn:hover, .seg-btn.active {
	border-color: var(--or);
	color: var(--or);
	background: var(--or-bg)
}

/* Result panel */
.result-panel {
	background: linear-gradient(140deg, #C84800, var(--or) 60%, var(--or2));
	border-radius: var(--rlg);
	padding: 28px 24px;
	color: #fff
}

.rp-lbl {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: .75;
	margin-bottom: 4px
}

.rp-main {
	font-size: clamp(36px, 6vw, 52px);
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1
}

.rp-unit {
	font-size: var(--fs-sm);
	opacity: .75;
	margin-bottom: 16px
}

.rp-div {
	height: 1px;
	background: rgba(255, 255, 255, .2);
	margin: 16px 0
}

.rp-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px
}

.rp-row-lbl {
	font-size: var(--fs-sm);
	opacity: .75
}

.rp-row-val {
	font-size: var(--fs-sm);
	font-weight: 700
}

.rp-note {
	font-size: 11px;
	opacity: .6;
	line-height: 1.5;
	margin-top: 14px
}

.banks-box {
	background: var(--wh);
	border-radius: var(--rlg);
	padding: 20px 22px;
	border: 1.5px solid var(--g100);
	margin-top: 16px
}

.banks-h {
	font-size: var(--fs-sm);
	font-weight: 700;
	margin-bottom: 6px
}

.banks-txt {
	font-size: var(--fs-sm);
	color: var(--g600);
	line-height: 1.6
}

/* Amort table */
.amort-section {
	margin-top: 28px
}

.amort-h {
	font-size: var(--fs-base);
	font-weight: 700;
	margin-bottom: 14px
}

.table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--r);
	border: 1px solid var(--g100)
}

.amort-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
	min-width: 440px
}

.amort-table th {
	text-align: left;
	padding: 10px 14px;
	background: var(--or-bg);
	color: var(--or);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .6px;
	text-transform: uppercase
}

.amort-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--g100)
}

.amort-table tr:last-child td {
	border: none
}

.amort-table tr:hover td {
	background: var(--or-bg)
}

/* ===== ADMIN PANEL ===== */
#admin-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 500;
	background: #F7F7F5
}

#admin-overlay.open {
	display: flex;
	flex-direction: column
}

.admin-nav {
	height: 56px;
	background: var(--blk);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	flex-shrink: 0
}

.admin-logo {
	font-size: 15px;
	font-weight: 700;
	color: #fff
}

.admin-logo span {
	color: var(--or)
}

.admin-body {
	flex: 1;
	display: flex;
	overflow: hidden
}

.admin-sidebar {
	width: 220px;
	background: var(--wh);
	border-right: 1px solid var(--g100);
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
	overflow-y: auto
}

.admin-tab {
	padding: 10px 14px;
	border-radius: var(--r);
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--g600);
	border: none;
	background: none;
	text-align: left;
	transition: all .15s;
	cursor: pointer
}

.admin-tab:hover {
	background: var(--g50)
}

.admin-tab.active {
	background: var(--or-bg);
	color: var(--or)
}

.admin-content {
	flex: 1;
	overflow-y: auto;
	padding: 28px 32px
}

.admin-pane {
	display: none
}

.admin-pane.active {
	display: block
}

.admin-section-h {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: 4px
}

.admin-section-sub {
	font-size: var(--fs-sm);
	color: var(--g600);
	margin-bottom: 28px
}

/* Login */
.admin-login {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	background: var(--g50)
}

.login-box {
	background: var(--wh);
	border-radius: var(--rlg);
	padding: 48px 40px;
	max-width: 380px;
	width: 90%;
	border: 1.5px solid var(--g100);
	text-align: center
}

.login-icon {
	font-size: 40px;
	margin-bottom: 16px
}

.login-h {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: 6px
}

.login-sub {
	font-size: var(--fs-sm);
	color: var(--g600);
	margin-bottom: 28px
}

.login-error {
	color: #D32F2F;
	font-size: var(--fs-xs);
	font-weight: 600;
	padding: 8px 12px;
	background: #FEE;
	border-radius: 8px;
	border: 1px solid #FFCDD2;
	margin-bottom: 14px;
	display: none
}

/* Content table */
.content-table {
	width: 100%;
	border-collapse: collapse
}

.content-table th {
	text-align: left;
	padding: 10px 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--g400);
	border-bottom: 2px solid var(--g100)
}

.content-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--g100);
	vertical-align: middle;
	font-size: var(--fs-sm)
}

.content-table tr:last-child td {
	border: none
}

.content-table tr:hover td {
	background: var(--g50)
}

.edit-input {
	border: 1.5px solid var(--g200);
	border-radius: 8px;
	padding: 7px 10px;
	font-size: var(--fs-sm);
	font-family: inherit;
	outline: none;
	transition: border-color .2s;
	width: 100%
}

.edit-input:focus {
	border-color: var(--or)
}

.save-btn {
	background: var(--or);
	color: #fff;
	border: none;
	padding: 7px 16px;
	border-radius: 50px;
	font-size: var(--fs-xs);
	font-weight: 700;
	transition: all .2s
}

.save-btn:hover {
	background: var(--or2)
}

.save-badge {
	display: inline-block;
	background: #E8F5E9;
	color: #2E7D32;
	border: 1px solid #C8E6C9;
	padding: 3px 10px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
	opacity: 0;
	transition: opacity .3s
}

.save-badge.show {
	opacity: 1
}

.lang-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	flex-wrap: wrap
}

.lang-tab-btn {
	padding: 7px 16px;
	border-radius: 50px;
	border: 1.5px solid var(--g200);
	background: var(--wh);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--g600)
}

.lang-tab-btn.active {
	border-color: var(--or);
	color: var(--or);
	background: var(--or-bg)
}

/* Financial table */
.fin-table {
	width: 100%;
	border-collapse: collapse;
	max-width: 600px
}

.fin-table th {
	text-align: left;
	padding: 10px 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--g400);
	border-bottom: 2px solid var(--g100)
}

.fin-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--g100);
	font-size: var(--fs-sm)
}

.fin-table tr:hover td {
	background: var(--g50)
}

/* toast */
.toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	background: var(--blk);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--r);
	font-size: var(--fs-sm);
	font-weight: 600;
	z-index: 600;
	transform: translateY(20px);
	opacity: 0;
	transition: all .3s;
	pointer-events: none
}

.toast.show {
	transform: translateY(0);
	opacity: 1
}

/* ===== MODAL ===== */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 400;
	align-items: center;
	justify-content: center;
	padding: 16px
}

.modal-overlay.open {
	display: flex;
	animation: fadeIn .2s ease
}

@keyframes fadeIn {
	from {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

.modal-box {
	background: var(--wh);
	border-radius: var(--rxl);
	padding: 36px 32px;
	max-width: 420px;
	width: 100%;
	position: relative;
	animation: dpIn .3s ease both;
	max-height: 90vh;
	overflow-y: auto
}

.modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--g100);
	border: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--g600)
}

.modal-close:hover {
	background: var(--g200)
}

.modal-icon {
	font-size: 36px;
	margin-bottom: 10px
}

.modal-h {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin-bottom: 6px
}

.modal-sub {
	font-size: var(--fs-sm);
	color: var(--g600);
	margin-bottom: 22px;
	line-height: 1.6
}

.modal-success {
	display: none;
	text-align: center;
	padding: 16px 0
}

.modal-success .ms-icon {
	font-size: 52px;
	margin-bottom: 12px
}

.modal-success p {
	font-size: var(--fs-base);
	color: var(--g600)
}

/* ===== FOOTER ===== */
footer {
	background: var(--blk);
	color: rgba(255, 255, 255, .55);
	padding: 56px 0 28px
}

.footer-grid {
	display: grid;
	grid-template-columns:2fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px
}

.footer-brand .logo-name {
	color: #fff;
	font-size: 18px
}

.footer-brand .logo-name span {
	color: var(--or)
}

.footer-desc {
	font-size: var(--fs-sm);
	line-height: 1.7;
	margin-top: 12px;
	max-width: 220px
}

.footer-col h4 {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px
}

.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px
}

.footer-col ul a {
	font-size: var(--fs-sm);
	color: rgba(255, 255, 255, .45);
	transition: color .2s
}

.footer-col ul a:hover {
	color: var(--or)
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px
}

.footer-actions {
	position: fixed;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 200
}

.fab {
	padding: 10px 20px;
	border-radius: 50px;
	font-size: var(--fs-xs);
	font-weight: 700;
	border: none;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .2)
}

/* ===== REVEAL ===== */
.reveal {
	opacity: 1;
	transform: none;
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1)
}

.reveal.anim-ready {
	opacity: 0;
	transform: translateY(18px)
}

.reveal.vis {
	opacity: 1;
	transform: none
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
	.cards-grid {
		grid-template-columns:repeat(4, 1fr)
	}

	.dp-grid {
		grid-template-columns:1fr
	}

	.dp-left {
		border-right: none;
		border-bottom: 1px solid var(--g100)
	}

	.footer-grid {
		grid-template-columns:1fr 1fr
	}

	.nav-links {
		display: none
	}

	.ham {
		display: flex
	}

	.admin-sidebar {
		width: 180px
	}
}

@media (max-width: 768px) {
	:root {
		--fs-base: 15px
	}

	.hero {
		padding: 56px 0 52px
	}

	.section {
		padding: 52px 0
	}

	.cards-grid {
		grid-template-columns:repeat(2, 1fr)
	}

	.steps {
		grid-template-columns:1fr;
		gap: 24px
	}

	.steps::before {
		display: none
	}

	.calc-grid {
		grid-template-columns:1fr
	}

	.f-row {
		grid-template-columns:1fr
	}

	.gate-box {
		padding: 28px 20px
	}

	.admin-sidebar {
		position: absolute;
		left: -220px;
		height: 100%;
		z-index: 10;
		transition: left .3s
	}

	.admin-sidebar.open {
		left: 0
	}

	.admin-content {
		padding: 20px 16px
	}
}

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

	.footer-grid {
		grid-template-columns:1fr
	}

	.hero-btns {
		flex-direction: column;
		align-items: center
	}

	.hero-btns .btn {
		width: 100%;
		max-width: 300px
	}

	.modal-box {
		padding: 24px 20px
	}

	.trust-logos {
		gap: 16px
	}

	.trust-logo {
		font-size: 11px
	}

	.rp-main {
		font-size: 36px
	}
}

@media (max-width: 375px) {
	.container {
		padding: 0 14px
	}

	.pcard {
		padding: 20px 16px
	}

	.dp-left, .dp-right {
		padding: 24px 18px
	}
}

/* ===== USER INSURANCE CALCULATOR ===== */
.uic-pane {
	transition: all .3s
}

.uic-card {
	background: var(--wh);
	border-radius: var(--rxl);
	border: 1px solid var(--g100);
	padding: 36px 32px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, .04)
}

.uic-card-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 8px;
	letter-spacing: -.3px
}

.uic-card-sub {
	font-size: 15px;
	color: var(--g600);
	margin-bottom: 32px;
	line-height: 1.6
}

.uic-form-grid {
	display: flex;
	flex-direction: column;
	gap: 28px
}

.uic-field {
	display: flex;
	flex-direction: column;
	gap: 0
}

.uic-field-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px
}

.uic-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--blk)
}

.uic-val {
	font-size: 16px;
	font-weight: 700;
	color: var(--or)
}

.uic-range {
	width: 100%;
	accent-color: var(--or);
	cursor: pointer
}

.uic-range-mm {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--g400);
	margin-top: 5px
}

.uic-seg-big {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 12px;
	margin-top: 8px
}

.uic-seg-big-btn {
	padding: 18px 12px;
	border-radius: var(--rlg);
	border: 2px solid var(--g100);
	background: var(--wh);
	cursor: pointer;
	transition: all .2s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--g600);
	font-family: inherit
}

.uic-seg-big-btn.active {
	border-color: var(--or);
	background: var(--or-bg);
	color: var(--or)
}

.uic-seg-big-btn:hover:not(.active) {
	border-color: var(--g200);
	color: var(--blk)
}

.uic-seg-icon {
	font-size: 22px;
	line-height: 1
}

.uic-health-grid {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 10px;
	margin-top: 8px
}

.uic-health-opt {
	cursor: pointer
}

.uic-health-opt input {
	display: none
}

.uic-health-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	border-radius: var(--rlg);
	border: 2px solid var(--g100);
	background: var(--wh);
	transition: all .2s
}

.uic-health-opt input:checked + .uic-health-card {
	border-color: var(--or);
	background: var(--or-bg)
}

.uic-health-opt:hover .uic-health-card {
	border-color: var(--g200)
}

.uic-health-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0
}

.uic-health-name {
	font-size: 13px;
	font-weight: 700
}

.uic-health-desc {
	font-size: 11px;
	color: var(--g600);
	margin-top: 1px
}

.uic-quick-terms {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 10px
}

.uic-qt {
	padding: 6px 14px;
	border-radius: 50px;
	border: 1.5px solid var(--g200);
	background: var(--wh);
	font-size: 12px;
	font-weight: 700;
	color: var(--g600);
	cursor: pointer;
	transition: all .15s;
	font-family: inherit
}

.uic-qt:hover, .uic-qt.active {
	border-color: var(--or);
	color: var(--or);
	background: var(--or-bg)
}

.uic-preview {
	background: var(--g50);
	border-radius: var(--rlg);
	padding: 20px 24px;
	margin: 28px 0 24px;
	border: 1px solid var(--g100)
}

.uic-preview-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--g400);
	text-transform: uppercase;
	letter-spacing: .8px;
	margin-bottom: 14px
}

.uic-preview-row {
	display: flex;
	gap: 0;
	flex-wrap: wrap
}

.uic-preview-item {
	flex: 1;
	text-align: center;
	min-width: 80px
}

.uic-preview-val {
	font-size: 24px;
	font-weight: 700;
	color: var(--or)
}

.uic-preview-desc {
	font-size: 11px;
	color: var(--g400);
	margin-top: 3px
}

.uic-preview-sep {
	width: 1px;
	background: var(--g200);
	margin: 0 4px
}

.uic-step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px
}

.uic-step-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--g200);
	background: var(--wh);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--g400);
	transition: all .3s
}

.uic-step-item.active .uic-step-circle {
	border-color: var(--or);
	background: var(--or);
	color: #fff
}

.uic-step-item.done .uic-step-circle {
	border-color: var(--or);
	background: var(--or-bg);
	color: var(--or)
}

.uic-step-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--g400)
}

.uic-step-item.active .uic-step-label, .uic-step-item.done .uic-step-label {
	color: var(--or)
}

.uic-step-line {
	flex: 1;
	height: 2px;
	background: var(--g200);
	min-width: 48px;
	margin-bottom: 22px;
	max-width: 120px;
	transition: background .3s
}

.uic-step-line.done {
	background: var(--or)
}

.uic-contact-grid {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 20px;
	margin-bottom: 24px
}

.uic-cfield {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.uic-clabel {
	font-size: 13px;
	font-weight: 700;
	color: var(--blk)
}

.uic-cinput {
	border: 1.5px solid var(--g200);
	border-radius: var(--r);
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color .2s;
	color: var(--blk);
	background: var(--wh)
}

.uic-cinput:focus {
	border-color: var(--or)
}

.uic-err {
	font-size: 11px;
	color: #A32D2D;
	font-weight: 600;
	min-height: 16px
}

.uic-summary-box {
	background: var(--or-bg);
	border-radius: var(--rlg);
	padding: 18px 20px;
	margin-bottom: 20px;
	border: 1px solid var(--or-mid)
}

.uic-summary-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--or);
	text-transform: uppercase;
	letter-spacing: .6px;
	margin-bottom: 10px
}

.uic-summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	padding: 5px 0;
	border-bottom: 1px solid var(--or-mid)
}

.uic-summary-row:last-child {
	border: none
}

.uic-consent-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 6px
}

.uic-next-btn {
	width: 100%;
	padding: 15px;
	background: var(--or);
	color: #fff;
	border: none;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: opacity .2s;
	margin-top: 4px
}

.uic-next-btn:hover {
	opacity: .88
}

.uic-back-btn {
	padding: 15px 24px;
	background: var(--wh);
	color: var(--g600);
	border: 1.5px solid var(--g200);
	border-radius: 50px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap
}

.uic-back-btn:hover {
	border-color: var(--g400);
	color: var(--blk)
}

.uic-result-header {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--wh);
	border-radius: var(--rlg);
	padding: 20px 24px;
	border: 1px solid var(--g100);
	margin-bottom: 16px
}

.uic-result-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--or-bg);
	color: var(--or);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	flex-shrink: 0
}

.uic-risk-pill {
	padding: 6px 16px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 700
}

.uic-best-offer {
	background: var(--or);
	border-radius: var(--rxl);
	padding: 28px 32px;
	color: #fff;
	margin-bottom: 20px
}

.uic-best-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	opacity: .75;
	margin-bottom: 8px
}

.uic-best-price {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1
}

.uic-products-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--blk);
	margin-bottom: 12px
}

.uic-prod-card {
	background: var(--wh);
	border-radius: var(--rlg);
	border: 1.5px solid var(--g100);
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 8px;
	transition: border-color .2s
}

.uic-prod-card:hover {
	border-color: var(--g200)
}

.uic-prod-card.best {
	border-color: #3B6D11;
	background: #EAF3DE
}

.uic-prod-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--g50);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0
}

.uic-prod-card.best .uic-prod-icon {
	background: #C0DD97
}

.uic-prod-name {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 2px
}

.uic-prod-desc {
	font-size: 12px;
	color: var(--g600)
}

.uic-prod-monthly {
	font-size: 20px;
	font-weight: 700;
	color: var(--or)
}

.uic-prod-card.best .uic-prod-monthly {
	color: #27500A
}

.uic-prod-sub {
	font-size: 11px;
	color: var(--g400)
}

.uic-best-tag {
	font-size: 10px;
	background: #27500A;
	color: #fff;
	padding: 2px 9px;
	border-radius: 50px;
	font-weight: 700;
	display: inline-block;
	margin-bottom: 4px
}

.uic-compare-wrap {
	background: var(--wh);
	border-radius: var(--rlg);
	border: 1px solid var(--g100);
	overflow: hidden;
	margin-bottom: 20px
}

.uic-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px
}

.uic-compare-table th {
	padding: 10px 16px;
	background: var(--or-bg);
	color: var(--or);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: left
}

.uic-compare-table td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--g100)
}

.uic-compare-table tr:last-child td {
	border: none
}

.uic-compare-table tr.uic-winner td {
	background: var(--or-bg)
}

.uic-explain-block {
	background: var(--g50);
	border-radius: var(--rlg);
	padding: 20px 24px;
	margin-bottom: 24px
}

.uic-explain-block-title {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 14px
}

.uic-explain-item {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--g100);
	font-size: 13px
}

.uic-explain-item:last-child {
	border: none
}

.uic-explain-key {
	font-weight: 700;
	min-width: 140px;
	flex-shrink: 0
}

.uic-explain-val {
	color: var(--g600)
}

.uic-result-cta {
	background: var(--wh);
	border-radius: var(--rxl);
	border: 1px solid var(--g100);
	padding: 28px 32px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap
}

.uic-result-cta-text {
	flex: 1;
	min-width: 200px
}

@media (max-width: 680px) {
	.uic-card {
		padding: 24px 18px
	}

	.uic-contact-grid, .uic-health-grid {
		grid-template-columns:1fr
	}

	.uic-best-offer {
		padding: 20px 20px
	}

	.uic-best-price {
		font-size: 36px
	}

	.uic-result-cta {
		flex-direction: column
	}

	.uic-step-line {
		min-width: 28px
	}
}

.lock-scroll {
	overflow: hidden;
}
/* splash */
.splash {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 10000;
}
.splash > div {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.lds-dual-ring {
	display: inline-block;
	width: 46px;
	height: 46px;
}
.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 46px;
	height: 46px;
	margin: 1px;
	border-radius: 50%;
	border: 5px solid #bbb;
	border-color: #bbb transparent #bbb transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* policy-validation */
.policy-validation {
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 100000;
	transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
	position: fixed;
	/*padding: 0 20px;*/
}
.policy-validation .container {
}
.policy-validation .dialog-area {
	font-size: 14px;
	box-shadow: rgba(0, 0, 0, 0.34) 0px 3px 10px 0px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px 20px;
	max-height: calc(100vh - 100px);
	overflow: auto;
}
.policy-validation.hide {
	opacity: 0;
	visibility: hidden;
}
.policy-validation .message {
	flex-grow: 1;
}
.policy-validation .message h5 {
	font-size: 20px;
	line-height: 24px;
	margin: 0 0 15px;
}
.policy-validation .message p {
	margin: 0;
}
.policy-validation .actions {

	text-align: right;
}
.policy-validation .control {
	position: relative;
	cursor: pointer;
	padding: 10px 26px 10px 0;
	width: fit-content;
	margin: 10px 0;
}
.policy-validation .control:before {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    bottom: 0;
	width: 18px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgYXJpYS1oaWRkZW49InRydWUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiB2ZWN0b3ItZWZmZWN0PSJub24tc2NhbGluZy1zdHJva2UiIGQ9Im04LjI1IDQuNSA3LjUgNy41LTcuNSA3LjUiLz48L3N2Zz4=");
    background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
    cursor: pointer;
    transition: all .2s linear;
}
.policy-validation .control.open:before {
    transform: rotate(90deg) !important;
}
.policy-validation .options {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}
.policy-validation .options .note {
	margin-bottom: 15px;
}
.policy-validation .options .form {
	display: flex;
	/*margin-bottom: 20px;*/
}
.policy-validation .options .form > div {
	width: 25%;
	padding-right: 20px;
	margin-bottom: 20px;
}
.policy-validation .options label {
	margin-bottom: 10px;
}
/*.policy-validation .options > div:last-child {
	padding-right: 0;
}*/
@media (max-width: 992px) {
	.policy-validation .options {
		overflow: auto;
	}
	.policy-validation .options .form {
		flex-wrap: wrap;
	}
	.policy-validation .options .form > div {
		width: 100%;

	}
}
@media (max-width: 767px) {
	.policy-validation .dialog-area {
		flex-wrap: wrap;
		font-size: 12px;
	}
	.policy-validation .message {

	}
	.policy-validation .dialog-area > div {
		width: 100%;
	}
	.policy-validation .actions .btn {
		width: 100%;
		margin-bottom: 10px;
	}
}