/* ============================================================
   flow-skin.css — polish design nou (rebrand asiguraricontactless)
   peste fluxul de cotatie: rca.php / oferte.php / compara.php.
   SKIN PUR: stilizeaza clasele Bootstrap/tema deja existente,
   NU schimba markup-ul si NU atinge logica. Scoped pe containerele
   fluxului ca sa nu afecteze restul site-ului.
   Tokens albastru din custom.css (--brand-*). Fallback inline.
   ============================================================ */

:root {
	--fs-primary: #0E5B94;
	--fs-primary-dark: #0a3f68;
	--fs-secondary: #3B8CB8;
	--fs-accent: #A8D8F0;
	--fs-gradient: linear-gradient(180deg, #A8D8F0 0%, #3B8CB8 50%, #0E5B94 100%);
	--fs-grad-btn: linear-gradient(135deg, #3B8CB8 0%, #0E5B94 100%);
	--fs-shadow: 0 2px 4px rgba(14,91,148,0.18), 0 12px 32px rgba(14,91,148,0.28);
	--fs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Container card central (quote-container + carduri flux) ---- */
.flow-skin .quote-container,
.flow-skin .container > .card,
.flow-skin .card {
	background: #fff;
	border: 1px solid #E1E8EF;
	border-radius: 22px;
	box-shadow: 0 10px 30px rgba(14,91,148,.10);
	overflow: hidden;
	position: relative;
}
/* hairline gradient sus pe card (semnatura design nou) */
.flow-skin .quote-container::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: var(--fs-gradient);
	z-index: 2;
}

/* ---- Headere de sectiune (h4.bg-primary) → gradient elegant ---- */
.flow-skin h4.bg-primary,
.flow-skin h4.bg-primary {
	background: var(--fs-grad-btn) !important;
	border-radius: 14px;
	letter-spacing: 0.04em;
	font-weight: 700;
	padding: 14px 18px !important;
	box-shadow: 0 4px 14px rgba(14,91,148,0.25);
}

/* ---- Inputuri & select-uri rafinate ---- */
.flow-skin .form-control,
.flow-skin select.form-control,
.flow-skin .form-control {
	border-radius: 12px;
	border: 1.5px solid rgba(168,216,240,0.18);
	padding: 12px 15px;
	transition: border-color .2s var(--fs-ease), box-shadow .2s var(--fs-ease);
}
.flow-skin .form-control:focus,
.flow-skin .form-control:focus {
	border-color: var(--fs-secondary);
	box-shadow: 0 0 0 4px rgba(59,140,184,0.18);
}

/* ---- Butoane: primary/success/CONTINUA cu gradient ---- */
.flow-skin .btn-primary,
.flow-skin .btn-success,
.flow-skin .btn-primary,
.flow-skin .btn-success {
	background: var(--fs-grad-btn);
	border: none;
	border-radius: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 12px rgba(14,91,148,0.28);
	transition: transform .2s var(--fs-ease), box-shadow .2s var(--fs-ease);
}
.flow-skin .btn-primary:hover,
.flow-skin .btn-success:hover,
.flow-skin .btn-primary:hover,
.flow-skin .btn-success:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(14,91,148,0.38);
}
.flow-skin .btn-lg {
	border-radius: 14px;
	padding: 14px 28px;
}

/* ---- Badge / alert / tbi-box: accente albastre ---- */
.flow-skin .alert-info,
.flow-skin .alert-info {
	border-radius: 14px;
	border: 1px solid rgba(168,216,240,0.25);
}
.flow-skin .tbi-box,
.flow-skin .tbi-box {
	border-radius: 14px;
}

/* ---- Tabel oferte (compara/oferte) ---- */
.flow-skin .table {
	border-radius: 14px;
	overflow: hidden;
}
/* operator 2026-07-05: fara gradient sub marca — text negru, logo neschimbat */
.flow-skin .offers-car-head {
	background: none;
	color: #111827;
	border-radius: 12px 12px 0 0;
}

/* ---- Plate badge (RO) consistent cu homepage ---- */
.flow-skin .plate-ro-badge,
.flow-skin .plate-ro-badge {
	border-radius: 8px;
	overflow: hidden;
}

/* ---- Accordion FAQ (rca.php) → carduri rotunjite ---- */
.flow-skin .accordion-button,
.flow-skin .btn-group-vertical > .btn {
	border-radius: 12px !important;
	margin-bottom: 6px;
}

/* ---- Step-indicator 1/2/3 (Informatii Generale → Alege oferta → Final) ---- */
.fs-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 4px auto 22px;
	max-width: 760px;
}
.fs-step {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #6B7B8A;
	font-weight: 600;
	font-size: 15px;
}
.fs-step .fs-num {
	width: 30px; height: 30px;
	flex: 0 0 30px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: #EAF4FB;
	color: #0E5B94;
	font-weight: 700;
	font-size: 14px;
	border: 1.5px solid #A8D8F0;
	transition: all .25s var(--fs-ease);
}
.fs-step.active { color: #0E5B94; }
.fs-step.active .fs-num {
	background: var(--fs-grad-btn);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 12px rgba(14,91,148,0.4);
}
.fs-step.done .fs-num {
	background: var(--fs-secondary);
	color: #fff;
	border-color: transparent;
}
.fs-steps .fs-line {
	flex: 1 1 30px;
	min-width: 24px;
	height: 2px;
	background: #D6E6F3;
	border-radius: 2px;
}
@media (max-width: 560px) {
	.fs-step { font-size: 12px; gap: 6px; }
	.fs-step .fs-num { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
	.fs-step .fs-label { display: none; }
}

/* ---- Toggle segmented PF/PJ ---- */
.fs-segment {
	display: inline-flex;
	background: #EAF4FB;
	border: 1px solid #A8D8F0;
	border-radius: 12px;
	padding: 4px;
	gap: 4px;
	margin: 0 auto;
}
.fs-segment .fs-seg-btn {
	border: none;
	background: transparent;
	color: #6B7B8A;
	font-weight: 700;
	padding: 9px 26px;
	border-radius: 9px;
	cursor: pointer;
	transition: all .2s var(--fs-ease);
}
.fs-segment .fs-seg-btn.active {
	background: var(--fs-grad-btn);
	color: #fff;
	box-shadow: 0 3px 10px rgba(14,91,148,0.32);
}

@media (prefers-reduced-motion: reduce) {
	.flow-skin *, .flow-skin * { transition-duration: .01ms !important; }
}