/*
 * Currency switcher styles. Served from public/ (NOT bundled by Vite) and linked from the
 * document head ONLY on builds where the currencySwitcher flag is on, so it never touches
 * the live document. Same-origin, so it is inside the site CSP (default-src 'self').
 *
 * Money visibility: every figure ships all three currencies as spans; data-currency on
 * <html> decides which shows, and ONLY the selected one is visible (client decision
 * 2026-08-13, replacing the earlier always-visible secondary TL line).
 */
.dt-money-fig {
  display: none;
  /* Keep each figure atomic: "$230" and "₺11,010" must never split across two lines. */
  white-space: nowrap;
}
html[data-currency='try'] .dt-money-try,
html[data-currency='eur'] .dt-money-eur,
html[data-currency='usd'] .dt-money-usd {
  display: inline;
}

/* ---------- the control ---------- */
/* Right-aligned and compact (client, 2026-08-13, from the staging screenshot). The row is
 * the popover's positioning context, so the panel hugs the row's right edge wherever the
 * icon sits and can never run off a phone's left edge. */
.dt-currency {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 14px;
  margin: 0 0 28px;
}

/* On wide screens the right-aligned row sat too tight under the section text (client,
 * Fleet page, 2026-08-13, flagged twice); phones already read fine, so the air is
 * desktop-only. */
@media (min-width: 900px) {
  .dt-currency {
    margin-top: 34px;
  }
}

.dt-currency-controls {
  display: inline-flex;
  border: 1px solid var(--dt-brass);
  background: rgba(194, 168, 120, 0.06);
}

.dt-currency-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(194, 168, 120, 0.4);
  color: inherit;
  font-family: var(--dt-sans);
  font-size: var(--dt-text-label-sm);
  letter-spacing: 0.18em;
  padding: 7px 12px;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dt-currency-btn:last-child {
  border-right: 0;
}

.dt-currency-btn:hover {
  background: rgba(194, 168, 120, 0.16);
}

.dt-currency-btn[aria-pressed='true'] {
  background: var(--dt-brass);
  color: var(--dt-deep);
  font-weight: 600;
}

/*
 * The rate disclosure: icon-only, the Booking.com shape (client, 2026-08-13) - a lone ⓘ
 * whose full sentence opens on click via native <details> - no JS, keyboard-operable, no
 * hover dependency. The open panel floats below-right so nothing in the page reflows.
 * The summary padding exists purely to give the glyph a finger-sized tap target.
 */
.dt-currency-note {
  position: static; /* the panel anchors to .dt-currency, not to the icon */
  margin: 0;
}

.dt-currency-note summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--dt-sans);
  font-size: 1.05rem;
  line-height: 1;
  padding: 6px;
  margin: -6px;
  opacity: 0.7;
  white-space: nowrap;
}

.dt-currency-note summary::-webkit-details-marker {
  display: none;
}

.dt-currency-note summary:hover,
.dt-currency-note[open] summary {
  opacity: 1;
}

.dt-currency-note-mark {
  color: var(--dt-brass);
}

.dt-currency-note p {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  margin: 0;
  width: min(44ch, 78vw);
  padding: 14px 16px;
  font-size: var(--dt-text-small);
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
  background: var(--dt-ivory, #f4f1e8);
  border: 1px solid var(--dt-brass);
  box-shadow: 0 10px 28px rgba(10, 16, 48, 0.14);
}