/* Phase 5v — multi-currency display toggle. Display only; all bookings
   are charged in Thai Baht. */

/* ---------- Toggle chip in the search bar ---------- */

.mps-currency-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.mps-currency-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(19, 27, 45, 0.1);
  color: var(--mps-ink, #131b2d);
  font-family: -apple-system, "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.mps-currency-toggle-btn:hover {
  background: #fbf8f1;
  border-color: #c7b08f;
}
.mps-currency-toggle-btn[aria-expanded="true"] {
  border-color: #354766;
  box-shadow: 0 0 0 3px rgba(53, 71, 102, 0.14);
}
.mps-currency-toggle-icon { font-size: 0.9rem; opacity: 0.75; }
.mps-currency-toggle-code { letter-spacing: 0.02em; }

.mps-currency-toggle-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e6ddc9;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(19, 27, 45, 0.14);
  font-family: -apple-system, "Inter", sans-serif;
}

.mps-currency-toggle-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  font-size: 0.85rem;
  color: var(--mps-ink, #131b2d);
  cursor: pointer;
}
.mps-currency-toggle-item:hover { background: #fbf8f1; }
.mps-currency-toggle-item.is-active {
  background: #354766;
  color: #f4e7c8;
  font-weight: 500;
}
.mps-currency-toggle-item.is-active .mps-currency-toggle-sym { color: #f4e7c8; }
.mps-currency-toggle-sym {
  display: inline-flex;
  justify-content: center;
  min-width: 24px;
  color: #7a8496;
  font-weight: 600;
}
.mps-currency-toggle-name { flex: 1 1 auto; }

.mps-currency-toggle-note {
  padding: 8px 10px 4px;
  font-size: 0.7rem;
  color: #7a8496;
  border-top: 1px dashed #e6ddc9;
  margin-top: 4px;
  font-style: italic;
}

/* ---------- Converted subline under prices ---------- */

/* The subline lives inside the same element that owns the THB price.
   We display it as its own block so it drops onto its own line under
   the primary number. Inherits the parent's text-align so it lines up
   naturally on the right in the /checkout breakdown. */
.mps-currency-sub {
  display: block;
  width: 100%;
  flex-basis: 100%;
  text-align: inherit;
  font-size: 0.78em;
  font-weight: 400;
  color: #7a8496;
  margin-top: 2px;
  letter-spacing: 0.01em;
}

/* On villa cards the price is inline-flex — force wrap so the subline
   truly falls onto its own line. */
.villa-price .mps-currency-sub {
  order: 999;
  margin-top: 0;
  text-align: left;
}
.villa-price { flex-wrap: wrap; }

/* Right-align the subline on /checkout breakdown rows so it hangs under
   the amount rather than pulling left. */
.mps-checkout-breakdown-row .mps-currency-sub,
.mps-checkout-summary .mps-checkout-split .mps-currency-sub,
.mps-checkout-total-row .mps-currency-sub { text-align: right; }

/* On dark cards / heroes (like the /checkout total row), preserve the
   translucent-navy tone. */
.mps-checkout-total-row .mps-currency-sub { color: rgba(19, 27, 45, 0.55); }