/*
 * TalentAstro / DIVSA — chrome layer (v4.9.47, Phase 4A).
 *
 * Header, footer and the mobile bottom navigation. Every rule is scoped to a
 * `.tap-chrome-*` / `.tap-bottomnav` class — nothing here selects a bare tag,
 * so it cannot reach into a theme or a WooCommerce template it does not own.
 * That scoping is the whole reason this plugin can be installed on a live shop.
 */

/* ── Header ─────────────────────────────────────────────────────────────── */
.tap-chrome-header {
	background: #fff;
	border-bottom: 1px solid #efe9f6;
	z-index: 60;
}

.tap-chrome-header.is-sticky {
	position: sticky;
	top: 0;
}

.tap-chrome-header-in {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 62px;
}

.tap-h-centered .tap-chrome-header-in { justify-content: center; text-align: center; }
.tap-h-centered .tap-chrome-menu { order: 3; flex-basis: 100%; justify-content: center; }
.tap-h-minimal .tap-chrome-menu,
.tap-h-minimal .tap-chrome-search { display: none; }

.tap-chrome-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 800;
	color: var(--tap-ink, #1e0a2e);
	flex-shrink: 0;
	min-width: 0;
}

.tap-chrome-logo { max-height: 38px; width: auto; height: auto; }
.tap-chrome-om { font-size: 20px; color: var(--tap-marigold, #f99000); }
.tap-chrome-name { font-size: 17px; letter-spacing: -0.01em; }

.tap-chrome-menu {
	display: flex;
	gap: 18px;
}

.tap-chrome-menu a {
	text-decoration: none;
	color: var(--tap-ink, #1e0a2e);
	font-weight: 600;
	font-size: 14px;
	padding: 6px 10px;
	border-radius: var(--tap-r-xs, 6px);
}

.tap-chrome-menu a:hover {
	background: rgba(97, 9, 190, 0.05);
	color: var(--tap-purple, #6109be);
}

.tap-chrome-search input {
	border: 1px solid var(--tap-line, #ece6f2);
	background: #fff;
	border-radius: var(--tap-r-full, 999px);
	padding: 8px 14px 8px 34px;
	font-size: 13px;
	width: 180px;
}

.tap-chrome-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.tap-chrome-cart,
.tap-chrome-acc {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #f6f0ff;
}

@media (max-width: 767.98px) {
	.tap-chrome-menu { display: none; }
	.tap-chrome-search input { width: 130px; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.tap-chrome-footer {
	background: var(--tap-ink, #1e0a2e);
	color: #d9cfe6;
	margin-top: 40px;
	padding: 34px 0 18px;
}

.tap-chrome-footer-in {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 26px;
}

.tap-chrome-fbrand { font-weight: 800; color: #fff; font-size: 16px; margin-bottom: 8px; }
.tap-chrome-fabout p { font-size: 13px; line-height: 1.65; color: #b7a9c6; margin: 0 0 12px; }

.tap-chrome-fcol { display: flex; flex-direction: column; gap: 8px; }
.tap-chrome-fcol a { color: #d9cfe6; text-decoration: none; font-size: 13px; }
.tap-chrome-fcol a:hover { color: var(--tap-marigold, #f99000); }

.tap-chrome-fsocial { display: flex; gap: 10px; }
.tap-chrome-fsocial a {
	background: rgba(255, 255, 255, .08);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
}

.tap-chrome-fbar {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: 12px;
	color: #9d90ac;
}

@media (max-width: 767.98px) {
	.tap-chrome-footer-in { grid-template-columns: 1fr 1fr; }
	.tap-chrome-fabout { grid-column: 1 / -1; }
}

/* ── Bottom navigation (native-app feel on mobile) ───────────────────────
 *
 * Rendered server-side, so it is on screen at first paint. Bodies get
 * `tap-has-bottomnav`, which reserves the space at the bottom of the page —
 * without that reservation the last row of content sits underneath the bar and
 * nobody can tap it.
 */
.tap-bottomnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	align-items: flex-end;
	justify-content: space-around;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(12px);
	border-top: 1px solid #eee6f5;
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	box-shadow: 0 -6px 24px rgba(30, 10, 46, .07);
}

.tap-nav-mobile .tap-bottomnav { display: flex; }
.tap-nav-always .tap-bottomnav { display: flex; }

@media (min-width: 768px) {
	.tap-nav-mobile .tap-bottomnav { display: none; }
}

.tap-has-bottomnav.tap-nav-mobile { padding-bottom: 68px; }
.tap-has-bottomnav.tap-nav-always { padding-bottom: 68px; }

@media (min-width: 768px) {
	.tap-has-bottomnav.tap-nav-mobile { padding-bottom: 0; }
}

.tap-bn-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 2px;
	text-decoration: none;
	color: #7b6f88;
	font-size: 10px;
	font-weight: 600;
	min-height: 48px;              /* a real tap target, not a decorative one */
	justify-content: center;
}

.tap-bn-ic { font-size: 19px; line-height: 1; }
.tap-bn-item.is-active { color: var(--tap-purple, #6109be); }
.tap-bn-item.is-active .tap-bn-ic { transform: translateY(-1px); }

/* The centre item is the app's primary action — raised, filled, unmissable.

   v7.5.25: the second gradient stop was a hardcoded #9b3ff0 — a purple left
   over from when the product's own brand was purple. On any tenant whose
   brand is not purple it blended the brand colour into a foreign hue, so the
   most prominent control in the app was the one that did not match the
   theme. It now ramps between the contrast-safe brand shade and the raw
   brand, which stays a gradient (this control is meant to lift off the bar)
   while remaining entirely within the operator's own colour. */
.tap-bn-item.is-center .tap-bn-ic {
	background: linear-gradient(135deg, var(--tap-ink-accent, var(--tap-purple, #6109be)), var(--tap-purple, #6109be));
	color: var(--tap-cta-text, #fff);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	margin-top: -20px;
	box-shadow: 0 8px 18px rgba(97, 9, 190, .34);
	font-size: 21px;
}

.tap-bn-item.is-center { color: var(--tap-purple, #6109be); }

@media (prefers-reduced-motion: no-preference) {
	.tap-bn-item { transition: color .18s ease; }
}