/* =========================================================
   TIVOLI — components.css
   Buttons, cards, badges and other reusable UI pieces.
   ========================================================= */

/* ---------- Buttons ---------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: 0.9em 1.7em;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	isolation: isolate;
	overflow: hidden;
	/* ETAP 17C — color was on --dur-fast (0.2s) while .btn__fill's own
	   background wipe (below) animates on --dur-base (0.4s); on
	   .btn--outline (the only variant whose hover changes `color`) the
	   text could flip to cream before the fill caught up, briefly
	   landing cream-on-transparent. Both now share --dur-base so text
	   and fill move together. */
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out);
	will-change: transform;
}

.btn:active {
	transform: scale(0.97);
}

/* ETAP 17C (audyt 17A) — .btn/.badge had no explicit :focus-visible
   anywhere in the theme, relying entirely on the browser default ring,
   which reads as unstyled against a full-bleed pill and can be hard to
   see on dark/gold backgrounds. One shared, on-brand ring for every
   .btn variant everywhere it's used (header, cards, checkout, forms) —
   never removes the outline, only replaces its look; keyboard focus
   remains fully visible everywhere it already was. */
.btn:focus-visible {
	outline: none;
	/* Gold-deep chosen specifically because .btn appears on both light
	   (cream/white) AND dark (green-800/900, e.g. .btn--ghost-light in
	   the homepage final CTA) surfaces — this ring stays legible on
	   both rather than disappearing against one of them. */
	box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 6px var(--color-gold-deep);
}

.btn__fill {
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: translateY(102%);
	transition: transform var(--dur-base) var(--ease-out);
}

.btn--primary {
	background: var(--color-green-700);
	color: var(--color-cream);
	box-shadow: var(--shadow-sm);
}

.btn--primary .btn__fill {
	background: var(--color-green-900);
}

.btn--primary:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.btn--primary:hover .btn__fill {
	transform: translateY(0);
}

.btn--gold {
	background: var(--color-gold);
	color: var(--color-green-900);
	box-shadow: var(--shadow-sm);
}

.btn--gold .btn__fill {
	background: var(--color-gold-deep);
}

.btn--gold:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.btn--gold:hover .btn__fill {
	transform: translateY(0);
}

.btn--outline {
	background: transparent;
	color: var(--color-ink);
	border: 1.5px solid currentColor;
}

.btn--outline:hover {
	color: var(--color-cream);
	border-color: var(--color-green-700);
}

.btn--outline .btn__fill {
	background: var(--color-green-700);
}

.btn--outline:hover .btn__fill {
	transform: translateY(0);
}

.btn--ghost-light {
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-cream);
	border: 1.5px solid rgba(247, 242, 228, 0.4);
	backdrop-filter: blur(6px);
}

.btn--ghost-light:hover {
	border-color: var(--color-cream);
	transform: translateY(-2px);
}

.btn--sm {
	padding: 0.65em 1.3em;
	font-size: 0.85rem;
}

.btn--lg {
	padding: 1.1em 2.2em;
	font-size: 1.05rem;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

/* ---------- Badge / chip ---------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0.9em;
	border-radius: var(--radius-full);
	font-size: var(--fs-small);
	font-weight: 600;
	background: var(--color-green-100);
	color: var(--color-green-800);
}

.badge--gold {
	background: var(--color-gold-soft);
	color: var(--color-gold-deep);
}

.badge--red {
	background: var(--color-red-soft);
	color: var(--color-red);
}

.badge__dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* ETAP 17C (audyt 17A) — status-tone vocabulary, centralized here from
   what were four independent local copies (account.css, panel-admin.css,
   staff-panel.css each had their own; ETAP 16D/16C also added it inline
   to order.css/checkout.css/cart.css for channel availability). Same
   four values everywhere they were already used (colours unchanged —
   this is a dedupe, not a redesign): payment/fulfillment status badges
   (Moje konto, panel admina), P24 status indicator, delivery/location
   status, pickup/delivery channel availability. components.css loads on
   every customer-facing page before any page-specific stylesheet, so
   this single definition reaches all of them; panel-admin.css and
   staff-panel.css keep their own separate copies on purpose (both are
   deliberately self-contained, isolated from this cascade — see their
   own file headers). */
.badge--tone-neutral {
	background: var(--color-cream-deep);
	color: var(--color-text-muted);
}

.badge--tone-attention {
	background: var(--color-gold-soft);
	color: var(--color-gold-deep);
}

.badge--tone-success {
	background: var(--color-green-100);
	color: var(--color-green-800);
}

.badge--tone-error {
	background: var(--color-red-soft);
	color: var(--color-red);
}

/* ---------- Pizza card ---------- */
.pizza-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-cream-soft);
	border-radius: var(--radius-lg);
	padding: var(--space-md);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--dur-base) var(--ease-out);
}

.pizza-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at 50% 20%, rgba(199, 154, 68, 0.16), transparent 60%);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
	pointer-events: none;
}

.pizza-card:hover {
	box-shadow: var(--shadow-lg);
}

.pizza-card:hover::before {
	opacity: 1;
}

.pizza-card__media {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--color-green-900);
	margin-bottom: var(--space-md);
}

.pizza-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}

.pizza-card:hover .pizza-card__media img {
	transform: scale(1.08) rotate(-1deg);
}

/* Whole-pizza product photos (assets/images/pizzas/…) — shown in full,
   never cropped. `object-fit: contain` needs the source image visible
   in its entirety; the padding gives every photo the same breathing
   room against the dark backdrop regardless of how tightly each
   individual source file is cropped, so they all read as the same
   scale next to each other. Only applied where the markup opts in
   (photos still using an existing uploads-based photo keep the
   original cover-crop treatment untouched). */
.pizza-card__media--contain {
	padding: 6%;
}

.pizza-card__media--contain img {
	object-fit: contain;
}

/* Empty state — shown while a highlighted item is waiting on a photo.
   Swapping in an image later (inc/menu-data.php `image` field) is all
   that's needed to replace this with the real photo. */
.pizza-card__media-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(247, 242, 228, 0.35);
}

.pizza-card__media-empty svg {
	width: 2.5rem;
	height: 2.5rem;
}

.pizza-card__badge {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 2;
}

/**
 * "Zdjęcie poglądowe." — pod zdjęciem pizzy w Menu (.pizza-card__media)
 * i w Zamów online (.order-card__media, assets/css/order.css). Reguła
 * żyje wyłącznie tu, bo components.css jest ładowany na KAŻDEJ stronie
 * (inc/enqueue.php) — order.css tylko na /zamow-online/ — więc jedna
 * reguła tutaj wystarcza obu sekcjom, bez duplikowania jej w order.css.
 * Świadomie mniejsza niż .pizza-card__desc/.order-card__desc (składniki)
 * i .pizza-card__name/.order-card__name (nazwa), ten sam stonowany
 * kolor co składniki -- nie ma dominować.
 */
.pizza-photo-caption {
	margin: 0 0 var(--space-2xs);
	font-size: 0.7rem;
	line-height: 1.3;
	color: var(--color-text-muted);
}

.pizza-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	flex: 1;
}

.pizza-card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
}

.pizza-card__name {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 600;
}

.pizza-card__price {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-green-700);
	white-space: nowrap;
}

.pizza-card__desc {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* ETAP 17D (§11) — each card had zero individual call-to-action; the
   only ways to actually order lived elsewhere on the page (hero/final
   CTA). Small text link, not a full .btn, so it doesn't compete with
   the primary hero/final CTAs — reuses the same live order URL as
   every other "Zamów online" link on the page (tivoli_order_online_url()). */
.pizza-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: var(--space-2xs);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-green-700);
}

.pizza-card__cta svg {
	width: 1em;
	height: 1em;
	transition: transform var(--dur-fast) var(--ease-out);
}

.pizza-card:hover .pizza-card__cta svg {
	transform: translateX(3px);
}

.pizza-card__cta:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 6px var(--color-gold-deep);
	border-radius: var(--radius-sm);
}

/* ---------- Location card ---------- */
/* No more photo background here on purpose: the pizza photo behind each
   card made the address/hours/phone text hard to read against it. Same
   card shape/radius/shadow, but the surface itself is now a dark,
   near-black-to-green gradient — not a flat single green — echoing the
   dark green that used to gather at the bottom of the old photo scrim. */
.location-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	color: var(--color-cream);
	box-shadow: var(--shadow-md);
	background: linear-gradient(165deg, #0b0f0d 0%, #0e1a13 42%, var(--color-green-900) 78%, var(--color-green-800) 100%);
}

.location-card__content {
	position: relative;
	z-index: 2;
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.location-card__name {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	color: var(--color-cream);
}

.location-card__meta {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	color: rgba(247, 242, 228, 0.85);
	font-size: 0.95rem;
}

.location-card__meta a {
	color: var(--color-gold-soft);
	transition: color var(--dur-fast) var(--ease-out);
}

.location-card__meta a:hover {
	color: var(--color-cream);
}

/* ETAP 17D (audyt 17A, §8) — the two location cards read as visually
   near-identical (same layout/photo treatment); this short label above
   the name gives an instant, scannable "which location am I looking
   at" cue without introducing a second colour system. */
.location-card__eyebrow {
	color: var(--color-gold-soft);
}

.location-card__status {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-top: var(--space-2xs);
}

.location-card__channels {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

/* ---------- Icon circle ---------- */
.icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--color-green-100);
	color: var(--color-green-700);
	flex-shrink: 0;
}

.icon-circle svg {
	width: 1.4rem;
	height: 1.4rem;
}

/* ---------- Divider dot ---------- */
.dot-divider {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

/* ---------- Promo card ---------- */
.promo-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-green-800);
	color: var(--color-cream);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: stretch;
	min-height: 280px;
	box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
	.promo-card {
		grid-template-columns: 1fr;
	}
}

.promo-card__content {
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	justify-content: center;
}

.promo-card__media {
	position: relative;
	overflow: hidden;
	min-height: 220px;
}

.promo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-green-800) 0%, transparent 22%);
}

@media (max-width: 768px) {
	.promo-card__media::after {
		background: linear-gradient(0deg, var(--color-green-800) 0%, transparent 30%);
	}
}

.promo-card__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
}