/*
 * Farin footer. Rows: top (newsletter), main (columns), strip (features and
 * trust badges), bar (dark bottom line). Columns fold into accordions below
 * 768px.
 */

.ff {
	container-type: inline-size;
	/* Measured at its full width inside a wrapping Elementor container, not at zero. */
	contain-intrinsic-inline-size: 100000px;
	position: relative;
	isolation: isolate;
	margin-block-start: 48px;
	color: var(--ff-fg);
	font-size: 14px;
	line-height: 1.8;
}

.ff *,
.ff *::before,
.ff *::after {
	box-sizing: border-box;
}

.ff a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.ff a:hover {
	color: var(--ff-accent);
}

.ff :focus-visible,
.ff-top:focus-visible {
	outline: 2px solid var(--ff-accent);
	outline-offset: 2px;
	border-radius: 8px;
}

.ff h3 {
	margin: 0;
	color: var(--ff-fg);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
}

.ff p {
	margin: 0;
}

.ff ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ff__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ff-layer);
}

.ff__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ff-pattern);
	background-size: var(--ff-psize) var(--ff-psize);
}

.ff__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-inline-size: var(--ff-max);
	margin-inline: auto;
	padding-inline: 24px;
}

.ff__zone {
	display: flex;
	align-items: center;
	gap: 24px;
	min-inline-size: 0;
}

.ff__zone:empty {
	display: none;
}

.ff__zone--cols {
	flex: 1;
}

.ff__zone--end {
	margin-inline-start: auto;
}

.ff-el {
	min-inline-size: 0;
}

/* ---------- Top: newsletter ---------- */

.ff__row--top {
	padding-block-start: 32px;
}

.ff__row--top .ff-el {
	flex: 1;
}

.ff-news {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 24px 32px;
	overflow: hidden;
	border-radius: 28px;
	background: var(--ff-card);
	box-shadow: 0 10px 30px rgb(20 16 40 / 0.05);
}

/* «نوار تیره»: a dark band whatever the footer's colours; the field and button stay as they are. */
.ff-news.is-dark {
	--ff-muted: #b9b4c2;
	background: #1c1c1e;
	color: #fff;
	box-shadow: 0 16px 40px rgb(0 0 0 / 0.18);
}

.ff-news.is-dark .ff-news__icon {
	border: 1px solid rgb(255 255 255 / 0.18);
	background: transparent;
	color: #fff;
	box-shadow: none;
}

.ff-news.is-dark .ff-news__field {
	border-color: transparent;
}

.ff-news.is-dark .ff-news__field input {
	color: #1d1730;
}

.ff-news__icon {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 18px;
	background: #fff;
	color: var(--ff-accent);
	box-shadow: 0 6px 16px rgb(20 16 40 / 0.06);
}

.ff-news__text {
	display: flex;
	flex: 1 1 260px;
	flex-direction: column;
	gap: 6px;
}

.ff-news__text h3 {
	font-size: 20px;
}

.ff-news__text p {
	color: var(--ff-muted);
}

.ff-news__form {
	display: flex;
	flex: 0 1 460px;
	flex-direction: column;
	gap: 8px;
}

.ff-news__field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	padding-inline-start: 18px;
	border: 1px solid var(--ff-line);
	border-radius: 999px;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.ff-news__field:focus-within {
	border-color: var(--ff-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ff-accent) 18%, transparent);
}

.ff-news__mail {
	flex: none;
	color: var(--ff-muted);
}

.ff-news__field input {
	flex: 1;
	min-inline-size: 0;
	min-block-size: 44px;
	border: 0;
	background: transparent;
	color: var(--ff-fg);
	font: inherit;
	outline: none;
}

.ff-news__field button {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-block-size: 48px;
	padding-inline: 24px;
	border: 0;
	border-radius: 999px;
	background: var(--ff-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.2s;
}

.ff-news__field button:hover {
	filter: brightness(1.08);
}

.ff-news__field button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ff-news__msg {
	padding-inline: 18px;
	font-size: 13px;
}

.ff-news__msg.is-ok {
	color: #15803d;
}

.ff-news__msg.is-error {
	color: #dc2626;
}

.ff-news__art {
	flex: none;
	inline-size: 180px;
	height: auto;
	margin-block: -12px -28px;
	color: var(--ff-accent);
}

/* ---------- Main: columns ---------- */

.ff__row--main {
	padding-block: 48px 40px;
}

.ff__row--main .ff__zone {
	align-items: flex-start;
	gap: 0;
}

.ff__row--main .ff-el {
	flex: 1 1 0;
	padding-inline: 24px;
}

.ff__row--main .ff-el:first-child {
	padding-inline-start: 0;
}

.ff__row--main .ff-el:last-child {
	padding-inline-end: 0;
}

.ff__row--main .ff-el--brand {
	flex-grow: 2;
}

.ff__row--main .ff-el--apps,
.ff__row--main .ff-el--contact {
	flex-grow: 1.25;
}

/* «ستونی و ساده»: the newsletter as a plain column beside the links. */
.ff__row--main .ff-el--newsletter {
	flex-grow: 1.7;
}

.ff-news.is-column {
	display: block;
	padding: 0;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.ff-news.is-column .ff-news__text {
	margin-block-end: 12px;
}

.ff-news.is-column .ff-news__text h3 {
	font-size: 15px;
}

.ff-news.is-column .ff-news__text p {
	font-size: 13px;
}

/* The logo keeps to the far edge of the row. */
.ff__row--main:has(.ff-news.is-column) .ff-el--brand {
	display: flex;
	flex-grow: 1;
	justify-content: flex-end;
}

.ff-news.is-column .ff-news__mail {
	display: none;
}

.ff-news.is-column .ff-news__field {
	padding: 0;
	padding-inline-start: 14px;
	overflow: hidden;
	border-radius: 12px;
}

.ff-news.is-column .ff-news__field button {
	justify-content: center;
	inline-size: 48px;
	padding: 0;
	border-radius: 12px;
}

.ff-social-col h3 {
	margin: 0 0 12px;
	color: var(--ff-fg);
	font-size: 15px;
	font-weight: 700;
}

.ff-social-col .ff-social a {
	background: none;
}

.ff-social-col .ff-social a:hover {
	background: var(--ff-accent);
}

/* Lines set the brand, the apps and the contact apart, as in the design. */
.ff__row--main .ff-el:not(:first-child):not([class*="ff-el--links"]),
.ff__row--main .ff-el--brand + .ff-el {
	border-inline-start: 1px solid var(--ff-line);
}

.ff__row--main:has(.ff-news.is-column) .ff-el {
	border-inline-start: 0;
}

.ff-brand {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ff-brand__home {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
}

.ff-brand__logo {
	display: block;
	flex-shrink: 0;
	/* Width comes from the tag (Logo sizes it per place): an SVG with only a viewBox
	   has no size of its own, so «width: auto» drew it at zero. */
	max-inline-size: 100%;
	max-block-size: 56px;
	height: auto;
	object-fit: contain;
}

.ff-brand__name {
	color: var(--ff-accent);
	font-size: 28px;
	font-weight: 900;
	line-height: 1.2;
}

.ff-brand__tag {
	margin-block-start: -6px;
	color: var(--ff-muted);
	font-size: 13px;
}

.ff-brand__about {
	color: var(--ff-muted);
	line-height: 2.1;
}

.ff-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ff-social a {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ff-fg) 6%, transparent);
	transition: background-color 0.2s, color 0.2s;
}

.ff-social a:hover {
	background: var(--ff-accent);
	color: #fff;
}

.ff-col details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 18px;
	list-style: none;
	pointer-events: none;
}

.ff-col summary::-webkit-details-marker {
	display: none;
}

.ff-col__chev {
	display: none;
	transition: transform 0.2s;
}

.ff-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ff-links a {
	color: color-mix(in srgb, var(--ff-fg) 78%, transparent);
}

.ff-links a[aria-current] {
	color: var(--ff-accent);
	font-weight: 700;
}

.ff-apps__text {
	margin-block-end: 16px !important;
	color: var(--ff-muted);
	font-size: 13px;
}

.ff-stores {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ff-store {
	display: flex;
	align-items: center;
	gap: 12px;
	max-inline-size: 220px;
	min-block-size: 56px;
	padding-inline: 16px;
	border-radius: 12px;
	background: #111;
	color: #fff !important;
	transition: transform 0.2s;
}

.ff-store:hover {
	transform: translateY(-2px);
}

.ff-store span {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.ff-store small {
	opacity: 0.75;
	font-size: 11px;
}

.ff-store b {
	font-size: 16px;
}

.ff-store__icon {
	flex: none;
}

.ff-contact {
	font-style: normal;
}

.ff-contact ul {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ff-contact li {
	display: flex;
	gap: 12px;
}

.ff-contact li > svg {
	flex: none;
	margin-block-start: 3px;
	color: var(--ff-accent);
}

.ff-contact span {
	display: flex;
	flex-direction: column;
}

.ff-contact a {
	align-self: flex-start;
	font-weight: 600;
	unicode-bidi: isolate;
}

.ff-contact small {
	color: var(--ff-muted);
	font-size: 12px;
}

/* ---------- Strip: features and trust badges ---------- */

.ff__row--strip .ff__inner {
	padding-block: 24px;
	border-block-start: 1px solid var(--ff-line);
}

.ff__row--strip .ff__zone--start {
	flex: 1;
}

.ff-el--features {
	flex: 1;
}

.ff-features {
	display: flex;
	flex-wrap: wrap;
}

.ff-features li {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 14px;
	padding-inline: 24px;
}

.ff-features li:first-child {
	padding-inline-start: 0;
}

.ff-features li + li {
	border-inline-start: 1px solid var(--ff-line);
}

.ff-feature__icon {
	display: grid;
	flex: none;
	place-items: center;
	color: var(--ff-accent);
}

.ff-features span {
	display: flex;
	flex-direction: column;
	line-height: 1.6;
}

.ff-features b {
	font-weight: 800;
}

.ff-features small {
	color: var(--ff-muted);
	font-size: 12px;
}

.ff-trust {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ff-trust li {
	display: grid;
	place-items: center;
	inline-size: 88px;
	block-size: 88px;
	padding: 6px;
	border: 1px solid var(--ff-line);
	border-radius: 14px;
	background: #fff;
}

.ff-trust :is(img, iframe) {
	max-inline-size: 100%;
	max-block-size: 100%;
	border: 0;
}

/* A badge's picture keeps its proportions inside the square, whatever width/height it was given. */
.ff-trust img {
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.ff-trust li > a {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
}

/* ---------- Bar ---------- */

.ff__row--bar {
	background: var(--ff-bar);
	color: var(--ff-bar-fg);
}

.ff__row--bar .ff__inner {
	min-block-size: 72px;
	padding-block: 12px;
}

.ff__row--bar a:hover {
	color: #fff;
	text-decoration: underline;
}

.ff-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: var(--ff-bar-fg);
}

.ff-pay svg {
	display: block;
}

/* Gateway and Shaparak logos are drawn for a light page: a small light tile on the dark bar. */
.ff-pay li.is-logo {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 10px;
	background: #fff;
}

.ff-pay li.is-logo img {
	display: block;
	inline-size: 28px;
	block-size: 28px;
	object-fit: contain;
}

.ff-pay__shetab {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	font-weight: 900;
}

.ff-barlinks .ff-links {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0;
}

.ff-barlinks .ff-links a {
	color: inherit;
	opacity: 0.85;
}

.ff-barlinks li + li::before {
	content: "|";
	margin-inline: 16px;
	opacity: 0.4;
}

.ff-copy {
	font-size: 13px;
}

.ff-custom > :where(p, div) {
	margin: 0;
}

/* ---------- Back to top ---------- */

/* Above the phone's bottom bar (--fbb-h), as the contact and AI buttons are. */
.ff-top {
	position: fixed;
	inset-block-end: calc(24px + var(--fbb-h, 0px));
	inset-inline-end: 24px;
	z-index: 800;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--ff-accent, #7b2cbf);
	color: #fff;
	box-shadow: 0 10px 24px rgb(20 16 40 / 0.2);
	cursor: pointer;
	transition: transform 0.2s, opacity 0.2s;
}

.ff-top[hidden] {
	display: none;
}

.ff-top:hover {
	transform: translateY(-2px);
}

/* ---------- Tablet ---------- */

@container (max-width: 1100px) {
	.ff-news__art {
		display: none;
	}

	.ff__row--main .ff__zone {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.ff__row--main .ff-el {
		padding: 0;
		border: 0 !important;
	}

	.ff__row--main .ff-el--brand {
		grid-column: 1 / -1;
	}

	.ff-features {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.ff-features li,
	.ff-features li + li {
		padding: 0;
		border: 0;
	}

	.ff__row--strip .ff__inner,
	.ff__row--bar .ff__inner {
		flex-wrap: wrap;
	}
}

/* ---------- Phone ---------- */

@container (max-width: 720px) {
	.ff__inner {
		flex-direction: column;
		align-items: stretch;
		padding-inline: 16px;
	}

	.ff__zone {
		flex-direction: column;
		align-items: stretch;
	}

	.ff__zone--end {
		margin-inline-start: 0;
	}

	.ff-news {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
		border-radius: 20px;
	}

	.ff-news__text,
	.ff-news__form {
		flex: none;
		inline-size: 100%;
	}

	.ff-news__field button span {
		display: none;
	}

	.ff-news__field button {
		padding-inline: 14px;
	}

	.ff__row--main {
		padding-block: 32px 16px;
	}

	.ff__row--main .ff__zone {
		display: flex;
		align-items: stretch;
		gap: 0;
	}

	.ff__row--main .ff-el {
		flex: none;
	}

	.ff__row--main .ff-el--brand {
		margin-block-end: 16px;
	}

	.ff-col {
		border-block-end: 1px solid var(--ff-line);
	}

	.ff-col details > summary {
		min-block-size: 56px;
		margin: 0;
		pointer-events: auto;
		cursor: pointer;
	}

	.ff-col__chev {
		display: block;
	}

	.ff-col details[open] .ff-col__chev {
		transform: rotate(180deg);
	}

	.ff-col details > :not(summary) {
		padding-block-end: 20px;
	}

	.ff-features {
		gap: 20px 12px;
	}

	.ff-trust {
		justify-content: center;
	}

	.ff__row--bar .ff__inner,
	.ff__row--bar .ff__zone {
		align-items: center;
		text-align: center;
	}

	.ff-barlinks .ff-links {
		justify-content: center;
	}

}

/* A single link column placed as an Elementor widget is always narrower than
   720px, so it folds by the screen (phones), not by its own width. */
.ff-widget:has(> .ff-el > .ff-col) {
	/* Still sized like the others (size containment), but no longer a query container. */
	container-type: normal;
	contain: inline-size;
	/* The Elementor row spaces the columns. */
	margin-block-start: 0;
}

/* Phones with the bottom bar: the round floating buttons (contact, AI) stand above
   it, so the footer's last row grows by their height, in its own colour, and
   nothing at the page's end is left under them. */
@media (max-width: 1023.98px) {
	body.has-fbb:has(:is(.frc, .fac)) .ff:not(.ff-widget) > .ff__row--bar {
		border-block-end: 72px solid var(--ff-bar);
	}
}

@media (max-width: 767.98px) {
	.ff-widget .ff-col {
		border-block-end: 1px solid var(--ff-line);
	}

	.ff-widget .ff-col details > summary {
		min-block-size: 56px;
		margin: 0;
		pointer-events: auto;
		cursor: pointer;
	}

	.ff-widget .ff-col__chev {
		display: block;
	}

	.ff-widget .ff-col details[open] .ff-col__chev {
		transform: rotate(180deg);
	}

	.ff-widget .ff-col details > :not(summary) {
		padding-block-end: 20px;
	}
}

@media (max-width: 767.98px) {
	/* What the panel's «فوتر موبایل» leaves out on phones. */
	.ff.ffm-off,
	.ff-top.ffm-no-top,
	.ffm-no-newsletter .ff-el--newsletter,
	.ffm-no-brand .ff-el--brand,
	.ffm-no-links :is(.ff-el--links1, .ff-el--links2, .ff-el--links3, .ff-el--links4),
	.ffm-no-apps .ff-el--apps,
	.ffm-no-contact .ff-el--contact,
	.ffm-no-features .ff-el--features,
	.ffm-no-trust .ff-el--trust,
	.ffm-no-payments .ff-el--payments,
	.ffm-no-barlinks .ff-el--barlinks {
		display: none !important;
	}

	.ff-top {
		inset-block-end: calc(16px + var(--fbb-h, 0px));
		inset-inline-end: 16px;
	}
}

/* The contact or AI button on the same corner: back-to-top steps up over it. */
body:has(.frc--end, .fac--end) .ff-top {
	inset-block-end: calc(88px + var(--fbb-h, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.ff *,
	.ff-top {
		transition: none !important;
	}
}

/*
 * This sheet arrives at the end of the page, after the footer is first drawn: its
 * colours must not fade in as if hovered. Transitions start once it has applied
 * (footer.js marks the page); without JavaScript there are none.
 */
html:not(.ff-ready) :is(.ff, .ff-top) *,
html:not(.ff-ready) .ff-top {
	transition: none !important;
}

@media (max-width: 767.98px) {
	.ff__row--main:has(.ff-news.is-column) .ff-el--social {
		margin-block-start: 24px;
	}

	.ff__row--main:has(.ff-news.is-column) .ff-el--brand {
		justify-content: center;
		margin-block-start: 24px;
		text-align: center;
	}
}