/* ==========================================================================
   Zavana Events — theme skin
   Loaded after frontend.css. Nothing here changes markup or behaviour.

   The upstream stylesheet is heavily tokenised (129 var() references), so most
   of this is a remap of its own custom properties onto the Zavana theme's.
   Only the handful of components the design actually speaks about — event
   cards, buttons, the date chip, the hero — get bespoke rules.

   Every theme token carries a fallback, so the plugin still looks deliberate
   if it is ever run under a different theme.
   ========================================================================== */

.abz-tix,
.abz-events,
.abz-event,
.abz-checkout,
.abz-tickets,
.abz-event-card {

	/* --- remap the plugin's palette onto the brand ----------------------- */
	--abz-ink:        var(--zv-ink, #1f0c31);
	--abz-muted:      var(--zv-muted, #6b6478);
	--abz-line:       var(--zv-line, #ded9d0);
	--abz-line-soft:  color-mix(in srgb, var(--zv-ink, #1f0c31) 7%, transparent);
	--abz-surface:    var(--zv-surface-mint, #eef7e2);
	--abz-panel:      var(--zv-surface-alt, #faf7f0);

	/* The upstream accent is near-black; the brand's is royal blue. */
	--abz-accent:     var(--zv-primary, #004aad);
	--abz-accent-ink: #ffffff;

	--abz-sheet:      var(--zv-surface, #ffffff);
	--abz-sheet-ink:  var(--zv-body, #241a33);
	--abz-card:       var(--zv-surface, #ffffff);
	--abz-card-ink:   var(--zv-body, #241a33);

	/* The teal rule becomes the wellness green. */
	--abz-rule:       var(--zv-accent, #80cc28);

	--abz-danger:     var(--zv-danger, #dc2626);
	--abz-success:    var(--zv-success, #16a34a);

	/* Radii follow the design's 5/10/15 scale. */
	--abz-radius:     var(--zv-radius-lg, 15px);
	--abz-radius-sm:  var(--zv-radius-md, 10px);
	--abz-gap:        var(--zv-space-5, 1.5rem);

	font-family: var(--zv-font-body, "Montserrat", system-ui, sans-serif);
	color: var(--zv-body, #241a33);
}

/* --------------------------------------------------------------------------
   Typography — the theme pairs a display serif with a sans; the plugin
   inherits whatever the theme sets, so only the headings need claiming.
   -------------------------------------------------------------------------- */

.abz-event-card__title,
.abz-events__title,
.abz-checkout__title {
	font-family: var(--zv-font-display, "Fraunces", Georgia, serif);
	font-weight: var(--zv-weight-bold, 700);
	letter-spacing: var(--zv-tracking-tight, -0.01em);
	line-height: var(--zv-leading-tight, 1.22);
	color: var(--zv-primary, #004aad);
}

/* --------------------------------------------------------------------------
   Buttons — matched to .zv-btn: pill, uppercase, tight tracking.
   Plum on green, not white: the brand green is light, and white on it
   measures 1.98:1 against a 4.5:1 requirement.
   -------------------------------------------------------------------------- */

.abz-button,
.abz-checkout__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zv-space-2, 0.5rem);
	padding: var(--zv-space-3, 0.75rem) var(--zv-space-6, 2rem);
	font-family: var(--zv-font-body, "Montserrat", sans-serif);
	font-size: var(--zv-text-xs, 0.688rem);
	font-weight: var(--zv-weight-bold, 700);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide, 0.06em);
	border-radius: var(--zv-radius-full, 999px);
	border: 2px solid transparent;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abz-button--primary,
.abz-checkout__submit {
	background-color: var(--zv-accent, #80cc28);
	color: var(--zv-on-accent, #1f0c31);
}
.abz-button--primary:hover,
.abz-checkout__submit:hover {
	background-color: var(--zv-accent-hover, #6cae1f);
	color: var(--zv-on-accent, #1f0c31);
}

.abz-button--ghost {
	background-color: #ffffff;
	border-color: color-mix(in srgb, var(--zv-ink, #1f0c31) 12%, transparent);
	color: var(--zv-ink, #1f0c31);
}
.abz-button--ghost:hover {
	border-color: var(--zv-primary, #004aad);
	color: var(--zv-primary, #004aad);
}

/* --------------------------------------------------------------------------
   Event cards — the theme's card language: hairline, soft shadow, lift on
   hover, and a photo that scales very slightly with the card.
   -------------------------------------------------------------------------- */

.abz-event-card {
	background-color: var(--zv-surface, #fff);
	border: 1px solid color-mix(in srgb, var(--zv-ink, #1f0c31) 7%, transparent);
	border-radius: var(--zv-radius-md, 10px);
	box-shadow: var(--zv-shadow-sm, 0 1px 2px rgba(31, 12, 49, 0.06));
	overflow: hidden;
	transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abz-event-card__media { overflow: hidden; }
.abz-event-card__image { transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); }

@media (hover: hover) {
	.abz-event-card:hover {
		box-shadow: var(--zv-shadow-lg, 0 14px 38px rgba(31, 12, 49, 0.12));
		transform: translateY(-3px);
	}
	.abz-event-card:hover .abz-event-card__image { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
	.abz-event-card:hover { transform: none; }
	.abz-event-card:hover .abz-event-card__image { transform: none; }
}

/* Date chip — the theme's plum block with a green month, as on the fact bar. */
.abz-event-card__date {
	background-color: var(--zv-plum, #1f0c31);
	color: #ffffff;
	border-radius: var(--zv-radius-sm, 5px);
	font-family: var(--zv-font-body, "Montserrat", sans-serif);
}
.abz-event-card__date-day {
	font-weight: var(--zv-weight-bold, 700);
	color: #ffffff;
}
.abz-event-card__date-month {
	font-weight: var(--zv-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide, 0.06em);
	color: var(--zv-accent, #80cc28);
}

.abz-event-card__title {
	font-size: var(--zv-text-lg, 1.25rem);
}

.abz-event-card__price-value {
	font-family: var(--zv-font-body, "Montserrat", sans-serif);
	font-weight: var(--zv-weight-bold, 700);
	font-size: var(--zv-text-xl, 1.5rem);
	color: var(--zv-primary, #004aad);
}
.abz-event-card__price-label {
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide, 0.06em);
	font-size: var(--zv-text-xs, 0.688rem);
	font-weight: var(--zv-weight-bold, 700);
	color: var(--zv-accent-ink, #477512);
}

/* Tags reuse the screening band's pill. */
.abz-event-card__tags > * ,
.abz-event__pills > * {
	background-color: var(--zv-accent, #80cc28);
	color: var(--zv-on-accent, #1f0c31);
	border-radius: var(--zv-radius-full, 999px);
	font-size: var(--zv-text-xs, 0.688rem);
	font-weight: var(--zv-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide, 0.06em);
}

/* --------------------------------------------------------------------------
   Single event hero — the theme's blue band rather than a grey sheet.
   -------------------------------------------------------------------------- */

.abz-event__hero {
	border-radius: var(--zv-radius-lg, 15px);
	overflow: hidden;
}
.abz-event__hero--empty {
	background-color: var(--zv-primary, #004aad);
}
.abz-event__hero-chip {
	background-color: var(--zv-yellow, #fad02c);
	color: var(--zv-yellow-contrast, #1f0c31);
	border-radius: var(--zv-radius-full, 999px);
	font-weight: var(--zv-weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--zv-tracking-wide, 0.06em);
}

/* --------------------------------------------------------------------------
   Ticket-type rows and checkout panels pick up the warm off-white the theme
   uses for the FlexiPay panel, so the whole flow reads as one system.
   -------------------------------------------------------------------------- */

.abz-checkout__form,
.abz-cart__table {
	background-color: var(--zv-surface-alt, #faf7f0);
	border-radius: var(--zv-radius-md, 10px);
}

.abz-empty {
	background-color: var(--zv-surface-alt, #faf7f0);
	border-radius: var(--zv-radius-md, 10px);
	color: var(--zv-muted, #6b6478);
}

/* Keyboard focus matches the theme's. */
.abz-tix :where(a, button, input, select, textarea):focus-visible,
.abz-event-card :where(a, button):focus-visible {
	outline: 2px solid var(--zv-primary, #004aad);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Link decoration
   The theme underlines links by default, which is right for body copy and
   wrong for a card title and a button label.
   -------------------------------------------------------------------------- */

/*
 * Note the `a.` qualifiers. Hello Elementor's theme.css carries
 *   .comments-area a, .page-content a { text-decoration: underline }
 * at specificity 0,1,1, and shortcode output renders inside .page-content —
 * so a bare `.abz-button` (0,1,0) loses to it. Qualifying by element takes
 * these to 0,1,1, and this sheet loads after the theme, so order decides.
 */
.abz-event-card__title a,
a.abz-event-card__cta,
a.abz-button,
button.abz-button,
a.abz-event__back,
.abz-checkout__submit {
	text-decoration: none;
}
.abz-event-card__title a:hover {
	color: var(--zv-primary-hover, #003a88);
	text-decoration: none;
}

/* The media placeholder shown when an event has no featured image. */
.abz-event-card__media--empty,
.abz-event-card__initial {
	background-color: var(--zv-surface-mint, #eef7e2);
	color: color-mix(in srgb, var(--zv-primary, #004aad) 25%, transparent);
	font-family: var(--zv-font-display, "Fraunces", Georgia, serif);
}

/* --------------------------------------------------------------------------
   Quantity steppers
   Hello Elementor's reset styles every bare <button> with a #c36 crimson
   border and text. The plugin never sets those two properties on its stepper,
   so the theme's default showed through as pink chrome on an otherwise
   blue-and-green page.
   -------------------------------------------------------------------------- */

.abz-stepper {
	border: 1px solid var(--zv-line-strong, #c9cedb);
	border-radius: var(--zv-radius-full, 999px);
	overflow: hidden;
}

.abz-stepper__button {
	border: 0;
	background-color: transparent;
	color: var(--zv-primary, #004aad);
	font-weight: var(--zv-weight-bold, 700);
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.abz-stepper__button:hover:not(:disabled) {
	background-color: color-mix(in srgb, var(--zv-primary, #004aad) 10%, transparent);
	color: var(--zv-primary, #004aad);
}
.abz-stepper__button:disabled {
	color: var(--zv-muted, #6b6478);
	opacity: 0.5;
}

.abz-stepper__input {
	border: 0;
	background-color: transparent;
	font-family: var(--zv-font-body, "Montserrat", sans-serif);
	font-weight: var(--zv-weight-bold, 700);
	color: var(--zv-ink, #1f0c31);
}

/* Ticket-type rows: name in ink, price in the brand blue rather than green. */
.abz-tt__name, .abz-ticket-type__name { color: var(--zv-ink, #1f0c31); }
.abz-tt__price, .abz-ticket-type__price {
	color: var(--zv-primary, #004aad);
	font-weight: var(--zv-weight-bold, 700);
}

/* --------------------------------------------------------------------------
   Single event hero title
   It sits ON the photograph, so it needs to be white with a scrim behind it —
   the brand blue used elsewhere is unreadable over a mid-tone image.
   -------------------------------------------------------------------------- */

.abz-event__title {
	font-family: var(--zv-font-display, "Fraunces", Georgia, serif);
	font-weight: var(--zv-weight-bold, 700);
	letter-spacing: var(--zv-tracking-tight, -0.01em);
	line-height: var(--zv-leading-tight, 1.22);
	color: #ffffff;
	text-shadow: 0 2px 18px rgba(31, 12, 49, 0.55);
}

/* Deepen the existing shade so the title always has something to sit on. */
.abz-event__hero-shade {
	background: linear-gradient(
		to top,
		rgba(31, 12, 49, 0.82) 0%,
		rgba(31, 12, 49, 0.45) 42%,
		rgba(31, 12, 49, 0) 78%
	);
}

/* --------------------------------------------------------------------------
   Share button — another bare <button> picking up Hello's #c36 reset.
   -------------------------------------------------------------------------- */

.abz-event__share,
.abz-event__share button,
button.abz-event__share {
	border: 1px solid rgba(255, 255, 255, 0.55);
	background-color: rgba(31, 12, 49, 0.45);
	color: #ffffff;
	border-radius: var(--zv-radius-md, 10px);
	backdrop-filter: blur(4px);
}
.abz-event__share:hover,
button.abz-event__share:hover {
	background-color: var(--zv-primary, #004aad);
	border-color: var(--zv-primary, #004aad);
	color: #ffffff;
}

/* Hero meta chips pick up the theme's pill language. */
.abz-event__hero-chip {
	background-color: rgba(31, 12, 49, 0.55);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   Accepted-payment badges
   Visa and Mastercard use the real marks. MTN MoMo and Airtel Money stay as
   wordmarks in their brand colours — we do not hold authentic files for them,
   and an approximated logo is worse than an honest label. Upload them under
   Events → Settings and they become images automatically.
   -------------------------------------------------------------------------- */

.abz-paylogos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--zv-space-2, 0.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.abz-paylogo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding-inline: var(--zv-space-3, 0.75rem);
	border-radius: var(--zv-radius-sm, 5px);
	font-family: var(--zv-font-body, "Montserrat", sans-serif);
	font-size: var(--zv-text-xs, 0.688rem);
	font-weight: var(--zv-weight-bold, 700);
	letter-spacing: var(--zv-tracking-wide, 0.06em);
	text-transform: uppercase;
	line-height: 1;
}

/* Real marks sit on white so the brand colours stay true. */
.abz-paylogo--image {
	background-color: #ffffff;
	border: 1px solid var(--zv-line, #ded9d0);
	padding-inline: var(--zv-space-2, 0.5rem);
}
.abz-paylogo--image img {
	height: 20px;
	width: auto;
	object-fit: contain;
}

/* Wordmarks use each provider's own colour, already inlined by the plugin. */
.abz-paylogo--text {
	background-color: var(--abz-brand, var(--zv-plum, #1f0c31));
	color: var(--abz-brand-ink, #ffffff);
}

/* --------------------------------------------------------------------------
   Events grid
   The shortcode defaults to a fixed four-track grid, so a listing with two
   events left them squeezed into the first half of the row at ~270px while
   the right half sat empty. auto-fit collapses the tracks that have nothing
   in them, and the 420px ceiling stops two cards stretching to half the page
   each. Four or more events still fill the row as before.
   -------------------------------------------------------------------------- */

.abz-events--cols-3,
.abz-events--cols-4 {
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 420px));
	justify-content: start;
	gap: var(--zv-space-5, 1.5rem);
}

/*
 * Venue lines were truncating mid-word ("Kampala Serena Gardens, Ka…").
 * Flex rather than block: the row starts with a pin icon, and `display: block`
 * pushed it onto its own line above the text.
 */
.abz-event-card__where {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.4;
}
.abz-event-card__where svg,
.abz-event-card__where img {
	flex: none;
	margin-top: 0.15em;
}

/* Breathing room under the last block on an event page. */
.abz-event > :last-child,
.abz-events-section > :last-child {
	margin-bottom: 0;
}