/**
 * Events, checkout and confirmation.
 *
 * Every colour, font and radius is read from the variables the theme already
 * publishes — --iw-forest, --iw-amber, --iw-parchment, --iw-font-body and so
 * on — with a fallback only in case the plugin is used elsewhere. When the
 * practice changes a brand colour on the Site Basics screen, these pages
 * change with it. There is no separate "shop" palette to keep in step.
 */

.iwe {
	--iwe-forest: var(--iw-forest, #2d5a4e);
	--iwe-forest-dark: var(--iw-forest-dark, #1d3d34);
	--iwe-amber: var(--iw-amber, #c4955a);
	--iwe-parchment: var(--iw-parchment, #faf7f2);
	--iwe-cream: var(--iw-cream, #f0ebe0);
	--iwe-ink: var(--iw-ink, #1a1a18);
	--iwe-forest-rgb: var(--iw-forest-rgb, 45, 90, 78);
	--iwe-ink-rgb: var(--iw-ink-rgb, 26, 26, 24);
	--iwe-radius: var(--iw-r-card, 24px);
	--iwe-font-display: var(--iw-font-display, 'Lora', Georgia, serif);
	--iwe-font-body: var(--iw-font-body, 'DM Sans', system-ui, sans-serif);

	font-family: var(--iwe-font-body);
	color: var(--iwe-ink);
}

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

/* ── Standing clear of the theme's prose styles ────────────────────────────
   These shortcodes render inside the theme's .iw-prose wrapper, which styles
   everything it contains as article copy:

       .iw-prose a  { color: var(--iw-forest); text-decoration: underline; }
       .iw-prose ul, .iw-prose ol { padding-left: 1.4em; }
       .iw-prose ul { list-style: disc; }
       .iw-prose li + li { margin-top: .5em; }

   Those selectors score 0,1,1 — higher than a single class — so they were
   winning against .iwe-btn and .iwe-grid. That is why the buttons came out
   forest-green on forest-green (invisible until the 0,2,0 :hover rule took
   over), why they were underlined, and why every list carried a 1.4em left
   indent: 22.4px of it, which pushed the whole events grid off-centre and
   indented the When / Led by / Price labels away from the text above them.

   The answer is specificity, not !important. Note the repeated .iwe.iwe: a
   single .iwe ul would score 0,1,1 — exactly tying .iw-prose ul, leaving the
   winner to depend on which stylesheet happens to load second. Naming the
   wrapper twice matches the same single element but scores 0,2,1, so these
   rules win outright and predictably. The theme's article styling is left
   completely intact everywhere outside this plugin's markup.

   Only the properties the theme actually imposes are undone. Margins are
   deliberately left alone here: each component sets its own, and a blanket
   margin reset at this specificity would silently win against them. */

.iwe.iwe ul,
.iwe.iwe ol {
	padding-left: 0;
	list-style: none;
}

.iwe.iwe li + li { margin-top: 0; }

.iwe.iwe a { text-decoration: none; }

/* .iw-prose h2, h3, h4 { margin-top: 1.8em } is meant for headings in an
   article, where that space is right. Inside a card or a panel it opens a gap
   above every title. Each component sets the spacing it actually wants. */
.iwe.iwe h2,
.iwe.iwe h3,
.iwe.iwe h4 { margin-top: 0; }

/* Genuine text links keep their underline — it is only buttons that should
   not look like prose. */
.iwe.iwe .iwe-summary__change a,
.iwe.iwe .iwe-consent a,
.iwe.iwe .iwe-events__intro a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Notices ───────────────────────────────────────────────────────────── */

.iwe-notice {
	padding: 14px 18px;
	margin-bottom: 20px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.5;
	border: 1px solid rgba(var(--iwe-forest-rgb), .18);
	background: rgba(var(--iwe-forest-rgb), .06);
}

.iwe-notice--error { border-color: rgba(179,45,46,.28); background: rgba(179,45,46,.07); color: #8a1f20; }
.iwe-notice--success { border-color: rgba(26,127,55,.3); background: rgba(26,127,55,.08); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

/* Every button rule is scoped to .iwe so it outranks .iw-prose a, and every
   one states its own colour and text-decoration rather than inheriting —
   which is what stops the label disappearing into the background until
   somebody happens to hover it. */

.iwe .iwe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--iwe-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}

.iwe .iwe-btn:hover,
.iwe .iwe-btn:focus-visible,
.iwe .iwe-btn:active,
.iwe .iwe-btn:visited { text-decoration: none; }

.iwe .iwe-btn:active { transform: translateY(1px); }

.iwe .iwe-btn--primary,
.iwe .iwe-btn--primary:visited {
	background: var(--iwe-forest);
	color: var(--iwe-parchment);
	border-color: var(--iwe-forest);
}

.iwe .iwe-btn--primary:hover,
.iwe .iwe-btn--primary:focus-visible {
	background: var(--iwe-forest-dark);
	border-color: var(--iwe-forest-dark);
	color: var(--iwe-parchment);
}

.iwe .iwe-btn--quiet,
.iwe .iwe-btn--quiet:visited {
	background: transparent;
	border-color: rgba(var(--iwe-forest-rgb), .35);
	color: var(--iwe-forest);
}

.iwe .iwe-btn--quiet:hover,
.iwe .iwe-btn--quiet:focus-visible {
	background: rgba(var(--iwe-forest-rgb), .08);
	color: var(--iwe-forest);
}

.iwe .iwe-btn--full { width: 100%; }

.iwe .iwe-btn--disabled,
.iwe .iwe-btn--disabled:hover {
	background: rgba(var(--iwe-ink-rgb), .08);
	border-color: transparent;
	color: rgba(var(--iwe-ink-rgb), .45);
	cursor: not-allowed;
}

/* A visible focus ring, since the theme's own one is tuned for text links. */
.iwe .iwe-btn:focus-visible {
	outline: 2px solid var(--iwe-amber);
	outline-offset: 2px;
}

/* ── The events grid ───────────────────────────────────────────────────── */

.iwe .iwe-events__intro {
	max-width: 46em;
	margin: 0 auto 36px;
	text-align: center;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(var(--iwe-ink-rgb), .78);
}

.iwe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}

.iwe-card {
	display: flex;
	flex-direction: column;
	background: var(--iwe-parchment);
	border: 1px solid rgba(var(--iwe-forest-rgb), .12);
	border-radius: var(--iwe-radius);
	overflow: hidden;
	box-shadow: 0 8px 36px rgba(0,0,0,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}

.iwe-card:hover { transform: translateY(-3px); box-shadow: 0 14px 44px rgba(0,0,0,.09); }
.iwe-card.is-full { opacity: .72; }
.iwe-card.is-full:hover { transform: none; }

.iwe-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--iwe-cream); }
.iwe-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.iwe-card__media-blank {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(var(--iwe-forest-rgb), .14), rgba(196,149,90,.16));
}

/* The date, as a chip over the picture — the thing people scan for. */
.iwe-datechip {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 56px;
	padding: 8px 10px;
	border-radius: 12px;
	background: var(--iwe-forest);
	color: var(--iwe-parchment);
	line-height: 1.05;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

.iwe-datechip__d { font-family: var(--iwe-font-display); font-size: 22px; font-weight: 600; }
.iwe-datechip__m { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }

.iwe-flag {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--iwe-amber);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
}

.iwe-flag--full { background: rgba(26,26,24,.76); }

.iwe-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px; }

.iwe .iwe-card__title {
	margin: 0 0 8px;
	font-family: var(--iwe-font-display);
	font-size: clamp(1.18rem, 2vw, 1.4rem);
	line-height: 1.3;
}

.iwe-card__note { margin: 0 0 10px; font-size: 14px; color: var(--iwe-amber); font-weight: 500; }
.iwe-card__desc { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(var(--iwe-ink-rgb), .78); }

.iwe-meta { margin: 0 0 22px; padding: 0; list-style: none; border-top: 1px solid rgba(var(--iwe-forest-rgb), .12); }

.iwe-meta li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(var(--iwe-forest-rgb), .08);
	font-size: 14px;
}

.iwe-meta__label { color: rgba(var(--iwe-ink-rgb), .6); flex: 0 0 auto; }
.iwe-meta__value { font-weight: 500; text-align: right; }
.iwe-price { font-family: var(--iwe-font-display); font-size: 17px; color: var(--iwe-forest); }

.iwe-card .iwe-btn { margin-top: auto; }

/* ── Checkout ──────────────────────────────────────────────────────────── */

.iwe-checkout__grid { display: grid; gap: 28px; align-items: start; }

@media (min-width: 900px) {
	.iwe-checkout__grid { grid-template-columns: 1fr 1.1fr; }
	/* The summary stays in view while the form is filled in. */
	.iwe-summary { position: sticky; top: 100px; }
}

.iwe-panel {
	padding: 28px;
	background: var(--iwe-parchment);
	border: 1px solid rgba(var(--iwe-forest-rgb), .12);
	border-radius: var(--iwe-radius);
	box-shadow: 0 8px 36px rgba(0,0,0,.06);
}

.iwe .iwe-panel__title { margin: 0 0 18px; font-family: var(--iwe-font-display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

.iwe-summary__media { margin-bottom: 18px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.iwe-summary__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.iwe-summary__line { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.iwe-summary__name { font-weight: 500; font-size: 17px; }

.iwe-summary__price {
	font-family: var(--iwe-font-display);
	font-size: 19px;
	color: var(--iwe-forest);
	white-space: nowrap;
}

.iwe-summary__meta { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; color: rgba(var(--iwe-ink-rgb), .68); }
.iwe-summary__meta li { padding: 3px 0; }
.iwe-summary__when { font-weight: 500; color: var(--iwe-forest); }
.iwe-summary__change { margin: 14px 0 0; font-size: 14px; }
.iwe-summary__change a { color: var(--iwe-forest); }

/* ── Promo ─────────────────────────────────────────────────────────────── */

.iwe-promo { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(var(--iwe-forest-rgb), .12); }
.iwe-promo__row { display: flex; gap: 8px; }
.iwe-promo__row .iwe-input { flex: 1 1 auto; }
.iwe-promo__row .iwe-btn { flex: 0 0 auto; padding-inline: 22px; }
.iwe-promo__msg { margin: 8px 0 0; font-size: 14px; min-height: 1.2em; }
.iwe-promo__msg.is-error { color: #8a1f20; }
.iwe-promo__msg.is-good { color: #1a7f37; }

/* ── Totals ────────────────────────────────────────────────────────────── */

.iwe-totals { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(var(--iwe-forest-rgb), .12); }
.iwe-totals__row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 15px; }
.iwe-totals__row dt, .iwe-totals__row dd { margin: 0; }
.iwe-totals__row--discount { color: #1a7f37; }

.iwe-totals__row--grand {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid rgba(var(--iwe-forest-rgb), .18);
	font-family: var(--iwe-font-display);
	font-size: 20px;
}

.iwe-free-note { margin: 20px 0 0; padding: 14px 18px; border-radius: 10px; background: rgba(var(--iwe-forest-rgb), .07); font-size: 15px; }

/* ── Form ──────────────────────────────────────────────────────────────── */

.iwe-field { margin-bottom: 18px; }
.iwe-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }

.iwe-input {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid rgba(var(--iwe-forest-rgb), .22);
	border-radius: 10px;
	background: #fff;
	font-family: var(--iwe-font-body);
	/* 16px, so iOS does not zoom the page when a field is focused. */
	font-size: 16px;
	color: var(--iwe-ink);
}

.iwe-input:focus { outline: 2px solid rgba(var(--iwe-forest-rgb), .4); outline-offset: 1px; border-color: var(--iwe-forest); }
.iwe-textarea { resize: vertical; min-height: 92px; }

.iwe-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.iwe-consent input { margin-top: 3px; flex: 0 0 auto; }
.iwe-consent a { color: var(--iwe-forest); }

.iwe-err { margin: 6px 0 0; font-size: 13px; color: #8a1f20; min-height: 1em; }
.iwe-pay-note { margin: 20px 0 14px; font-size: 14px; color: rgba(var(--iwe-ink-rgb), .7); }
.iwe-paypal { min-height: 52px; }
.iwe-form__status { margin: 12px 0 0; font-size: 14px; color: rgba(var(--iwe-ink-rgb), .7); min-height: 1.2em; }

/* ── Results and receipts ──────────────────────────────────────────────── */

.iwe-result {
	padding: 32px;
	border-radius: var(--iwe-radius);
	text-align: center;
	border: 1px solid rgba(var(--iwe-forest-rgb), .14);
	background: var(--iwe-parchment);
}

.iwe-result--good { border-color: rgba(26,127,55,.3); background: rgba(26,127,55,.06); }
.iwe-result--warn { border-color: rgba(196,149,90,.45); background: rgba(196,149,90,.08); }

.iwe .iwe-result__title { margin: 0 0 8px; font-family: var(--iwe-font-display); font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.iwe-result__lead { margin: 0; font-size: 16px; line-height: 1.6; }

.iwe-receipt {
	max-width: 540px;
	margin: 26px auto 0;
	padding: 24px 26px;
	border: 1px solid rgba(var(--iwe-forest-rgb), .12);
	border-radius: var(--iwe-radius);
	background: var(--iwe-parchment);
}

.iwe-receipt__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(var(--iwe-forest-rgb), .08);
	font-size: 15px;
}

.iwe-receipt__row:last-child { border-bottom: 0; }
.iwe-receipt__row dt { margin: 0; color: rgba(var(--iwe-ink-rgb), .62); }
.iwe-receipt__row dd { margin: 0; text-align: right; font-weight: 500; }

.iwe-receipt__row--total {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid rgba(var(--iwe-forest-rgb), .2);
	font-family: var(--iwe-font-display);
	font-size: 18px;
}

.iwe-confirmation__actions { margin: 24px 0 0; text-align: center; }

/* ── Phones ────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.iwe-panel, .iwe-card__body { padding: 20px; }
	.iwe-result { padding: 24px 20px; }
	.iwe-receipt { padding: 20px; }
	.iwe-grid { gap: 20px; }

	/* Thumb-sized targets, and a promo row that stops squeezing the input. */
	.iwe-promo__row { flex-direction: column; }
	.iwe-promo__row .iwe-btn { width: 100%; }
	.iwe-btn { padding: 14px 24px; }
	.iwe-meta li { flex-direction: column; gap: 2px; }
	.iwe-meta__value { text-align: left; }
}