/* =========================================================
   SHAFA PUMP
   Category Content – 2026
   Lightweight / RTL / Responsive
   ========================================================= */

.shafa-category-content {
	--blue: #384B70;
	--red: #B8001F;
	--dark: #212121;
	--text: #4B5563;
	--muted: #6B7280;
	--soft: #F4F7FA;
	--bg: #F8F9FA;
	--border: #E3E7ED;
	--white: #FFFFFF;

	color: var(--text);
	font-size: 15px;
	line-height: 2;
	direction: rtl;
}


/* =========================================================
   BASE
   ========================================================= */

.shafa-category-content * {
	box-sizing: border-box;
}

.shafa-category-content .shafa-content-section {
	margin: 0 0 42px;
}

.shafa-category-content p {
	margin: 0 0 16px;
	color: var(--text);
}

.shafa-category-content p:last-child {
	margin-bottom: 0;
}

.shafa-category-content strong {
	color: var(--dark);
	font-weight: 700;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.shafa-category-content h2,
.shafa-category-content h3,
.shafa-category-content h4 {
	color: var(--dark);
	margin-top: 0;
}

.shafa-category-content h2 {
	position: relative;
	margin-bottom: 20px;
	padding-right: 14px;
	font-size: 25px;
	font-weight: 750;
	line-height: 1.7;
}

.shafa-category-content h2::before {
	content: "";
	position: absolute;
	right: 0;
	top: 7px;
	width: 4px;
	height: 30px;
	border-radius: 4px;
	background: var(--red);
}

.shafa-category-content h3 {
	margin: 34px 0 16px;
	font-size: 19px;
	font-weight: 750;
	line-height: 1.8;
}

.shafa-category-content h4 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
}


/* =========================================================
   LINKS
   ========================================================= */

.shafa-category-content a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	font-weight: 650;

	transition:
		color .2s ease,
		text-decoration-color .2s ease;
}

.shafa-category-content a:hover {
	color: var(--red);
	text-decoration-color: var(--red);
}


/* =========================================================
   INTRO
   ========================================================= */

.shafa-category-content > .shafa-content-section:first-child {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--border);
}

.shafa-category-content > .shafa-content-section:first-child h2 {
	font-size: 27px;
}


/* =========================================================
   RATO
   ========================================================= */

.shafa-rato-section {
	padding: 0 !important;
	margin-bottom: 38px !important;
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	background: var(--white);
}

.shafa-rato-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
	align-items: stretch;
}

.shafa-rato-copy {
	padding: 34px 36px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.shafa-rato-label {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 7px;
	background: var(--soft);
	color: var(--blue);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
}

.shafa-rato-copy h2 {
	margin-bottom: 18px;
}

.shafa-rato-copy a {
	color: var(--blue);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.shafa-rato-copy a:hover {
	color: var(--red);
	text-decoration-color: var(--red);
}

.shafa-rato-image {
	min-height: 330px;
	background: var(--soft);
}

.shafa-rato-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 330px;
	object-fit: cover;
}


/* =========================================================
   READ MORE
   ========================================================= */

.shafa-readmore {
	display: flex;
	flex-direction: column;
	margin: 0 0 45px;
	padding: 0;
	border: 0;
}

.shafa-readmore-content {
	order: 1;
	width: 100%;
}

.shafa-readmore > summary {
	order: 2;
	align-self: center;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 175px;
	min-height: 46px;
	margin: 32px auto 0;
	padding: 9px 22px;

	border: 1px solid var(--blue);
	border-radius: 10px;

	background: var(--white);
	color: var(--blue);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;

	cursor: pointer;
	list-style: none;

	transition:
		background .2s ease,
		color .2s ease,
		border-color .2s ease;
}

.shafa-readmore > summary::-webkit-details-marker {
	display: none;
}

.shafa-readmore > summary:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.shafa-readmore > summary:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 3px;
}

.shafa-readmore > summary::after {
	content: "↓";
	margin-right: 9px;
	font-size: 16px;
	transition: transform .2s ease;
}

.shafa-readmore[open] > summary::after {
	transform: rotate(180deg);
}

.shafa-readmore-open {
	display: inline;
}

.shafa-readmore-close {
	display: none;
}

.shafa-readmore[open] .shafa-readmore-open {
	display: none;
}

.shafa-readmore[open] .shafa-readmore-close {
	display: inline;
}


/* =========================================================
   FUEL CARDS – 2 × 2
   ========================================================= */

.shafa-fuel-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.shafa-fuel-card {
	position: relative;
	padding: 23px 24px 22px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background: var(--white);

	transition:
		border-color .2s ease,
		transform .2s ease;
}

.shafa-fuel-card::before {
	content: "";
	position: absolute;
	right: 0;
	top: 18px;
	width: 3px;
	height: 30px;
	border-radius: 3px;
	background: var(--blue);
}

.shafa-fuel-card:hover {
	border-color: #C9D0DC;
	transform: translateY(-2px);
}

.shafa-fuel-card h4 {
	padding-right: 10px;
}

.shafa-fuel-card p {
	font-size: 14px;
	line-height: 1.95;
}


/* =========================================================
   START METHODS
   ========================================================= */

.shafa-start-methods-grid {
	grid-template-columns: 1fr !important;
	max-width: 100% !important;
	margin: 20px 0 0 !important;
}


/* =========================================================
   FORMULA
   ========================================================= */

.shafa-formula {
	margin: 24px 0;
	padding: 16px 20px;

	border: 1px solid var(--border);
	border-right: 4px solid var(--blue);
	border-radius: 10px;

	background: var(--soft);
	color: var(--blue);

	font-size: 17px;
	font-weight: 700;
	text-align: center;
}


/* =========================================================
   POWER TABLE
   ========================================================= */

.shafa-table-section {
	margin-top: 4px;
}

.shafa-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--white);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.shafa-power-table {
	width: 100%;
	min-width: 680px;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;

	font-size: 14px;
	line-height: 1.7;
}

.shafa-power-table th {
	padding: 15px 17px;
	background: var(--blue);
	color: var(--white);
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.shafa-power-table th:first-child {
	border-top-right-radius: 13px;
}

.shafa-power-table th:last-child {
	border-top-left-radius: 13px;
}

.shafa-power-table td {
	padding: 13px 17px;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	background: var(--white);
}

.shafa-power-table tbody tr:last-child td {
	border-bottom: 0;
}

.shafa-power-table tbody tr:nth-child(even) td {
	background: #FAFBFC;
}

.shafa-power-table tbody tr:hover td {
	background: var(--soft);
}


/* =========================================================
   TWO COLUMN
   ========================================================= */

.shafa-two-col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.shafa-two-col > div {
	padding: 22px 24px;
	border: 1px solid var(--border);
	border-radius: 13px;
	background: var(--white);
}

.shafa-two-col h4 {
	color: var(--blue);
}


/* =========================================================
   PURCHASE CTA
   ========================================================= */

.shafa-purchase-section {
	padding: 34px;
	border-radius: 15px;
	background: var(--blue);
}

.shafa-purchase-section h2 {
	color: var(--white) !important;
}

.shafa-purchase-section h2::before {
	background: var(--red);
}

.shafa-purchase-section p {
	color: rgba(255,255,255,.92);
}


/* متن‌های Bold داخل کادر آبی */
.shafa-purchase-section strong {
	color: var(--white) !important;
	font-weight: 700;
}


/* لینک‌های داخل کادر آبی خرید */
.shafa-purchase-section a:not(.shafa-primary-button) {
	color: var(--white) !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	font-weight: 700;
}

.shafa-purchase-section a:not(.shafa-primary-button):hover {
	color: var(--white) !important;
	text-decoration-color: var(--white);
}


/* دکمه اصلی */
.shafa-primary-button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: fit-content;
	min-width: 190px;
	min-height: 46px;

	margin: 22px auto 0;
	padding: 10px 24px;

	border-radius: 9px;
	background: var(--red);
	color: var(--white) !important;

	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;

	transition:
		background .2s ease,
		transform .2s ease;
}

.shafa-primary-button:hover {
	background: #980019;
	color: var(--white) !important;
	transform: translateY(-1px);
}


/* =========================================================
   FAQ – MODERN ACCORDION
   ========================================================= */

.shafa-faq-section {
	margin-top: 48px;
}

.shafa-faq-section > h2 {
	margin-bottom: 22px;
}

.shafa-faq-section > details {
	margin: 0 0 9px;
	border: 1px solid var(--border);
	border-radius: 11px;
	background: var(--white);
	overflow: hidden;
}

.shafa-faq-section > details > summary {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 58px;
	padding: 15px 48px 15px 18px;

	color: var(--dark);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;

	cursor: pointer;
	list-style: none;
}

.shafa-faq-section > details > summary::-webkit-details-marker {
	display: none;
}

.shafa-faq-section > details > summary::before {
	content: "+";

	position: absolute;
	right: 17px;
	top: 50%;
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;

	border-radius: 50%;
	background: var(--soft);
	color: var(--blue);

	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.shafa-faq-section > details[open] > summary {
	color: var(--blue);
	border-bottom: 1px solid var(--border);
}

.shafa-faq-section > details[open] > summary::before {
	content: "−";
	background: var(--red);
	color: var(--white);
}

.shafa-faq-answer {
	padding: 18px 48px 20px 18px;
}

.shafa-faq-answer p {
	margin: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.shafa-category-content {
		font-size: 14px;
		line-height: 1.95;
	}

	.shafa-category-content .shafa-content-section {
		margin-bottom: 34px;
	}

	.shafa-category-content h2 {
		font-size: 21px;
	}

	.shafa-category-content h3 {
		font-size: 17px;
		margin-top: 28px;
	}

	.shafa-category-content h4 {
		font-size: 15px;
	}

	.shafa-category-content > .shafa-content-section:first-child {
		margin-bottom: 24px;
		padding-bottom: 24px;
	}

	.shafa-category-content > .shafa-content-section:first-child h2 {
		font-size: 22px;
	}


	/* RATO */

	.shafa-rato-grid {
		grid-template-columns: 1fr;
	}

	.shafa-rato-image {
		order: 1;
		min-height: auto;
	}

	.shafa-rato-copy {
		order: 2;
		padding: 24px 20px;
	}

	.shafa-rato-image img {
		min-height: 230px;
		max-height: 320px;
		object-fit: cover;
	}

	.shafa-rato-copy h2 {
		font-size: 21px;
	}


	/* Fuel */

	.shafa-fuel-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.shafa-fuel-card {
		padding: 19px 20px;
	}

	.shafa-fuel-card:hover {
		transform: none;
	}


	/* Read more */

	.shafa-readmore > summary {
		width: 100%;
		min-height: 44px;
		margin-top: 27px;
	}


	/* Table */

	.shafa-table-wrap {
		border-radius: 10px;
	}

	.shafa-power-table {
		min-width: 650px;
		font-size: 13px;
	}

	.shafa-power-table th,
	.shafa-power-table td {
		padding: 11px 12px;
	}


	/* Two columns */

	.shafa-two-col {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.shafa-two-col > div {
		padding: 18px;
	}


	/* CTA */

	.shafa-purchase-section {
		padding: 25px 20px;
		border-radius: 11px;
	}

	.shafa-primary-button {
		width: 100%;
	}


	/* FAQ */

	.shafa-faq-section {
		margin-top: 38px;
	}

	.shafa-faq-section > details {
		margin-bottom: 7px;
	}

	.shafa-faq-section > details > summary {
		min-height: 54px;
		padding: 14px 45px 14px 15px;
		font-size: 14px;
	}

	.shafa-faq-section > details > summary::before {
		right: 14px;
	}

	.shafa-faq-answer {
		padding: 16px 45px 18px 15px;
	}

	.shafa-start-methods-grid {
		max-width: 100% !important;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

	.shafa-category-content h2 {
		font-size: 20px;
	}

	.shafa-category-content h3 {
		font-size: 16px;
	}

	.shafa-rato-copy {
		padding: 21px 17px;
	}

	.shafa-rato-image img {
		min-height: 210px;
	}

	.shafa-fuel-card {
		padding: 18px 17px;
	}

	.shafa-fuel-card p {
		font-size: 13.5px;
	}

	.shafa-formula {
		padding: 14px 10px;
		font-size: 14px;
	}

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.shafa-category-content *,
	.shafa-category-content *::before,
	.shafa-category-content *::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}

}