/* Abarai Info Cards — v1.0.10
 * Culorile / fonturile se pot schimba din tema ta cu variabile:
 *   .abrc { --abrc-bg:#fff; --abrc-font-heading:"Cardiff",serif; }
 * Layout-ul se adaptează la LĂȚIMEA CONTAINERULUI (container queries), nu la ecran:
 *   >= 1200px  text lateral + diamant de carduri
 *   >= 790px   diamant de carduri, text deasupra
 *   <  790px   grid 2x2 + panou dedesubt (tap)
 */

.abrc {
	--abrc-ink: #2e2462;
	--abrc-violet: #7b5cf0;
	--abrc-violet-d: #6a48e8;
	--abrc-gold: #f2c230;
	--abrc-lav: #eeeafb;
	--abrc-muted: #5a4e93;
	--abrc-line: #cfc8f3;
	--abrc-bg: #a7a1e6;
	--abrc-ring: rgba(243, 241, 253, 0.8); /* cercul punctat din jurul panoului */
	--abrc-font-heading: Cardiff, Fraunces, Georgia, serif;
	--abrc-font-body: Montserrat, "Segoe UI", system-ui, sans-serif;

	container: abrc / inline-size;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	padding: clamp(20px, 4vw, 48px);
	background: var(--abrc-bg);
	color: var(--abrc-ink);
	border-radius: 28px;
	font-family: var(--abrc-font-body);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

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

/* ---------- Decor de fundal ---------- */
.abrc .abrc-deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: none; /* apare doar pe layout-ul lat, ca să nu acopere textul */
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.abrc[data-active="payments"] .abrc-deco--payments,
.abrc[data-active="risks"] .abrc-deco--risks {
	opacity: 1;
}

/* ---------- Butonul de comutare (dreapta jos; arată mereu celălalt slide) ----------
 * Regulile de aici folosesc .abrc.abrc (specificitate mărită) + !important DOAR pe proprietățile
 * pe care temele (WoodMart/Elementor) le suprascriu de obicei pe <button>. */
.abrc .abrc-switchbar {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end; /* dreapta jos */
	margin: clamp(20px, 3vw, 36px) 0 0;
	padding: 0;
}
.abrc[data-active="payments"] .abrc-switch[data-target="payments"],
.abrc[data-active="risks"] .abrc-switch[data-target="risks"] {
	display: none !important;
}
.abrc.abrc .abrc-switch,
.abrc.abrc .abrc-switch:hover,
.abrc.abrc .abrc-switch:focus,
.abrc.abrc .abrc-switch:active {
	appearance: none !important;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 13px 26px !important;
	border: 2.5px solid var(--abrc-ink) !important;
	border-radius: 999px !important;
	background: var(--abrc-btn, #391E56) !important;
	color: #fff !important;
	font: 700 16px/1.2 var(--abrc-font-body) !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Fără efect la hover */
.abrc.abrc .abrc-switch:hover,
.abrc.abrc .abrc-switch:focus-visible {
	transform: none;
	box-shadow: none !important;
}
/* La apăsare: text alb */
.abrc.abrc .abrc-switch:active {
	color: #fff !important;
}
.abrc.abrc .abrc-switch:focus-visible,
.abrc .abrc-card:focus-visible {
	outline: 3px dashed var(--abrc-ink);
	outline-offset: 6px;
}
.abrc .abrc-switch .abrc-arrow {
	flex: none;
	display: block;
}

/* ---------- Track + slide-uri (toate în aceeași celulă => fără salturi de înălțime) ---------- */
.abrc .abrc-track {
	position: relative;
	z-index: 1;
	display: grid;
	touch-action: pan-y;
}

.abrc .abrc-slide {
	grid-area: 1 / 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(24px, 4vw, 48px);
	visibility: hidden;
	opacity: 0;
	transform: translateX(28px);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}
/* Compact: slide-ul inactiv nu ocupă loc (altfel containerul ia înălțimea celui mai înalt slide => gol mare pe telefon) */
.abrc .abrc-slide:not(.abrc-is-active) {
	position: absolute;
	grid-area: auto;
	top: 0;
	left: 0;
	right: 0;
}
.abrc .abrc-slide.abrc-is-active {
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

/* Variabile per slide */
.abrc .abrc-slide[data-mode="payments"] {
	--cw: 168px;
	--pw: 360px;
	--ph: 372px;
	--ppad: 30px 32px;
	--gx: 16px;
	--gy: 24px;
	--ns-w: 168px;
	--ns-h: 140px;
	--we-w: 168px;
	--we-h: 140px;
	--ell-x: 34px;
	--ell-y: 50px;
}
.abrc .abrc-slide[data-mode="risks"] {
	--cw: 208px;
	--pw: 290px;
	--ph: 300px;
	--ppad: 26px 24px;
	--gx: 20px;
	--gy: 20px;
	--ns-w: 240px;
	--ns-h: 192px;
	--we-w: 208px;
	--we-h: 210px;
	--ell-x: 70px;
	--ell-y: 60px;
}

/* ---------- Text lateral ---------- */
.abrc .abrc-copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 640px;
}
.abrc .abrc-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font: 700 15px/1.2 var(--abrc-font-body);
	letter-spacing: 0.12em;
	color: var(--abrc-ink);
}
.abrc .abrc-eyebrow--line::after {
	content: "";
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--abrc-gold);
}
.abrc .abrc-h {
	margin: 0;
	padding: 0;
	font-family: var(--abrc-font-heading);
	font-weight: 800;
	font-size: clamp(30px, 6.4cqw, 54px);
	line-height: 1.06;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--abrc-ink);
}
.abrc .abrc-hl {
}
.abrc .abrc-copy p {
	margin: 0;
	padding: 0;
	font-size: clamp(16px, 2.4cqw, 18px);
	line-height: 1.55;
	color: var(--abrc-ink);
}
.abrc .abrc-art {
	display: none;
	width: 100%;
	max-width: 520px;
	height: auto;
	margin: 8px 0 0;
}

/* ---------- Scena: carduri + panou ---------- */
.abrc .abrc-stage {
	position: relative;
	width: 100%;
	max-width: 100%;
}

/* Bază = compact: grid 2x2 + panou dedesubt */
.abrc .abrc-orbit {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
	justify-items: stretch;
}

.abrc.abrc .abrc-card,
.abrc.abrc .abrc-card:hover,
.abrc.abrc .abrc-card:focus,
.abrc.abrc .abrc-card:active {
	appearance: none !important;
	position: relative;
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--abrc-ink) !important;
	font: inherit;
	letter-spacing: normal !important;
	text-align: center;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: normal !important; /* temele pun adesea nowrap pe <button> => textul ieșea din card */
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.abrc .abrc-face {
	position: relative;
	flex: 1;
	min-height: 116px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 10px;
	background: #fff;
	border: 2.5px solid var(--abrc-ink);
	border-radius: 22px;
	box-shadow: 4px 4px 0 var(--abrc-ink);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
.abrc .abrc-card.abrc-is-on .abrc-face {
	transform: translateY(-6px);
	border-color: var(--abrc-violet-d);
	border-width: 3px;
	box-shadow: 6px 9px 0 var(--abrc-ink);
}
/* Metode de plată: fără efect la hover, border #391E56 (și pe cardul activ) */
.abrc .abrc-slide[data-mode="payments"] .abrc-face,
.abrc .abrc-slide[data-mode="payments"] .abrc-card.abrc-is-on .abrc-face,
.abrc .abrc-slide[data-mode="payments"] .abrc-card:hover .abrc-face {
	border-color: #391E56;
	border-width: 2.5px;
}
@media (hover: hover) {
	.abrc .abrc-slide[data-mode="risks"] .abrc-card:hover .abrc-face {
		transform: translateY(-6px);
		border-color: var(--abrc-violet-d);
		border-width: 3px;
		box-shadow: 6px 9px 0 var(--abrc-ink);
	}
}

.abrc .abrc-ico {
	flex: none;
	width: 64px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--abrc-ink);
	border-radius: 14px;
	background: var(--abrc-lav);
}
.abrc .abrc-ico svg {
	display: block;
	width: 44px;
	height: auto;
}
.abrc .abrc-ico--pay {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
}
.abrc .abrc-ico--pay svg {
	width: auto;
	height: 44px;
	max-width: 100px;
}

.abrc .abrc-card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--abrc-ink);
}
.abrc .abrc-slide[data-mode="payments"] .abrc-card-title {
	font-size: 17px;
}
.abrc .abrc-card-desc {
	font-size: 13px;
	line-height: 1.4;
	color: #3e3474;
}

.abrc .abrc-rays,
.abrc .abrc-peek {
	position: absolute;
	pointer-events: none;
	opacity: 0;
}
.abrc .abrc-rays {
	left: -14px;
	top: -14px;
	transform: scale(0.6);
	transform-origin: 100% 100%;
	transition: opacity 0.2s ease, transform 0.25s ease;
}
.abrc .abrc-peek {
	right: -10px;
	top: -22px;
	transform: translateY(16px) rotate(-30deg) scale(0.5);
	transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.abrc .abrc-card.abrc-is-on .abrc-rays {
	opacity: 1;
	transform: scale(1);
}
.abrc .abrc-card.abrc-is-on .abrc-peek {
	opacity: 1;
	transform: translateY(0) rotate(0) scale(0.8);
}

/* ---------- Panoul central ---------- */
.abrc .abrc-pbox {
	grid-column: 1 / -1;
	position: relative;
	display: grid;
	min-width: 0;
	padding: var(--ppad);
	background: #fff;
	border: 2.5px solid var(--abrc-ink);
	border-radius: 24px;
	box-shadow: 6px 6px 0 var(--abrc-ink);
}
.abrc .abrc-panel {
	grid-area: 1 / 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.abrc .abrc-panel.abrc-is-on {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	animation: abrc-fadeup 0.28s ease-out both;
}
.abrc .abrc-panel--pay {
	gap: 14px;
	align-items: flex-start;
	text-align: left;
}
.abrc .abrc-panel--risk {
	gap: 12px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.abrc .abrc-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	color: var(--abrc-muted);
}
.abrc .abrc-ptitle {
	margin: 0;
	font-family: var(--abrc-font-heading);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.08;
	color: var(--abrc-ink);
}
.abrc .abrc-panel--risk .abrc-ptitle {
	font-size: 26px;
	line-height: 1.1;
}
.abrc .abrc-panel--risk[data-id="default"] {
	gap: 10px;
}
.abrc .abrc-panel--risk[data-id="default"] .abrc-ptitle {
	font-size: 36px;
	line-height: 1;
}
.abrc .abrc-pdesc {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--abrc-ink);
}
.abrc .abrc-panel--risk .abrc-pdesc {
	line-height: 1.45;
}
.abrc .abrc-bigico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 80px;
	margin: 4px 0;
	border: 2.5px solid var(--abrc-ink);
	border-radius: 20px;
	background: var(--abrc-lav);
	transform: scale(1.1);
}
.abrc .abrc-bigico svg {
	display: block;
	width: 54px;
	height: auto;
}
.abrc .abrc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.abrc .abrc-chip {
	padding: 5px 12px;
	border: 2px solid var(--abrc-ink);
	border-radius: 999px;
	background: #f1effc;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}
.abrc .abrc-sep {
	width: 100%;
	height: 0;
	border-top: 2px dashed var(--abrc-line);
}
.abrc .abrc-bullets {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.abrc .abrc-bullets li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}
.abrc .abrc-bullets li::before {
	content: none;
}
.abrc .abrc-bullets svg {
	flex: none;
}

/* Wobble / pulse pentru scut */
.abrc .abrc-wob {
	animation: abrc-wob 2.6s ease-in-out infinite;
	transform-origin: 50% 90%;
}
.abrc .abrc-pulse {
	animation: abrc-pulse 1.6s ease-in-out infinite;
	transform-origin: center;
	transform-box: fill-box;
}
@keyframes abrc-fadeup {
	0% { opacity: 0; transform: translateY(6px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes abrc-wob {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-4deg); }
	75% { transform: rotate(4deg); }
}
@keyframes abrc-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.85); }
}

/* Pe ecrane foarte înguste, descrierea rămâne doar în panou */
@container abrc (max-width: 789px) {
	.abrc .abrc-slide[data-mode] { --ppad: 22px 20px; }
}

@container abrc (max-width: 519px) {
	.abrc .abrc-eyebrow--line::after { display: none; }
	.abrc .abrc-card-desc { display: none; }
	.abrc .abrc-orbit { gap: 14px; }
	.abrc.abrc .abrc-switch { padding: 11px 20px !important; font-size: 15px !important; }
	.abrc .abrc-ptitle { font-size: 26px; }
}

/* ---------- >= 790px: diamant în jurul panoului ---------- */
@container abrc (min-width: 790px) {
	.abrc .abrc-stage {
		width: max-content;
		max-width: 100%;
	}
	.abrc .abrc-stage::before {
		content: "";
		position: absolute;
		inset: var(--ell-y) var(--ell-x);
		border: 2px dashed var(--abrc-ring);
		border-radius: 50%;
		pointer-events: none;
	}
	.abrc .abrc-orbit {
		grid-template-areas: ". n ." "w c e" ". s .";
		grid-template-columns: var(--cw) var(--pw) var(--cw);
		grid-template-rows: auto auto auto;
		column-gap: var(--gx);
		row-gap: var(--gy);
		align-items: center;
		justify-items: center;
		justify-content: center;
	}
	.abrc .abrc-card[data-pos="n"] { grid-area: n; width: var(--ns-w); height: var(--ns-h); }
	.abrc .abrc-card[data-pos="s"] { grid-area: s; width: var(--ns-w); height: var(--ns-h); }
	.abrc .abrc-card[data-pos="w"] { grid-area: w; width: var(--we-w); height: var(--we-h); }
	.abrc .abrc-card[data-pos="e"] { grid-area: e; width: var(--we-w); height: var(--we-h); }
	.abrc .abrc-face {
		position: absolute;
		inset: 0;
		min-height: 0;
		gap: 10px;
		padding: 18px 16px;
	}
	.abrc .abrc-slide[data-mode="risks"] .abrc-face { gap: 8px; }
	.abrc .abrc-rays { left: -26px; top: -24px; }
	.abrc .abrc-peek { right: -22px; top: -30px; }
	.abrc .abrc-card.abrc-is-on .abrc-peek { transform: translateY(0) rotate(0) scale(1); }
	.abrc .abrc-pbox {
		grid-area: c;
		grid-column: auto;
		width: var(--pw);
		min-height: var(--ph);
		box-shadow: 8px 8px 0 var(--abrc-ink);
	}
	.abrc .abrc-ptitle { font-size: 34px; line-height: 1.05; }
	.abrc .abrc-panel--risk .abrc-ptitle { font-size: 26px; line-height: 1.1; }
	.abrc .abrc-panel--risk[data-id="default"] .abrc-ptitle { font-size: 36px; line-height: 1; }
}

/* ---------- >= 1200px: text lateral + diamant ---------- */
@container abrc (min-width: 1200px) {
	/* Lat: ambele slide-uri au aceeași înălțime (diamantul) => celulă comună, butonul nu sare */
	.abrc .abrc-slide:not(.abrc-is-active) {
		position: static;
		grid-area: 1 / 1;
	}
	.abrc .abrc-deco { display: block; }
	.abrc .abrc-slide {
		flex-direction: row;
		justify-content: center; /* text + diamant lipite, centrate (nu împinse la margini) */
		gap: 48px;
		width: 100%;
		max-width: 1360px;
		margin-inline: auto;
	}
	.abrc .abrc-slide--solo { justify-content: center; }
	.abrc .abrc-copy {
		flex: 0 1 560px;
		min-width: 0;
		max-width: 560px;
	}
	.abrc .abrc-slide[data-mode="risks"] .abrc-copy { order: 2; }
	.abrc .abrc-stage { flex: none; }
	.abrc .abrc-art { display: block; }
	.abrc .abrc-copy p { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.abrc *,
	.abrc *::before,
	.abrc *::after {
		animation: none !important;
		transition: none !important;
	}
}

@media screen and (max-width: 768px) {
	.abrc{max-height:1300px;}
}

/* ---------- Ambele slide-uri: fără umbre, fără ridicare și fără liniuțele colorate la click ---------- */
.abrc .abrc-face,
.abrc .abrc-card.abrc-is-on .abrc-face,
.abrc .abrc-card:hover .abrc-face,
.abrc .abrc-pbox {
	box-shadow: none !important;
	transform: none !important;
}
.abrc .abrc-rays {
	display: none !important;
}

/* Riscuri: border #391E56, fără schimbare la hover / click */
.abrc .abrc-slide[data-mode="risks"] .abrc-face,
.abrc .abrc-slide[data-mode="risks"] .abrc-card.abrc-is-on .abrc-face,
.abrc .abrc-slide[data-mode="risks"] .abrc-card:hover .abrc-face {
	border-color: #391E56;
	border-width: 2.5px;
}