/* dlepnl-front.css — فرم عضویت خبرنامه (درون‌قالبی + پاپ‌آپ)
   خودکفا و خوانا روی هر پس‌زمینه. رنگ تأکید از متغیر --dnlf-accent
   (تنظیمات) می‌آید. استایل‌ها: navy | light | minimal | inline | stacked |
   edge | custom. طراحی هماهنگ با قالب فروشگاه (Vazirmatn، لاجورد ۰E1626،
   زعفرانی EFA00B، امضای آکولاد { }). */

.dnlf-band, .dnlf-pop {
	--dnlf-accent: #efa00b;
	--dnlf-ink: #0e1626;
	--dnlf-ink-2: #17223a;
	--dnlf-radius: 20px;
	--dnlf-font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

/* ───────── ساختار پایه ───────── */
/* دو کلاسه تا بر قاعده‌ی .band--tight + .band--tight قالب غلبه کند */
.dnlf-band.dnlf-band { padding: 44px 0 64px; }
.dnlf-band .wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.dnlf-band *, .dnlf-band *::before, .dnlf-band *::after,
.dnlf-pop *, .dnlf-pop *::before, .dnlf-pop *::after { box-sizing: border-box; }

/* غلبه بر ریست ورودی‌های هسته‌ی دیتالایف (engine_rtl.css: width:302px; padding:6px)
   با بالا بردن specificity به دو کلاس. */
.dnlf-band .dnlf-input,
.dnlf-pop  .dnlf-input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 14px 16px;
	border: 1.5px solid #d7dbe6;
	border-radius: 12px;
	background: #fff;
	font: 500 14px/1.6 var(--dnlf-font);
	color: #1f2937;
}
.dnlf-band .dnlf-btn,
.dnlf-pop  .dnlf-btn { margin: 0; }

.dnlf-card {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: 28px 44px;
	position: relative;
	overflow: hidden;
	border-radius: var(--dnlf-radius);
	padding: 40px 44px;
	font-family: var(--dnlf-font);
	isolation: isolate;
}
.dnlf-copy { min-width: 0; position: relative; z-index: 2; }
.dnlf-form { min-width: 0; position: relative; z-index: 2; }

.dnlf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
	font: 700 12.5px/1 var(--dnlf-font);
	letter-spacing: 0;
	color: var(--dnlf-accent);
}
.dnlf-eyebrow::before,
.dnlf-eyebrow::after {
	font: 400 15px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	opacity: .75;
	direction: ltr;
	unicode-bidi: isolate;
}
.dnlf-eyebrow::before { content: '}'; }
.dnlf-eyebrow::after  { content: '{'; }

.dnlf-title {
	margin: 0 0 10px;
	font: 800 clamp(21px, 2.6vw, 27px)/1.45 var(--dnlf-font);
	letter-spacing: -.02em;
}
.dnlf-lead {
	margin: 0;
	font: 400 14.5px/2 var(--dnlf-font);
	opacity: .9;
}

.dnlf-form { align-self: center; }
.dnlf-row { display: flex; gap: 10px; }
.dnlf-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	background: #fff;
	color: #1f2937;
	border: 1.5px solid #d7dbe6;
	border-radius: 12px;
	padding: 14px 16px;
	font: 500 14px/1.6 var(--dnlf-font);
	outline: none;
	transition: border-color .16s, box-shadow .16s;
}
.dnlf-input::placeholder { color: #9aa3b2; opacity: 1; }
.dnlf-input:focus {
	border-color: var(--dnlf-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dnlf-accent) 35%, transparent);
}
.dnlf-btn {
	flex: 0 0 auto;
	border: 0;
	cursor: pointer;
	border-radius: 12px;
	padding: 14px 28px;
	font: 800 14px/1 var(--dnlf-font);
	color: #26190a;
	background: linear-gradient(180deg, #f6b429, var(--dnlf-accent));
	box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--dnlf-accent) 75%, transparent);
	transition: transform .12s, filter .12s, box-shadow .12s;
}
.dnlf-btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
.dnlf-btn:active { transform: none; }
.dnlf-btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.dnlf-hp {
	position: absolute !important;
	left: -9999px !important; top: auto !important;
	width: 1px !important; height: 1px !important;
	overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
}
.dnlf-msg { margin-top: 12px; font-size: 13px; line-height: 1.9; min-height: 20px; opacity: .92; }
.dnlf-msg.ok  { color: #15a34a; }
.dnlf-msg.err { color: #dc2626; }

.dnlf-fine {
	margin: 12px 0 0;
	font: 400 11.5px/1.8 var(--dnlf-font);
	opacity: .62;
}

/* ═════════ استایل: navy (کارت تیره، پیش‌فرض) ═════════ */
.dnlf--navy .dnlf-card {
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(239,160,11,.16), transparent 55%),
		linear-gradient(135deg, var(--dnlf-ink) 0%, var(--dnlf-ink-2) 62%, #1b284a 100%);
	color: #eef1fb;
	box-shadow: 0 30px 60px -30px rgba(14,22,38,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}
/* واترمارک آکولاد امضای طراحی */
.dnlf--navy .dnlf-card::before {
	content: '{';
	position: absolute;
	inset-inline-start: -18px;
	bottom: -70px;
	font: 400 260px/1 ui-monospace, Menlo, Consolas, monospace;
	color: var(--dnlf-accent);
	opacity: .10;
	z-index: 1;
	pointer-events: none;
}
.dnlf--navy .dnlf-title { color: #fff; }
.dnlf--navy .dnlf-lead  { color: #c4cdea; }
.dnlf--navy .dnlf-input { border-color: transparent; background: #fff; }
.dnlf--navy .dnlf-fine  { color: #aeb9d8; opacity: .7; }
.dnlf--navy .dnlf-msg.ok  { color: #7ee2a8; }
.dnlf--navy .dnlf-msg.err { color: #ff9d9d; }

/* ═════════ استایل: light (کارت روشن) ═════════ */
.dnlf--light .dnlf-card {
	background: linear-gradient(180deg, #fff, #f8fafc);
	color: #2b3648;
	border: 1px solid #e3e8ef;
	box-shadow: 0 24px 48px -28px rgba(24,39,75,.28);
}
.dnlf--light .dnlf-card::before {
	content: '{';
	position: absolute; inset-inline-start: -10px; bottom: -80px;
	font: 400 240px/1 ui-monospace, Menlo, Consolas, monospace;
	color: var(--dnlf-accent); opacity: .07; z-index: 1; pointer-events: none;
}
.dnlf--light .dnlf-title { color: var(--dnlf-ink); }
.dnlf--light .dnlf-lead  { color: #5b6779; }
.dnlf--light .dnlf-input { background: #f7f9fc; }

/* ═════════ استایل: minimal (بدون کارت) ═════════ */
.dnlf--minimal .dnlf-card { background: none; padding: 8px 0; gap: 18px 32px; box-shadow: none; }
.dnlf--minimal .dnlf-title { font-size: 19px; }
.dnlf--minimal .dnlf-lead  { font-size: 13.5px; }

/* ═════════ استایل: inline (تک‌ردیفه‌ی فشرده) ═════════ */
.dnlf--inline .dnlf-card {
	grid-template-columns: 1fr auto;
	background: #f7f9fc;
	border: 1px solid #e3e8ef;
	padding: 20px 24px;
	gap: 14px 26px;
	border-radius: 14px;
}
.dnlf--inline .dnlf-eyebrow { display: none; }
.dnlf--inline .dnlf-title { font-size: 16px; margin: 0; }
.dnlf--inline .dnlf-lead { display: none; }
.dnlf--inline .dnlf-fine { display: none; }
.dnlf--inline .dnlf-form { min-width: 320px; }

/* ═════════ استایل: stacked (عمودی و وسط‌چین) ═════════ */
.dnlf--stacked .dnlf-card {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	background: linear-gradient(180deg, #fff, #f8fafc);
	color: #2b3648;
	border: 1px solid #e3e8ef;
	box-shadow: 0 24px 48px -28px rgba(24,39,75,.28);
	max-width: 520px;
	margin: 0 auto;
	padding: 38px 34px;
	gap: 0;
}
.dnlf--stacked .dnlf-card::before {
	content: '{';
	position: absolute; inset-inline-start: 50%; top: -60px; translate: -50% 0;
	font: 400 180px/1 ui-monospace, Menlo, Consolas, monospace;
	color: var(--dnlf-accent); opacity: .06; z-index: 1; pointer-events: none;
}
.dnlf--stacked .dnlf-copy, .dnlf--stacked .dnlf-form { width: 100%; }
.dnlf--stacked .dnlf-title { color: var(--dnlf-ink); }
.dnlf--stacked .dnlf-lead { color: #5b6779; }
.dnlf--stacked .dnlf-form { margin-top: 20px; }
.dnlf--stacked .dnlf-row { flex-direction: column; gap: 10px; }
.dnlf--stacked .dnlf-input { text-align: center; background: #f7f9fc; }
.dnlf--stacked .dnlf-btn { width: 100%; }

/* ═════════ استایل: edge (نوار رنگی کناری، تخت) ═════════ */
.dnlf--edge .dnlf-card {
	background: #fff;
	color: #2b3648;
	border: 1px solid #e3e8ef;
	border-inline-start: 5px solid var(--dnlf-accent);
	border-radius: 8px;
	box-shadow: none;
	padding: 30px 32px;
}
.dnlf--edge .dnlf-title { color: var(--dnlf-ink); }
.dnlf--edge .dnlf-lead { color: #5b6779; }
.dnlf--edge .dnlf-input { background: #f7f9fc; border-radius: 8px; }
.dnlf--edge .dnlf-btn { border-radius: 8px; }

/* ───────── واکنش‌گرا ───────── */
@media (max-width: 860px) {
	.dnlf-card { grid-template-columns: 1fr; gap: 22px; padding: 32px 26px; }
	.dnlf--inline .dnlf-card { grid-template-columns: 1fr; }
	.dnlf--inline .dnlf-form { min-width: 0; }
}
@media (max-width: 520px) {
	.dnlf-band { padding: 28px 0 44px; }
	.dnlf-card { padding: 26px 20px; }
	.dnlf-row { flex-direction: column; }
	.dnlf-btn { width: 100%; }
}

/* ───────── پاپ‌آپ ───────── */
.dnlf-pop[hidden] { display: none !important; }
.dnlf-pop {
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	z-index: 2147483000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; transition: opacity .28s; box-sizing: border-box;
}
.dnlf-pop.is-open { opacity: 1; }
.dnlf-pop-back { position: absolute; inset: 0; background: rgba(14,22,38,.6); backdrop-filter: blur(3px); }
.dnlf-pop-card {
	position: relative; z-index: 1;
	width: 100%; max-width: 460px;
	transform: translateY(16px) scale(.97);
	transition: transform .28s;
	border-radius: var(--dnlf-radius);
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(14,22,38,.5);
}
.dnlf-pop.is-open .dnlf-pop-card { transform: none; }
.dnlf-pop .dnlf-card { display: block; grid-template-columns: none; padding: 34px 30px; text-align: center; }
.dnlf-pop .dnlf-card::before { display: none; }
.dnlf-pop .dnlf-form { margin-top: 18px; }
.dnlf-pop .dnlf-row { flex-direction: column; }
.dnlf-pop .dnlf-btn { width: 100%; }
.dnlf-pop .dnlf-eyebrow { justify-content: center; }
.dnlf-pop-x {
	position: absolute; inset-inline-end: 12px; top: 10px; z-index: 2;
	width: 32px; height: 32px;
	border: 0; border-radius: 9px; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff;
	font-size: 20px; line-height: 1;
	transition: background .16s;
}
.dnlf--light .dnlf-pop-x,
.dnlf--minimal .dnlf-pop-x,
.dnlf--stacked .dnlf-pop-x,
.dnlf--inline .dnlf-pop-x { background: rgba(14,22,38,.08); color: #333; }
.dnlf-pop-x:hover { background: rgba(255,255,255,.26); }
.dnlf--light .dnlf-pop-x:hover,
.dnlf--minimal .dnlf-pop-x:hover,
.dnlf--stacked .dnlf-pop-x:hover,
.dnlf--inline .dnlf-pop-x:hover { background: rgba(14,22,38,.16); }
.dnlf-pop.dnlf--minimal .dnlf-pop-card,
.dnlf-pop.dnlf--inline .dnlf-pop-card { background: #fff; }
.dnlf-pop.dnlf--minimal .dnlf-card,
.dnlf-pop.dnlf--inline .dnlf-card { background: #fff; color: #2b3648; border: 0; }

@media (prefers-reduced-motion: reduce) {
	.dnlf-pop, .dnlf-pop-card, .dnlf-btn { transition: none; }
}