/*
 * Stiluri pentru widgetul CATO AI Chat — încărcate în interiorul Shadow DOM.
 *
 * Fiind în Shadow DOM, aceste reguli nu ies niciodată în afara componentei
 * și nu sunt afectate de stilurile temei site-ului. Culorile principale vin
 * din variabile CSS setate din JavaScript, pe baza configurării din admin.
 */

:host,
.cato-root {
	all: initial;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	color: #1a1a1a;
}

.cato-root *,
.cato-root *::before,
.cato-root *::after {
	box-sizing: border-box;
}

.cato-root {
	--cato-primary: #1a1a1a;
	--cato-accent: #c9a227;
	--cato-zindex: 999990;
	--cato-radius: 14px;
	--cato-bg: #ffffff;
	--cato-bg-muted: #f7f6f4;
	--cato-whatsapp-icon: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.92 1.16-.15.2-.3.22-.6.07-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.79-1.67-2.09-.15-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.68-1.64-.93-2.24-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.01-1.04 2.46 0 1.45 1.06 2.86 1.21 3.06.15.2 2.06 3.29 5.02 4.49.7.3 1.25.48 1.68.62.7.22 1.35.19 1.85.12.56-.08 1.75-.71 2-1.41.25-.7.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35z'/%3E%3Cpath fill='%23000' d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.28-1.38c1.45.79 3.08 1.21 4.76 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm0 18.02c-1.5 0-2.98-.4-4.27-1.16l-.31-.18-3.17.83.85-3.09-.2-.32a8.06 8.06 0 0 1-1.24-4.3c0-4.47 3.64-8.1 8.11-8.1 4.47 0 8.1 3.63 8.1 8.1s-3.63 8.1-8.1 8.1z'/%3E%3C/svg%3E" );
	--cato-border: #e4e1da;
	--cato-text: #1a1a1a;
	--cato-text-muted: #6b6560;
	--cato-danger: #b3261e;
	--cato-success: #2e7d32;

	/*
	 * Decalajul de jos e compus din trei termeni, nu unul singur:
	 *
	 *  1. 20px — distanța estetică față de marginea ecranului;
	 *  2. --cato-bottom-offset — înălțimea barei fixe a temei, MĂSURATĂ la
	 *     execuție de widget.js (vezi bottomObstruction()). Multe teme de magazin
	 *     au pe mobil o bară de navigare fixată jos; fără termenul ăsta, butonul
	 *     de chat ajunge sub ea — fie invizibil, fie apăsat din greșeală în locul
	 *     meniului. Confirmat pe cato.ro: tema Woodmart are `.wd-toolbar`;
	 *  3. safe-area-inset-bottom — indicatorul de „home" de pe iPhone-urile fără
	 *     buton fizic. Fără el, butonul stă peste zona în care iOS nu livrează
	 *     atingeri, deci pare că „nu merge".
	 *
	 * Valoarea implicită a variabilei e 0px, deci pe o temă fără bară fixă
	 * comportamentul rămâne exact cel de dinainte.
	 */
	--cato-bottom-offset: 0px;

	position: fixed;
	bottom: calc( 20px + var( --cato-bottom-offset ) + env( safe-area-inset-bottom, 0px ) );
	z-index: var( --cato-zindex );
	display: block;
}

.cato-pos-right {
	right: 20px;
}

.cato-pos-left {
	left: 20px;
}

/* -------------------------------------------------------------------------
 * Buton de deschidere
 * ---------------------------------------------------------------------- */

.cato-toggle {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: none;
	background: var( --cato-primary );
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.22 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cato-toggle:hover {
	transform: translateY( -2px );
	box-shadow: 0 10px 22px rgba( 0, 0, 0, 0.28 );
}

.cato-toggle:focus-visible {
	outline: 3px solid var( --cato-accent );
	outline-offset: 2px;
}

.cato-toggle-icon {
	width: 24px;
	height: 24px;
	display: block;
	background: currentColor;
	-webkit-mask: radial-gradient( circle at 30% 30%, transparent 0, transparent 0 ) , conic-gradient( #000 0 0 );
	mask: none;
	border-radius: 6px 6px 6px 2px;
	position: relative;
}

.cato-toggle-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 6px 6px 6px 2px;
	background: #fff;
}

/* -------------------------------------------------------------------------
 * REGULĂ CRITICĂ — a se păstra prima.
 *
 * Elementele din widget se ascund din JavaScript prin `element.hidden = true`.
 * Fără regula de mai jos, asta NU are niciun efect vizual: `[hidden]` din
 * foaia de stil a browserului are aceeași specificitate ca un selector de
 * clasă, iar o foaie de stil de autor bate mereu foaia UA — deci orice
 * `display: flex` de mai jos ar lăsa elementul vizibil.
 *
 * Consecința bug-ului, observată în producție pe 30.07.2026: ecranul de
 * consimțământ, avertismentul, confirmarea de ștergere și indicatorul de
 * scriere se afișau toate simultan, suprapunându-se peste butoane și
 * făcându-le neclicabile.
 *
 * `!important` este justificat aici exact pentru că trebuie să învingă
 * declarațiile `display` din regulile de componentă.
 * ---------------------------------------------------------------------- */

[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Panou principal
 * ---------------------------------------------------------------------- */

.cato-panel {
	position: absolute;
	bottom: 72px;
	width: 380px;
	max-width: calc( 100vw - 40px );
	height: 560px;
	/* Lasă vizibil header-ul magazinului: pe desktop nu depășim 72% din
	   înălțimea ecranului. Constatare din testul pe cato.ro — panoul de 600px
	   acoperea meniul principal. */
	max-height: min( 560px, calc( 100vh - 200px ) );
	background: var( --cato-bg );
	border: 1px solid var( --cato-border );
	border-radius: var( --cato-radius );
	box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.22 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cato-pos-right .cato-panel {
	right: 0;
}

.cato-pos-left .cato-panel {
	left: 0;
}

/* -------------------------------------------------------------------------
 * Formularul de verificare a comenzii
 *
 * Aceste reguli lipseau complet până la 30.07.2026: formularul se adăuga
 * corect în DOM, dar fără nicio regulă de layout — inputurile se randau
 * nestilizate și practic invizibile în bula de mesaj. Simptomul era un bot
 * care spunea „ți-am afișat formularul" fără să se vadă nimic.
 *
 * Lecția, notată aici pentru viitor: orice element nou creat din JavaScript
 * are nevoie de o regulă corespondentă în această foaie. Într-un Shadow DOM
 * nu există stiluri moștenite de la temă care să salveze aparențele.
 * ---------------------------------------------------------------------- */

.cato-verify {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var( --cato-bg-muted );
	border: 1px solid var( --cato-border );
	border-radius: 10px;
}

.cato-verify-step {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cato-verify-step > span {
	font-size: 13px;
	line-height: 1.45;
	color: var( --cato-text );
}

.cato-verify-input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	font-size: 14px;
	font-family: inherit;
	color: var( --cato-text );
	background: var( --cato-bg );
	border: 1px solid var( --cato-border );
	border-radius: 8px;
}

.cato-verify-input:focus-visible {
	outline: 2px solid var( --cato-accent );
	outline-offset: 1px;
	border-color: var( --cato-accent );
}

.cato-verify .cato-btn {
	align-self: flex-start;
}

.cato-verify-status {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var( --cato-text-muted );
}

/* Mesaj de confirmare — verde, nu roșu.
   `cato-message-system` era folosit și pentru succes și pentru avertisment,
   deci „Identitatea a fost verificată" apărea într-o casetă de alertă. */
.cato-message-success {
	align-self: center;
	background: #e7f6ec;
	color: #1c5c33;
	border-radius: 10px;
	padding: 6px 10px;
	font-size: 12.5px;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Antet
 * ---------------------------------------------------------------------- */

.cato-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	background: var( --cato-primary );
	color: #fff;
	flex: 0 0 auto;
}

.cato-header-info {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.cato-logo {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.cato-bot-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cato-status-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: transparent;
	flex: 0 0 auto;
}

.cato-status-dot.cato-status-online {
	background: #4caf50;
}

.cato-status-dot.cato-status-offline {
	background: #9e9e9e;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

.cato-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.cato-icon-btn {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cato-icon-btn:hover {
	background: rgba( 255, 255, 255, 0.15 );
}

.cato-icon-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.cato-icon-trash {
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top: none;
	border-radius: 0 0 3px 3px;
	display: block;
}

/* -------------------------------------------------------------------------
 * Ecran de consimțământ
 * ---------------------------------------------------------------------- */

.cato-consent {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 18px 16px;
	overflow-y: auto;
}

.cato-consent-text p {
	margin: 0 0 10px;
	color: var( --cato-text );
}

.cato-consent-text a {
	color: var( --cato-primary );
	text-decoration: underline;
}

.cato-consent-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}

/* -------------------------------------------------------------------------
 * Corp — mesaje
 * ---------------------------------------------------------------------- */

.cato-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.cato-messages {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var( --cato-bg-muted );
}

.cato-message {
	max-width: 85%;
	display: flex;
}

.cato-message-bubble {
	padding: 9px 12px;
	border-radius: 12px;
	word-break: break-word;
}

.cato-message-user {
	align-self: flex-end;
}

.cato-message-user .cato-message-bubble {
	background: var( --cato-primary );
	color: #fff;
	border-bottom-right-radius: 3px;
}

.cato-message-bot {
	align-self: flex-start;
}

.cato-message-bot .cato-message-bubble {
	background: #fff;
	border: 1px solid var( --cato-border );
	border-bottom-left-radius: 3px;
}

.cato-message-bot .cato-message-bubble p {
	margin: 0 0 6px;
}

.cato-message-bot .cato-message-bubble p:last-child {
	margin-bottom: 0;
}

.cato-message-bot .cato-message-bubble ul {
	margin: 0 0 6px;
	padding-left: 18px;
}

.cato-message-bot .cato-message-bubble a {
	color: var( --cato-primary );
	text-decoration: underline;
}

.cato-message-system {
	align-self: center;
	background: #fbe9e7;
	color: #6d3a1a;
	border-radius: 10px;
	padding: 6px 10px;
	font-size: 12.5px;
	max-width: 100%;
}

.cato-message-action,
.cato-message-card {
	align-self: stretch;
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Indicator de scriere
 * ---------------------------------------------------------------------- */

.cato-typing {
	display: flex;
	gap: 4px;
	padding: 6px 14px 10px;
	background: var( --cato-bg-muted );
}

.cato-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --cato-text-muted );
	animation: cato-blink 1.2s infinite ease-in-out;
}

.cato-dot:nth-child( 2 ) {
	animation-delay: 0.2s;
}

.cato-dot:nth-child( 3 ) {
	animation-delay: 0.4s;
}

@keyframes cato-blink {
	0%, 80%, 100% {
		opacity: 0.25;
		transform: translateY( 0 );
	}
	40% {
		opacity: 1;
		transform: translateY( -2px );
	}
}

/* -------------------------------------------------------------------------
 * Butoane rapide
 * ---------------------------------------------------------------------- */

/*
 * TOATE BUTOANELE VIZIBILE, ÎN CÂT MAI PUȚINE RÂNDURI.
 *
 * Două încercări greșite înainte de asta, în direcții opuse:
 *  1. `flex-wrap: wrap` cu etichete lungi → trei rânduri, care mâncau jumătate
 *     din zona de conversație; clientul trebuia să deruleze în sus ca să
 *     citească răspunsul primit.
 *  2. un singur rând derulabil pe orizontală → înălțime constantă, dar se
 *     vedeau doar trei butoane din șase, iar restul erau practic ascunse.
 *
 * Soluția nu era la felul cum se așază butoanele, ci la CÂT LOC OCUPĂ FIECARE.
 * Cu etichete scurte și chipuri compacte, toate șase încap în două rânduri:
 * nimic ascuns, nimic derulat, zona de conversație rămâne întreagă.
 */
.cato-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 8px 12px;
	border-top: 1px solid var( --cato-border );
	background: #fff;
}

.cato-chip {
	flex: 0 0 auto;
	white-space: nowrap;
	border: 1px solid var( --cato-border );
	background: #fff;
	border-radius: 999px;
	padding: 5px 10px;
	font-size: 11.5px;
	line-height: 1.35;
	cursor: pointer;
	color: var( --cato-text );
}

.cato-chip:hover {
	border-color: var( --cato-primary );
}

.cato-chip:focus-visible {
	outline: 2px solid var( --cato-accent );
	outline-offset: 1px;
}

/*
 * Chip secundar („Conversație nouă"): aceeași formă, dar vizibil ca acțiune de
 * altă natură. Butoanele obișnuite trimit o întrebare către asistent; acesta
 * șterge conversația. Fără diferențiere, ar arăta ca încă o întrebare rapidă și
 * ar fi apăsat din greșeală — de aceea are fundal stins și e împins la capătul
 * rândului, dincolo de întrebările propriu-zise.
 */
.cato-chip-secondary {
	/* Fără `margin-left: auto`: într-un rând derulabil ar împinge butonul la o
	   distanță arbitrară de restul, lăsând un gol vizual în mijloc. */
	background: var( --cato-bg-muted );
	color: var( --cato-text-muted );
	border-style: dashed;
}

.cato-chip-secondary:hover {
	color: var( --cato-text );
	border-style: solid;
}

.cato-chip:disabled {
	opacity: 0.5;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Avertisment (date sensibile, erori)
 * ---------------------------------------------------------------------- */

.cato-warning {
	margin: 0 14px 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #fdecea;
	border: 1px solid #f4c7c3;
	color: var( --cato-danger );
	font-size: 12.5px;
}

/* -------------------------------------------------------------------------
 * Confirmare ștergere conversație
 * ---------------------------------------------------------------------- */

.cato-delete-confirm {
	margin: 0 14px 10px;
	padding: 10px;
	border-radius: 8px;
	background: #fff8e1;
	border: 1px solid #ffe082;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 12.5px;
}

.cato-delete-confirm-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

/* -------------------------------------------------------------------------
 * Compozitor
 * ---------------------------------------------------------------------- */

.cato-composer {
	border-top: 1px solid var( --cato-border );
	padding: 10px 14px 12px;
	background: #fff;
	flex: 0 0 auto;
}

.cato-input {
	width: 100%;
	resize: none;
	border: 1px solid var( --cato-border );
	border-radius: 10px;
	padding: 8px 10px;
	font-family: inherit;
	font-size: 13.5px;
	min-height: 40px;
	max-height: 100px;
	color: var( --cato-text );
	background: #fff;
}

.cato-input:focus-visible {
	outline: 2px solid var( --cato-accent );
	outline-offset: 1px;
}

.cato-composer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}

.cato-char-count {
	font-size: 11px;
	color: var( --cato-text-muted );
}

.cato-char-count-limit {
	color: var( --cato-danger );
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Butoane generice
 * ---------------------------------------------------------------------- */

.cato-btn {
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.cato-btn:focus-visible {
	outline: 2px solid var( --cato-accent );
	outline-offset: 2px;
}

.cato-btn-primary {
	background: var( --cato-primary );
	color: #fff;
}

.cato-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cato-btn-secondary {
	background: #fff;
	color: var( --cato-text );
	border: 1px solid var( --cato-border );
}

.cato-btn-danger {
	background: var( --cato-danger );
	color: #fff;
}

.cato-send-btn {
	min-width: 84px;
}

/* -------------------------------------------------------------------------
 * Carduri de produs
 * ---------------------------------------------------------------------- */

.cato-product-card {
	background: #fff;
	border: 1px solid var( --cato-border );
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	gap: 10px;
	padding: 10px;
}

.cato-product-image {
	width: 76px;
	height: 96px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
	background: var( --cato-bg-muted );
}

.cato-product-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cato-product-name {
	font-size: 13.5px;
	margin: 0;
	font-weight: 600;
}

.cato-product-price {
	margin: 0;
	font-weight: 600;
	color: var( --cato-primary );
}

.cato-product-availability {
	margin: 0;
	font-size: 12px;
	color: var( --cato-text-muted );
}

.cato-product-benefits {
	margin: 2px 0;
	padding-left: 16px;
	font-size: 12px;
	color: var( --cato-text-muted );
}

.cato-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.cato-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cato-add-to-cart-confirm {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	flex-wrap: wrap;
}

.cato-add-to-cart-success {
	margin: 0;
	color: var( --cato-success );
	font-size: 12px;
}

/* -------------------------------------------------------------------------
 * Accesibilitate — mișcare redusă
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.cato-toggle,
	.cato-dot {
		animation: none !important;
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * Temă întunecată
 * ---------------------------------------------------------------------- */

@media ( prefers-color-scheme: dark ) {
	.cato-root {
		--cato-bg: #1e1d1b;
		--cato-bg-muted: #17171566;
		--cato-border: #3a3733;
		--cato-text: #f2f0ec;
		--cato-text-muted: #b5b0a8;
	}

	.cato-root {
		color: var( --cato-text );
	}

	.cato-messages {
		background: #17171f0d;
		background: #151412;
	}

	.cato-message-bot .cato-message-bubble {
		background: #26241f;
		color: var( --cato-text );
	}

	.cato-input,
	.cato-composer,
	.cato-quick-replies,
	.cato-product-card,
	.cato-chip {
		background: #201f1c;
		color: var( --cato-text );
	}

	.cato-chip {
		border-color: var( --cato-border );
	}

	/* Pe fundal întunecat, „stins" înseamnă mai închis, nu mai deschis. */
	.cato-chip-secondary {
		background: #1a1917;
		color: var( --cato-text-muted );
	}
}

/* -------------------------------------------------------------------------
 * Mobil — ecran complet sub 480px
 * ---------------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.cato-root {
		bottom: calc( 12px + var( --cato-bottom-offset ) + env( safe-area-inset-bottom, 0px ) );
		right: 12px;
		left: 12px;
	}

	.cato-panel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.cato-toggle {
		position: fixed;
		bottom: calc( 16px + var( --cato-bottom-offset ) + env( safe-area-inset-bottom, 0px ) );
	}

	/*
	 * Pe mobil panoul ocupă tot ecranul, deci butonul rotund de deschidere ar
	 * rămâne plutind PESTE conversație — raportat de magazin, 30.07.2026.
	 * Pe desktop butonul rămâne vizibil: acolo panoul e o fereastră ancorată
	 * deasupra lui, nu îl acoperă, iar prezența butonului ajută la închidere.
	 */
	.cato-root.is-open .cato-toggle {
		display: none;
	}

	.cato-pos-right .cato-toggle {
		right: 16px;
	}

	.cato-pos-left .cato-toggle {
		left: 16px;
	}
}

/* Butoane de acțiune după verificarea comenzii. */
.cato-order-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
	background: var( --cato-bg-muted );
	border: 1px solid var( --cato-border );
	border-radius: 10px;
}

.cato-order-actions-title {
	font-size: 12.5px;
	font-weight: 600;
	color: var( --cato-text );
}

.cato-order-actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cato-order-actions-row .cato-chip:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Cardul de coș, afișat după adăugarea unui produs. */
.cato-cart-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var( --cato-bg-muted );
	border: 1px solid var( --cato-border );
	border-radius: 10px;
}

.cato-cart-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var( --cato-text );
}

.cato-cart-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cato-cart-card-actions .cato-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

/* Cardul de preluare de către operator. */
.cato-handoff-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	padding: 12px;
	background: var( --cato-bg-muted );
	border: 1px solid var( --cato-border );
	border-radius: 10px;
}

.cato-handoff-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var( --cato-text );
}

.cato-handoff-card .cato-btn {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.cato-handoff-card-ref {
	font-size: 11.5px;
	color: var( --cato-text-muted );
}

/* -------------------------------------------------------------------------
 * Cardul de preluare de către operator — variantă lizibilă.
 *
 * Prima versiune moștenea `.cato-message-card`, care aliniază conținutul pe
 * orizontală: titlul, butonul și referința se înghesuiau pe un singur rând, iar
 * butonul devenea aproape necitibil. Selectoarele de mai jos sunt intenționat
 * mai specifice, ca să câștige fără `!important`.
 * ---------------------------------------------------------------------- */

.cato-message.cato-handoff-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 14px;
	background: var( --cato-bg-muted );
	border: 1px solid var( --cato-border );
	border-radius: 12px;
}

.cato-message.cato-handoff-card .cato-handoff-card-title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --cato-text );
}

.cato-message.cato-handoff-card .cato-handoff-card-ref {
	font-size: 11.5px;
	line-height: 1.4;
	color: var( --cato-text-muted );
}

/* Butonul WhatsApp: verdele oficial al serviciului, lățime completă, țintă de
   atingere confortabilă pe mobil (minim 44px, conform WCAG). */
.cato-btn-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #25d366;
	border: none;
	border-radius: 10px;
	box-sizing: border-box;
	transition: background 0.15s ease, transform 0.15s ease;
}

.cato-btn-whatsapp::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-color: #fff;
	-webkit-mask: var( --cato-whatsapp-icon ) center / contain no-repeat;
	mask: var( --cato-whatsapp-icon ) center / contain no-repeat;
}

.cato-btn-whatsapp:hover,
.cato-btn-whatsapp:focus-visible {
	background: #1ebe5b;
	color: #fff;
}

.cato-btn-whatsapp:focus-visible {
	outline: 3px solid var( --cato-accent );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.cato-btn-whatsapp {
		transition: none;
	}
}