/**
 * DAF Marketplace — DAF Urdu for Chrome Homepage Section
 *
 * Location: /wp-content/plugins/daf-marketplace/assets/css/daf-urdu-for-chrome.css
 *
 * Purpose:
 * - Premium homepage promotional section for DAF Urdu for Chrome.
 * - Slim 30% reduced height version.
 * - Matches HyperDAF homepage visual language.
 * - Fully responsive for desktop, tablet, and mobile.
 */

.daf-urdu-chrome-section {
	--daf-urdu-blue: #2563eb;
	--daf-urdu-blue-dark: #1746c8;
	--daf-urdu-green: #0f9f49;
	--daf-urdu-green-dark: #06653c;
	--daf-urdu-accent: #8bbe38;
	--daf-urdu-ink: #07111f;
	--daf-urdu-muted: #5b6b82;
	--daf-urdu-border: #dce7f3;
	--daf-urdu-soft: #f6fbff;
	--daf-urdu-card: #ffffff;
	--daf-urdu-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
	--daf-urdu-shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.055);
	--daf-urdu-radius: 22px;

	position: relative;
	width: 100%;
	padding: clamp(36px, 4.6vw, 64px) 0;
	background:
		radial-gradient(circle at 16% 18%, rgba(37, 99, 235, 0.07), transparent 28%),
		radial-gradient(circle at 88% 22%, rgba(15, 159, 73, 0.11), transparent 30%),
		linear-gradient(180deg, #f8fcff 0%, #ffffff 56%, #f8fcff 100%);
	color: var(--daf-urdu-ink);
	overflow: hidden;
}

.daf-urdu-chrome-section *,
.daf-urdu-chrome-section *::before,
.daf-urdu-chrome-section *::after {
	box-sizing: border-box;
}

.daf-urdu-chrome-section svg {
	display: block;
	flex: 0 0 auto;
}

.daf-urdu-chrome-bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(15, 23, 42, 0.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 23, 42, 0.026) 1px, transparent 1px);
	background-size: 30px 30px;
	mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 88%, transparent 100%);
	pointer-events: none;
}

.daf-urdu-chrome-container {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(390px, 1fr);
	align-items: center;
	gap: clamp(26px, 4vw, 56px);
	width: min(1150px, calc(100% - 40px));
	margin: 0 auto;
}

/* =========================================================
   LEFT CONTENT
========================================================= */
.daf-urdu-chrome-copy {
	min-width: 0;
}

.daf-urdu-chrome-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 28px;
	padding: 0 12px;
	border: 1px solid rgba(37, 99, 235, 0.16);
	border-radius: 999px;
	background:
		linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 159, 73, 0.08)),
		#ffffff;
	color: var(--daf-urdu-blue);
	font-size: 10.5px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.055);
}

.daf-urdu-chrome-label svg {
	width: 16px;
	height: 16px;
}

.daf-urdu-chrome-title {
	max-width: 500px;
	margin: 14px 0 11px;
	color: var(--daf-urdu-ink);
	font-size: clamp(31px, 3.25vw, 47px);
	font-weight: 950;
	line-height: 1.02;
	letter-spacing: -0.06em;
	text-wrap: balance;
}

.daf-urdu-chrome-title span {
	color: var(--daf-urdu-green);
}

.daf-urdu-chrome-description {
	max-width: 510px;
	margin: 0;
	color: var(--daf-urdu-muted);
	font-size: clamp(14px, 0.98vw, 15.5px);
	font-weight: 550;
	line-height: 1.62;
	letter-spacing: -0.01em;
}

.daf-urdu-chrome-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.daf-urdu-chrome-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 31px;
	padding: 0 11px;
	border: 1px solid rgba(15, 159, 73, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: #0f3e2b;
	font-size: 11.5px;
	font-weight: 850;
	line-height: 1;
	box-shadow: 0 7px 20px rgba(15, 23, 42, 0.035);
}

.daf-urdu-chrome-chip svg {
	width: 15px;
	height: 15px;
}

.daf-urdu-chrome-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px;
	margin-top: 22px;
}

.daf-urdu-chrome-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 43px;
	padding: 0 17px;
	border-radius: 13px;
	font-size: 13.5px;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease;
}

.daf-urdu-chrome-btn svg {
	width: 18px;
	height: 18px;
}

.daf-urdu-chrome-btn--primary {
	border: 1px solid rgba(37, 99, 235, 0.22);
	background:
		linear-gradient(135deg, var(--daf-urdu-blue), #0ea5e9);
	color: #ffffff;
	box-shadow: 0 14px 28px rgba(37, 99, 235, 0.20);
}

.daf-urdu-chrome-btn--primary:hover,
.daf-urdu-chrome-btn--primary:focus {
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(37, 99, 235, 0.27);
}

.daf-urdu-chrome-btn--secondary {
	border: 1px solid rgba(37, 99, 235, 0.22);
	background: #ffffff;
	color: var(--daf-urdu-blue);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.daf-urdu-chrome-btn--secondary:hover,
.daf-urdu-chrome-btn--secondary:focus {
	color: var(--daf-urdu-blue-dark);
	border-color: rgba(37, 99, 235, 0.32);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.075);
}

/* =========================================================
   PRODUCT VISUAL
========================================================= */
.daf-urdu-chrome-visual {
	position: relative;
	min-width: 0;
	padding: 12px 0;
}

.daf-urdu-chrome-popup {
	position: relative;
	z-index: 2;
	width: min(100%, 560px);
	margin-left: auto;
	border: 1px solid rgba(37, 99, 235, 0.22);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow:
		0 20px 54px rgba(15, 23, 42, 0.12),
		0 0 0 7px rgba(255, 255, 255, 0.54);
	overflow: hidden;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.daf-urdu-chrome-popup::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.08), transparent 28%),
		radial-gradient(circle at 86% 12%, rgba(15, 159, 73, 0.10), transparent 30%);
	pointer-events: none;
}

.daf-urdu-chrome-popup > * {
	position: relative;
	z-index: 1;
}

.daf-urdu-chrome-popup__header {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px 17px 13px;
	border-bottom: 1px solid #dce7f3;
}

.daf-urdu-chrome-app-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	border-radius: 11px;
	background:
		radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.18), transparent 40%),
		linear-gradient(135deg, #062318, #083b58);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.12),
		0 10px 20px rgba(5, 48, 78, 0.18);
}

.daf-urdu-chrome-app-icon span {
	color: #ffd166;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	text-shadow: 0 2px 12px rgba(255, 209, 102, 0.16);
}

.daf-urdu-chrome-popup__header h3 {
	margin: 0 0 2px;
	color: #08317a;
	font-size: clamp(15px, 1.25vw, 19px);
	font-weight: 950;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.daf-urdu-chrome-popup__header p {
	margin: 0;
	color: #4d6380;
	font-size: 10.6px;
	font-weight: 650;
	line-height: 1.22;
}

.daf-urdu-chrome-popup__tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.daf-urdu-chrome-popup__tools span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 31px;
	padding: 0 9px;
	border: 1px solid #b9d1ff;
	border-radius: 9px;
	background: #ffffff;
	color: var(--daf-urdu-blue);
	font-size: 10.5px;
	font-weight: 900;
	line-height: 1;
}

.daf-urdu-chrome-popup__tools span:last-child {
	min-width: 31px;
	padding: 0;
}

/* status */
.daf-urdu-chrome-popup__status {
	display: grid;
	grid-template-columns: auto auto minmax(130px, 1fr) auto;
	align-items: center;
	gap: 9px;
	padding: 12px 17px;
	border-bottom: 1px solid #e6eef8;
}

.daf-urdu-chrome-toggle {
	position: relative;
	width: 52px;
	height: 27px;
	border-radius: 999px;
	background: linear-gradient(135deg, #2563eb, #60a5fa);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
	cursor: pointer;
}

.daf-urdu-chrome-toggle span {
	position: absolute;
	top: 4px;
	right: 5px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}

.daf-urdu-chrome-popup__status strong {
	color: #08317a;
	font-size: 12px;
	font-weight: 950;
}

.daf-urdu-chrome-popup__status em {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 27px;
	padding: 0 15px;
	border: 1px solid rgba(15, 159, 73, 0.18);
	border-radius: 999px;
	background: #effdf4;
	color: #087037;
	font-size: 11.5px;
	font-style: normal;
	font-weight: 950;
	white-space: nowrap;
}

.daf-urdu-chrome-popup__status b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 29px;
	padding: 0 11px;
	border: 1px solid #b9d1ff;
	border-radius: 9px;
	background: #ffffff;
	color: var(--daf-urdu-blue);
	font-size: 11.5px;
	font-weight: 950;
	white-space: nowrap;
}

/* textbox */
.daf-urdu-chrome-textbox {
	position: relative;
	min-height: 116px;
	margin: 0 17px 12px;
	border: 2px solid rgba(37, 99, 235, 0.78);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
	overflow: hidden;
}

.daf-urdu-chrome-textbox p {
	margin: 0;
	padding: 20px 24px 26px 38px;
	color: #111827;
	font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", serif;
	font-size: clamp(19px, 1.65vw, 24px);
	font-weight: 500;
	line-height: 1.85;
	text-align: right;
}

.daf-urdu-chrome-textbox span {
	position: absolute;
	right: 14px;
	bottom: 8px;
	color: #405f98;
	font-size: 12px;
	font-weight: 950;
}

.daf-urdu-chrome-scroll {
	position: absolute;
	left: 9px;
	top: 10px;
	width: 7px;
	height: calc(100% - 26px);
	border-radius: 999px;
	background: #d7e4f5;
}

.daf-urdu-chrome-scroll::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 7px;
	height: 50px;
	border-radius: 999px;
	background: #8794a8;
}

/* controls */
.daf-urdu-chrome-controls {
	display: grid;
	grid-template-columns: 0.9fr 1fr 1.45fr;
	gap: 10px;
	padding: 0 17px 13px;
}

.daf-urdu-chrome-controls div {
	min-width: 0;
}

.daf-urdu-chrome-controls label {
	display: block;
	margin: 0 0 6px;
	color: #08317a;
	font-size: 10.8px;
	font-weight: 950;
	line-height: 1;
}

.daf-urdu-chrome-controls span {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 35px;
	width: 100%;
	padding: 0 27px 0 11px;
	border: 1px solid #bdd2ff;
	border-radius: 9px;
	background: #ffffff;
	color: #41516a;
	font-size: 11.2px;
	font-weight: 800;
	line-height: 1.22;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.daf-urdu-chrome-controls span::after {
	content: "";
	position: absolute;
	right: 11px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-right: 2px solid #2d5dd9;
	border-bottom: 2px solid #2d5dd9;
	transform: translateY(-70%) rotate(45deg);
}

/* footer buttons */
.daf-urdu-chrome-popup__footer {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 9px;
	padding: 0 17px 17px;
}

.daf-urdu-chrome-popup__footer span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	border: 1px solid #bdd2ff;
	border-radius: 9px;
	background: #ffffff;
	color: var(--daf-urdu-blue);
	font-size: 11.3px;
	font-weight: 950;
	line-height: 1;
	white-space: nowrap;
}

.daf-urdu-chrome-popup__footer small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
	padding: 2px 6px;
	border-radius: 999px;
	background: #eef4ff;
	color: var(--daf-urdu-blue);
	font-size: 8.5px;
	font-weight: 950;
}

/* callouts */
.daf-urdu-chrome-callout {
	position: absolute;
	z-index: 3;
	display: grid;
	gap: 2px;
	width: 164px;
	padding: 10px 12px;
	border: 1px solid rgba(15, 159, 73, 0.18);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--daf-urdu-shadow-soft);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.daf-urdu-chrome-callout::before {
	content: "";
	position: absolute;
	width: 36px;
	height: 1px;
	border-top: 1px dashed rgba(15, 159, 73, 0.50);
}

.daf-urdu-chrome-callout strong {
	color: #087037;
	font-size: 11.3px;
	font-weight: 950;
	line-height: 1.2;
}

.daf-urdu-chrome-callout span {
	color: #5d7088;
	font-size: 10.3px;
	font-weight: 650;
	line-height: 1.32;
}

.daf-urdu-chrome-callout.is-active {
	top: -4px;
	right: -4px;
	transform: translateY(-18%);
}

.daf-urdu-chrome-callout.is-active::before {
	left: -35px;
	top: 50%;
}

.daf-urdu-chrome-callout.is-font {
	right: -6px;
	bottom: 0;
}

.daf-urdu-chrome-callout.is-font::before {
	left: -35px;
	top: 50%;
}

/* JS states */
.daf-urdu-chrome-popup.is-preview-active {
	transform: translateY(-3px);
	box-shadow:
		0 26px 68px rgba(15, 23, 42, 0.15),
		0 0 0 7px rgba(255, 255, 255, 0.60);
}

.daf-urdu-chrome-popup.is-demo-off .daf-urdu-chrome-toggle {
	background: linear-gradient(135deg, #94a3b8, #cbd5e1);
}

.daf-urdu-chrome-popup.is-demo-off .daf-urdu-chrome-toggle span {
	left: 5px;
	right: auto;
}

.daf-urdu-chrome-popup.is-demo-off .daf-urdu-chrome-popup__status em {
	border-color: rgba(148, 163, 184, 0.32);
	background: #f8fafc;
	color: #64748b;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
	.daf-urdu-chrome-container {
		grid-template-columns: minmax(0, 1fr);
		width: min(900px, calc(100% - 36px));
		gap: 22px;
	}

	.daf-urdu-chrome-copy {
		text-align: center;
	}

	.daf-urdu-chrome-title,
	.daf-urdu-chrome-description {
		margin-left: auto;
		margin-right: auto;
	}

	.daf-urdu-chrome-chips,
	.daf-urdu-chrome-actions {
		justify-content: center;
	}

	.daf-urdu-chrome-popup {
		margin: 0 auto;
	}

	.daf-urdu-chrome-callout.is-active {
		right: 4px;
	}

	.daf-urdu-chrome-callout.is-font {
		right: 0;
	}
}

@media (max-width: 860px) {
	.daf-urdu-chrome-section {
		padding: 42px 0;
	}

	.daf-urdu-chrome-container {
		width: min(100%, calc(100% - 28px));
		gap: 22px;
	}

	.daf-urdu-chrome-visual {
		padding: 6px 0 0;
	}

	.daf-urdu-chrome-callout {
		display: none;
	}

	.daf-urdu-chrome-popup {
		border-radius: 18px;
	}

	.daf-urdu-chrome-popup__header {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.daf-urdu-chrome-popup__tools {
		grid-column: 1 / -1;
		justify-content: flex-end;
		margin-top: 2px;
	}

	.daf-urdu-chrome-popup__status {
		grid-template-columns: auto auto;
	}

	.daf-urdu-chrome-controls {
		grid-template-columns: 1fr;
	}

	.daf-urdu-chrome-popup__footer {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.daf-urdu-chrome-section {
		padding: 38px 0;
	}

	.daf-urdu-chrome-copy {
		text-align: left;
	}

	.daf-urdu-chrome-title {
		font-size: clamp(29px, 9.6vw, 39px);
		line-height: 1.04;
		margin-left: 0;
		margin-right: 0;
	}

	.daf-urdu-chrome-description {
		margin-left: 0;
		margin-right: 0;
		font-size: 14px;
		line-height: 1.58;
	}

	.daf-urdu-chrome-chips,
	.daf-urdu-chrome-actions {
		justify-content: flex-start;
	}

	.daf-urdu-chrome-chip {
		width: 100%;
		justify-content: flex-start;
	}

	.daf-urdu-chrome-btn {
		width: 100%;
		min-height: 42px;
	}

	.daf-urdu-chrome-popup__header {
		margin: 0;
		padding: 13px 14px 12px;
	}

	.daf-urdu-chrome-popup__status {
		margin: 0;
		padding: 12px 14px;
		grid-template-columns: auto auto;
		gap: 9px;
	}

	.daf-urdu-chrome-popup__status em,
	.daf-urdu-chrome-popup__status b {
		width: 100%;
		grid-column: 1 / -1;
	}

	.daf-urdu-chrome-textbox {
		min-height: 106px;
		margin: 0 14px 12px;
	}

	.daf-urdu-chrome-textbox p {
		padding: 18px 20px 28px 34px;
		font-size: clamp(18px, 5.6vw, 22px);
		line-height: 1.9;
	}

	.daf-urdu-chrome-controls {
		display: grid;
		margin: 0;
		padding: 0 14px 13px;
	}

	.daf-urdu-chrome-popup__footer {
		margin: 0;
		padding: 0 14px 15px;
		grid-template-columns: 1fr;
	}

	.daf-urdu-chrome-popup__footer span {
		min-height: 34px;
	}
}

@media (max-width: 420px) {
	.daf-urdu-chrome-container {
		width: min(100%, calc(100% - 22px));
	}

	.daf-urdu-chrome-label {
		font-size: 10px;
		padding-inline: 11px;
	}

	.daf-urdu-chrome-popup {
		border-radius: 16px;
	}

	.daf-urdu-chrome-popup__header h3 {
		font-size: 15.5px;
	}

	.daf-urdu-chrome-popup__header p {
		font-size: 10.2px;
	}

	.daf-urdu-chrome-app-icon {
		width: 40px;
		height: 40px;
	}

	.daf-urdu-chrome-app-icon span {
		font-size: 17px;
	}
}