/*
 * Toysprovider global footer — scoped entirely under .tp-footer so nothing
 * here can affect the header, product cards, or any other section.
 * Site-wide (enqueued on every front-end page, see inc/footer.php).
 */

.tp-footer {
	--tpf-orange: #ff5a1f;
	--tpf-black: #101010;
	--tpf-white: #fff;
	--tpf-muted: #b8b8b8;
	--tpf-divider: rgba(255, 255, 255, .16);
	--tpf-container: min(1280px, calc(100% - 64px));
	font-family: "Outfit", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tp-footer * { box-sizing: border-box; }
.tp-footer a { text-decoration: none; color: inherit; }
.tp-footer button { font: inherit; cursor: pointer; }
.tp-footer svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tp-footer__container { width: var(--tpf-container); margin-inline: auto; }

/* ---------- 1. Orange newsletter header ---------- */
.tp-footer__newsletter {
	background: var(--tpf-orange);
	border-radius: 28px 28px 0 0;
	padding: 34px 22px;
}
.tp-footer__newsletter-inner { width: var(--tpf-container); margin-inline: auto; }
.tp-footer__eyebrow {
	display: block;
	margin-bottom: 8px;
	color: rgba(16, 16, 16, .78);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
}
.tp-footer__newsletter-copy h2 {
	margin: 0 0 8px;
	color: var(--tpf-black);
	font-size: clamp(24px, 6vw, 28px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.tp-footer__newsletter-copy p {
	margin: 0 0 20px;
	color: rgba(16, 16, 16, .78);
	font-size: 14px;
	line-height: 1.5;
}
.tp-footer__newsletter-form { position: relative; }
.tp-footer__newsletter-form input {
	width: 100%;
	height: 56px;
	padding: 0 58px 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--tpf-white);
	color: var(--tpf-black);
	font-size: 14px;
	outline-offset: 2px;
}
.tp-footer__newsletter-form input::placeholder { color: #8a8a8a; }
.tp-footer__newsletter-form button {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--tpf-black);
	color: var(--tpf-white);
	transition: transform .2s ease, background .2s ease;
}
.tp-footer__newsletter-form button svg { width: 16px; height: 16px; transition: transform .2s ease; }
.tp-footer__newsletter-form button:hover svg { transform: translateX(2px); }
.tp-footer__newsletter-form button:focus-visible,
.tp-footer a:focus-visible,
.tp-footer button:focus-visible,
.tp-footer input:focus-visible {
	outline: 2px solid var(--tpf-black);
	outline-offset: 2px;
}
.tp-footer__newsletter-status { min-height: 16px; margin: 10px 0 0; color: var(--tpf-black); font-size: 12px; font-weight: 600; }
.tp-footer__newsletter-status.is-error { color: #6e1c00; }

/* ---------- 2 & 3. Dark body: brand/contact + nav grid ---------- */
.tp-footer__body { background: var(--tpf-black); color: var(--tpf-white); padding-top: 30px; }

.tp-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.tp-footer__logo { display: inline-block; }
.tp-footer__logo img { display: block; width: auto; height: 34px; filter: brightness(0) invert(1); }
.tp-footer__logo-text { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.tp-footer__brand p { max-width: 320px; margin: 10px 0 0; color: var(--tpf-muted); font-size: 13px; line-height: 1.5; }

.tp-footer__contact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	color: var(--tpf-white);
	font-size: 13px;
	font-weight: 600;
	transition: color .18s ease;
}
.tp-footer__contact svg { width: 13px; height: 13px; transition: transform .18s ease; }
.tp-footer__contact:hover { color: var(--tpf-orange); }
.tp-footer__contact:hover svg { transform: translateX(2px); }

.tp-footer__divider { height: 1px; margin: 22px 0; background: var(--tpf-divider); }

.tp-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
.tp-footer__group h2 {
	margin: 0 0 12px;
	color: var(--tpf-orange);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.tp-footer__group nav { display: flex; flex-direction: column; gap: 11px; }
.tp-footer__group a {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	color: var(--tpf-white);
	font-size: 14px;
	line-height: 1.3;
	transition: color .18s ease;
}
.tp-footer__group a:hover { color: var(--tpf-orange); }

/* About renders third in DOM/desktop grid but spans full width as a
   compact row on mobile, per the reference layout. */
.tp-footer__group:nth-child(3) { grid-column: 1 / -1; }
.tp-footer__group:nth-child(3) nav { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }

/* ---------- 4. Social / security / payments ---------- */
.tp-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-bottom: 26px; }

.tp-footer__social { display: flex; gap: 10px; }
.tp-footer__social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--tpf-divider);
	border-radius: 50%;
	color: var(--tpf-white);
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.tp-footer__social a svg { width: 17px; height: 17px; }
.tp-footer__social a:hover { border-color: var(--tpf-orange); background: rgba(255, 90, 31, .12); color: var(--tpf-orange); }

.tp-footer__secure { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--tpf-white); font-size: 13px; font-weight: 600; }
.tp-footer__secure svg { width: 17px; height: 17px; color: var(--tpf-orange); flex: 0 0 auto; }

.tp-footer__payments { display: flex; gap: 8px; }
.tp-footer__payments span {
	display: grid;
	place-items: center;
	width: 34px;
	height: 26px;
	border: 1px solid var(--tpf-divider);
	border-radius: 6px;
	color: var(--tpf-white);
}
.tp-footer__payments span svg { width: 18px; height: 18px; }

/* ---------- 5. Legal bottom bar ---------- */
.tp-footer__legal { border-top: 1px solid var(--tpf-divider); background: var(--tpf-black); }
.tp-footer__legal-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	padding: 18px 0;
	color: var(--tpf-muted);
	font-size: 12.5px;
}
.tp-footer__legal-inner p { margin: 0; }
.tp-footer__legal-links { display: flex; align-items: center; gap: 8px; }
.tp-footer__legal-links a { color: var(--tpf-muted); transition: color .18s ease; }
.tp-footer__legal-links a:hover { color: var(--tpf-orange); }
.tp-footer__final-line { color: var(--tpf-muted); }

/* ---------- Desktop (>=990px) ---------- */
@media (min-width: 990px) {
	.tp-footer__newsletter { padding: 0 24px; border-radius: 32px 32px 0 0; }
	.tp-footer__newsletter-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 60px;
		min-height: 220px;
		padding: 34px 0;
	}
	.tp-footer__newsletter-copy { max-width: 480px; }
	.tp-footer__newsletter-copy h2 { font-size: 30px; }
	.tp-footer__newsletter-form { flex: 0 0 auto; width: min(420px, 40vw); }

	.tp-footer__body { padding-top: 46px; }
	.tp-footer__top { align-items: center; }

	.tp-footer__nav {
		grid-template-columns: repeat(3, 1fr);
		gap: 32px;
		align-items: start;
	}
	.tp-footer__group:nth-child(3) { grid-column: auto; }
	.tp-footer__group:nth-child(3) nav { flex-direction: column; }

	.tp-footer__legal-inner { padding: 22px 0; }
}

/* ---------- Mobile (<=767px) ---------- */
@media (max-width: 767px) {
	.tp-footer__newsletter { padding: 32px 20px; border-radius: 26px 26px 0 0; }
	.tp-footer__body { padding-inline: 20px; }
	.tp-footer__legal-inner { padding-inline: 20px; flex-direction: column; align-items: flex-start; }
	.tp-footer__legal-links { flex-wrap: wrap; }
	.tp-footer__meta { row-gap: 14px; }
	.tp-footer__secure { margin-left: 0; flex-basis: 100%; order: 3; }
}

@media (max-width: 480px) {
	.tp-footer__top { flex-direction: column; gap: 14px; }
	.tp-footer__contact { align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.tp-footer *,
	.tp-footer *::before,
	.tp-footer *::after { transition-duration: .01ms !important; }
}