/* ============================================================
 * OREM Rewards Points — Checkout Block
 * ------------------------------------------------------------
 * Visual language extends the OREM Shoptimizer child theme.
 * Primary brand: rose (#b85c7f) — same as dedicatoria block.
 * Accent for the reward icon: warm gold (#d9a13a). The gold
 * differentiates "rewards" (an upside-only signal) from the
 * "purchase action" rose used everywhere else on the checkout.
 *
 * Two distinct presentations driven by viewport:
 *   • Desktop (> 700px): premium card that lives at the bottom
 *     of the order-summary sidebar, below the Total row.
 *   • Mobile  (≤ 700px): compact single-line strip that visually
 *     attaches to the bottom of the collapsed "RESUMEN DEL PEDIDO"
 *     panel — saves vertical real estate, which directly impacts
 *     mobile conversion. The full subtitle/hint is hidden on
 *     mobile and only the headline survives.
 *
 * Everything is namespaced under `.orem-rewards-block` so the
 * styles don't bleed into surrounding WC Blocks chrome.
 * ============================================================ */

.orem-rewards-block {
	--orem-rose:         #b85c7f;
	--orem-rose-deep:    #a4516f;
	--orem-rose-tint:    #fdf7f9;
	--orem-rose-soft:    #f6e6ec;
	--orem-gold:         #d9a13a;
	--orem-gold-soft:    #fbf3df;
	--orem-gold-glow:    rgba(217, 161, 58, 0.32);
	--orem-ink:          #1c1c1c;
	--orem-ink-soft:     #5d5d5d;
	--orem-line:         #ececec;
	--orem-bg:           #ffffff;
	--orem-radius:       14px;
	--orem-radius-sm:    10px;
	--orem-shadow:       0 1px 2px rgba(0, 0, 0, 0.04),
	                     0 8px 24px rgba(184, 92, 127, 0.08);
	--orem-ease:         cubic-bezier(0.16, 1, 0.3, 1);

	/* IMPORTANT: no `overflow: hidden` on this wrapper. The previous
	 * iteration clipped it for a max-height enter/exit transition, but
	 * that same clip silently cut off the info-tooltip dropdown when it
	 * extended below or to the right of the card. The block now relies
	 * on React unmounting (return null) for the hide case — simpler and
	 * doesn't need any wrapper-level overflow gating.
	 *
	 * The `__decoration` sibling owns its own `overflow: hidden` for the
	 * radial-glow and shimmer pseudo-elements that need clipping. */
	margin: 14px 0 4px;
}

/* ---------- Inner card (desktop default) ----------------- */

.orem-rewards-block__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: var(--orem-radius);
	background:
		radial-gradient(140% 140% at 0% 0%, var(--orem-gold-soft) 0%, transparent 40%),
		linear-gradient(180deg, #fff 0%, var(--orem-rose-tint) 100%);
	border: 1.5px solid color-mix(in srgb, var(--orem-gold) 22%, var(--orem-rose-soft));
	box-shadow: var(--orem-shadow);
	/* NOTE: no `overflow: hidden` here on purpose. The shimmer
	 * and gold-glow live on a sibling `.orem-rewards-block__decoration`
	 * span that owns its own overflow clipping. This is what allows
	 * the info-tooltip dropdown to escape the bottom edge of the
	 * card instead of being silently clipped. */
}

/* Sibling decorative layer. Owns the pseudo-elements that need
 * clipping (radial glow + shimmer band). Sits behind the content
 * via z-index, and ignores pointer events so it never intercepts
 * clicks on the icon / info badge. */
.orem-rewards-block__decoration {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

/* Soft gold glow at the icon corner. */
.orem-rewards-block__decoration::before {
	content: "";
	position: absolute;
	top: -40px;
	left: -40px;
	width: 120px;
	height: 120px;
	background: radial-gradient(circle, var(--orem-gold-glow) 0%, transparent 60%);
}

/* Subtle shimmer band that sweeps across once after mount —
 * a tasteful "this is new and rewarding" cue. Capped at one
 * pass so it doesn't become a distraction. */
.orem-rewards-block.is-visible .orem-rewards-block__decoration::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		transparent 0%,
		transparent 35%,
		rgba(255, 255, 255, 0.45) 50%,
		transparent 65%,
		transparent 100%
	);
	transform: translateX(-100%);
	animation: orem-rewards-shimmer 1.6s var(--orem-ease) 0.25s 1 forwards;
}

@keyframes orem-rewards-shimmer {
	to { transform: translateX(100%); }
}

/* Lift the actual content above the decoration layer. */
.orem-rewards-block__icon-wrap,
.orem-rewards-block__body,
.orem-rewards-block__info-wrap,
.orem-rewards-block__sr {
	position: relative;
	z-index: 1;
}

/* ---------- Icon --------------------------------------- */

.orem-rewards-block__icon-wrap {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 30%, #ffffff 0%, var(--orem-gold-soft) 70%);
	color: var(--orem-gold);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--orem-gold) 30%, transparent),
		0 4px 14px rgba(217, 161, 58, 0.22);
}

.orem-rewards-block__icon {
	transform-origin: center;
	animation: orem-rewards-float 4s var(--orem-ease) infinite;
}

@keyframes orem-rewards-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-1.5px) rotate(8deg); }
}

/* ---------- Body / copy --------------------------------- */

.orem-rewards-block__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.orem-rewards-block__lead {
	font-size: 14.5px;
	color: var(--orem-ink);
	line-height: 1.4;
	font-weight: 500;
}

.orem-rewards-block__value {
	color: var(--orem-rose);
	font-weight: 700;
	letter-spacing: 0.2px;
	display: inline-block;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.orem-rewards-block__value.is-pulsing {
	animation: orem-rewards-value-pop 0.65s var(--orem-ease);
}

@keyframes orem-rewards-value-pop {
	0%   { transform: scale(1);    color: var(--orem-rose); }
	30%  { transform: scale(1.10); color: var(--orem-gold); }
	100% { transform: scale(1);    color: var(--orem-rose); }
}

/* ---------- Info tooltip -------------------------------- */

.orem-rewards-block__info-wrap {
	position: relative;
	flex-shrink: 0;
	margin-left: 4px;
	align-self: center;
}

.orem-rewards-block__info-trigger {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--orem-rose) 35%, transparent);
	background: #fff;
	color: var(--orem-rose);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.18s var(--orem-ease),
	            color 0.18s var(--orem-ease),
	            border-color 0.18s var(--orem-ease);
}

.orem-rewards-block__info-trigger:hover,
.orem-rewards-block__info-trigger[aria-expanded="true"] {
	background: var(--orem-rose);
	color: #fff;
	border-color: var(--orem-rose);
}

.orem-rewards-block__info-trigger:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--orem-rose) 35%, transparent);
	outline-offset: 2px;
}

.orem-rewards-block__tooltip {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	z-index: 20;
	width: max-content;
	max-width: 240px;
	padding: 10px 12px;
	border-radius: var(--orem-radius-sm);
	background: var(--orem-ink);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	animation: orem-rewards-tooltip-in 0.18s var(--orem-ease);
	white-space: normal;
	text-align: left;
}

.orem-rewards-block__tooltip::before {
	content: "";
	position: absolute;
	top: -5px;
	right: 8px;
	width: 10px;
	height: 10px;
	background: var(--orem-ink);
	transform: rotate(45deg);
}

@keyframes orem-rewards-tooltip-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * Mobile compact treatment (≤ 700px)
 * ------------------------------------------------------------
 * Under WC Blocks' mobile layout the order summary collapses
 * into a single tiny header row at the top of the page.
 * Vertical space is precious — every extra row pushes the
 * Place-Order button further down the page and degrades the
 * conversion path. This breakpoint swaps the premium card for
 * a single-line strip that visually extends the bottom of the
 * order-summary panel:
 *   • shares its rounded border (top corners squared so it
 *     reads as a continuation, not a separate box),
 *   • overlaps the summary's bottom border via -1px margin,
 *   • drops shadow + most padding,
 *   • hides the secondary hint (the headline is enough).
 * ============================================================ */

@media (max-width: 700px) {
	.orem-rewards-block {
		/* Sits immediately under the order-summary panel — no
		 * extra gap. The negative top margin overlaps the panel's
		 * bottom border by 1px so the two boxes visually fuse. */
		margin: -1px 0 12px;
	}

	.orem-rewards-block__inner {
		gap: 10px;
		padding: 10px 14px;
		/* Top corners squared so the strip reads as a continuation
		 * of the order-summary panel above; bottom corners match
		 * WC Blocks' 12px panel radius for a clean closing edge. */
		border-radius: 0 0 12px 12px;
		/* Top border absent — the order-summary panel's own
		 * bottom border serves as our top separator, avoiding the
		 * "double rule" look. Side + bottom borders match the
		 * panel's #ececec / rgb(236,236,236) exactly (sampled live
		 * from `.wp-block-woocommerce-checkout-order-summary-block`)
		 * so the two boxes register as ONE container. */
		border: 1px solid var(--orem-line);
		border-top: 0;
		/* Drop the gold-tinted gradient on mobile — keep it
		 * crisp white so the rose accent on the points value
		 * pops without competing with the white order-summary
		 * panel tone above. */
		background: #fff;
		box-shadow: none;
	}

	.orem-rewards-block__icon-wrap {
		width: 28px;
		height: 28px;
		box-shadow:
			0 0 0 1px color-mix(in srgb, var(--orem-gold) 25%, transparent),
			0 2px 6px rgba(217, 161, 58, 0.18);
	}

	.orem-rewards-block__icon {
		width: 16px;
		height: 16px;
	}

	.orem-rewards-block__lead {
		font-size: 13px;
		line-height: 1.35;
	}

	.orem-rewards-block__info-trigger {
		width: 20px;
		height: 20px;
		font-size: 11px;
	}

	/* On narrow viewports the tooltip can clip outside the
	 * card; anchor it left-aligned with a tighter width so it
	 * stays on-screen at typical phone widths (360–414px). */
	.orem-rewards-block__tooltip {
		right: 0;
		left: auto;
		max-width: 220px;
		font-size: 11.5px;
	}

	/* Skip the float animation on mobile — the small icon size
	 * makes the rotation feel noisy rather than delightful, and
	 * dropping the keyframe frees the GPU for the WC Blocks
	 * scroll/animations layered above. */
	.orem-rewards-block__icon {
		animation: none;
	}
}

/* ---------- Accessibility helpers ---------------------- */

.orem-rewards-block__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.orem-rewards-block,
	.orem-rewards-block__decoration::after,
	.orem-rewards-block__icon,
	.orem-rewards-block__value.is-pulsing {
		transition-duration: 0.001s !important;
		animation: none !important;
	}
}