/* Codeon Restaurant V2 — restaurant identity card + opening-hours modal.
 *
 * The card is a single button: logo, name, one-line tagline, and a status pill.
 * Everything else (full week, services, contact) lives in the modal, which
 * reuses the bottom-sheet language of the mobile drawer and the CodeOrder auth
 * modal so the whole site behaves the same way.
 *
 * It is pinned bottom-left and follows the page, minimising to a pill on scroll.
 * Unlike the old fixed dock it is a single control rather than a 236x196 stack,
 * its zone is pointer-events:none so only the button takes clicks, and it lifts
 * clear of the bottom app menu on phones. */

/* ---------- Card: a fixed, self-minimising dock ---------- */
/* Pinned bottom-left and follows the page. Two states:
   - at rest (top of page) it is a full card: logo, name, tagline, status pill;
   - once scrolled it collapses to a pill so it stops competing with the content.
   The zone is pointer-events:none and only the button re-enables them, so the
   dock never creates a dead rectangle over whatever sits behind it. */
.info-card-zone {
	position: fixed;
	left: clamp(14px, 2vw, 26px);
	bottom: clamp(14px, 2vw, 26px);
	/* Under the mobile drawer (200) and the hours modal (210), and under the
	   bottom app menu (90) so it can never cover the app bar. */
	z-index: 80;
	pointer-events: none;
}

.info-card {
	display: flex;
	align-items: center;
	gap: 12px;
	width: auto;
	max-width: min(320px, calc(100vw - 28px));
	margin: 0;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 18px;
	background: color-mix(in srgb, var(--surface) 92%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	backdrop-filter: blur(16px) saturate(130%);
	box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--ink) 34%, transparent);
	color: var(--ink);
	font-family: var(--font-body);
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
	transition:
		gap 300ms cubic-bezier(0.22, 1, 0.36, 1),
		padding 300ms cubic-bezier(0.22, 1, 0.36, 1),
		border-radius 300ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 200ms ease,
		border-color 200ms ease;
}
.info-card:hover {
	border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
	box-shadow: 0 22px 50px -14px color-mix(in srgb, var(--ink) 40%, transparent);
}
.info-card:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
}

/* At rest the card stacks identity over the status pill. */
.ic-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.info-card:not(.is-compact) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	padding: 14px;
	width: min(320px, calc(100vw - 28px));
}

.ic-avatar {
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--brand) 12%, var(--surface));
	color: var(--brand-text);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
}
.ic-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ic-avatar .ic-logo {
	display: grid;
	width: 100%;
	height: 100%;
}
.ic-avatar .site-logo-img {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The identity block is what folds away when the dock minimises. Animating
   max-width rather than display:none keeps the collapse smooth. */
.ic-id {
	display: grid;
	gap: 2px;
	min-width: 0;
	max-width: 240px;
	opacity: 1;
	overflow: hidden;
	transition: max-width 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.ic-name {
	overflow: hidden;
	color: var(--heading);
	font-size: 15px;
	font-weight: 750;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ic-tagline {
	overflow: hidden;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Status pill — the loudest element at rest, and the only thing left when
   minimised. Closed stays neutral: shut at 3am is not an error. */
.ic-state {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--ok-dot) 24%, var(--surface));
	color: color-mix(in srgb, var(--ok-dot) 34%, var(--heading));
	font-family: var(--font-eyebrow);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: padding 300ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.info-card.is-closed .ic-state {
	background: color-mix(in srgb, var(--ink) 7%, var(--surface));
	color: var(--ink-soft);
}
.ic-state-note {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.8;
}

/* ---------- Minimised ---------- */
.info-card.is-compact {
	gap: 9px;
	padding: 7px 13px 7px 7px;
	border-radius: 999px;
}
.info-card.is-compact .ic-id {
	max-width: 0;
	opacity: 0;
}
.info-card.is-compact .ic-avatar { width: 32px; height: 32px; font-size: 15px; }
.info-card.is-compact .ic-state {
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: 12px;
}
/* The note is detail; the state word alone is the point once minimised. */
.info-card.is-compact .ic-state-note { display: none; }

/* ---------- Clearances ---------- */
/* Never sit on the app bar: lift by the same reserve the bar claims from body. */
@media (max-width: 782px) {
	body.has-bottom-app-menu .info-card-zone {
		bottom: calc(102px + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 600px) {
	.info-card:not(.is-compact) { width: min(300px, calc(100vw - 28px)); }
	.ic-id { max-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
	.info-card,
	.info-card .ic-id,
	.info-card .ic-state { transition: none; }
}

/* ---------- Hours modal ---------- */
/* Bottom sheet on phones, centred dialog from the tablet breakpoint up. */
.hours-modal {
	position: fixed;
	inset: 0;
	z-index: 210;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* visibility flips instantly on open (see .open below) so the dialog can take
	   focus in the same frame; on close it is delayed until the fade finishes. */
	transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.hours-modal.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 200ms ease, visibility 0s;
}

.hours-modal-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(5, 20, 17, 0.5);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	cursor: default;
	opacity: 0;
	transition: opacity 240ms ease;
}
.hours-modal.open .hours-modal-backdrop { opacity: 1; }

.hours-modal-sheet {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(480px, 100%);
	max-height: min(88svh, 760px);
	border-radius: 26px 26px 0 0;
	background: var(--surface);
	box-shadow: 0 -22px 60px rgba(5, 20, 17, 0.32);
	overflow: hidden;
	touch-action: none;
	transform: translateY(100%);
	transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.hours-modal.open .hours-modal-sheet { transform: translateY(0); }
.hours-modal-sheet.is-dragging { transition: none; }

.hours-modal-grip {
	display: grid;
	flex: none;
	place-items: center;
	padding: 11px 0 5px;
	cursor: grab;
	touch-action: none;
}
.hours-modal-grip:active { cursor: grabbing; }
.hours-modal-grip span {
	display: block;
	width: 42px;
	height: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ink) 20%, transparent);
}

.hours-modal-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 48px;
	padding: 2px 18px 14px;
	border-bottom: 1px solid var(--line);
	touch-action: none;
}
.hm-title {
	overflow: hidden;
	color: var(--heading);
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.15;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hours-modal-close {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--heading);
	cursor: pointer;
	touch-action: auto;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.hours-modal-close:hover {
	border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
	background: color-mix(in srgb, var(--brand) 7%, var(--surface));
	color: var(--brand-text);
}

.hours-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

.hm-status {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin-bottom: 22px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface-2);
	font-size: 14px;
}
.hm-dot {
	flex: none;
	align-self: center;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--muted);
}
.hm-status.is-open .hm-dot { background: var(--ok-dot); }
.hm-status-label { color: var(--heading); font-weight: 700; }
.hm-status-note { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.hm-section-title {
	margin: 0 0 10px;
	color: var(--muted);
	font-family: var(--font-eyebrow);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hm-week {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 14.5px;
}
.hm-week th,
.hm-week td {
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-weight: 500;
	text-align: left;
}
.hm-week td {
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.hm-week th { color: var(--ink); }
.hm-week tr:last-child th,
.hm-week tr:last-child td { border-bottom: 0; }
/* Today is the row people scan for. */
.hm-week tr.is-today th,
.hm-week tr.is-today td {
	color: var(--brand-text);
	font-weight: 750;
}

.hm-services {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.hm-services li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}
.hm-services li:last-child { border-bottom: 0; }
.hm-svc-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
}
.hm-services li.is-on .hm-svc-ico {
	background: color-mix(in srgb, var(--ok-dot) 22%, var(--surface));
	color: color-mix(in srgb, var(--ok-dot) 40%, var(--heading));
}
.hm-services li.is-off .hm-svc-ico {
	background: color-mix(in srgb, var(--ink) 7%, var(--surface));
	color: var(--muted);
}
.hm-services li.is-on .hm-svc-label { color: var(--ink); font-weight: 650; }
.hm-services li.is-off .hm-svc-label { color: var(--muted); }
.hm-svc-hours {
	margin-left: auto;
	color: var(--muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.hm-contact {
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.hm-address {
	margin: 0 0 12px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.55;
}
.hm-phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	color: var(--brand-text);
	font-size: 15px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.hm-phone:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 601px) {
	.hours-modal { align-items: center; }
	.hours-modal-sheet {
		max-height: min(84svh, 720px);
		border-radius: 24px;
		box-shadow: 0 30px 80px rgba(5, 20, 17, 0.34);
		transform: translateY(18px) scale(0.98);
		opacity: 0;
		transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
	}
	.hours-modal.open .hours-modal-sheet {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	/* Dragging is a phone gesture; on a centred dialog it makes no sense. */
	.hours-modal-grip { display: none; }
	.hours-modal-head { padding-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.hours-modal,
	.hours-modal-backdrop { transition-duration: 1ms; }
	.hours-modal-sheet { transition: transform 1ms linear, opacity 1ms linear; }
	.hours-modal-close { transition: none; }
}