/* Chocolaterie Fleur — footer. Gescoped onder .fleur-footer.
   Waarden 1:1 uit Figma (node 477:12631): bg #4c3d45, tekst #f5f5f5,
   accent #e06283, koppen DM Serif Display 24px, links DM Sans 16px/35px. */

.fleur-footer {
	position: relative;
	background: var(--fleur-aubergine);
	color: var(--fleur-cream);
	font-family: var(--fleur-font-sans);
	margin-top: 64px;
	padding: 96px 24px 56px;
}

.fleur-footer__inner {
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
}

/* ── Zwevende WhatsApp-CTA (fixed; scrollt mee, overal zichtbaar) ── */
.fleur-footer__chat {
	position: fixed;
	bottom: 40px;
	right: 24px;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.fleur-footer__chat-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--fleur-cream);
	color: var(--fleur-pink);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 12px 18px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
/* Pijl-punt rechts op de pill, wijst naar de groene cirkel (Figma 477:6545). */
.fleur-footer__chat-pill::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 9px solid transparent;
	border-left-color: var(--fleur-cream);
	border-right-width: 0;
}
.fleur-footer__chat-pill svg { width: 18px; height: 18px; flex: none; fill: var(--fleur-pink); }
.fleur-footer__chat-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--fleur-whatsapp);
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.fleur-footer__chat-circle svg { width: 30px; height: 30px; fill: #fff; }

/* ── Kolommen ── */
.fleur-footer__cols {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr 1fr;
	gap: 32px 40px;
}

.fleur-footer__title {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	color: var(--fleur-cream);
	margin: 0 0 18px;
}

.fleur-footer__links {
	list-style: none;
	margin: 0; padding: 0;
}
.fleur-footer__links li { margin: 0; }
.fleur-footer__links a {
	display: inline-block;
	color: var(--fleur-cream);
	text-decoration: none;
	font-size: 16px;
	line-height: 35px;
	transition: color .15s ease;
}
.fleur-footer__links a:hover,
.fleur-footer__links a:focus-visible { color: var(--fleur-pink); }

/* ── Contactkolom ── */
.fleur-footer__contact {
	list-style: none;
	margin: 0 0 20px; padding: 0;
}
.fleur-footer__contact li {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 35px;
}
.fleur-footer__contact a {
	color: var(--fleur-cream);
	text-decoration: none;
	font-size: 16px;
	transition: color .15s ease;
}
.fleur-footer__contact a:hover { color: var(--fleur-pink); }
.fleur-footer__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	flex: none;
	background: var(--fleur-cream);   /* wit gevuld rondje (Figma) */
	border-radius: 50%;
}
.fleur-footer__ico svg { width: 15px; height: 15px; fill: var(--fleur-aubergine); }

/* Socials */
.fleur-footer__socials {
	display: flex;
	gap: 12px;
	margin: 4px 0 24px;
}
.fleur-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--fleur-cream);
	transition: transform .15s ease, background .15s ease;
}
.fleur-footer__socials a:hover { transform: translateY(-2px); background: var(--fleur-pink); }
.fleur-footer__socials svg { width: 18px; height: 18px; fill: var(--fleur-aubergine); }
.fleur-footer__socials a:hover svg { fill: #fff; }

/* Workshop-pil */
.fleur-footer__workshop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--fleur-cream);
	color: var(--fleur-aubergine);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 100px;
	transition: transform .15s ease;
}
.fleur-footer__workshop:hover { transform: translateY(-2px); }
/* Chocoladereep: wit in een donker rondje (Figma). */
.fleur-footer__workshop-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	flex: none;
	background: var(--fleur-aubergine);
	border-radius: 50%;
}
.fleur-footer__workshop-ico svg { width: 15px; height: 15px; fill: #fff; }

/* ── Copyright-balk (LIVE: hairline + © links, credit rechts) ── */
.fleur-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(245, 245, 245, .22);
}
.fleur-footer__copyright,
.fleur-footer__credit {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fleur-cream);
}
.fleur-footer__credit { text-align: right; }
.fleur-footer__credit a {
	color: var(--fleur-cream);
	text-decoration: none;
	transition: color .15s ease;
}
.fleur-footer__credit a:hover,
.fleur-footer__credit a:focus-visible { color: var(--fleur-pink); }

/* ── Responsive — Sjon-breakpoints: 982-1219 = liggende tablet (4 kolommen),
   <=981 = mobiel/staande tablet (één kolom, zoals de Sjon-footer). ── */
@media (min-width: 982px) and (max-width: 1219px) {
	/* 4 kolommen behouden, iets krappere fr/gap zodat de workshop-pil in de
	   contactkolom blijft passen. */
	.fleur-footer { padding-top: 72px; }
	.fleur-footer__cols { grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 28px; }
}

@media (max-width: 981px) {
	/* Eén kolom: Contact → Klantenservice → Lekkerste toppers → Speciale momenten. */
	/* Minder grijze witruimte boven de footer op mobiel (gebruiker-feedback: te
	   veel witruimte onder o.a. het reviews-blok). Pagina's die de footer bewust
	   aansluiten (home/bonbons/maat via `.fleur-… + .fleur-footer{margin-top:0}`)
	   houden hun eigen 0 — die selector is specifieker. */
	.fleur-footer { padding: 56px 24px 40px; margin-top: 24px; }
	.fleur-footer__cols { grid-template-columns: 1fr; gap: 40px; }

	/* Colofon als één doorlopende regel met een pipe-scheiding (zoals de
	   Sjon-bedden-footer): "© 2026 Chocolaterie Fleur | Sellabees, Bee successful
	   online" — copyright + credit inline i.p.v. twee losse regels. */
	.fleur-footer__bottom { display: block; }
	.fleur-footer__copyright,
	.fleur-footer__credit { display: inline; }
	.fleur-footer__credit::before { content: " | "; }

	/* Zwevende WhatsApp-knop: alleen de groene cirkel, dichter in de hoek. */
	.fleur-footer__chat { right: 16px; bottom: 16px; }
	.fleur-footer__chat-pill { display: none; }
}

@media (max-width: 560px) {
	/* Copyright-balk onder elkaar, links uitgelijnd. */
	.fleur-footer__bottom { justify-content: flex-start; }
	.fleur-footer__credit { text-align: left; }
}