/* retreat-detail — screen-specific styles. Merged into style.css once the screens settle.
 *
 * Scope: the WPTE single-trip screen (templates/single-trip.html), PDF page 17.
 * Loaded after style.css, so it may override it.
 *
 * Two jobs:
 *   1. lay out the masthead / gallery / booking rail the template adds;
 *   2. restyle output we do not control — the trip's own post_content and the
 *      WP Travel Engine booking blocks — into the design's cards and pills.
 */

.terrago-retreat {
  /* Design measurements, taken off the 1440px frame: gallery 1011 + 22 + 227,
     thumbnails 139 tall with a 14px gutter. */
  --rd-gap: 22px;
  --rd-thumb-gap: 14px;
}

/* ------------------------------------------------------------- icon system --
   Icons are masks, not background images, so they inherit colour from the
   element (grey in the meta line, white inside a coral circle). */
.terrago-metaitem::before,
.terrago-book-row__k::before,
.terrago-retreat-action::before,
.terrago-book-ticks li::before,
.terrago-retreat .entry-content > ul.wp-block-list:not(:has(> li > strong)) > li::before {
  content: "";
  flex: none;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ------------------------------------------------------------- breadcrumb -- */

.terrago-crumbs {
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--wp--preset--color--muted);
}
.terrago-crumbs > * {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
}
.terrago-crumbs a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.terrago-crumbs a:hover { color: var(--wp--preset--color--base); }
.terrago-crumbs > * + *::before {
  content: "\203A";
  margin-right: 0.5rem;
  color: var(--wp--preset--color--muted-soft);
}
/* The tail of the trail is the trip itself — coral, and not a link. */
.terrago-crumbs .wp-block-post-title.is-current {
  color: var(--wp--preset--color--accent);
  font-family: inherit;
  font-weight: 500;
  line-height: inherit;
}
.terrago-crumbs .wp-block-post-terms__separator { color: var(--wp--preset--color--muted-soft); }

/* ------------------------------------------------------------- title row -- */

.terrago-retreat-titlerow {
  gap: 1.5rem 2rem;
  align-items: flex-start;
}
.terrago-retreat-titlecol { flex: 1 1 22rem; min-width: 0; }

.terrago-retreat-titleline {
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.terrago-retreat-titleline .wp-block-post-title {
  margin: 0;
  line-height: 1.05;
}

/* Badges. `is-season` is a single static paragraph; `is-type` is a post-terms
   block, so each term inside it becomes its own pill. */
.terrago-retreat-badge {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.terrago-retreat-badge,
.terrago-retreat-badge a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.terrago-retreat-badge.is-season { color: var(--wp--preset--color--accent); }
.terrago-retreat-badge.is-type {
  color: var(--wp--preset--color--primary);
  padding: 0;
  border: 0;
}
.terrago-retreat-badge.is-type a { color: inherit; }
.terrago-retreat-badge .wp-block-post-terms__separator { display: none; }

/* Meta line: location · duration · guests. */
.terrago-retreat-meta {
  gap: 0.4rem 1.75rem;
  color: var(--wp--preset--color--muted);
}
/* No flex `gap` here: on the location item the flex children are the
   post-terms links *and* its "," separator span, and a gap would push the
   comma away from the word before it. The icon carries its own margin. */
.terrago-metaitem {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--base);
}
.terrago-metaitem a { color: inherit; text-decoration: none; }
.terrago-metaitem::before {
  width: 17px;
  height: 17px;
  margin-right: 0.5rem;
  color: var(--wp--preset--color--muted);
}
/* The separator span already contains ", " and flex preserves that trailing
   space, so it needs no margin of its own. */
.terrago-metaitem .wp-block-post-terms__separator { margin: 0; }
.terrago-metaitem.is-loc::before { -webkit-mask-image: var(--rd-pin); mask-image: var(--rd-pin); }
.terrago-metaitem.is-dur::before { -webkit-mask-image: var(--rd-calendar); mask-image: var(--rd-calendar); }
.terrago-metaitem.is-guests::before { -webkit-mask-image: var(--rd-users); mask-image: var(--rd-users); }

/* ---------------------------------------------------------- trip-duration --
   Out of the box the block is a card: a 32px white-on-blue number stacked over
   the unit, in a rounded white tile. Both places the retreat frame uses it —
   the meta line and the booking rail — want it as a run of plain text, so the
   tile is flattened here. The plugin prints per-instance rules at (0,2,0), so
   these selectors are deliberately one class deeper. */
.terrago-retreat .wp-block-wptravelenginetripblocks-trip-duration {
  font-size: inherit;
  line-height: inherit;
}
/* Everything down to the two spans goes back to `display: inline`. Left as
   flex boxes the spans keep the badge's fixed width and centre their text, so
   "7" and "Days" end up a tile apart; inline, the newline the plugin leaves
   between the two spans collapses into the single space the design wants. */
.terrago-retreat .wte-duration-container,
.terrago-retreat .wte-title-duration,
.terrago-retreat .wte-title-duration .duration,
.terrago-retreat .wte-title-duration .days {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
}
.terrago-retreat .wp-block-wptravelenginetripblocks-trip-duration { white-space: nowrap; }

/* Share / Save. */
.terrago-retreat-actions {
  display: flex;
  gap: 0.75rem;
  flex: none;
}
.terrago-retreat-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--surface, #f5f6f8);
  color: var(--wp--preset--color--base);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  cursor: pointer;
}
.terrago-retreat-action:hover { background: var(--wp--preset--color--border); }
.terrago-retreat-action::before { width: 16px; height: 16px; }
.terrago-retreat-action.is-share::before { -webkit-mask-image: var(--rd-share); mask-image: var(--rd-share); }
.terrago-retreat-action.is-save::before { -webkit-mask-image: var(--rd-bookmark); mask-image: var(--rd-bookmark); }
.terrago-retreat-action.is-save[aria-pressed="true"] { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------------- gallery -- */

/* The frame carries the design's overall 1260x599 proportion. Giving the grid
   a definite height is what makes the thumbnail column's four 1fr rows
   resolvable — left to `auto` the rows fall back to the thumbnails' own
   intrinsic heights and the big image gets dragged along with them. */
.terrago-retreat-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1011fr) minmax(0, 227fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 1260 / 599;
  gap: var(--rd-gap);
  margin-top: 1.75rem;
}
/* The wrapper is a core group, so flow layout wants to add margins between
   its children; grid items should not carry them. */
.terrago-retreat-gallery > * { margin-block: 0; }
.terrago-retreat-gallery__main { margin: 0; }
.terrago-retreat-gallery__main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--terrago-radius);
}
.terrago-retreat-gallery__thumbs {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--rd-thumb-gap);
  min-height: 0;
}
.terrago-retreat-gallery__thumbs > * { margin: 0; min-height: 0; }
.terrago-retreat-gallery__thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--terrago-radius-sm);
}
/* "+12 Photos" sits over the last thumbnail. */
.terrago-retreat-gallery__thumbs .is-more { position: relative; min-height: 0; }
.terrago-retreat-gallery__thumbs .is-more::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--terrago-radius-sm);
  background: linear-gradient(to top, rgba(1, 1, 1, 0.55), rgba(1, 1, 1, 0.05));
}
.terrago-retreat-gallery__thumbs .is-more figcaption {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  text-align: center;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 500;
}

/* ------------------------------------------------------------------ body -- */

/* Core forces `align-items: normal` on .wp-block-columns, so the rail is
   stretched to the full row height and `position: sticky` has nothing to
   travel through. Overriding align-self on the column itself sidesteps that. */
.wp-block-column.terrago-retreat-rail { align-self: flex-start; }

/* post-content is a constrained layout; without this its children inherit the
   theme's 760px contentSize inside an already narrow column. */
.terrago-retreat .entry-content > * { max-width: none; }
.terrago-retreat .entry-content > .terrago-sectionlabel { margin-top: 3.5rem; }
.terrago-retreat .entry-content > .terrago-sectionlabel:first-child { margin-top: 0; }
/* A section label already supplies the space above its heading; a heading that
   stands on its own (e.g. "Guided by People Who Care.") still needs it. */
.terrago-retreat .entry-content > h2 { margin-top: 3.5rem; margin-bottom: 1rem; }
.terrago-retreat .entry-content > .terrago-sectionlabel + h2 { margin-top: 0; }
.terrago-retreat .entry-content > h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.terrago-retreat .entry-content > p { color: var(--wp--preset--color--muted); }
.terrago-retreat .entry-content > .terrago-callout p { color: inherit; }

/* --- label/value lists become the design's detail cards ------------------- */
/* The trip's post_content writes its fact rows as "<strong>Label</strong> —
   value" list items. :has() distinguishes those from plain bullet lists so both
   can be restyled without touching the content. Browsers without :has()
   (pre-2023) fall back to ordinary bullet lists, which still read fine. */

.terrago-retreat .entry-content > ul.wp-block-list:has(> li > strong) {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
}
.terrago-retreat .entry-content > ul.wp-block-list:has(> li > strong) > li {
  margin: 0;
  padding: 1.15rem 1.35rem;
  border-radius: var(--terrago-radius-sm);
  background: var(--wp--preset--color--surface, #f7f8f9);
  color: var(--wp--preset--color--base);
  font-weight: 500;
  line-height: 1.55;
}
/* The label is a flex/grid item inside the card, so it has to be told not to
   shrink — otherwise "Duration" wraps to "Duratio / n". */
.terrago-retreat .entry-content > ul.wp-block-list:has(> li > strong) > li > strong {
  flex: none;
  margin-right: 0.35rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  white-space: nowrap;
}

/* The first such list is "Dates & Duration" — the design's six icon cards. */
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1):has(> li > strong) {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1):has(> li > strong) > li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
}
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1):has(> li > strong) > li::before {
  content: "";
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--accent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
/* Icons follow the seeded order: Date, Duration, Group Size, Arrival,
   Departure, Status. Any seventh row keeps the plain coral disc. */
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1) > li:nth-child(1)::before { background-image: var(--rd-calendar-w); }
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1) > li:nth-child(2)::before { background-image: var(--rd-clock-w); }
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1) > li:nth-child(3)::before { background-image: var(--rd-users-w); }
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1) > li:nth-child(4)::before { background-image: var(--rd-arrive-w); }
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1) > li:nth-child(5)::before { background-image: var(--rd-depart-w); }
.terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1) > li:nth-child(6)::before { background-image: var(--rd-star-w); }

/* --- plain bullet lists become tick lists --------------------------------- */
.terrago-retreat .entry-content > ul.wp-block-list:not(:has(> li > strong)) {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.terrago-retreat .entry-content > ul.wp-block-list:not(:has(> li > strong)) > li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  color: var(--wp--preset--color--base);
}
.terrago-retreat .entry-content > ul.wp-block-list:not(:has(> li > strong)) > li::before {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  color: var(--wp--preset--color--accent);
  -webkit-mask-image: var(--rd-check-box);
  mask-image: var(--rd-check-box);
}

.terrago-retreat .entry-content .terrago-chips { margin-top: 1.25rem; }

/* -------------------------------------------------------- booking sidebar -- */

.terrago-retreat-rail { position: sticky; top: 6.5rem; }

/* Below its own breakpoint the plugin re-purposes the whole booking block as a
   fixed bottom bar (position:fixed, z-index:111) and collapses trip-pricing to
   max-height:0 behind the "Show Prices" toggle. The retreat frame keeps the
   card in normal flow on every width, so both behaviours are undone here and
   the now-pointless toggle is hidden. */
.terrago-retreat .wp-block-wptravelenginetripblocks-booking {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  max-width: none !important;
  box-shadow: none !important;
}
.terrago-retreat .wp-block-wptravelenginetripblocks-trip-pricing {
  max-height: none !important;
  overflow: visible !important;
  transition: none !important;
}
.terrago-retreat .wpte_price-toggle-btn-mb { display: none !important; }

.terrago-retreat .wp-block-wptravelenginetripblocks-booking,
.terrago-retreat .wpte-form-layout-1 { margin: 0; }

.terrago-retreat .wpte-booking-inner-wrapper {
  background: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--terrago-radius);
  box-shadow: 0 12px 32px rgba(1, 1, 1, 0.06);
  overflow: hidden;
}
.terrago-retreat .wpte-booking { padding: 1.6rem; }
.terrago-retreat .wpte-booking > * { margin-block: 0; }

.terrago-book-season {
  color: var(--wp--preset--color--muted);
  margin-bottom: 0.25rem !important;
}
.terrago-book-name {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1.25rem !important;
}

/* trip-pricing renders "From <ins>$3,250</ins>/ Adult". The suffix is a bare
   text node with no hook of its own, so it is zeroed out and the design's
   wording is restored with ::after. The <ins> — the live price — is untouched. */
.terrago-retreat .wpte-bf-price-wrap { padding: 0 !important; }
/* The price is UI, not a heading — keep it in the body face. */
.terrago-retreat .wpte-bf-price-wrap,
.terrago-retreat .wpte-bf-price-wrap * { font-family: inherit; }
.terrago-retreat .wpte-bf-price { display: block; }
.terrago-retreat .wpte-bf-reg-price {
  display: block;
  color: var(--wp--preset--color--muted) !important;
  font-size: var(--wp--preset--font-size--small);
}
.terrago-retreat .wpte-bf-offer-price {
  display: block;
  font-size: 0;
}
.terrago-retreat .wpte-bf-offer-price::after {
  content: "per guest";
  margin-left: 0.4rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
}
.terrago-retreat .wpte-bf-offer-amount,
.terrago-retreat .wpte-bf-price del {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
}
.terrago-retreat .wpte-bf-price del { font-size: var(--wp--preset--font-size--medium); }

.terrago-book-rows {
  display: grid;
  gap: 0.9rem;
  margin: 1.25rem 0 1.5rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.wp-block-group.terrago-book-row { gap: 0.6rem; }
/* The icon hangs off the label, not off the row: core's flex layout resets
   child margins at a specificity an `auto` margin here would lose to, so the
   row is left with exactly two items for space-between to separate. */
.terrago-book-row__k {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--wp--preset--color--muted);
  white-space: nowrap;
}
.terrago-book-row__k::before {
  width: 17px;
  height: 17px;
  color: var(--wp--preset--color--muted);
}
.terrago-book-row.is-dur .terrago-book-row__k::before { -webkit-mask-image: var(--rd-clock); mask-image: var(--rd-clock); }
.terrago-book-row.is-loc .terrago-book-row__k::before { -webkit-mask-image: var(--rd-pin); mask-image: var(--rd-pin); }
.terrago-book-row.is-pax .terrago-book-row__k::before { -webkit-mask-image: var(--rd-users); mask-image: var(--rd-users); }
.terrago-book-row.is-avail .terrago-book-row__k::before { -webkit-mask-image: var(--rd-calendar); mask-image: var(--rd-calendar); }
.terrago-book-row__v,
.terrago-book-row .wp-block-wptravelenginetripblocks-trip-duration {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  text-align: right;
}
.terrago-book-row .wte-duration-container { justify-content: flex-end; }
.terrago-book-row__v a { color: inherit; text-decoration: none; }
.terrago-book-row__v.is-accent { color: var(--wp--preset--color--accent); }

/* trip-booking-button is dynamic: its markup, and its label, come from the
   plugin (the WPTE global "book now" label setting), not from the block
   attribute. The design's wording is applied here so the real button — the one
   carrying data-trip-booking, which opens the plugin's modal — is the one
   shown. Setting the WPTE label makes the accessible name match too. */
.terrago-retreat .wp-block-wptravelenginetripblocks-trip-booking-button { text-align: left; }
.terrago-retreat .wpte-bf-btn-wrap { display: block; }
.terrago-retreat .wpte-bf-btn.wte-book-now {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--contrast) !important;
  font-family: inherit;
  font-size: 0 !important;
  font-weight: 600;
  cursor: pointer;
}
.terrago-retreat .wpte-bf-btn.wte-book-now::after {
  content: "Reserve Your Place";
  font-size: var(--wp--preset--font-size--base);
}
.terrago-retreat .wpte-bf-btn.wte-book-now:hover {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 88%, black) !important;
}

.terrago-book-ask { margin-top: 0.75rem !important; }
.terrago-book-ask a {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--wp--preset--color--base);
  border-radius: 999px;
  color: var(--wp--preset--color--base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.terrago-book-ask a:hover { background: var(--wp--preset--color--surface, #f5f6f8); }

.terrago-book-ticks {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin: 1.5rem 0 0 !important;
  padding: 0;
}
.terrago-book-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--wp--preset--color--base);
}
.terrago-book-ticks li::before {
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  color: var(--wp--preset--color--primary);
  -webkit-mask-image: var(--rd-check);
  mask-image: var(--rd-check);
}

.terrago-book-policy {
  margin-top: 1.25rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.terrago-book-policy a { color: var(--wp--preset--color--primary); }

/* ------------------------------------------------------------- enquiry ---- */

.terrago-retreat .wp-block-wptravelenginetripblocks-trip-enquiry { margin-top: 1.5rem; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
  .terrago-retreat-rail { position: static; }
}

@media (max-width: 781px) {
  /* Core stacks .wp-block-columns below 782px; the rail follows the copy. */
  .terrago-retreat-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    aspect-ratio: auto;
  }
  .terrago-retreat-gallery__main img { height: auto; aspect-ratio: 16 / 10; }
  .terrago-retreat-gallery__thumbs {
    grid-template-rows: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .terrago-retreat-gallery__thumbs img { height: auto; aspect-ratio: 1 / 1; }
  .terrago-retreat-titlerow { gap: 1.25rem; }
  .terrago-retreat-actions { width: 100%; }
  .terrago-retreat-action { flex: 1; justify-content: center; }
  .terrago-crumbs { row-gap: 0.25rem; }
}

@media (max-width: 600px) {
  .terrago-retreat-titleline .wp-block-post-title {
    font-size: var(--wp--preset--font-size--x-large) !important;
  }
  .terrago-retreat .wpte-booking { padding: 1.25rem; }
  .terrago-retreat .entry-content > ul.wp-block-list:nth-of-type(1):has(> li > strong) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------- icon assets --
   Kept at the end so the rules above read as layout. Stroke icons at 24x24,
   used as masks (colour comes from the element) except the *-w set, which are
   drawn white and painted as background images inside the coral fact discs. */
.terrago-retreat {
  --rd-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --rd-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  --rd-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --rd-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 20v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
  --rd-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");
  --rd-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21 12 16 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z'/%3E%3C/svg%3E");
  --rd-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  --rd-check-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5'/%3E%3Cpath d='m7.5 12.2 3 3 6-6.4'/%3E%3C/svg%3E");
  --rd-calendar-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  --rd-clock-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --rd-users-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 20v-2a4 4 0 0 0-3-3.9'/%3E%3Cpath d='M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
  --rd-arrive-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");
  --rd-depart-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3Cpath d='M4 3h16'/%3E%3C/svg%3E");
  --rd-star-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1 6.2-5.5-2.9-5.5 2.9 1-6.2L3 9.6l6.2-.9L12 3Z'/%3E%3C/svg%3E");
}