/* ============================================================
 * HappyManage — Status Widget
 *
 * Widget flottant bas-droite : pill ouvert/fermé en temps réel,
 * expand vers le haut en panel avec horaires + CTAs adaptés.
 *
 * Namespace strict : `.hm-status*`. Aucune dépendance au thème.
 * Toutes les couleurs / radius / shadows sont des CSS custom
 * properties préfixées `--hm-*` → override-able par le thème
 * via une règle plus spécifique :
 *
 *   .hm-status { --hm-open-bg: #2c8a4c; --hm-radius: 16px; }
 *
 * Pour utiliser sur un autre projet : copier ce fichier + le JS
 * + le PHP du module, enqueuer, appeler hm_status_widget().
 * ============================================================ */

.hm-status {
	/* --- Variables locales (overridables) --------------------- */
	--hm-radius: 18px;
	--hm-open-bg: #1f8a4a;
	--hm-open-bg-dark: #15693a;
	--hm-open-dot: #6dec9e;
	--hm-closed-bg: #1a1a1a;
	--hm-closed-bg-dark: #000;
	--hm-closed-dot: #c4c4c4;
	--hm-text: #fff;
	--hm-panel-bg: #fff;
	--hm-panel-text: #1a1a1a;
	--hm-panel-text-soft: rgba(26, 26, 26, 0.6);
	--hm-panel-border: rgba(0, 0, 0, 0.08);
	--hm-cta-primary-bg: #2563eb;       /* bleu pour "Appeler" */
	--hm-cta-primary-bg-hover: #1d4ed8;
	--hm-cta-whatsapp-bg: #25D366;
	--hm-cta-whatsapp-bg-hover: #1da654;
	--hm-cta-bg: transparent;
	--hm-cta-bg-hover: rgba(0, 0, 0, 0.04);
	--hm-cta-text: #1a1a1a;
	--hm-cta-border: rgba(0, 0, 0, 0.12);
	/* Panel ouvert : doit se détacher fortement (surface au-dessus du contenu).
	 * Pill fermée : shadow beaucoup plus subtile, sinon l'ombre se voit
	 * trop sur les fonds non-blancs (cream, sauge, etc.). */
	--hm-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	--hm-pill-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
	--hm-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* smooth ease-out type spring */
	--hm-dur: 360ms;

	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	pointer-events: none;
	max-width: calc(100vw - 48px);
}

/* Sécurité box-model : on ne dépend pas du reset du thème hôte */
.hm-status,
.hm-status *,
.hm-status *::before,
.hm-status *::after {
	box-sizing: border-box;
}

/* --- Panel (au-dessus du pill, expandable) ------------------
 * Astuce moderne : `grid-template-rows: 0fr → 1fr` permet de
 * transitionner depuis height: 0 vers height: auto (impossible
 * avec max-height sans deviner une borne). Le inner wrapper
 * a overflow: hidden pour clipper pendant la transition.
 * Support : Chrome 99+, Firefox 113+, Safari 16+ (≈ 96% global).
 */
.hm-status__panel {
	pointer-events: auto;
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transform: translateY(8px);
	transition:
		grid-template-rows var(--hm-dur) var(--hm-ease),
		opacity calc(var(--hm-dur) * 0.6) var(--hm-ease),
		transform var(--hm-dur) var(--hm-ease);
	background: var(--hm-panel-bg);
	color: var(--hm-panel-text);
	/* Top arrondi, bottom plat : le pill ci-dessous a son top plat aussi,
	 * → fusion visuelle "un seul bloc" sans gap. */
	border-radius: var(--hm-radius) var(--hm-radius) 0 0;
	box-shadow: var(--hm-shadow);
	width: 340px;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.4;
}
.hm-status__panel-inner {
	overflow: hidden;
	min-height: 0; /* nécessaire pour que le grid:0fr fonctionne dans tous les navigateurs */
	/* `border-radius: inherit` + `overflow: hidden` : clippe le head coloré
	 * dans les coins arrondis du panel parent. Sans ça, le bg du head dépasse
	 * visuellement sur les coins (le radius existe sur le panel mais ne clip
	 * pas par défaut le contenu des enfants avec leur propre background). */
	border-radius: inherit;
}
.hm-status.is-open .hm-status__panel {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translateY(0);
}

/* --- Panel head (bandeau coloré, miroir du pill) ------------ */
.hm-status__panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--hm-open-bg);
	color: var(--hm-text);
	transition: background var(--hm-dur) var(--hm-ease);
}
.hm-status[data-hm-state="closed"] .hm-status__panel-head {
	background: var(--hm-closed-bg);
}
.hm-status__panel-headtext {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.hm-status__panel-title {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
}
.hm-status__panel-sub {
	font-size: 12.5px;
	opacity: 0.88;
	margin-top: 1px;
}
.hm-status__close {
	background: transparent;
	border: 0;
	color: currentColor;
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	padding: 0;
	opacity: 0.85;
	transition: background 150ms, opacity 150ms;
}
.hm-status__close:hover {
	background: rgba(255, 255, 255, 0.15);
	opacity: 1;
}
.hm-status__close svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* --- Horaires de la semaine ---------------------------------- */
.hm-status__schedule {
	margin: 0;
	padding: 12px 16px 4px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13.5px;
}
.hm-status__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	color: var(--hm-panel-text-soft);
}
.hm-status__row-day {
	margin: 0;
}
.hm-status__row-hours {
	margin: 0;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.hm-status__row--today {
	color: var(--hm-panel-text);
}
.hm-status__row--today .hm-status__row-day,
.hm-status__row--today .hm-status__row-hours {
	font-weight: 600;
}
.hm-status__row-closed {
	color: var(--hm-panel-text-soft);
	font-style: italic;
}

/* --- CTAs ---------------------------------------------------- */
.hm-status__ctas {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 16px 16px;
}
.hm-status__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	color: var(--hm-cta-text);
	background: var(--hm-cta-bg);
	box-shadow: inset 0 0 0 1px var(--hm-cta-border);
	transition: background 200ms, color 200ms;
}
.hm-status__cta:hover {
	background: var(--hm-cta-bg-hover);
}
.hm-status__cta--primary {
	background: var(--hm-cta-primary-bg);
	color: #fff;
	box-shadow: none;
}
.hm-status__cta--primary:hover {
	background: var(--hm-cta-primary-bg-hover);
}
.hm-status__cta--whatsapp {
	background: var(--hm-cta-whatsapp-bg);
	color: #fff;
	box-shadow: none;
}
.hm-status__cta--whatsapp:hover {
	background: var(--hm-cta-whatsapp-bg-hover);
}
.hm-status__cta svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: block;
}
.hm-status__cta[hidden] {
	display: none;
}

/* --- Pill (toujours visible) --------------------------------
 * Border-radius: 999px en fermé = forme pill (clamp à demi-hauteur).
 * En ouvert : top corners flat + width 100% → fusion avec le panel
 * au-dessus pour former "un seul bloc" sans gap. */
.hm-status__pill {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--hm-open-bg);
	color: var(--hm-text);
	font-size: 14px;
	font-weight: 500;
	border: 0;
	cursor: pointer;
	box-shadow: var(--hm-pill-shadow);
	white-space: nowrap;
	min-height: 44px;
	align-self: flex-end;
	transition:
		background var(--hm-dur) var(--hm-ease),
		border-radius var(--hm-dur) var(--hm-ease),
		width var(--hm-dur) var(--hm-ease);
}
.hm-status[data-hm-state="closed"] .hm-status__pill {
	background: var(--hm-closed-bg);
}
.hm-status__pill:hover {
	background: var(--hm-open-bg-dark);
}
.hm-status[data-hm-state="closed"] .hm-status__pill:hover {
	background: var(--hm-closed-bg-dark);
}

/* Quand le panel est ouvert : pill devient le "bas" du bloc unifié.
 * Top corners plats pour fusionner avec le panel au-dessus (qui a son
 * bottom plat), bottom corners gardent leur arrondi. Width 100% pour
 * matcher la largeur du panel à la jointure. */
.hm-status.is-open .hm-status__pill {
	border-radius: 0 0 var(--hm-radius) var(--hm-radius);
	width: 100%;
}

/* Pastille (point clignotant pour "ouvert", statique pour "fermé") */
.hm-status__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--hm-open-dot);
	flex-shrink: 0;
	box-shadow: 0 0 0 4px rgba(109, 236, 158, 0.25);
	animation: hmStatusPulse 2.2s ease-in-out infinite;
}
.hm-status[data-hm-state="closed"] .hm-status__dot {
	background: var(--hm-closed-dot);
	box-shadow: 0 0 0 4px rgba(196, 196, 196, 0.2);
	animation: none;
}
@keyframes hmStatusPulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(109, 236, 158, 0.25); }
	50%      { box-shadow: 0 0 0 8px rgba(109, 236, 158, 0.10); }
}

/* Chevron : pointe vers le haut (cliquez pour ouvrir vers le haut).
 * Rotation 180deg quand ouvert → pointe vers le bas (= replier). */
.hm-status__chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform var(--hm-dur) var(--hm-ease);
}
.hm-status.is-open .hm-status__chevron {
	transform: rotate(180deg);
}

/* --- Mobile : panel pleine largeur ---------------------------
 * Sur les très petits écrans, le panel s'étend pour utiliser tout
 * l'espace disponible (moins les 24px de bordure). */
@media (max-width: 420px) {
	.hm-status {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
		/* Shadow encore plus discrète sur mobile : le pill est plus proche
		 * visuellement du contenu, un shadow trop appuyée "colle" au texte. */
		--hm-pill-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}
	.hm-status__panel {
		width: 100%;
	}
	.hm-status__pill {
		align-self: flex-end;
	}
}

/* --- Reduce motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hm-status__panel,
	.hm-status__pill,
	.hm-status__chevron,
	.hm-status__panel-head {
		transition-duration: 0.01ms !important;
	}
	.hm-status__dot {
		animation: none !important;
	}
}