/*
 * 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);
}

.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;
}

/* 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-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;
}

/* ---------- 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;
	align-items: center;
	gap: 18px;
	color: var(--ff-bar-fg);
}

.ff-pay svg {
	display: block;
}

.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 ---------- */

.ff-top {
	position: fixed;
	inset-block-end: 24px;
	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;
	}

}

@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: 16px;
		inset-inline-end: 16px;
	}
}

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