/**
 * Currency toggle (header) + currency-aware price display (property
 * cards/listings/details/sticky CTA). The FX API integration
 * (includes/exchange-rate.php) this was deferred until now exists - see
 * includes/currency.php for the server-side rendering half and
 * assets/js/currency-toggle.js for the client-side toggle/apply logic.
 *
 * ISOLATION: self-contained under the .currency-toggle-* and
 * .currency-price-* namespaces. header.css still owns the OUTER box styling for
 * .currency-toggle-placeholder (border/padding/radius/the transparent-
 * header color variant) - this file only adds the new interactive
 * trigger/panel it didn't have before, following the same dfr-dropdown
 * panel visual language already used elsewhere (white panel, stone
 * border, 8px radius, soft shadow) rather than inventing a new one.
 */

/* ---- Header trigger button (reset to look identical to the old
   plain-div placeholder it replaced) ---- */

.currency-toggle-placeholder {
    position: relative;
}

.currency-toggle-placeholder__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* ---- Dropdown panel ---- */

.currency-toggle-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 200;
    min-width: 220px;
    padding: 6px;
    background-color: var(--color-white);
    border: 1px solid var(--color-stone);
    border-radius: 8px;
    box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.currency-toggle-panel.is-open {
    display: block;
}

.currency-toggle-panel__option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: 6px;
    text-align: left;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-charcoal);
    cursor: pointer;
}

.currency-toggle-panel__option:hover {
    background-color: var(--color-light-neutral);
}

.currency-toggle-panel__option.is-selected {
    font-weight: 600;
    color: var(--color-primary-green);
}

/* ---- Mobile drawer's own toggle: keep it simple, no dropdown - the two
   options are already both visible side-by-side (see mobile-nav-drawer.php),
   so "select one" is just moving which one has the --active class. No
   extra CSS needed here beyond header.css's existing
   .mobile-nav-drawer__currency-option rules. ---- */

/* ---------------------------------------------------------------------
 * Currency-aware price display - includes/currency.php's render_price_html()
 * output. One shared component used by every price on the site.
 * --------------------------------------------------------------------- */

.currency-price {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.currency-price__value {
    /* Deliberately no font styling here - every existing call site already
       applies its own typography via the extra class passed to
       render_price_html() (.property-price-inline, .pd-price,
       .pd-sticky-price, .inv-opp-card__stat-value) - this component only
       ever adds behavior (the swappable value + the note), never
       overrides how a price actually looks in each context. */
}

/* "Originally listed in X" note - each price now carries its own real
   native currency (.native-ngn or .native-usd, from includes/currency.php's
   render_price_html()), so visibility can no longer be a blanket
   "show whenever USD is selected" - it must show only when the
   CURRENTLY DISPLAYED currency differs from THIS property's native one,
   in either direction:
     - native-usd, displaying NGN (default, no .is-usd yet) -> show
     - native-ngn, displaying USD (.is-usd applied)          -> show
     - native currency === displayed currency                -> hide
   assets/js/currency-toggle.js only ever toggles the .is-usd class - it
   has no per-property awareness, so both rules below are what actually
   produce the correct per-property visibility from that one class. */
.currency-price__note {
    display: none;
    align-items: center;
    gap: 4px;
    /* .property-price-inline (property-components.css) sets display:block
       on the parent .currency-price, which wins over this file's own
       display:inline-flex on that parent (see this file's own file
       comment - property cards intentionally keep their own typography/
       layout rules, this component only ever adds behavior). That means
       on cards the value and this note end up flowing as plain inline
       content on the same line with no gap between them, instead of the
       column-stacked layout this component gets everywhere its parent IS
       still a flex container (e.g. property-details.css's .pd-price
       override). This margin is what actually creates breathing room in
       that inline-flow case. */
    margin-left: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    color: #717171;
}

.currency-price.native-usd:not(.is-usd) .currency-price__note,
.currency-price.native-ngn.is-usd .currency-price__note {
    display: inline-flex;
}

.currency-price__disclaimer {
    position: relative;
    display: inline-flex;
    cursor: help;
}

.currency-price__disclaimer-icon {
    font-size: 12px;
    line-height: 1;
    color: #717171;
}

.currency-price__disclaimer-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 220px;
    padding: 10px 12px;
    background-color: var(--color-primary-green);
    color: var(--color-white);
    border-radius: 6px;
    /* font-family and white-space are both explicit here, not inherited -
       without them the tooltip picked up whatever its price ancestor
       happened to set. .pd-price uses --font-heading/Playfair Display (a
       wider serif) instead of --font-body/Inter used elsewhere (e.g.
       .property-price-inline on cards), and separately sets white-space:
       nowrap (correct for its own price digits, which must never wrap) -
       with neither overridden here, the tooltip inherited BOTH: the wider
       font alone would wrap this text onto an extra line versus other
       contexts, and nowrap on top of that stopped it wrapping at all,
       clipping it to one overflowing line instead. This is small UI copy,
       not display heading text, so it should render identically - same
       font, same normal wrapping - everywhere regardless of context. */
    font-family: var(--font-body);
    white-space: normal;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 400;
    text-align: left;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
}

.currency-price__disclaimer:hover .currency-price__disclaimer-tooltip,
.currency-price__disclaimer:focus .currency-price__disclaimer-tooltip,
.currency-price__disclaimer:focus-visible .currency-price__disclaimer-tooltip {
    display: block;
}

@media (max-width: 640px) {
    .currency-toggle-panel {
        right: -12px;
        min-width: 200px;
    }
}