/* 11 Nov: site footer (altaj-footer.php). Colours come from the footer's --af-bg / --af-text / --af-accent.
   Logical properties (start/end) so Arabic (RTL) and English (LTR) both read from their own side. */
.altaj-footer {
	--af-muted: color-mix(in srgb, var(--af-text) 72%, transparent);
	--af-line: color-mix(in srgb, var(--af-text) 16%, transparent);
	background: var(--af-bg);
	color: var(--af-text);
	font-size: 15px;
	line-height: 1.7;
	/* the floating WhatsApp button is fixed in the bottom-left corner (about 20-115px from the left, up to 90px from
	   the bottom): room under the copyright, and the content kept clear of that strip on both sides */
	padding: 56px 130px 104px;
}
.altaj-footer *, .altaj-footer *::before, .altaj-footer *::after { box-sizing: border-box; }
.altaj-footer__in { max-width: 1100px; margin: 0 auto; }
.altaj-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* 1. logo, line, social */
.altaj-footer__logo { display: inline-flex; align-items: center; text-decoration: none !important; color: var(--af-text) !important; font-size: 24px; font-weight: 700; }
.altaj-footer__logo img { display: block; width: auto; height: auto; max-height: 64px; max-width: 200px; }
/* one-colour logo (RR, black on white): turned light; screen drops the (now black) background into the footer colour */
.altaj-footer__logo--mono img { filter: invert(1) sepia(.12); mix-blend-mode: screen; max-height: 70px; }
/* colour logos on white: on a light tile, the white blends into the tile */
.altaj-footer__logo--tile { background: #FBF8F3; border-radius: 12px; padding: 10px 16px; }
.altaj-footer__logo--tile img { mix-blend-mode: multiply; max-height: 52px; max-width: 170px; }
.altaj-footer__line { margin: 16px 0 18px !important; color: var(--af-muted); font-size: 16px; line-height: 1.7; max-width: 340px; }
.altaj-footer__social { display: flex; gap: 10px; }
.altaj-footer__social a {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--af-line); color: var(--af-text) !important; transition: background .2s, border-color .2s;
}
.altaj-footer__social a:hover, .altaj-footer__social a:focus-visible { background: var(--af-accent); border-color: var(--af-accent); }

/* 2-3. link columns */
.altaj-footer .altaj-footer__title {
	margin: 4px 0 16px !important; padding: 0 0 10px; position: relative;
	color: var(--af-text) !important; font-size: 18px !important; line-height: 1.4 !important; font-weight: 700 !important;
	letter-spacing: 0 !important; text-transform: none !important;
}
.altaj-footer__title::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 32px; height: 3px; border-radius: 2px; background: var(--af-accent); }
.altaj-footer__col ul { list-style: none; margin: 0; padding: 0; }
.altaj-footer__col li { margin: 0 0 8px; padding: 0; }
.altaj-footer__col li::before { display: none; }
.altaj-footer__col a {
	display: inline-flex; align-items: center; gap: 8px; color: var(--af-muted) !important; text-decoration: none !important;
	font-size: 16px; line-height: 1.6; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.altaj-footer__col a:hover, .altaj-footer__col a:focus-visible { color: var(--af-text) !important; border-bottom-color: var(--af-accent); }
.altaj-footer__col a svg { flex: none; }

/* bottom row: payment logos + copyright */
.altaj-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
	margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--af-line);
}
.altaj-footer__pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.altaj-footer__chip { display: inline-flex; align-items: center; background: #fff; border-radius: 6px; padding: 4px 8px; }
.altaj-footer__chip { height: 36px; min-width: 64px; justify-content: center; }
.altaj-footer__chip img { display: block; height: 22px; width: auto; max-width: 110px; object-fit: contain; }
.altaj-footer__chip img[alt="Visa, Mastercard"] { height: 26px; }
.altaj-footer__copy { margin: 0 !important; color: var(--af-muted); font-size: 15px; line-height: 1.6; }

/* tablets: logo column across the top, links side by side */
@media (max-width: 1024px) {
	.altaj-footer { padding-left: 90px; padding-right: 90px; }
	.altaj-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
	.altaj-footer__brand { grid-column: 1 / -1; }
}
/* phones: everything stacked and centred */
@media (max-width: 640px) {
	.altaj-footer { padding: 40px 72px 112px; text-align: center; }
	.altaj-footer__cols { grid-template-columns: 1fr; gap: 28px; justify-items: center; }
	.altaj-footer__brand { display: flex; flex-direction: column; align-items: center; }
	.altaj-footer__line { margin-inline: auto !important; }
	.altaj-footer__social { justify-content: center; }
	.altaj-footer__title::after { inset-inline-start: 50%; transform: translateX(-50%); }
	[dir="rtl"] .altaj-footer__title::after { transform: translateX(50%); }
	.altaj-footer__col a { justify-content: center; }
	.altaj-footer__bottom { flex-direction: column; justify-content: center; margin-top: 32px; }
	.altaj-footer__pay { justify-content: center; gap: 6px; flex-wrap: nowrap; }
	/* the three payment logos on one row */
	.altaj-footer__chip { height: 32px; min-width: 0; padding: 4px 6px; }
	.altaj-footer__chip img { height: 18px; }
	.altaj-footer__chip img[alt="Visa, Mastercard"] { height: 22px; }
}

/* AL TAJ logo file has wide margins: shown larger so it reads like the other logos */
.altaj-footer--altaj .altaj-footer__logo--tile { padding: 6px 12px; }
.altaj-footer--altaj .altaj-footer__logo--tile img { max-height: 92px; max-width: 200px; }

/* 11 Nov: the Arabic copyright line one size larger (Arabic script reads smaller at the same size) */
[dir="rtl"] .altaj-footer__copy { font-size: 16px; }