/* VRCC Local Fixes - price breakdown.

   Colours are set explicitly rather than inherited. The block sits inside the
   availability status element, which turns green when dates are available, and
   the whole breakdown was picking that colour up.

   --vrcc-lf-navy matches the villa headings and the booking button
   (rgb(41, 57, 75)); --vrcc-lf-text matches the body copy on the villa pages
   (rgb(96, 98, 100)). */

.vrcc-lf-price {
  --vrcc-lf-navy: #29394b;
  --vrcc-lf-text: #606264;
  --vrcc-lf-rule: rgba(41, 57, 75, 0.14);

  margin: 14px 0 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vrcc-lf-text);
}

.vrcc-lf-price:empty {
  display: none;
}

.vrcc-lf-price__loading {
  padding: 10px 0;
  color: var(--vrcc-lf-text);
  opacity: 0.6;
}

.vrcc-lf-price__notice {
  padding: 10px 12px;
  border-left: 3px solid var(--vrcc-lf-navy);
  color: var(--vrcc-lf-navy);
}

/* Headline: the total is what the guest is looking for. */
.vrcc-lf-price__headline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--vrcc-lf-navy);
}

.vrcc-lf-price__total-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--vrcc-lf-navy);
}

.vrcc-lf-price__total-label {
  color: var(--vrcc-lf-text);
}

.vrcc-lf-price__sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--vrcc-lf-text);
}

/* Toggle. A span, not a button, so the theme's button styling cannot
   override the text colour and leave an empty box. */
.vrcc-lf-price__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--vrcc-lf-navy);
  -webkit-text-fill-color: var(--vrcc-lf-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  user-select: none;
}

.vrcc-lf-price__toggle:hover,
.vrcc-lf-price__toggle:focus-visible {
  color: var(--vrcc-lf-navy);
  -webkit-text-fill-color: var(--vrcc-lf-navy);
  opacity: 0.75;
}

.vrcc-lf-price__toggle:focus-visible {
  outline: 2px solid var(--vrcc-lf-navy);
  outline-offset: 3px;
}

.vrcc-lf-price__chevron {
  display: inline-block;
  transition: transform 0.18s ease;
  text-decoration: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.vrcc-lf-price__toggle.is-open .vrcc-lf-price__chevron {
  transform: rotate(180deg);
}

/* Detail */
.vrcc-lf-price__detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--vrcc-lf-rule);
}

.vrcc-lf-price__detail[hidden] {
  display: none;
}

.vrcc-lf-price__lines {
  width: 100%;
  border-collapse: collapse;
}

.vrcc-lf-price__lines td {
  padding: 5px 0;
  border: 0;
  vertical-align: top;
  color: var(--vrcc-lf-text);
}

.vrcc-lf-price__lines td:last-child {
  text-align: right;
  white-space: nowrap;
  padding-left: 12px;
  color: var(--vrcc-lf-navy);
}

.vrcc-lf-price__pct {
  opacity: 0.6;
  font-size: 12px;
}

.vrcc-lf-price__line--sum td {
  padding-top: 9px;
  border-top: 1px solid var(--vrcc-lf-rule);
  font-weight: 600;
  color: var(--vrcc-lf-navy);
}

.vrcc-lf-price__notes {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(41, 57, 75, 0.08);
  font-size: 12px;
  color: var(--vrcc-lf-text);
  opacity: 0.85;
}

/* Price on result cards */
.vrcc-lf-card-price {
  --vrcc-lf-navy: #29394b;
  --vrcc-lf-text: #606264;

  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vrcc-lf-text);
}

.vrcc-lf-card-price__total {
  font-weight: 600;
  font-size: 15px;
  color: var(--vrcc-lf-navy);
}

.vrcc-lf-card-price__per {
  color: var(--vrcc-lf-text);
}

.vrcc-lf-card-price--loading {
  opacity: 0.45;
}

.vrcc-lf-card-price--short {
  font-size: 12px;
  color: var(--vrcc-lf-text);
  opacity: 0.85;
}