/*
 * V7-HEADER
 * Title:    Viridians Location Invitation — Page Styles
 * Filename: viridians-location-invitation.css
 * Path:     /assets/css/viridians/viridians-location-invitation.css
 * Version:  v1.8.0
 * Issued:   2026-07-18
 * Changelog: v1.3.0 (2026-06-23) — Map redesign (BKT 56081 §5.5): pins are now three
 *            icon+colour families (eco-conservation green, eco-restoration golden-green,
 *            mama violet) over a satellite basemap, with a legend. Replaced text-code markers.
 * Author:   Buktika Webdesk (Binka)
 * Purpose:  Styles for Viridians Page Five Location Invitation.
 *           Declared selectors: .vdi-invitation, .vdi-invitation__header,
 *           .vdi-invitation__eyebrow, .vdi-invitation__voice,
 *           .vdi-map-container, #vdi-map, .vdi-marker, .vdi-hover-card,
 *           .vdi-hover-card__close, .vdi-hover-card__kicker,
 *           .vdi-hover-card__title, .vdi-hover-card__cue,
 *           .vdi-hover-card__slots, .vdi-slot, .vdi-slot__badge,
 *           .vdi-slot__mark, .vdi-slot__type, .vdi-slot__name,
 *           .vdi-slot__role, .vdi-slot__binding, .vdi-photo,
 *           .vdi-photo__placeholder, .vdi-static-map,
 *           .vdi-static-map__land, .vdi-static-map__label,
 *           .vdi-static-map__markers, .vdi-static-map__marker,
 *           .vdi-forward, .vdi-accept, .vdi-accept-hint,
 *           .vdi-empty, .vdi-empty__label, .vdi-empty__link,
 *           .vdi-eco-guild-office-marker, .vdi-back-control.
 * Changelog:
 *   v1.8.0 — 2026-07-18 — MAP CONTEXT TRANSITION (owner instruction, "Viridians-to-Eco-Guild map
 *            context transition"). Added .vdi-eco-guild-office-marker (a distinct square badge,
 *            NOT a clover petal, so a genuine Eco Guild office marker can never be mistaken for a
 *            Viridians pin) and .vdi-back-control / .vdi-back-control__button (the injected
 *            "← Locations" return-to-selection-view map control).
 *   v1.2.0 — 2026-06-10 — Renamed from viridians-dance-invitation.css; .page-viridians-dance-invitation selectors → .page-viridians-location-invitation. Internal "Dance Invitation" label retired.
 *   v1.1.0 — 2026-05-31 — Add visible Conservation, Restoration, and combined marker classes.
 *   v1.0.0 — 2026-05-27 — Initial build per BKT-CODEX-Page5-DanceInvitation-v1.0.0.
 * License: © Buktika, 2026. All rights reserved.
 */

.page-viridians-location-invitation {
  background: var(--sdx-color-viridians-dark-base);
}

/* ======================================================================================
   Map hero section — identical pattern to .page-eco-guilds-farms #eco-guilds-farms-map-section.
   Relies on the global body header offset (body { padding-top: var(--header-height) }),
   exactly like every other working map page. No bespoke header-clearance.
   ====================================================================================== */
.page-viridians-location-invitation #vdi-map-section {
  min-height: calc(100dvh - var(--header-height, 77px));
  height: auto;
}

.page-viridians-location-invitation .hero-vdi-map {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: var(--sdx-color-viridians-dark-base);
  color: var(--sdx-color-white);
}

/* Full-bleed column: title on top, map fills the rest, accept bar at foot. */
.page-viridians-location-invitation .hero-vdi-map .hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - var(--header-height, 77px));
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Title band above the map (mirrors .hero-title on Eco Guilds). */
.page-viridians-location-invitation .vdi-invitation__header {
  flex: 0 0 auto;
  margin: 0 auto 0.75rem;
  max-width: 55rem;
  text-align: center;
}

.page-viridians-location-invitation .vdi-invitation__eyebrow {
  margin: 0 0 0.4rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--body);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-viridians-location-invitation .hero-vdi-map .headline {
  margin: 0 0 0.45rem;
  font-family: var(--headline-font);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;                          /* hero text always white */
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

/* Voice line — the emotional invitation per BKT 56081 §5.5.7. */
.page-viridians-location-invitation .hero-vdi-map .vdi-invitation__voice {
  margin: 0 auto;
  max-width: 52rem;
  font-family: var(--headline-font);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.3;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}

/* Map container fills the remaining column height (mirrors #farms-map-container). */
.page-viridians-location-invitation .vdi-map-container {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-height: 22rem;
  margin: 0.25rem 0 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  background: var(--sdx-color-viridians-card-deep);
}

/* MapLibre canvas pinned to fill the container (avoids % height resolution issues). */
.page-viridians-location-invitation #vdi-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-viridians-location-invitation .vdi-static-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: color-mix(in srgb, var(--sdx-color-viridians-card-deep) 86%, var(--sdx-color-viridians-dark-base));
}

.page-viridians-location-invitation .vdi-static-map__land {
  position: absolute;
  inset: 9% 12% 8%;
  width: 76%;
  height: 83%;
  color: color-mix(in srgb, var(--map-country-active-fill, var(--sdx-color-viridians-card-mid)) 76%, var(--sdx-color-viridians-card-deep));
}

.page-viridians-location-invitation .vdi-static-map__land path {
  fill: currentColor;
  stroke: var(--map-country-active-border, var(--sdx-color-mama-amber));
  stroke-width: 0.35;
}

.page-viridians-location-invitation .vdi-static-map__label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  color: color-mix(in srgb, var(--sdx-color-white) 42%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-viridians-location-invitation .vdi-static-map__markers {
  position: absolute;
  inset: 0;
}

.page-viridians-location-invitation .vdi-static-map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
}

.page-viridians-location-invitation .vdi-static-map__marker:hover,
.page-viridians-location-invitation .vdi-static-map__marker.is-active {
  transform: translate(-50%, -50%) scale(1.16);
}

/* ── Pins: three legible families by COLOUR + ICON (BKT 56081 §5.5.2) ────────
   eco-conservation = deep green, eco-restoration = golden-green,
   mama = MamaDEX violet (human restoration). */
.page-viridians-location-invitation .vdi-marker {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* NOT transform — MapLibre sets the marker's transform every frame to lock it to
     its coordinate; animating transform here makes the pin drift/lag during zoom. */
  transition: filter 0.14s ease, opacity 0.14s ease;
}

/* ── Clover marker: 1–3 circular petals, one per family, coloured background ── */
.page-viridians-location-invitation .vdi-marker__pin {
  position: relative;
  display: block;
  transform-origin: center;
  transition: transform 0.14s ease;   /* hover scale lives on the inner clover */
}

.page-viridians-location-invitation .vdi-petal {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Family-colour ring carries identity; near-white disc keeps the logo legible.
     The white halo (first shadow) crisply separates touching/overlapping petals. */
  border: 2.5px solid var(--petal-ring, #6b7280);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--petal-bg, #eef0f2);
}

.page-viridians-location-invitation .vdi-petal__icon {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}

.page-viridians-location-invitation .vdi-petal--eco-conservation {
  --petal-ring: var(--sdx-color-green-deep, #2e5d3a);
  --petal-bg: color-mix(in srgb, var(--sdx-color-green-deep, #2e5d3a) 14%, #fff);
}
.page-viridians-location-invitation .vdi-petal--eco-restoration {
  --petal-ring: var(--sdx-color-restoration-glow, #83af37);
  --petal-bg: color-mix(in srgb, var(--sdx-color-restoration-glow, #83af37) 20%, #fff);
}
.page-viridians-location-invitation .vdi-petal--mama {
  --petal-ring: var(--sdx-color-mama-violet, #8b5cf6);
  --petal-bg: color-mix(in srgb, var(--sdx-color-mama-violet, #8b5cf6) 16%, #fff);
}

/* Clover geometry (28px petals, 4px gaps — petals never overlap). Container sized
   to its bounding box; MapLibre centres it on the coordinate. */
.page-viridians-location-invitation .vdi-clover-1 { width: 28px; height: 28px; }
.page-viridians-location-invitation .vdi-clover-1 .vdi-petal { top: 0; left: 0; }

.page-viridians-location-invitation .vdi-clover-2 { width: 60px; height: 28px; }
.page-viridians-location-invitation .vdi-clover-2 .vdi-petal:nth-child(1) { top: 0; left: 0; }
.page-viridians-location-invitation .vdi-clover-2 .vdi-petal:nth-child(2) { top: 0; left: 32px; }

/* Equilateral trefoil: centre-to-centre = 32px on all three sides (petal 28 + 4 gap).
   Vertical offset = side × √3/2 = 32 × 0.866 ≈ 28 (NOT 32 — that made the diagonal
   gap larger than the horizontal one). */
.page-viridians-location-invitation .vdi-clover-3 { width: 60px; height: 56px; }
.page-viridians-location-invitation .vdi-clover-3 .vdi-petal:nth-child(1) { top: 0;    left: 16px; }
.page-viridians-location-invitation .vdi-clover-3 .vdi-petal:nth-child(2) { top: 28px; left: 0; }
.page-viridians-location-invitation .vdi-clover-3 .vdi-petal:nth-child(3) { top: 28px; left: 32px; }

/* Pins not matching the carried trigger recede (do not disappear) */
.page-viridians-location-invitation .vdi-marker.is-muted {
  opacity: 0.42;
  filter: saturate(0.6);
}

.page-viridians-location-invitation .vdi-marker:hover,
.page-viridians-location-invitation .vdi-marker.is-active,
.page-viridians-location-invitation .vdi-marker:focus-visible {
  opacity: 1;
  outline: none;
  z-index: 5;
}

/* Hover scale on the inner clover only — never on the marker element (see above). */
.page-viridians-location-invitation .vdi-marker:hover .vdi-marker__pin,
.page-viridians-location-invitation .vdi-marker.is-active .vdi-marker__pin,
.page-viridians-location-invitation .vdi-marker:focus-visible .vdi-marker__pin {
  transform: scale(1.12);
}

.page-viridians-location-invitation .vdi-marker:hover .vdi-petal,
.page-viridians-location-invitation .vdi-marker.is-active .vdi-petal,
.page-viridians-location-invitation .vdi-marker:focus-visible .vdi-petal {
  border-color: var(--sdx-color-white, #fff);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 6px 16px rgba(0, 0, 0, 0.55);
}

/* ── Legend ─────────────────────────────────────────────────────────────── */
.page-viridians-location-invitation .vdi-legend {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0.6rem 0.8rem;
  list-style: none;
  background: rgba(4, 15, 18, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--sdx-color-white) 16%, transparent);
  border-radius: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.1;
  color: color-mix(in srgb, var(--sdx-color-white) 92%, transparent);
}

.page-viridians-location-invitation .vdi-legend__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-viridians-location-invitation .vdi-legend__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--sdx-color-white) 85%, transparent);
  flex: 0 0 auto;
}

.page-viridians-location-invitation .vdi-legend__item--eco-conservation .vdi-legend__dot {
  background: var(--sdx-color-green-deep, #2e5d3a);
}

.page-viridians-location-invitation .vdi-legend__item--eco-restoration .vdi-legend__dot {
  background: var(--sdx-color-restoration-glow, #83af37);
}

.page-viridians-location-invitation .vdi-legend__item--mama .vdi-legend__dot {
  background: var(--sdx-color-mama-violet, #8b5cf6);
}

.page-viridians-location-invitation .vdi-hover-card {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 20;
  width: min(22rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  display: none;
  padding: 1rem 1.1rem 1.1rem;
  /* Solid, clearly-framed card with an amber top accent (mirrors the Eco Guild
     popup) so it reads as one contained panel, not loose boxes on the map. */
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--sdx-color-mama-amber, #f5b014);
  border-radius: 0.75rem;
  background: var(--sdx-color-viridians-dark-surface, #1a1625);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  color: color-mix(in srgb, var(--sdx-color-white) 80%, transparent);
}

.page-viridians-location-invitation .vdi-hover-card.is-open {
  display: block;
}

.page-viridians-location-invitation .vdi-hover-card__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  padding: 0.25rem;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--sdx-color-white) 48%, transparent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.page-viridians-location-invitation .vdi-hover-card__close:hover,
.page-viridians-location-invitation .vdi-hover-card__close:focus-visible {
  color: color-mix(in srgb, var(--sdx-color-white) 88%, transparent);
}

.page-viridians-location-invitation .vdi-hover-card__kicker {
  margin: 0 0 0.25rem;
  color: color-mix(in srgb, var(--sdx-color-white) 46%, transparent);
  font-size: 0.75rem;
}

.page-viridians-location-invitation .vdi-hover-card__title {
  margin: 0 2rem 0.4rem 0;
  color: color-mix(in srgb, var(--sdx-color-white) 92%, transparent);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
}

.page-viridians-location-invitation .vdi-hover-card__cue {
  margin: 0 0 0.85rem;
  color: color-mix(in srgb, var(--sdx-color-white) 62%, transparent);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.page-viridians-location-invitation .vdi-hover-card__slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Compact horizontal tile: badge left, text right — tidy single-column stack. */
.page-viridians-location-invitation .vdi-slot {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  row-gap: 0.15rem;
  align-items: start;
  padding: 0.6rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--sdx-color-white) 10%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--sdx-color-white) 5%, transparent);
}

.page-viridians-location-invitation .vdi-slot__badge {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--sdx-color-white) 12%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--sdx-color-white) 7%, transparent);
}

.page-viridians-location-invitation .vdi-slot__type,
.page-viridians-location-invitation .vdi-slot__name,
.page-viridians-location-invitation .vdi-slot__role,
.page-viridians-location-invitation .vdi-slot__binding {
  grid-column: 2;
}

.page-viridians-location-invitation .vdi-slot__mark {
  color: color-mix(in srgb, var(--sdx-color-white) 78%, transparent);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0;
}

.page-viridians-location-invitation .vdi-slot__type {
  margin: 0 0 0.25rem;
  color: color-mix(in srgb, var(--sdx-color-white) 46%, transparent);
  font-size: 0.6875rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-viridians-location-invitation .vdi-slot__name {
  margin: 0 0 0.35rem;
  color: color-mix(in srgb, var(--sdx-color-white) 88%, transparent);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.28;
}

.page-viridians-location-invitation .vdi-slot__role,
.page-viridians-location-invitation .vdi-slot__binding {
  margin: 0;
  color: color-mix(in srgb, var(--sdx-color-white) 62%, transparent);
  font-size: 0.75rem;
  line-height: 1.4;
}

.page-viridians-location-invitation .vdi-slot__binding {
  margin-top: 0.4rem;
  color: var(--sdx-color-mama-amber);
}

.page-viridians-location-invitation .vdi-photo {
  margin-top: 0.75rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sdx-color-white) 10%, transparent);
  border-radius: 0.5rem;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--sdx-color-white) 5%, transparent);
}

/* No real photo yet → don't show a big empty placeholder box (declutters the card). */
.page-viridians-location-invitation .vdi-photo:has(.vdi-photo__placeholder) {
  display: none;
}

.page-viridians-location-invitation .vdi-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-viridians-location-invitation .vdi-photo__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: color-mix(in srgb, var(--sdx-color-white) 46%, transparent);
  font-size: 0.8125rem;
  text-align: center;
}

.page-viridians-location-invitation .vdi-forward {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
}

.page-viridians-location-invitation .vdi-accept {
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--sdx-color-mama-amber) 58%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--sdx-color-mama-amber) 18%, transparent);
  color: color-mix(in srgb, var(--sdx-color-white) 92%, transparent);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.page-viridians-location-invitation .vdi-accept:disabled,
.page-viridians-location-invitation .vdi-accept[aria-disabled="true"] {
  opacity: 0.48;
  cursor: not-allowed;
}

.page-viridians-location-invitation .vdi-accept-hint {
  margin: 0;
  color: color-mix(in srgb, var(--sdx-color-white) 56%, transparent);
  font-size: 0.875rem;
}

.page-viridians-location-invitation .vdi-empty {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2rem;
  text-align: center;
  color: color-mix(in srgb, var(--sdx-color-white) 62%, transparent);
  background: color-mix(in srgb, var(--sdx-color-viridians-dark-base) 86%, transparent);
}

.page-viridians-location-invitation .vdi-empty.is-open {
  display: flex;
}

.page-viridians-location-invitation .vdi-empty__label {
  color: color-mix(in srgb, var(--sdx-color-white) 44%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.page-viridians-location-invitation .vdi-empty__link {
  color: color-mix(in srgb, var(--sdx-color-white) 86%, transparent);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18rem;
}

/* ── Eco Guild office marker (2026-07-18 map-context transition) ─────────────
   Deliberately NOT a .vdi-marker/.vdi-petal clover — a distinct square badge so
   it can never be visually mistaken for a Viridians location pin. Only rendered
   when a genuine canonical office point resolves (see resolveEcoGuildOfficePoint()
   in viridians-location-invitation.js); shows the same Eco Guild icon used
   elsewhere, framed differently. */
.page-viridians-location-invitation .vdi-eco-guild-office-marker {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  border: 2.5px solid var(--sdx-color-mama-amber, #f5b014);
  background: color-mix(in srgb, var(--sdx-color-viridians-dark-surface, #1a1625) 88%, transparent);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 3px 10px rgba(0, 0, 0, 0.5);
}

.page-viridians-location-invitation .vdi-eco-guild-office-marker__icon {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
}

/* ── Return-to-Viridians-view control (2026-07-18 map-context transition) ────
   Injected top-left maplibre control, shown only while the Eco Guild land view
   is active (see showBackControl()/hideBackControl()). Text label rather than
   the default icon-glyph control sizing, so give it auto width/padding. */
.page-viridians-location-invitation .vdi-back-control {
  display: block;
}

.page-viridians-location-invitation .vdi-back-control__button {
  display: block;
  width: auto;
  height: auto;
  padding: 0.4rem 0.7rem;
  border: 0;
  background: #fff;
  color: #1a1625;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.page-viridians-location-invitation .vdi-back-control__button:hover,
.page-viridians-location-invitation .vdi-back-control__button:focus-visible {
  background: #f2f2f2;
}

@media (max-width: 640px) {
  .page-viridians-location-invitation .vdi-invitation {
    padding: 0.75rem 0.5rem 1rem;
  }

  .page-viridians-location-invitation .vdi-invitation__voice {
    font-size: 1rem;
  }

  .page-viridians-location-invitation .vdi-map-container {
    min-height: 26rem;
    border-radius: 0.5rem;
  }

  .page-viridians-location-invitation .vdi-hover-card {
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .page-viridians-location-invitation .vdi-hover-card__slots {
    grid-template-columns: 1fr;
  }

  .page-viridians-location-invitation .vdi-forward {
    align-items: stretch;
    flex-direction: column;
    gap: 0.55rem;
  }

  .page-viridians-location-invitation .vdi-accept {
    width: 100%;
  }
}