/* The booking box on a trip page, in the design system's colours.
   Author: Pravash Karki - pravashkarki.com
   Every colour is a token from tokens.css. The rules sit over the theme's own, which is why they carry !important.
   Corners are squircles where the browser draws them, and round elsewhere.
   The spec is the Booking box in the design system's style guide. */

.booking-sidebar .booking-module {
  position: relative;
  overflow: visible;
  padding: var(--space-4) !important;
  border-radius: var(--radius-2xl) !important;
  corner-shape: squircle;
  background: var(--color-dark) !important;
  color: var(--color-on-dark-muted) !important;
}
.booking-sidebar .booking-module *,
.booking-sidebar .booking-module *::before,
.booking-sidebar .booking-module *::after {
  border-color: var(--night-700) !important;
}

/* The theme frames the box in a pale panel on some trips. The dark box is its own frame. */
.booking-sidebar .booking-module-content:not(:has(> .booking-trip__inquiry)) { padding: 0 !important; background: transparent !important; }

/* Price: the figure is white, everything beside it takes the quiet tone. */
.booking-module .package-price,
.booking-module .package-price .package-price__from,
.booking-module .package-price .per-person,
.booking-module .package-price .per-person i {
  color: var(--color-on-dark-muted) !important;
}
.booking-module .package-price::before { color: var(--night-400) !important; }
.booking-module .package-price .package-price__tag b { color: var(--color-on-dark) !important; }
/* No capitals-only words in the box. The identity sets capitals and small letters everywhere, as the logo is. */
.booking-module .package-price .package-price__from,
.booking-module .group-price .collapsible,
.booking-module .booking-trip .btn { text-transform: none !important; letter-spacing: 0; }

/* Three lines: the label, the price with its saving, then one quiet line that holds the earlier price on the left
   and the note on what the price covers on the right. The price stands by itself, and the two small things share a baseline. */
.booking-module .package-price {
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label label" "price save" "was note";
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: baseline;
}
.booking-module .package-price .package-price__from { grid-area: label; }
.booking-module .package-price .package-price__tag { display: contents !important; }
.booking-module .package-price .package-price__tag b { grid-area: price; padding: 0; line-height: var(--leading-tight); }
.booking-module .package-price .per-person { grid-area: note; justify-self: end; text-align: right; font-size: var(--text-body-sm); }
/* The saving against the earlier price, beside the price it belongs to. The one bright shape in the box after the button. */
/* With no earlier price the note takes the whole line, on the left. */
.booking-module .package-price .package-price__tag:not(:has(del)) ~ .per-person { grid-column: 1 / -1; justify-self: start; }

/* Group prices: the one raised panel inside the box. */
.booking-module .group-price {
  padding: var(--space-2) var(--space-3) !important;
  border: var(--border-hairline) solid var(--night-700) !important;
  border-radius: var(--radius-xl);
  corner-shape: squircle;
  background: var(--night-800) !important;
}
.booking-module .group-price::before,
.booking-module .group-price::after { background: transparent !important; }
.booking-module .group-price .collapsible,
.booking-module .group-price .cost-schedule,
.booking-module .group-price .cost-schedule table,
.booking-module .group-price .cost-schedule table tr,
.booking-module .group-price .cost-schedule table td {
  background: transparent !important;
  box-shadow: none !important;
}
.booking-module .group-price .collapsible,
.booking-module .group-price .collapsible::after,
.booking-module .group-price .cost-schedule table > tbody > tr > td .price {
  color: var(--color-on-dark) !important;
}
.booking-module .group-price .collapsible { font-size: var(--text-body-lg) !important; }
/* The heading is a button: it keeps the heading's look and fills the row. */
.booking-module .group-price button.collapsible { width: 100%; font-family: inherit; font-weight: var(--weight-bold); text-align: start; background: none !important; }
.booking-module .group-price button.collapsible:focus-visible { outline: var(--focus-width) solid var(--color-base); outline-offset: var(--focus-offset); }
.booking-module .group-price .cost-schedule table > tbody > tr > td { color: var(--color-on-dark-muted) !important; }
.booking-module .group-price .cost-schedule table tbody tr { border-bottom-color: var(--night-700) !important; }
.booking-module .group-price .cost-schedule table tbody tr:last-child { border-bottom: 0 !important; }
/* What each person saves against one person alone: a small tag before the price. A faint wash with white words, so the tag on the top edge stays the one bright shape. */
.booking-module .group-price .cost-schedule table > tbody > tr > td { vertical-align: middle; white-space: nowrap; }

/* The one main button: the leaf green, with dark words. On hover it lightens one step. */
.booking-module .booking-trip .btn-book-trip {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4) !important;
  border: var(--border-strong) solid var(--color-primary) !important;
  border-radius: var(--radius-2xl) !important;
  corner-shape: squircle;
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  font-size: var(--text-body-lg) !important;
  font-weight: var(--weight-extrabold);
}
.booking-module .booking-trip .btn-book-trip:hover,
.booking-module .booking-trip .btn-book-trip:active {
  border-color: var(--leaf-400) !important;
  background-color: var(--leaf-400) !important;
  color: var(--color-on-primary) !important;
}
.booking-module .booking-trip .btn-book-trip:focus-visible,
.booking-module a:focus-visible,
.booking-module button:focus-visible,
.booking-module .price-tooltip-trigger:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-on-dark) !important;
  outline-offset: var(--focus-offset);
  box-shadow: none !important;
}

/* The second action: an outline, so the green stays the one filled shape. */
.booking-module .booking-trip .btn-book-second {
  min-height: var(--touch-min);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4) !important;
  border: var(--border-strong) solid var(--night-400) !important;
  border-radius: var(--radius-2xl) !important;
  corner-shape: squircle;
  background-color: transparent !important;
  color: var(--color-on-dark) !important;
  font-size: var(--text-body-md) !important;
  font-weight: var(--weight-bold);
}
.booking-module .booking-trip .btn-book-second:hover,
.booking-module .booking-trip .btn-book-second:active {
  border-color: var(--color-on-dark-muted) !important;
  background-color: var(--night-800) !important;
  color: var(--color-on-dark) !important;
}

/* The two lines about the company, under a rule at the foot. */
.booking-module .book-service {
  margin: var(--space-3) 0 0 !important;
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--night-700);
}
.booking-module .book-service,
.booking-module .book-service li { color: var(--color-on-dark-muted) !important; }
/* The icons are decoration beside words, so they sit back. */
.booking-module .book-service li::before { color: var(--night-400) !important; }
/* The link's words stay white. Its underline is quiet, and firms up on hover. */
.booking-module .book-service a {
  color: var(--color-on-dark-link) !important;
  text-decoration: underline;
  text-decoration-color: var(--night-400);
  text-decoration-thickness: var(--border-hairline);
  text-underline-offset: var(--space-1);
}
.booking-module .book-service a:hover { text-decoration-color: currentColor; }


/* The WhatsApp block under the box: its question, a line of help and the link, on the pale mist ground with the site's squircle corner.
   The icon sits on a round light green ground in the brand's dark green, as the note beside the trip's name does.
   A service's own colour is not used: a link to another service takes the brand's roles. */
.booking-sidebar a.booking-trip__inquiry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4) !important;
  border: 0 !important;
  border-radius: var(--radius-2xl) !important;
  corner-shape: squircle;
  background: var(--color-surface) !important;
  box-shadow: none !important;
  color: var(--color-contrast) !important;
  text-decoration: none;
}
.booking-sidebar a.booking-trip__inquiry:hover { background: var(--night-100) !important; }
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-7);
  height: var(--space-7);
  border-radius: 50%;
  /* Filled: a solid dark green round with the mark in white, 7.74 to 1. */
  background: var(--color-primary-dark) !important;
  color: var(--color-on-primary-dark) !important;
}
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-icon i { color: inherit !important; font-size: var(--text-body-xl); }
/* The help line and the link are inline, so the block sets their spacing: at its own 16px it held them 26px apart. */
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-copy { display: block; font-size: var(--text-body-md); line-height: var(--leading-body); }
/* The question on the first line. The line of help and the link run on together under it, and the link never breaks. */
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-title { display: block; }
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-text { display: inline; }
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-text { margin: var(--space-1) 0; color: var(--color-muted) !important; font-size: var(--text-body-md); line-height: var(--leading-body); }
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-action { display: inline; white-space: nowrap; }
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-title {
  margin: 0;
  color: var(--color-contrast) !important;
  font-size: var(--text-body-md);
  font-weight: var(--weight-bold);
}
.booking-sidebar a.booking-trip__inquiry .booking-trip__inquiry-action {
  margin: 0;
  color: var(--color-link) !important;
  font-size: var(--text-body-md);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}
.booking-sidebar a.booking-trip__inquiry:focus-visible { outline: var(--focus-width) solid var(--color-focus) !important; outline-offset: var(--focus-offset); }
/* The theme frames the box and this line together in a pale panel. Each stands by itself now. */
.booking-sidebar .booking-module-content { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Between the tablet and the wide screen the box is under 280 pixels wide. The saving moves up beside the label so the price
   has its line, and in the group rows each saving stands above its price. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .booking-module .package-price { grid-template-areas: "label save" "price price" "was note"; }
  .booking-module .package-price .per-person { white-space: normal; }
  .booking-module .group-price .cost-schedule table > tbody > tr > td:last-child { white-space: normal; text-align: right; }
}