/* ============================================================
   Location — the map, the three actions, and the phone bar
   ------------------------------------------------------------
   One sheet for two surfaces that must never disagree:

     1. .nxl-map     the contact page: the address on a map plus the
                     three buttons (ניווט / חיוג מהיר / וואטסאפ).
     2. .nxl-bar     a fixed bar at the bottom of the viewport on
                     phones, on every page.

   THE BAR IS THE FOURTH SURFACE DOCKED TO THE BOTTOM EDGE, so it has to
   declare its height and get out of everyone else's way. The theme's
   existing contract is `--legal-bar-h` (measured at runtime by
   consent.js), and every other fixed element already clears it. This
   sheet adds ONE more number beside it:

     --nxl-bar-h   the bar's own height, a constant (3.25rem)

   and lifts each surface by it, in one place each:

     html body          reserves room at the end of the page
     .consent           the cookie card
     .nxchat            the assistant launcher (bottom-LEFT)
     .nxa11y            the accessibility launcher (bottom-RIGHT)

   `.nxwa` (the floating WhatsApp pill, bottom-RIGHT) is HIDDEN on this
   width: the bar carries the same button, two WhatsApp entries in one
   screen corner is noise, and it frees the corner for `.nxa11y`.

   Colours come only from the theme tokens, so all three palettes work
   unchanged. Physical sides are written where a floating element is
   involved (never `inset-inline-end`), because in Hebrew the logical
   property resolves to the LEFT — where the chatbot lives. Same rule as
   whatsapp.css and accessibility.css; do not "tidy" those back.

   Breakpoint: 767px, the same one main.css uses for the header's phone
   layout, because this bar replaces header actions that are hidden there.
   ============================================================ */

:root {
	/* The bar's height, and the number every surface below is lifted by. A
	   constant, not a measurement, and that is deliberate: the bar has a fixed
	   content (an 18px icon over one line of 0.72rem text) and a fixed padding,
	   so its height cannot vary — and a constant means the lifts are correct on
	   the first paint, before any script runs.
	   VERIFIED against a real render: 61px at a 16px root (2026-10-22). If the
	   bar's padding or font size ever changes, re-measure and move this with it,
	   or every element it lifts sits that many pixels wrong. */
	--nxl-bar-h: 3.8125rem;
}

/* ------------------------------------------------------- the action row */

.nxl-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-block-start: 1rem;
}

.nxl-actions__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.05rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nxl-actions__item:hover,
.nxl-actions__item:focus-visible {
	background: var(--surface-2);
	border-color: var(--accent-ring);
	color: var(--text);
}

/*
 * One filled control in the row: navigation is the action a visitor who has
 * committed to coming to the shop wants, so it carries the weight. The other
 * two stay outlined — three filled buttons would claim three equally likely
 * intents, which is not true.
 */
.nxl-actions__item--navigate {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.nxl-actions__item--navigate:hover,
.nxl-actions__item--navigate:focus-visible {
	background: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--on-accent);
}

.nxl-actions__item:focus-visible {
	outline: 2px solid var(--accent-ring);
	outline-offset: 2px;
}

.nxl-actions__icon {
	flex: 0 0 auto;
	display: block;
}

/* ------------------------------------------------------------- the map */

/*
 * AS WIDE AS THE FORM BELOW IT, AND NOT AS TALL. Valery, 2026-10-22: "שהמפה
 * תהיה באותו הגודל של הטופס לרוחב, לא לאורך, כדי שיראה אחיד" — the two boxes
 * start and end on the same vertical edges so the column reads as one block, and
 * the frame stays a landscape rectangle so it does not push the form down.
 *
 * It was a 22rem square for half an hour; a square is narrower than the form at
 * every width, and that mismatch is what he saw.
 */
.nxl-map {
	margin-block: 0 1.75rem;
}

.nxl-map__frame {
	position: relative;
	overflow: hidden;
	margin-block-start: 0.5rem;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

/* The three actions under it, one step smaller than the default row: this is a
   card beside a form, so it must not compete with the form's own submit. */
.nxl-map .nxl-actions {
	gap: 0.4rem;
	margin-block-start: 0.7rem;
}

.nxl-map .nxl-actions__icon {
	width: 15px;
	height: 15px;
}

/*
 * THREE CELLS, icon above the label — the phone bar and the contact page's
 * address strip. One shape in two places, because Valery pointed at the bar and
 * said "כמו עכשיו בטלפון"; keeping two copies of this geometry is how the two
 * surfaces would quietly drift apart the first time either is adjusted.
 */
.nxl-actions--cells {
	display: grid;
	grid-template-columns: repeat(var(--nxl-cols, 3), minmax(0, 1fr));
	gap: 0.5rem;
}

.nxl-actions--cells .nxl-actions__item {
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
	padding: 0.6rem 0.3rem;
	border-radius: 0.7rem;
	font-size: 0.78rem;
	text-align: center;
}

.nxl-actions--cells .nxl-actions__label {
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
}

/*
 * HALF THE COLUMN. Valery, 2026-10-22: "הכפתורים פה יותר מדי ארוכים לרוחב, תקטין
 * אותם בחצי" — a cell that spans the whole info column reads as a form field,
 * and three of them stacked read as the loudest thing on the page. Half the
 * column keeps them as buttons.
 *
 * Scoped to `.contact-info` on purpose: the phone bar's cells are the same
 * `.nxl-actions--cells` component, and halving those would leave the bar's
 * thumb targets floating in the middle of the strip.
 */
.contact-info .nxl-actions--cells {
	max-inline-size: 50%;
}

/*
 * The contact page styles every `tel:` link as a bold green accent link
 * (`.contact-info a[href^="tel"]`). That rule has a higher specificity than a
 * cell, so the call button's label would come out green on a white cell — the
 * one button in the row that looks like a hyperlink. Restate the cell colours
 * for anything that is NOT the filled navigation cell, at a specificity that
 * wins. The `:not()` is load-bearing: without it this rule would repaint the
 * navigation cell's label in body colour on top of the accent fill.
 */
.contact-info a.nxl-actions__item:not(.nxl-actions__item--navigate),
.contact-info a.nxl-actions__item:not(.nxl-actions__item--navigate):hover,
.contact-info a.nxl-actions__item:not(.nxl-actions__item--navigate):focus-visible {
	color: var(--text);
	text-decoration: none;
}

.nxl-map__embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -------------------------------------------------------------- the bar */

/*
 * Hidden by default and revealed by the phone media query at the end of this
 * file. The markup is printed on every page, so the reveal cannot be a
 * PHP decision: a viewport is something only the browser knows.
 */
.nxl-bar {
	display: none;
}

@media (max-width: 767px) {
	html body {
		padding-block-end: calc(var(--legal-bar-h) + var(--nxl-bar-h));
	}

	.nxl-bar {
		display: block;
		position: fixed;
		inset-block-end: var(--legal-bar-h);
		inset-inline: 0;
		/* Above the legal bar (45) and the WhatsApp pill (55); below the
		   consent card (60) and the chat widget (900), which are decisions a
		   visitor must be able to act on. */
		z-index: 56;
		/* No `env(safe-area-inset-bottom)` here on purpose: the sticky legal bar
		   sits BELOW this one, so the home indicator's inset belongs to that bar,
		   not to this one. Adding it here would make the bar taller than
		   --nxl-bar-h and every lift below would come up short. */
		padding: 0.4rem 0.7rem;
		background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-block-start: 1px solid var(--border);
	}

	/* Three equal cells that reach the edges, so the bar is a thumb target
	   rather than a row of small pills in the middle of the screen. */
	.nxl-bar .nxl-actions {
		margin: 0;
		gap: 0.4rem;
	}

	/* On a phone the bar IS the strip: printing the contact page's copy as well
	   puts the same three buttons on screen twice, and one of them scrolls away. */
	.nxl-actions--strip {
		display: none;
	}

	/* The pill is replaced by the bar's own WhatsApp button on this width. */
	.nxwa {
		display: none;
	}

	/* Lift every other fixed surface clear of the bar. Each selector is the
	   one its own stylesheet positions with, so nothing is guessed. */
	.consent,
	.nxchat {
		inset-block-end: calc(var(--legal-bar-h) + var(--nxl-bar-h) + 0.9rem);
	}

	.nxa11y {
		--nxa11y-bottom: calc(var(--legal-bar-h) + var(--nxa11y-edge) + var(--nxa11y-cartbar-h) + var(--nxl-bar-h));
		/* The pill this stack was clearing is hidden on this width. */
		--nxa11y-stack: 0rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nxl-actions__item {
		transition: none;
	}
}