* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
	--primary: #0693E3;
	--primary-dark: #0578bb;
	--light: #f4faff;
	--border: #e5edf4;
	--text: #17202a;
	--muted: #718096;
	--green: #16a34a;
	--radius-lg: 25px;
	--radius-md: 16px;
	--shadow-soft: 0 10px 40px rgba(0,0,0,.04);
}

body {
	font-family: dana;
	background: linear-gradient(180deg, #f5fbff 0%, #ffffff 40%);
	color: var(--text);
	line-height: 1.8;
}

.product-header {
	height: 75px;
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(15px);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-container {
	max-width: 1250px;
	height: 100%;
	margin: auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--text);
}

.brand-icon {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--primary), #4db9ef);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(6,147,227,.25);
}

.brand strong { display: block; font-size: 18px; }
.brand small { display: block; color: var(--muted); font-size: 10px; }

.back-home {
	text-decoration: none;
	color: #555;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	transition: color .25s;
}
.back-home:hover { color: var(--primary); }

.page-container { max-width: 1250px; margin: auto; padding: 45px 20px 80px; }

.product-hero {
	position: relative;
	overflow: hidden;
	min-height: 100px;
	border-radius: 30px;
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background:
		radial-gradient(circle at 90% 20%, rgba(255,255,255,.3), transparent 30%),
		linear-gradient(135deg, var(--primary), #087fc2);
	color: #fff;
	box-shadow: 0 25px 60px rgba(6,147,227,.22);
}

.product-hero::before {
	content: "";
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	left: -100px;
	bottom: -150px;
}

.hero-content { position: relative; z-index: 2; max-width: 750px; }

.product-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.25);
	padding: 7px 14px;
	border-radius: 30px;
	font-size: 12px;
	margin-bottom: 18px;
}

.product-hero h1 { font-size: 28px; line-height: 1.4; margin-bottom: 15px; }
.hero-description { color: rgba(255,255,255,.88); font-size: 16px; max-width: 700px; }

.product-features { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 25px; }
.product-features div { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.product-features i { color: #baf0ff; }

.hero-icon {
	position: relative;
	width: 170px;
	height: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 70px;
	flex-shrink: 0;
}

.icon-glow {
	position: absolute;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
	box-shadow: 0 0 80px rgba(255,255,255,.2);
}

.product-layout {
	display: grid;
	grid-template-columns: minmax(0,1fr) 430px;
	gap: 30px;
	margin-top: 35px;
	align-items: start;
}

.product-content {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 35px;
	box-shadow: var(--shadow-soft);
}

.section-title {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 25px;
}

.title-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #e9f7ff;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.section-title h2 { font-size: 22px; }
.section-title p { color: var(--muted); font-size: 12px; }

.description { color: #4a5568; font-size: 15px; }
.description h2, .description h3 { color: var(--text); margin: 25px 0 10px; }
.description ul { padding-right: 20px; }

.features-box {
	margin-top: 30px;
	padding: 25px;
	background: #f7fcff;
	border-radius: 18px;
	border: 1px solid #dff3ff;
}
.features-box h3 { color: var(--primary); margin-bottom: 12px; font-size: 17px; }

.trust-box {
	display: flex;
	gap: 15px;
	align-items: center;
	margin-top: 25px;
	padding: 20px;
	border-radius: 18px;
	background: #f0fdf4;
	border: 1px solid #dcfce7;
}

.trust-icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: 14px;
	background: #dcfce7;
	color: var(--green);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.trust-box strong { font-size: 15px; }
.trust-box p { color: #64748b; font-size: 12px; }

.order-card {
	position: sticky;
	top: 100px;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 28px;
	border: 1px solid var(--border);
	box-shadow: 0 15px 50px rgba(0,0,0,.07);
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 22px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--border);
}

.order-header span { color: var(--muted); font-size: 12px; }
.order-header h2 { font-size: 18px; }

.order-icon {
	width: 48px;
	height: 48px;
	background: #e9f7ff;
	color: var(--primary);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-group { margin-bottom: 20px; }

.form-group label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 8px;
}
.form-group label i { color: var(--primary); }

.form-group input {
	width: 100%;
	height: 50px;
	border: 1px solid #dfe8ef;
	border-radius: 13px;
	padding: 0 15px;
	font-family: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color .25s, box-shadow .25s;
}

.form-group input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(6,147,227,.1);
}

.form-group small { color: #94a3b8; font-size: 10px; display: block; margin-top: 5px; }

.gateways { display: flex; flex-direction: row; gap: 15px; }
.gateway { position: relative; cursor: pointer; }
.gateway input { position: absolute; opacity: 0; }

.gateway-content {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 14px;
	transition: border-color .25s, background .25s;
}

.gateway-icon {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: #f3f8fb;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gateway strong { display: block; font-size: 13px; }
.gateway small { color: #94a3b8; font-size: 10px; }

.gateway > i {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary);
	opacity: 0;
	transition: opacity .2s;
}

.gateway.selected .gateway-content { border-color: var(--primary); background: #f3faff; }
.gateway.selected > i { opacity: 1; }

/* قیمت */
.price-box {
	margin-top: 25px;
	padding: 18px;
	border-radius: var(--radius-md);
	background: #f7fbfe;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.price-box span { color: #64748b; font-size: 12px; }
.price-box strong { color: var(--primary); font-size: 20px; }

.submit-button {
	width: 100%;
	height: 56px;
	margin-top: 18px;
	border: none;
	border-radius: 15px;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
	font-family: inherit;
	font-size: 14px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transition: transform .25s, box-shadow .25s;
	box-shadow: 0 10px 25px rgba(6,147,227,.25);
}

.submit-button:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(6,147,227,.35); }
.submit-button:active { transform: translateY(0); }

.secure-payment { text-align: center; margin-top: 12px; color: #94a3b8; font-size: 10px; }
.secure-payment i { color: #22c55e; }

.faq-section {
	margin-top: 30px;
	padding-top: 25px;
	border-top: 1px solid var(--border);
}

.faq-list { display: flex; flex-direction: column; gap: 14px; }

.faq-item {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}

.faq-item.active {
	border-color: rgba(6,147,227,.35);
	box-shadow: 0 8px 25px rgba(6,147,227,.08);
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 18px 20px;
	cursor: pointer;
	background: #fafdff;
	user-select: none;
}

.faq-item.active .faq-question { background: #f3faff; }

.faq-question-text {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14.5px;
	font-weight: bold;
}

.faq-q-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #e9f7ff;
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}

.faq-toggle-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--border);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	transition: transform .3s, background .25s;
}

.faq-item.active .faq-toggle-icon {
	transform: rotate(45deg);
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease, padding .35s ease;
	padding: 0 20px;
}

.faq-item.active .faq-answer {
	max-height: 400px;
	padding: 4px 20px 20px;
}

.faq-answer p {
	color: #4a5568;
	font-size: 13.5px;
	line-height: 1.9;
	padding-right: 46px;
}

@media (max-width: 900px) {
	.product-layout { grid-template-columns: 1fr; }
	.order-card { position: relative; top: auto; order: -1; }
}

@media (max-width: 600px) {
	.page-container { padding: 25px 12px 50px; }
	.header-container { padding: 0 14px; }
	.back-home { font-size: 12px; }
	.brand small { display: none; }
	.product-hero { padding: 30px 22px; min-height: auto; border-radius: 22px; }
	.hero-icon { display: none; }
	.product-hero h1 { font-size: 28px; }
	.hero-description { font-size: 13px; }
	.product-features { flex-direction: column; gap: 8px; }
	.product-content, .order-card { padding: 22px; border-radius: 20px; }
	.section-title h2 { font-size: 18px; }
	.price-box strong { font-size: 17px; }
	.faq-section { padding: 22px; border-radius: 20px; }
	.faq-question { padding: 15px; }
	.faq-question-text { font-size: 13.5px; }
	.faq-answer p { padding-right: 0; margin-top: 8px; }
}