/* ==========================================================
   Smart Brief Form — Soft Blue & White Theme
   تم سفید-آبی ملایم و حرفه‌ای
   ========================================================== */

.sbf-wrap{
	/* --- پالت رنگ سفید-آبی --- */
	--sbf-bg: #f0f7ff;
	--sbf-bg-2: #e8f0fe;
	--sbf-shadow-dark: #d0dbe8;
	--sbf-shadow-light: #ffffff;
	--sbf-accent: #2563eb;
	--sbf-accent-dark: #1d4ed8;
	--sbf-accent-light: #93c5fd;
	--sbf-accent-glow: rgba(37,99,235,.25);
	--sbf-success: #10b981;
	--sbf-success-glow: rgba(16,185,129,.2);
	--sbf-warning: #f59e0b;
	--sbf-text: #1e293b;
	--sbf-text-muted: #64748b;
	--sbf-white: #ffffff;

	font-family:'Vazirmatn', Tahoma, sans-serif;
	max-width:680px;
	margin:30px auto;
	background:var(--sbf-bg);
	border-radius:28px;
	box-shadow:12px 12px 28px var(--sbf-shadow-dark),-12px -12px 28px var(--sbf-shadow-light);
	padding:32px 28px 24px;
	position:relative;
	overflow:hidden;
}
.sbf-wrap::before{
	content:"";
	position:absolute;top:-100px;right:-100px;
	width:260px;height:260px;
	background:radial-gradient(circle,var(--sbf-accent-light) 0%,transparent 70%);
	opacity:.15;border-radius:50%;pointer-events:none;
}
.sbf-wrap::after{
	content:"";
	position:absolute;bottom:-80px;left:-80px;
	width:220px;height:220px;
	background:radial-gradient(circle,#60a5fa 0%,transparent 70%);
	opacity:.10;border-radius:50%;pointer-events:none;
}

/* --------------------------------------------------------
   Header
-------------------------------------------------------- */
.sbf-header h2{
	font-weight:800;font-size:26px;color:var(--sbf-text);margin:0 0 6px;position:relative;
}
.sbf-header p{color:var(--sbf-text-muted);margin:0 0 20px;font-weight:500;font-size:14px;}
.sbf-badge-trust{
	display:inline-flex;align-items:center;gap:6px;
	background:var(--sbf-bg);
	box-shadow:inset 2px 2px 5px var(--sbf-shadow-dark),inset -2px -2px 5px var(--sbf-shadow-light);
	border-radius:99px;padding:6px 14px;font-size:12px;font-weight:700;
	color:var(--sbf-success);margin-bottom:14px;
}

/* --------------------------------------------------------
   Progress — نوار پیشرفت خطی
-------------------------------------------------------- */
.sbf-progress{margin-bottom:24px;}
.sbf-progress-bar{
	background:var(--sbf-bg-2);border-radius:99px;height:6px;overflow:hidden;
	box-shadow:inset 2px 2px 4px var(--sbf-shadow-dark),inset -2px -2px 4px var(--sbf-shadow-light);
}
.sbf-progress-fill{
	background:linear-gradient(90deg,var(--sbf-accent),#60a5fa);
	height:100%;width:14.2%;border-radius:99px;
	transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------
   Steps Track — دایره‌های آیکون‌دار نوار پیشرفت
-------------------------------------------------------- */
.sbf-steps-track{
	display:flex;justify-content:space-between;align-items:flex-start;
	position:relative;margin-top:18px;padding:0 4px;
}
.sbf-step-node{
	display:flex;flex-direction:column;align-items:center;gap:6px;
	z-index:1;position:relative;flex:1;
}
.sbf-step-circle{
	width:42px;height:42px;border-radius:50%;
	background:var(--sbf-bg);
	box-shadow:inset 3px 3px 6px var(--sbf-shadow-dark),inset -3px -3px 6px var(--sbf-shadow-light);
	display:flex;align-items:center;justify-content:center;
	transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;
}
.sbf-step-circle .sbf-step-icon{font-size:17px;transition:all .3s;}
.sbf-step-circle .sbf-step-check{
	font-size:16px;color:#fff;position:absolute;
	opacity:0;transform:scale(0);transition:all .35s cubic-bezier(.4,0,.2,1);
}
.sbf-step-label{
	font-size:10px;font-weight:700;color:var(--sbf-text-muted);
	transition:color .3s;text-align:center;white-space:nowrap;
}

/* حالت فعال */
.sbf-step-node.active .sbf-step-circle{
	background:linear-gradient(135deg,var(--sbf-accent),#60a5fa);
	box-shadow:0 0 0 6px rgba(37,99,235,.12),0 4px 14px var(--sbf-accent-glow);
	animation:sbf-pulse-ring 2s infinite;
}
.sbf-step-node.active .sbf-step-icon{opacity:0;transform:scale(0);}
.sbf-step-node.active .sbf-step-check{opacity:1;transform:scale(1);}
.sbf-step-node.active .sbf-step-label{color:var(--sbf-accent);font-weight:800;}

/* حالت تکمیل‌شده */
.sbf-step-node.completed .sbf-step-circle{
	background:linear-gradient(135deg,var(--sbf-success),#34d399);
	box-shadow:0 0 0 5px var(--sbf-success-glow);
}
.sbf-step-node.completed .sbf-step-icon{opacity:0;transform:scale(0);}
.sbf-step-node.completed .sbf-step-check{opacity:1;transform:scale(1);}
.sbf-step-node.completed .sbf-step-label{color:var(--sbf-success);}

@keyframes sbf-pulse-ring{
	0%{box-shadow:0 0 0 0 rgba(37,99,235,.3),0 4px 14px var(--sbf-accent-glow);}
	70%{box-shadow:0 0 0 12px rgba(37,99,235,0),0 4px 14px var(--sbf-accent-glow);}
	100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 4px 14px var(--sbf-accent-glow);}
}

/* --------------------------------------------------------
   Steps — مراحل فرم
-------------------------------------------------------- */
.sbf-step{display:none;animation:sbfFade .4s ease;}
.sbf-step.active{display:block;}
.sbf-step.slide-in{animation:sbfSlideIn .45s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes sbfFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes sbfSlideIn{from{opacity:0;transform:translateX(-40px);}to{opacity:1;transform:translateX(0);}}

.sbf-step h3{font-size:19px;font-weight:800;color:var(--sbf-text);margin-bottom:6px;}
.sbf-step .sbf-step-sub{font-size:13px;color:var(--sbf-text-muted);margin-bottom:18px;font-weight:500;}

/* --------------------------------------------------------
   Cards — کارت‌های انتخاب پروژه
-------------------------------------------------------- */
.sbf-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sbf-card{
	background:var(--sbf-bg);
	box-shadow:5px 5px 10px var(--sbf-shadow-dark),-5px -5px 10px var(--sbf-shadow-light);
	border-radius:18px;padding:20px 12px;text-align:center;
	cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
	display:flex;flex-direction:column;align-items:center;gap:8px;
	border:2px solid transparent;position:relative;
}
.sbf-card:hover{transform:translateY(-3px);box-shadow:7px 7px 14px var(--sbf-shadow-dark),-7px -7px 14px var(--sbf-shadow-light);}
.sbf-card input{display:none;}
.sbf-card:has(input:checked){
	border-color:var(--sbf-accent-light);
	box-shadow:5px 5px 10px var(--sbf-shadow-dark),-5px -5px 10px var(--sbf-shadow-light),
		inset 0 0 0 1px rgba(37,99,235,.08);
}
.sbf-card:has(input:checked) .sbf-card-icon{transform:scale(1.2);}
.sbf-card:has(input:checked) .sbf-card-pop{opacity:1;transform:translateY(0);}
.sbf-card-icon{font-size:30px;transition:transform .3s cubic-bezier(.4,0,.2,1);}
.sbf-card-title{font-weight:700;font-size:13px;color:var(--sbf-text);line-height:1.5;}
.sbf-card-price{font-size:11px;color:var(--sbf-text-muted);font-weight:600;margin-top:2px;}
.sbf-card-pop{
	position:absolute;top:-10px;left:50%;transform:translate(-50%,-8px);
	background:linear-gradient(135deg,var(--sbf-accent),#60a5fa);
	color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:99px;
	opacity:0;transition:all .3s;white-space:nowrap;
}

/* --------------------------------------------------------
   Radio — رادیوها
-------------------------------------------------------- */
.sbf-radio-list{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.sbf-radio{
	background:var(--sbf-bg);
	box-shadow:4px 4px 8px var(--sbf-shadow-dark),-4px -4px 8px var(--sbf-shadow-light);
	border-radius:16px;padding:16px 18px;
	display:flex;align-items:center;gap:12px;
	cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
	font-weight:600;font-size:14px;color:var(--sbf-text);position:relative;
}
.sbf-radio:hover{box-shadow:5px 5px 10px var(--sbf-shadow-dark),-5px -5px 10px var(--sbf-shadow-light);}
.sbf-radio:has(input:checked){
	box-shadow:inset 3px 3px 6px var(--sbf-shadow-dark),inset -3px -3px 6px var(--sbf-shadow-light);
	color:var(--sbf-accent);
}
.sbf-radio input{
	accent-color:var(--sbf-accent);width:20px;height:20px;flex-shrink:0;
}
.sbf-radio-tag{
	margin-inline-start:auto;font-size:11px;font-weight:700;
	background:var(--sbf-bg);color:var(--sbf-text-muted);
	padding:3px 10px;border-radius:99px;
	box-shadow:inset 2px 2px 4px var(--sbf-shadow-dark),inset -2px -2px 4px var(--sbf-shadow-light);
}
.sbf-radio:has(input:checked) .sbf-radio-tag{
	background:linear-gradient(135deg,var(--sbf-accent),#60a5fa);color:#fff;box-shadow:none;
}

/* --------------------------------------------------------
   Checkbox — چک‌باکس‌ها
-------------------------------------------------------- */
.sbf-checks{display:flex;flex-direction:column;gap:12px;}
.sbf-check{
	background:var(--sbf-bg);
	box-shadow:4px 4px 8px var(--sbf-shadow-dark),-4px -4px 8px var(--sbf-shadow-light);
	border-radius:16px;padding:15px 18px;
	display:flex;align-items:center;gap:12px;
	cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
	font-weight:600;font-size:14px;color:var(--sbf-text);position:relative;
}
.sbf-check:hover{box-shadow:5px 5px 10px var(--sbf-shadow-dark),-5px -5px 10px var(--sbf-shadow-light);}
.sbf-check:has(input:checked){
	box-shadow:inset 3px 3px 6px var(--sbf-shadow-dark),inset -3px -3px 6px var(--sbf-shadow-light);
	color:var(--sbf-accent);
}
.sbf-check input{position:absolute;opacity:0;width:0;height:0;}
.sbf-check-box{
	width:24px;height:24px;border-radius:7px;flex-shrink:0;
	background:var(--sbf-bg);
	box-shadow:inset 2px 2px 4px var(--sbf-shadow-dark),inset -2px -2px 4px var(--sbf-shadow-light);
	display:flex;align-items:center;justify-content:center;
	transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;
}
.sbf-check-box::after{
	content:'';display:none;
	width:6px;height:11px;
	border:solid #fff;border-width:0 2.5px 2.5px 0;
	transform:rotate(45deg);position:absolute;top:4px;
}
.sbf-check input:checked ~ .sbf-check-box{
	background:linear-gradient(135deg,var(--sbf-accent),#60a5fa);
	box-shadow:0 2px 8px var(--sbf-accent-glow);
}
.sbf-check input:checked ~ .sbf-check-box::after{display:block;}
.sbf-check-price{
	margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--sbf-text-muted);
}

/* --------------------------------------------------------
   Promo — کادر تخفیف
-------------------------------------------------------- */
.sbf-promo{
	margin-top:16px;
	background:linear-gradient(135deg,#eff6ff,#dbeafe);
	border:1.5px dashed var(--sbf-accent-light);
	border-radius:14px;padding:12px 16px;
	font-weight:700;color:var(--sbf-accent-dark);font-size:13px;
	box-shadow:inset 0 0 8px rgba(37,99,235,.05);
	display:flex;align-items:center;gap:8px;
}
.sbf-urgency-note{
	margin-top:14px;
	background:linear-gradient(135deg,#fee2e2,#fef2f2);
	border:1.5px dashed #ef4444;
	border-radius:14px;padding:12px 16px;
	font-weight:700;color:#991b1b;font-size:12.5px;
	display:flex;align-items:center;gap:8px;
}

/* --------------------------------------------------------
   Fields — فیلدهای ورودی
-------------------------------------------------------- */
.sbf-field{margin-bottom:18px;}
.sbf-field label{display:block;font-weight:700;margin-bottom:8px;color:var(--sbf-text);font-size:13.5px;}
.sbf-field input,.sbf-field textarea,.sbf-field select{
	width:100%;border:none;outline:none;
	background:var(--sbf-bg);
	border-radius:14px;padding:14px 18px;
	font-family:inherit;font-size:14px;color:var(--sbf-text);
	box-sizing:border-box;
	box-shadow:inset 3px 3px 7px var(--sbf-shadow-dark),inset -3px -3px 7px var(--sbf-shadow-light);
	transition:box-shadow .3s;
}
.sbf-field input::placeholder,.sbf-field textarea::placeholder{color:#94a3b8;}
.sbf-field input:focus,.sbf-field textarea:focus,.sbf-field select:focus{
	box-shadow:inset 4px 4px 8px var(--sbf-shadow-dark),inset -4px -4px 8px var(--sbf-shadow-light),
		0 0 0 3px rgba(37,99,235,.12);
}
.sbf-field-ltr{direction:ltr;text-align:left;}

/* --------------------------------------------------------
   Summary — بخش پیش‌فاکتور
-------------------------------------------------------- */
.sbf-summary-box{
	background:var(--sbf-bg);
	border-radius:22px;padding:22px;margin-bottom:16px;
	box-shadow:8px 8px 16px var(--sbf-shadow-dark),-8px -8px 16px var(--sbf-shadow-light);
	position:relative;overflow:hidden;
}
.sbf-summary-box::before{
	content:"";
	position:absolute;top:-30px;left:-30px;
	width:120px;height:120px;
	background:radial-gradient(circle,var(--sbf-accent-light) 0%,transparent 70%);
	opacity:.12;border-radius:50%;pointer-events:none;
}
.sbf-summary-row{
	display:flex;justify-content:space-between;padding:10px 0;
	border-bottom:1px solid var(--sbf-shadow-dark);font-size:14px;
}
.sbf-summary-row span{color:var(--sbf-text-muted);font-weight:600;}
.sbf-summary-row strong{color:var(--sbf-text);font-weight:700;}
.sbf-summary-row:last-child{border-bottom:none;}
.sbf-summary-row.total{border-bottom:none;padding-top:16px;margin-top:4px;}
.sbf-summary-row.total span{font-size:16px;font-weight:800;color:var(--sbf-accent);}
.sbf-summary-row.total strong{
	font-size:26px;font-weight:900;
	background:linear-gradient(135deg,var(--sbf-accent),#60a5fa);
	-webkit-background-clip:text;-webkit-text-fill-color:transparent;
	background-clip:text;
}
.sbf-summary-save{
	display:none;background:linear-gradient(135deg,#d1fae5,#a7f3d0);
	border-radius:12px;padding:10px 14px;margin:10px 0;
	font-size:12.5px;font-weight:700;color:#065f46;align-items:center;gap:6px;
}
.sbf-summary-save.show{display:flex;}
.sbf-note{font-size:12px;color:var(--sbf-text-muted);margin-bottom:18px;line-height:1.7;}

/* --------------------------------------------------------
   Navigation — دکمه‌ها
-------------------------------------------------------- */
.sbf-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;}
.sbf-btn{
	border:none;border-radius:16px;padding:14px 28px;font-weight:800;font-size:14px;
	cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);font-family:inherit;
}
.sbf-btn-prev{
	background:var(--sbf-bg);color:var(--sbf-text-muted);
	box-shadow:4px 4px 8px var(--sbf-shadow-dark),-4px -4px 8px var(--sbf-shadow-light);
}
.sbf-btn-prev:hover{
	box-shadow:inset 3px 3px 6px var(--sbf-shadow-dark),inset -3px -3px 6px var(--sbf-shadow-light);
}
.sbf-btn-next{
	background:var(--sbf-bg);color:var(--sbf-accent);flex:1;
	box-shadow:6px 6px 12px var(--sbf-shadow-dark),-6px -6px 12px var(--sbf-shadow-light);
}
.sbf-btn-next:hover{
	box-shadow:inset 4px 4px 8px var(--sbf-shadow-dark),inset -4px -4px 8px var(--sbf-shadow-light);
	transform:translateY(-1px);
}
.sbf-btn-submit{
	width:100%;
	background:linear-gradient(135deg,var(--sbf-accent),#60a5fa);
	color:#fff;font-size:16px;padding:18px;
	box-shadow:0 10px 28px var(--sbf-accent-glow);
	border-radius:18px;
}
.sbf-btn-submit:hover{transform:translateY(-2px);box-shadow:0 14px 32px var(--sbf-accent-glow);}
.sbf-btn-submit:active{transform:translateY(0);}
.sbf-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;}

/* --------------------------------------------------------
   Floating Price — بار شناور قیمت
-------------------------------------------------------- */
.sbf-floating-price{
	position:sticky;bottom:10px;margin-top:20px;
	background:var(--sbf-bg);
	border-radius:18px;padding:14px 20px;
	display:flex;justify-content:space-between;align-items:center;
	font-weight:700;color:var(--sbf-text);
	box-shadow:8px 8px 16px var(--sbf-shadow-dark),-8px -8px 16px var(--sbf-shadow-light);
	transition:transform .3s;
}
.sbf-floating-price strong{font-size:18px;color:var(--sbf-accent);}

/* --------------------------------------------------------
   Turnstile — کادر تأیید امنیتی
-------------------------------------------------------- */
.sbf-turnstile-wrap{
	margin-top:8px;padding:14px;border-radius:14px;
	background:var(--sbf-bg);
	box-shadow:inset 2px 2px 5px var(--sbf-shadow-dark),inset -2px -2px 5px var(--sbf-shadow-light);
}

/* --------------------------------------------------------
   Result Message
-------------------------------------------------------- */
#sbf-result-msg{margin-top:16px;font-weight:700;text-align:center;font-size:14px;}
#sbf-result-msg.success{color:var(--sbf-success);}
#sbf-result-msg.error{color:#ef4444;}

/* --------------------------------------------------------
   Stagger Animation
-------------------------------------------------------- */
.sbf-stagger{opacity:0;transform:translateY(16px);animation:sbfStaggerIn .4s ease forwards;}
@keyframes sbfStaggerIn{to{opacity:1;transform:translateY(0);}}

/* --------------------------------------------------------
   Discount — کد تخفیف
-------------------------------------------------------- */
.sbf-discount-field {
	margin-top: 10px;
	padding: 14px 16px;
	background:var(--sbf-bg);
	border-radius:16px;
	box-shadow:inset 2px 2px 5px var(--sbf-shadow-dark),inset -2px -2px 5px var(--sbf-shadow-light);
}
.sbf-btn-discount {
	transition:all 0.25s cubic-bezier(.4,0,.2,1);
	flex-shrink:0;
	background:linear-gradient(135deg,var(--sbf-accent),#60a5fa) !important;
	color:#fff !important;
	border:none;
	border-radius:12px;
	font-weight:700;
	cursor:pointer;
	padding:12px 20px;
	font-size:13px;
}
.sbf-btn-discount:hover {
	transform:scale(1.03);
	box-shadow:0 4px 14px var(--sbf-accent-glow);
}
.sbf-btn-discount:disabled {
	opacity:.6;
	cursor:not-allowed;
	transform:none !important;
}
#sbf-discount-message {
	margin-top:8px;
	font-size:13px;
	font-weight:600;
}
#sbf-discount-message.success {color:var(--sbf-success);}
#sbf-discount-message.error {color:#ef4444;}

/* --------------------------------------------------------
   Responsive — موبایل
-------------------------------------------------------- */
@media(max-width:560px){
	.sbf-wrap{
		margin:0;padding:20px 14px 16px;border-radius:0;
		box-shadow:none;background:var(--sbf-bg);
	}
	.sbf-header h2{font-size:20px;}
	.sbf-header p{font-size:13px;}
	.sbf-cards{grid-template-columns:1fr 1fr;gap:10px;}
	.sbf-card{padding:14px 8px;border-radius:14px;}
	.sbf-card-icon{font-size:22px;}
	.sbf-card-title{font-size:11.5px;}
	.sbf-step h3{font-size:16px;}
	.sbf-radio,.sbf-check{padding:13px 14px;font-size:13px;gap:10px;}
	.sbf-step-label{display:none;}
	.sbf-step-circle{width:36px;height:36px;}
	.sbf-step-circle .sbf-step-icon{font-size:14px;}
	.sbf-steps-track{gap:4px;}
	.sbf-nav{
		position:sticky;bottom:0;background:var(--sbf-bg);
		padding-top:10px;margin-top:16px;
		border-radius:16px 16px 0 0;
		box-shadow:0 -4px 12px var(--sbf-shadow-dark);
	}
	.sbf-btn{padding:13px 16px;font-size:13px;}
	.sbf-summary-row{font-size:13px;}
	.sbf-summary-row.total strong{font-size:20px;}
	.sbf-floating-price{font-size:12px;padding:11px 14px;border-radius:14px;}
	.sbf-floating-price strong{font-size:15px;}
	.sbf-radio-tag,.sbf-check-price{font-size:10px;}
}
@media(max-width:380px){
	.sbf-cards{grid-template-columns:1fr;}
}