/*
 * Simple Bangla — footer, mobile bottom bar and floating buttons.
 *
 * Loaded on every view. The measurements here come from the reference site's own stylesheet:
 * column headings are Raleway 900 / 20px / underlined / #2D3134, the contact circles are
 * #3C3A3A with a #F5735A hover, and the copyright sits in a full-bleed black bar.
 */

.sb-footer {
	margin-top: auto;
	padding-top: var(--sb-space-6);
	background: var(--sb-footer-bg);
}

/* ------------------------------------------------------------------ *
 * The one grid: brand · three link columns · map
 * ------------------------------------------------------------------ */

.sb-footer__grid {
	display: grid;
	gap: var(--sb-space-5);
	padding-bottom: var(--sb-space-6);
}

@media (min-width: 600px) {
	.sb-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sb-footer__grid {
		/* Brand and map both need more room than a link column. */
		grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
		gap: var(--sb-space-6);
	}
}

/* -- Brand cell -- */

.sb-footer__brand {
	display: grid;
	justify-items: start;
	gap: var(--sb-space-3);
	align-content: start;
}

.sb-footer__site-name {
	margin: 0;
	font-family: var(--sb-font-heading);
	font-size: var(--sb-text-2xl);
	line-height: 1.1;
}

.sb-footer__site-name a {
	color: inherit;
	text-decoration: none;
}

.sb-footer__brand .custom-logo {
	max-height: 72px;
	width: auto;
}

.sb-footer__contact-item,
.sb-footer__address {
	display: inline-flex;
	align-items: center;
	gap: var(--sb-space-2);
	margin: 0;
	color: var(--sb-ink);
	font-size: var(--sb-text-base);
	font-weight: 600;
	text-decoration: none;
}

.sb-footer__address {
	font-weight: 400;
	color: var(--sb-muted);
	font-size: var(--sb-text-sm);
}

.sb-footer__contact-item:hover {
	color: var(--sb-footer-accent);
}

.sb-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sb-space-2);
	list-style: none;
	margin-top: var(--sb-space-1);
}

.sb-footer__social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--sb-radius-pill);
	background: var(--sb-footer-circle);
	color: #ffffff;
	transition: background-color var(--sb-transition);
}

.sb-footer__social a:hover,
.sb-footer__social a:focus-visible {
	background: var(--sb-footer-accent);
	color: #ffffff;
}

/* -- Link columns -- */

.sb-footer__heading {
	margin-bottom: var(--sb-space-4);
	font-family: var(--sb-font-footer);
	font-size: 20px;
	font-weight: 900;
	text-transform: capitalize;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--sb-footer-ink);
}

.sb-footer__menu {
	list-style: none;
	display: grid;
	gap: var(--sb-space-3);
	font-size: var(--sb-text-base);
}

.sb-footer__menu a {
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-footer__menu a:hover,
.sb-footer__menu a:focus-visible {
	color: var(--sb-footer-accent);
}

/* -- Map -- */

.sb-footer__map {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sb-radius-sm);
	background: var(--sb-bg-alt);
}

.sb-footer__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.sb-footer__map--empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--sb-space-2);
	padding: var(--sb-space-4);
	color: var(--sb-muted);
	text-align: center;
}

.sb-footer__map--empty p {
	margin: 0;
	font-size: var(--sb-text-xs);
	max-width: 26ch;
}

/* ------------------------------------------------------------------ *
 * Payments and the black copyright bar
 * ------------------------------------------------------------------ */

.sb-footer__payments {
	padding-bottom: var(--sb-space-5);
}

.sb-footer__payments img {
	max-width: min(100%, 520px);
	height: auto;
	margin-inline: auto;
}

/* Full-bleed black band, exactly as the reference ends its page. */
.sb-footer__bar {
	background: #000000;
}

.sb-footer__copyright {
	margin: 0;
	padding-block: var(--sb-space-4);
	color: #808080;
	font-size: var(--sb-text-sm);
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Floating buttons
 * ------------------------------------------------------------------ */

.sb-floats {
	position: fixed;
	right: var(--sb-space-4);
	bottom: calc(var(--sb-space-4) + var(--sb-bottom-bar-height, 0px));
	z-index: var(--sb-z-float);
	display: grid;
	gap: var(--sb-space-2);
	justify-items: center;
}

.sb-float {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--sb-radius-pill);
	box-shadow: var(--sb-shadow-lg);
	cursor: pointer;
	transition: transform var(--sb-transition);
}

.sb-float:hover {
	transform: translateY(-2px);
}

.sb-float[hidden] {
	display: none;
}

.sb-float--whatsapp {
	background: #25d366;
	color: #fff;
}

.sb-float--top {
	background: var(--sb-brand);
	color: var(--sb-on-brand);
}

/* ------------------------------------------------------------------ *
 * Mobile bottom bar
 * ------------------------------------------------------------------ */

.sb-bottom-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--sb-z-float);
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: var(--sb-space-2) var(--sb-space-2) max(var(--sb-space-2), env(safe-area-inset-bottom));
	background: var(--sb-bg);
	border-top: 1px solid var(--sb-line);
	box-shadow: 0 -2px 12px rgb(0 0 0 / 6%);
}

.sb-bottom-bar__item {
	display: grid;
	justify-items: center;
	gap: 2px;
	flex: 1 1 0;
	padding-block: var(--sb-space-1);
	color: var(--sb-muted);
	text-decoration: none;
}

.sb-bottom-bar__label {
	font-size: 11px;
	line-height: 1.2;
}

/* Home is the anchor of the row: icon only, lifted into a filled circle. */
.sb-bottom-bar__item--home {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	margin-top: -22px;
	place-content: center;
	border-radius: var(--sb-radius-pill);
	border: 4px solid var(--sb-bg);
	background: var(--sb-brand);
	color: var(--sb-on-brand);
}

@media (max-width: 767px) {
	body {
		/* Reserve room so the bar never covers the last line of the footer. */
		padding-bottom: 68px;
	}

	.sb-floats {
		--sb-bottom-bar-height: 68px;
	}
}

@media (min-width: 768px) {
	.sb-bottom-bar {
		display: none;
	}
}