/* Site-specific overrides for the agency theme (app.min.css / vendor.min.css ship minified
   and shouldn't be hand-edited). Loaded after both, so plain rules here can override
   !important theme rules only if this file's own declaration is also !important. */

/* FundingWithdrawals: the theme's .methods-table .method img rule forces a 34x34 circular
   box (border-radius:50%), sized for the old -circle.svg icons. The flat logos now used
   here (matching _PaymentMethods.cshtml) are wide rectangular lockups (~2.2-3.5:1) - a
   circular crop on a rectangular logo looked broken, and squeezing them into a square via
   object-fit:contain shrank the visible logo down to a sliver. Fixed height + auto width
   keeps them at a consistent height while preserving each logo's real aspect ratio, and
   border-radius is dropped since these aren't circular icons anymore. */
section.pm-deposits .methods-table .method img {
    width: auto !important;
    height: 24px !important;
    border-radius: 0 !important;
}

/* FundingWithdrawals: the theme's own CSS already swaps the deposit/withdrawal *note*
   text via .methods.is-withdrawal (see app.min.css), but never defined how the two
   .methods-table[data-mode] tables themselves should switch - there was no CSS or JS
   wired up for the DEPOSIT/WITHDRAWAL buttons at all. This extends the same
   is-withdrawal convention to the tables; bundle.js's "DEPOSIT/WITHDRAWAL SWITCH"
   handler toggles the class on click. */
section.pm-deposits .methods-table {
    display: none;
}

section.pm-deposits .methods:not(.is-withdrawal) .methods-table[data-mode="deposit"],
section.pm-deposits .methods.is-withdrawal .methods-table[data-mode="withdrawal"] {
    display: block;
}

/* FundingWithdrawals: .pm-market-single-about's shared padding:100px 0 is tuned for
   InstrumentChart, where it follows a section with negative margins pulling content up.
   Here it sits right after .pm-deposits, which already has its own 60px bottom padding -
   stacked together the gap was ~160px, way more than the ~40-60px used between every
   other section on this page. Trimmed just for this adjacency, not the shared class. */
section.pm-deposits + section.pm-market-single-about {
    padding-top: 40px !important;
}

/* Trading pages topic cluster (OrderExecution/SlippageRequotePolicy/MetaTrader5/TradingHours):
   a "Related Topics" cross-link section for internal linking between these 4 related pages.
   No existing theme class covers a plain link-card row, so styled minimally here rather than
   inventing new theme-wide classes for a one-off pattern. The section itself and its .head/.title
   had no theme rule at all (new class), so they fell back to unstyled browser defaults (0
   padding, left-aligned untitled-looking heading) instead of matching every other section's
   rhythm - .pm-payment-methods/.pm-market-faq's .head{text-align:center;max-width;margin:0 auto
   50px} + .head .title{font-size:var(--font-text-size-3xl);font-weight:700} pattern replicated
   here (via the same CSS variables so it stays in sync with the theme) rather than reusing an
   existing section class, since related-links' layout needs are different enough. */
section.pm-related-topics {
    position: relative;
    padding: 100px 0;
    background: var(--white-color);
}

/* Matches the theme's own breakpoint for reducing section padding at narrower widths (verified
   empirically: .pm-market-faq/.pm-payment-methods/etc. all drop from their 100px/70px/etc. base
   to a uniform 60px 0 at max-width:991px - Bootstrap's lg breakpoint - via a theme rule that
   lists specific section classes rather than a generic "pm-" prefix selector, so a new class
   doesn't inherit it automatically and needs its own copy of the same breakpoint). */
@media (max-width: 991px) {
    section.pm-related-topics {
        padding: 60px 0;
    }
}

.pm-related-topics .head {
    position: relative;
    text-align: center;
    max-width: 780px;
    margin: 0 auto 50px;
}

.pm-related-topics .head .title {
    position: relative;
    font-size: var(--font-text-size-3xl);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.1;
}

.pm-related-topics .related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pm-related-topics .related-link {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(15, 43, 56, 0.1);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pm-related-topics .related-link:hover {
    border-color: #00BB8A;
    transform: translateY(-2px);
}

.pm-related-topics .related-link .name {
    display: block;
    font-weight: 600;
    color: #0F2B38;
    margin-bottom: 4px;
}

.pm-related-topics .related-link .desc {
    display: block;
    font-size: 14px;
    color: #6b7280;
}

.pm-related-topics .related-link i {
    color: #00BB8A;
    flex-shrink: 0;
}

/* Trader Tools calculators: the theme's own .calc-note rule (app.min.css) is scoped to
   "... .pm-calc .calc-note" only - CurrencyConverter's widget is a .pm-converter (the theme's
   own class for it, distinct from .pm-calc), which the original template never paired with a
   .calc-note, so the note there fell back to unstyled dark/larger text. Mirrors the .pm-calc
   rule exactly for the .pm-converter case. */
section.pm-calculators-items .content .pm-converter .calc-note {
    font-size: var(--font-text-size-xs);
    font-weight: 400;
    color: var(--light-text-color);
    line-height: 1.6;
    margin-top: 18px;
}

/* Currency Converter: the theme's own CSS sets ".pm-converter .currency" to position:static
   (app.min.css), while the identical ".pm-calc .currency" used by every other calculator is
   position:relative. Bootstrap/Popper still computes the dropdown's transform correctly against
   the toggle button's on-screen position, but the resulting position:absolute menu resolves
   against the nearest *positioned* ancestor - with .currency itself static, that ends up being
   the whole widget card (.content.currency) instead of the button, so the menu rendered pinned to
   the card's own corner rather than under the button that opened it. Restoring position:relative
   here (matching .pm-calc) fixes the containing block without touching app.min.css. */
section.pm-calculators-items .content .pm-converter .currency {
    position: relative !important;
}

/* Same theme inconsistency, different symptom: ".pm-converter .currency-menu" is "width:100%"
   (app.min.css) - 100% of the narrow icon+code toggle button that opens it, not of anything wide
   enough to fit a currency name - while ".pm-calc .currency-menu" (every other calculator's
   dropdown) is a fixed "min-width:260px". Once the menu was correctly anchored under the button
   (see the position fix above), that width difference became visible as every "US Dollar"/
   "British Pound"/etc. label getting clipped to "US…"/"Bri…". Matches .pm-calc's own sizing. */
section.pm-calculators-items .content .pm-converter .currency-menu {
    width: auto !important;
    min-width: 260px !important;
}

/* Trader Tools result boxes: title + boxed value(s) + a short explanatory line, shared by every
   calculator - Margin & Leverage, Profit & Loss and Swap Rates inside their .calc-result .inner
   (shown only after CALCULATE), Pivot Point the same way alongside its own pre-existing .levels
   grid (untouched), and Currency Converter inside its always-visible .rate-line (no CALCULATE
   button - the rate is live from page load) instead of a .calc-result box, since it has none.
   .result-title/.result-grid/.result-item/.result-desc are new class names that don't exist
   anywhere else in the theme, so they're shared across all 5 pages unscoped - only the spacing
   between them (flex+gap for .calc-result .inner, plain margin-top for .rate-line, since the
   latter must keep app.min.css's own text-align:center/margin-bottom rather than becoming a flex
   container) needs a container-class list, because ".inner"/".rate-line" themselves are pre-existing
   generic theme classes. */
section.pm-calculators-items .content .pm-margin-calc .calc-result .inner,
section.pm-calculators-items .content .pm-pl-calc .calc-result .inner,
section.pm-calculators-items .content .pm-swap-calc .calc-result .inner,
section.pm-calculators-items .content .pm-pivot-calc .calc-result .inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Currency Converter's .rate-line had no outer box and stayed centered (app.min.css's own
   text-align:center) after the result-title/result-grid/result-desc markup landed, while every
   other calculator's equivalent (.calc-result .inner) is a left-aligned bordered/tinted box
   containing its title+value+description as one group. Matches that exactly: left-align overrides
   the inherited center, and the same border/background/padding .calc-result .inner already gets
   from app.min.css is replicated here since .rate-line isn't a .calc-result at all.
   Also repositioned in the markup to sit after the amount fields/disclaimer (like every other
   calculator's result, which only appears below its inputs) instead of above them - app.min.css's
   own .rate-line{margin-bottom:30px} was sized for when it sat above the fields; overridden here
   with a margin-top instead (matching .calc-result.is-visible's own 40px gap from what's above it)
   since it's now the trailing element in the widget. */
section.pm-calculators-items .content .pm-converter .rate-line {
    text-align: left;
    padding: 12px 25px;
    border: 1px solid #00BB8A;
    background: #DDFFF6;
    margin-top: 40px;
    margin-bottom: 0;
}

section.pm-calculators-items .content .pm-converter .rate-line .result-grid,
section.pm-calculators-items .content .pm-converter .rate-line .result-desc {
    margin-top: 12px;
}

section.pm-calculators-items .content .result-title {
    font-size: var(--font-text-size-md);
    font-weight: 700;
    color: var(--text-color);
}

/* auto-fit + minmax adapts to however many .result-item boxes are inside without a page-specific
   column-count modifier: Margin & Leverage/Profit & Loss/Currency Converter pass one item (a single
   full-width box), Swap Rates passes two (side by side on tablet/desktop, stacking on narrow
   phones automatically - no manual breakpoint needed). */
section.pm-calculators-items .content .result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

section.pm-calculators-items .content .result-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #00BB8A;
    border-radius: 8px;
    background: #DDFFF6;
}

section.pm-calculators-items .content .result-item .key {
    font-size: var(--font-text-size-sm);
    font-weight: 400;
    color: var(--light-text-color);
}

section.pm-calculators-items .content .result-item .val {
    font-size: var(--font-text-size-lg);
    font-weight: 700;
    color: var(--text-color);
}

section.pm-calculators-items .content .result-desc {
    font-size: var(--font-text-size-xs);
    font-weight: 400;
    color: var(--light-text-color);
    line-height: 1.5;
}

/* SwapRates.cshtml: Commodities, Indices and Shares don't have a published static swap
   rate (MarketDataProvider only carries SwapLong/SwapShort for the handful of instruments
   the Trader Tools calculators use), so those tabs show one explanatory row instead of
   fabricated numbers. The theme's swap-table cells don't have a centered/muted note style. */
section.pm-swap-rates .swap-empty-note {
    text-align: center;
    padding: 24px 16px;
    font-size: var(--font-text-size-sm);
    color: var(--light-text-color);
}

/* Faq.cshtml: each tab-pane needs its own real heading (not just the already-visible pill
   label) for a correct H1->H2->H3 document outline per tab. Tried `.sr-only` first, but the
   theme's own generic `h2{...}` rule (app.min.css) still renders it at full size/visible for
   this element - rather than fight that specificity, kept it a real visible heading and just
   de-emphasized it here, since a visible section heading is better for SEO/a11y anyway than a
   hidden one that silently fails to hide. */
.pm-faq-tab-heading {
    font-size: var(--font-text-size-sm) !important;
    font-weight: 400 !important;
    color: var(--light-text-color) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 20px !important;
}

/* LegalDocumentSingle: every `section.pm-legal ...` rule in app.min.css is a delta on top of
   `section.pm-lesson`'s base sidebar+content layout (sidebar-inner/.module/.lessons/.lesson-content
   - shared with the not-yet-built LearnHub single-lesson page), not a standalone component - there
   is no bare `section.pm-legal { ... }` base rule anywhere in the theme. The view's root section
   carries BOTH classes (`pm-lesson pm-legal`) so it gets the full base layout (including the
   existing max-width:991px rule that un-sticks `.sidebar-inner` on mobile/tablet) plus the
   `.pm-legal`-specific deltas, exactly as the raw template intends - no extra CSS needed here.

   LegalDocumentSingle's closing "this is a summary, not the full document" callout - the theme has
   no such component; matches the same green-tinted highlight box used by the Trader Tools
   calculators' result boxes (see .result-item / .rate-line above) for visual consistency. */
.pm-legal-doc-note {
    margin-top: 30px;
    padding: 30px;
    border: 1px solid #00BB8A;
    background: #DDFFF6;
    border-radius: 12px;
}

.pm-legal-doc-note .name {
    font-size: var(--font-text-size-lg);
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 10px;
}

.pm-legal-doc-note .btn-green-to-dark-green,
.pm-legal-doc-note .btn-outline-black-to-green {
    display: inline-block;
    margin-top: 10px;
    margin-right: 12px;
}

/* Breadcrumb trail, rendered by Views/Shared/Layout/_Breadcrumbs.cshtml as its own dedicated bar
   between the header and each page's own content (called unconditionally from _Layout.cshtml, like
   _HeaderTop.cshtml - a page opts in by setting ViewData["Breadcrumbs"], nothing else). The theme
   ships no breadcrumb component at all, so this is built fresh rather than adapted from an existing
   rule. Sitting in its own bar (not inside any page's hero) means this never needs a z-index lift to
   escape a hero's `.cover` background image - see project_breadcrumbs_prototype for the two real
   bugs an earlier in-hero version of this hit and why moving it out here fixes both at the source.

   position:relative + z-index:5 is still needed here though, for a different reason: many hero
   sections (section.pm-page-head, section.pm-mt5-hero, etc.) use `margin-top: -82px` to pull
   themselves up flush under the header (the theme's own trick for a header that visually floats
   over a hero image). That negative margin was calibrated assuming the hero is the very next
   element after the header - now that this bar sits between them, the hero's negative margin
   pulls it up to overlap this bar instead, and since both are `position:relative` siblings with
   z-index:auto, the hero (later in DOM order) painted on top and hid the bar completely on every
   page whose hero uses this trick. A z-index high enough to beat any hero section's own (the
   highest found in the theme is `.pm-page-head`'s z-index:1) forces this bar to win regardless of
   DOM order. */
.pm-breadcrumb-bar {
    position: relative;
    z-index: 5;
    padding: 14px 0;
    background: transparent;
}

/* A touch more breathing room above/below the breadcrumb on desktop/tablet specifically - kept at
   14px on mobile, where the extra 4px reads as more cramped rather than more spacious. Changing
   this value means the hero margin-top/padding-top pair below (calibrated to this exact padding)
   needs updating together with it - see that comment for why. */
@media (min-width: 768px) {
    .pm-breadcrumb-bar {
        padding: 18px 0;
    }
}

/* header.pm-header has no background color anywhere in the theme - it's transparent by design so
   a dark hero can show through it. Heroes compensate with margin-top:-82px, calibrated assuming
   the hero sits immediately after the header. Now that this breadcrumb bar sits in between, that
   same -82px no longer reaches back far enough - it leaves a sliver of the header's transparent
   area backed by nothing but the white <body> background, which reads as a "split header" (see
   project_breadcrumbs_prototype). Pages with a breadcrumb need the pull-up increased to close the
   gap again.

   margin-top is set to exactly -(header height + breadcrumb bar height) - just enough to sit the
   hero flush with the TOP of the header (not the theme's own -82px, which only matched the header
   alone) - measured 76px header + 54px bar >767px (bar padding is 18px above 767px, see
   ".pm-breadcrumb-bar" above), 70px header + 44.5px bar <=767px (bar padding stays 14px there).

   padding-top is then overridden (replacing each hero's own theme-defined value, which differs
   per hero class and per breakpoint - e.g. 167px/150px/120px depending on class and width) with
   that exact same number, positive instead of negative - which cancels the margin-top back out
   and leaves the hero's title starting exactly at the breadcrumb bar's own bottom edge. Since the
   bar's own top and bottom padding are already equal (14px each, see ".pm-breadcrumb-bar" above),
   this makes the visible gap above the breadcrumb text (14px, header to text) and below it (14px,
   text to title) the same everywhere, on every hero class and breakpoint. Without this override,
   the gap below the breadcrumb would instead be "whatever the hero's own native padding-top minus
   the margin happens to leave over," which swings wildly by hero class/breakpoint (from small
   overlaps to 50px+) - see project_breadcrumbs_prototype for a page-by-page before/after.
   !important is required on padding-top only because the theme's own responsive padding rules are
   themselves !important. */
body.has-breadcrumb section.pm-page-head,
body.has-breadcrumb section.pm-mt5-hero,
body.has-breadcrumb section.pm-account-types-page,
body.has-breadcrumb section.pm-trading-hours,
body.has-breadcrumb section.pm-globe-hero {
    margin-top: -130px;
    padding-top: 130px !important;
}

@media (max-width: 767px) {
    body.has-breadcrumb section.pm-page-head,
    body.has-breadcrumb section.pm-mt5-hero,
    body.has-breadcrumb section.pm-account-types-page,
    body.has-breadcrumb section.pm-trading-hours,
    body.has-breadcrumb section.pm-globe-hero {
        margin-top: -115px;
        padding-top: 115px !important;
    }
}

.pm-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pm-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-text-size-xs);
}

.pm-breadcrumbs a,
.pm-breadcrumbs span {
    color: var(--light-text-color);
}

.pm-breadcrumbs a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.pm-breadcrumbs a:hover {
    color: var(--light-green-color);
}

.pm-breadcrumbs li.current span {
    color: var(--text-color);
    font-weight: 600;
}

.pm-breadcrumbs i {
    font-size: 9px;
    color: var(--light-text-color);
}

/* .on-dark: applied by _Breadcrumbs.cshtml when ViewData["HeaderVariant"] == "light" (the page has
   a dark hero behind a transparent header - the exact same signal _Header.cshtml itself uses to
   pick white nav text). Transparent, not a flat fill: the bar sits directly on top of that same
   hero section (its negative margin-top, further compensated above for the breadcrumb bar's own
   height, always extends the hero behind the bar's full height - see the z-index note above), so
   whatever the hero itself is showing there - a flat color OR a "has-image" hero's cover photo -
   shows straight through. An earlier flat var(--dark-green-color) fill happened to match plain
   dark-color heroes but broke "has-image" heroes: it blocked out a rectangle of the photo,
   visible as a flat patch interrupting the image. Transparent is correct for both cases. */
.pm-breadcrumb-bar.on-dark {
    background: transparent;
    border-bottom: none;
}

.pm-breadcrumb-bar.on-dark .pm-breadcrumbs a,
.pm-breadcrumb-bar.on-dark .pm-breadcrumbs span,
.pm-breadcrumb-bar.on-dark .pm-breadcrumbs i {
    color: rgba(255, 255, 255, 0.7);
}

.pm-breadcrumb-bar.on-dark .pm-breadcrumbs a:hover {
    color: var(--white-color);
}

.pm-breadcrumb-bar.on-dark .pm-breadcrumbs li.current span {
    color: var(--white-color);
}

/* Icon-based card image for the Market News grid/hero (Views/LearnHub/MarketNews.cshtml) -
   the raw agency template hotlinked random picsum.photos images here since no real article
   photography exists; an accent-tinted icon panel replaces that without inventing fake photos. */
.item-image-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-blue-color);
}

.item-image-icon i {
    font-size: 42px;
    color: var(--light-green-color);
}

.pm-blog-hero .cover.item-image-icon {
    height: 100%;
}

.pm-blog-hero .cover.item-image-icon i {
    font-size: 64px;
}

/* Glossary A-Z nav (Views/LearnHub/Glossary.cshtml) - the theme ships no state for a letter
   with no terms yet, only ".active". Terms are filled in one letter at a time, so most letters
   are legitimately empty for now rather than broken - this greys them out and disables the
   pointer instead of leaving them looking identical to a working letter. */
.pm-alphabet .letter.disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* LessonSingle bold-term takeaway lists (.lesson-content ul li) - the theme's own rule is
   `section.pm-lesson .lesson-content ul { padding-left: 20px }` (app.min.css), which reserves
   room for the default outside bullet marker and pushes the <li> text 20px to the right of the
   paragraph and heading text above it (measured live: paragraph/h2 at x=121, li text at x=141
   in a 1200px viewport) - a real, measurable misalignment, not merely a cosmetic guess. A bare
   `.lesson-content ul` rule loses to that selector's higher specificity even placed later in the
   cascade, so this repeats the same `section.pm-lesson .lesson-content ul` prefix to actually
   win. No bullet marker at all (user asked for the leading dot removed entirely, not just
   repositioned) - the bold lead-in term itself is the only visual marker each item needs.
   list-style: none: removes the browser's own indented marker;
   padding-left: 0 (ul) + 0 (li): lets the text box start at the same edge as a <p>. */
section.pm-lesson .lesson-content ul {
    list-style: none;
    padding-left: 0;
}

.lesson-content li {
    padding-left: 0;
    text-align: left;
}

.lesson-content li strong {
    text-align: left;
}

/* LessonSingle's last section on the page (only) sits flush against its own bullet list -
   the theme's actual rule is `section.pm-lesson .lesson-content p:last-of-type { margin-bottom:
   0 }` (app.min.css), written for ArticleSingle/LegalDocumentSingle, where the very last
   paragraph in `.lesson-content` genuinely is the last thing on the page and the removed margin
   is exactly right. LessonSingle now always follows a section's second Body paragraph with its
   own <ul> of Points, so on *every* section that final Body paragraph would need its margin
   back - but `:last-of-type` only ever matches one <p> per page (the actual final paragraph
   among all of them, since every h2/p/ul in `.lesson-content` are flat siblings, not grouped per
   section), which is why only the *last* section's bullets visibly touch its own paragraph while
   every earlier section's spacing already looks fine. A bare `.lesson-content p:last-of-type`
   override (no `section.pm-lesson` prefix) loses on the element-count tiebreak even with an
   added `:has()`, same specificity trap as the two rules above - repeats the theme's exact
   `section.pm-lesson` prefix, plus :has(+ ul) so this only restores the margin when a list
   genuinely follows, leaving ArticleSingle/LegalDocumentSingle's own trailing paragraph (nothing
   follows it there) on the theme's original zero-margin behavior. */
section.pm-lesson .lesson-content p:last-of-type:has(+ ul) {
    margin-bottom: 20px;
}

/* Language switcher (Views/Shared/Layout/_Culture.cshtml). Theme's base .language .dropdown-menu
   is a narrow flag-only pill flyout (flex-direction:column) for a handful of languages; overflows
   with 15, so it's restyled as a grid below. !important beats the theme's ancestor-scoped
   selectors (e.g. header.pm-header .language .dropdown-menu.show), which ship minified and can't
   be edited directly. data-bs-display="static" on the toggle disables Popper, so positioning here
   is all explicit CSS (no [data-bs-popper]-gated Bootstrap classes).

   Header instance: fixed to the viewport at every width. Originally assumed bundle.js's
   show.bs.dropdown listener would set "top" inline to match the header's real height (like it
   does for .mainMenu dropdowns) - checked bundle.js directly (2026-09-14) and that listener's
   condition is `e.target.closest('.mainMenu')`, which this dropdown (outside .mainMenu) never
   matches, so nothing ever set it and the panel sat under a stale hardcoded guess (90px) instead
   of the header's real height. Real height only takes two values, both driven by the *same*
   ".scrolling" class bundle.js's own scroll listener already toggles reliably (confirmed live:
   121.5px normally - hello bar + nav - vs 76px once scrolled and the hello bar hides) - keying
   off that existing class is a pure-CSS fix with no bundle.js edit needed. Above 1200px - where
   header-whitening on .mainMenu opens also kicks in - it additionally goes full-bleed, matching
   the mainMenu megamenus ("Desktop: hover ile dropdown/megamenu" in bundle.js). This dropdown
   itself does not open on hover (verified live) - only .mainMenu's own dropdowns do.

   The .pm-quick-access modal instance just uses the plain compact grid below - it has no header
   row to align with. */
.language-menu.dropdown-menu.show {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    /* Not !important: the header instance below is more specific and needs to win this
       property on its own (its own value isn't !important either, so JS can then also
       override it inline - an !important here would beat both). */
    top: 100%;
    margin: 8px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px 16px !important;
    width: min(420px, calc(100vw - 24px)) !important;
    padding: 14px !important;
    border-radius: 12px !important;
}

.language-menu.dropdown-menu.show li a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 10px !important;
    border-radius: 8px;
    font-size: var(--font-text-size-sm);
    color: var(--light-text-color);
    white-space: nowrap;
    transition: background .2s ease;
}

.language-menu.dropdown-menu.show li a:hover {
    background: var(--light-gray-color);
}

header.pm-header .language-menu.dropdown-menu.show {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 137px; /* header's real height (hello bar + nav), not scrolled - see .scrolling override below */
    width: auto !important;
    margin: 0 !important;
    gap: 10px 20px !important;
    padding: 20px !important;
    box-shadow: var(--box-shadow-other-xs);
    z-index: 1045;
}

/* Header's hello-bar hides once .scrolling is toggled (bundle.js's own scroll listener), shrinking
   it down to just the nav row - matches that shorter height instead of leaving a gap/overlap. */
header.pm-header.scrolling .language-menu.dropdown-menu.show {
    top: 76px;
}

/* Above 1200px (where bundle.js's hover-open and header-whitening logic also kick in -
   window.matchMedia('(min-width: 1200px)')) it goes full-bleed instead of a floating card. */
@media (min-width: 1200px) {
    header.pm-header .language-menu.dropdown-menu.show {
        left: 0 !important;
        right: 0 !important;
        grid-template-columns: repeat(5, minmax(150px, 200px)); /* fixed 5 columns x 3 rows for the 15 languages */
        justify-content: center;
        gap: 14px 40px !important;
        width: 100% !important;
        padding: 28px 24px !important;
        border-radius: 0 !important;
        /* Matches the mainMenu megamenus' own subtle bottom shadow (.mainMenu .dropdown-menu's
           --box-shadow-other-xs). A plain box-shadow wraps all 4 sides, not just the bottom -
           with a 7px/29px offset/blur it bleeds ~20px upward too, which (since this panel sits
           flush against the header, not floating clear of it) shows as an unwanted gray band
           over the header's own bottom edge. The mainMenu megamenus hit this exact same issue and
           solve it with a plain white ::before strip masking the upward bleed - copied that same
           fix below instead of re-deriving a different one. */
        box-shadow: var(--box-shadow-other-xs) !important;
    }

    /* Masks the box-shadow's upward bleed described above - identical technique to
       .mainMenu .dropdown-menu::before in app.min.css, just re-declared here since that file
       isn't hand-edited and its selector doesn't reach this element anyway. */
    header.pm-header .language-menu.dropdown-menu.show::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -15px;
        height: 16px;
        background: var(--white-color);
    }
}

/* 404 (Views/Home/NotFoundPage.cshtml) and generic error (Views/Shared/Error.cshtml) pages -
   both a simple centered empty-state, no hero image, so plain padding is enough (header is
   position:static until scrolled, per app.min.css, so no negative-margin overlap to fight here). */
.pm-status-page {
    padding: 120px 0;
}

.pm-status-page .code {
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: var(--light-green-color);
}

.pm-status-page .title {
    margin-top: 16px;
}

.pm-status-page .text {
    margin-top: 12px;
    color: var(--light-text-color);
}

.pm-status-page .request-id {
    margin-top: 12px;
    color: var(--light-text-color);
    font-size: var(--font-text-size-sm);
}

.pm-status-page .actions {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

@media (max-width: 767px) {
    .pm-status-page {
        padding: 80px 0;
    }

    .pm-status-page .code {
        font-size: 64px;
    }
}

/* Footer "verify our licence" link (Views/Shared/Layout/_Footer.cshtml) - matches the
   surrounding .information-item text color/size, since the theme has no rule of its own
   for a link in this exact spot. */
.pm-footer .certification .verify-licence-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: var(--font-text-size-xs);
    color: #a7d0e4;
    text-decoration: underline;
}

.pm-footer .certification .verify-licence-link:hover {
    color: var(--light-green-color);
}

/* Contract Specifications page (Views/MarketsTools/ContractSpecifications.cshtml) - rebuilt to match
   Accounts/SwapRates.cshtml's white-hero + tabs-and-search-same-row layout, per user's screenshot
   reference. IMPORTANT: unlike some shared component classes elsewhere in the theme, NONE of
   .head/.swaps/.swaps-head/.swaps-bar/.swap-tabs/.swap-search/.swap-table/.instrument have an
   unscoped base rule anywhere in app.min.css - every single declaration for all of them is scoped to
   "section.pm-swap-rates" specifically (confirmed by walking every match's enclosing selector, not
   just the class name in isolation - an easy trap in a minified file). Since every other page on this
   site gets its own top-level section identity (pm-spreads, pm-margin-leverage, pm-swap-rates, ...)
   rather than sharing another page's literal class, the values below are copied from
   "section.pm-swap-rates"'s real rules and re-scoped under this page's own "pm-contract-specs" class,
   with the "lessons" band (not used on this page) omitted. This page also has a 4th table column
   (Quote Currency) that SwapRates' 3-column .col-short/.col-long treatment doesn't have a class for,
   so the 3 non-instrument columns share a new ".col-value" class with the same label-above-value
   mobile treatment .col-short/.col-long get on the reference page. */
section.pm-contract-specs {
    position: relative;
    padding: 40px 0 100px;
    background: var(--white-color);
}

section.pm-contract-specs .head {
    text-align: center;
    margin-bottom: 100px;
}

section.pm-contract-specs .head .title {
    font-size: var(--font-text-size-3xl);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.1;
}

section.pm-contract-specs .head .text {
    font-size: var(--font-text-size-md);
    font-weight: 400;
    color: var(--light-text-color);
    line-height: 1.5;
    margin-top: 15px;
}

section.pm-contract-specs .swaps-head {
    margin-bottom: 30px;
}

section.pm-contract-specs .swaps-head .title {
    font-size: var(--font-text-size-xl);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
}

section.pm-contract-specs .swaps-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 40px;
}

section.pm-contract-specs .swap-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

section.pm-contract-specs .swap-tabs .nav-link {
    min-height: 50px;
    min-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 0;
    border-radius: 50rem;
    background: var(--light-gray-color);
    font-size: var(--font-text-size-sm);
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    transition: all .25s ease;
}

section.pm-contract-specs .swap-tabs .nav-link:hover {
    background: rgba(24, 63, 73, .09);
}

section.pm-contract-specs .swap-tabs .nav-link.active {
    background: var(--light-green-color);
    color: var(--text-color);
}

section.pm-contract-specs .swap-tabs .nav-link:focus,
section.pm-contract-specs .swap-tabs .nav-link:focus-visible {
    outline: 0;
    box-shadow: none;
}

section.pm-contract-specs .swap-search {
    position: relative;
    flex: 0 0 auto;
    width: 250px;
}

section.pm-contract-specs .swap-search .field {
    width: 100%;
    min-height: 50px;
    padding: 10px 48px 10px 22px;
    border: 1px solid var(--border-color-light);
    border-radius: 50rem;
    background: var(--white-color);
    font-size: var(--font-text-size-md);
    color: var(--text-color);
    outline: 0;
    transition: border-color .25s ease;
}

section.pm-contract-specs .swap-search .field:focus {
    border-color: var(--light-green-color);
}

section.pm-contract-specs .swap-search .field::-webkit-search-cancel-button {
    display: none;
}

section.pm-contract-specs .swap-search .icon {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: var(--font-text-size-md);
    color: var(--light-text-color);
    transform: translateY(-50%);
    pointer-events: none;
}

section.pm-contract-specs .swap-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

section.pm-contract-specs .swap-table thead th {
    padding: 0 15px 18px;
    border-bottom: 1px solid rgba(24, 63, 73, .12);
    font-size: var(--font-text-size-md);
    font-weight: 700;
    color: var(--text-color);
    text-align: left;
    white-space: nowrap;
}

section.pm-contract-specs .swap-table th.col-symbol {
    width: 40%;
}

section.pm-contract-specs .swap-table tr.no-result td {
    font-size: var(--font-text-size-sm);
    font-weight: 400;
    padding: 45px 15px;
    text-align: center;
    color: var(--light-text-color);
}

section.pm-contract-specs .swap-table tbody td {
    padding: 22px 15px;
    border-bottom: 1px solid rgba(24, 63, 73, .08);
    font-size: var(--font-text-size-md);
    font-weight: 500;
    color: var(--text-color);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

section.pm-contract-specs .instrument {
    display: flex;
    align-items: center;
    gap: 14px;
}

section.pm-contract-specs .instrument .flags {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 34px;
}

section.pm-contract-specs .instrument .flags img {
    position: absolute;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--white-color);
}

section.pm-contract-specs .instrument .flags img:first-child {
    left: 0;
    z-index: 2;
}

section.pm-contract-specs .instrument .flags img:last-child {
    right: 0;
    z-index: 1;
}

section.pm-contract-specs .instrument .flags img:only-child {
    left: 50%;
    right: auto;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
}

section.pm-contract-specs .instrument .info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

section.pm-contract-specs .instrument .symbol {
    font-size: var(--font-text-size-md);
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
}

section.pm-contract-specs .instrument .desc {
    font-size: var(--font-text-size-xs);
    font-weight: 400;
    color: var(--light-text-color);
    line-height: 1.4;
}

section.pm-contract-specs .swaps-note {
    position: relative;
    max-width: 760px;
    margin: 40px auto 0;
    font-size: var(--font-text-size-xs);
    font-weight: 400;
    color: var(--light-text-color);
    line-height: 1.6;
    text-align: center;
}

@media (min-width: 992px) and (max-width: 1199px) {
    section.pm-contract-specs .swap-tabs .nav-link {
        min-width: 100px !important;
        padding: 10px 15px !important;
    }
}

@media (max-width: 1199px) {
    section.pm-contract-specs .swap-search {
        width: 210px !important;
    }
}

@media (max-width: 991px) {
    section.pm-contract-specs .head {
        margin-bottom: 60px !important;
    }

    section.pm-contract-specs .swap-tabs::-webkit-scrollbar {
        display: none !important;
    }

    section.pm-contract-specs .swaps-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
    }

    section.pm-contract-specs .swap-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        padding: 0 12px !important;
    }

    section.pm-contract-specs .swap-tabs .nav-item {
        flex: 0 0 auto !important;
    }

    section.pm-contract-specs .swap-search {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    section.pm-contract-specs .swap-table thead {
        display: none !important;
    }

    section.pm-contract-specs .swap-table table,
    section.pm-contract-specs .swap-table tbody,
    section.pm-contract-specs .swap-table tbody td,
    section.pm-contract-specs .swap-table tbody tr {
        display: block !important;
        width: 100% !important;
    }

    section.pm-contract-specs .swap-table tbody tr {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
        padding: 18px 20px !important;
        border: 1px solid rgba(24, 63, 73, .12) !important;
        margin-bottom: 15px !important;
    }

    section.pm-contract-specs .swap-table tbody td {
        padding: 0 !important;
        border: 0 !important;
    }

    section.pm-contract-specs .swap-table td.col-symbol {
        grid-column: 1 / -1 !important;
        padding-bottom: 15px !important;
        margin-bottom: 15px !important;
        border-bottom: 1px solid rgba(24, 63, 73, .1) !important;
    }

    section.pm-contract-specs .swap-table td.col-value {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
    }

    section.pm-contract-specs .swap-table td.col-value::before {
        content: attr(data-label) !important;
        font-size: var(--font-text-size-sm) !important;
        font-weight: 400 !important;
        color: var(--light-text-color) !important;
    }

    section.pm-contract-specs .swap-table tr.no-result {
        display: block !important;
        border: 1px solid rgba(24, 63, 73, .12) !important;
    }

    section.pm-contract-specs .swap-table tr.no-result td {
        display: block !important;
        padding: 35px 20px !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    section.pm-contract-specs .swap-table tbody tr {
        padding: 16px 15px !important;
    }
}

/* Contact Us form submission banner (Views/Company/ContactUs.cshtml) - the theme's .pm-form has
   no built-in success/error state since this is the first real (non-decorative) form on the site. */
.pm-form-banner {
    margin-bottom: 25px;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: var(--font-text-size-sm);
    font-weight: 500;
}

.pm-form-banner.is-success {
    background: rgba(0, 187, 138, .12);
    color: var(--dark-green-color);
    border: 1px solid rgba(0, 187, 138, .3);
}

.pm-form-banner.is-error {
    background: rgba(220, 53, 69, .1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, .3);
}

/* Accessibility fix (Lighthouse, 2026-09-14): the theme's --light-text-color (#777777) used
   sitewide for muted/secondary text measures ~4.48:1 on a white background - just under WCAG
   AA's 4.5:1 for normal text. Redefining the token here (not editing app.min.css) darkens every
   consumer of it at once; #6B6B6B keeps the same "muted gray" look while clearing the threshold
   with margin (~5.3:1). */
:root {
    --light-text-color: #6B6B6B;
}

/* Accessibility fix (Lighthouse, 2026-09-14): Home's ticker tab bar (.markets-tabs) uses the
   theme's "outline" .nav-link.active variant - light-green text on a transparent (white page)
   background, only ~2:1 contrast. Other pages' tab bars (Contract Specifications, TradingHours,
   etc.) use a different filled-background variant that already passes, so this is scoped to
   .markets-tabs only rather than overriding the shared .nav-link.active rule everywhere.
   --dark-green-color is the theme's own existing dark token (~14.7:1 on white). Selector matches
   app.min.css's own "section.pm-markets .markets-tabs .nav-link.active" specificity exactly - a
   shorter selector here loses the cascade to that rule despite loading after it. */
section.pm-markets .markets-tabs .nav-link.active {
    color: var(--dark-green-color);
}

/* Live price tick flash (wwwroot/js/market-data-live.js's flashField). Separate from the .up/.down
   daily-trend coloring on the change/trend fields - this briefly highlights the Sell/Buy price
   cells themselves whenever a SignalR update actually changes their value. Reuses the theme's own
   --up-bg-color/--down-bg-color (the exact mint/pink pair the .trend circle badges already render
   with, app.min.css) instead of a new color, so the flash reads as the same up/down language. */
@keyframes price-flash-up {
    from { background-color: var(--up-bg-color); }
    to { background-color: transparent; }
}
@keyframes price-flash-down {
    from { background-color: var(--down-bg-color); }
    to { background-color: transparent; }
}
[data-field="sell"].flash-up,
[data-field="buy"].flash-up {
    animation: price-flash-up 0.8s ease-out;
}
[data-field="sell"].flash-down,
[data-field="buy"].flash-down {
    animation: price-flash-down 0.8s ease-out;
}

/* Search results page (Views/Search/Index.cshtml, backs the header's search box - see
   [[project_header_search_nonfunctional]]). The theme ships no search-results component and its
   own .search-bar is only ever fully styled when scoped under a page-specific parent class
   (e.g. .pm-glossary-search .search-bar) - rather than gamble on the bare class, this copies that
   same visual recipe (flex/border/radius/padding/focus state) under its own page section instead. */
/* .pm-page-head itself carries no background/color (confirmed via app.min.css - it's a plain
   white/dark-text hero here, same as Glossary/ArticleList's own .pm-page-head usage), so this
   search bar uses the same light styling in both the hero and the results section below it. */
section.pm-search-results .search-bar,
section.pm-page-head .search-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    margin: 24px auto 0;
    border: 1px solid var(--border-color-light);
    border-radius: 50rem;
    padding: 8px 8px 8px 28px;
    background: var(--white-color);
    transition: border-color 0.25s ease;
}

section.pm-search-results .search-bar:focus-within,
section.pm-page-head .search-bar:focus-within {
    border-color: var(--light-green-color);
}

section.pm-search-results .search-bar input,
section.pm-page-head .search-bar input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: var(--font-text-size-sm);
    color: var(--text-color);
}

/* Results end flush against the next section (_StartTrading's dark band) with no breathing room
   otherwise - every other content section on the site (.pm-blog-items, .pm-glossary-items, etc.)
   carries its own bottom padding for exactly this reason, this one was missing it entirely. */
section.pm-search-results {
    padding-bottom: 80px;
}

.pm-search-summary {
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--light-text-color);
    font-size: var(--font-text-size-sm);
}

.pm-search-empty {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
    color: var(--light-text-color);
    font-size: var(--font-text-size-md);
}

.pm-search-group-title {
    margin-top: 32px;
    margin-bottom: 14px;
    font-size: var(--font-text-size-md);
    font-weight: 700;
    color: var(--text-color);
}

.pm-search-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pm-search-item {
    display: block;
    padding: 18px 22px;
    border: 1px solid rgba(24, 63, 73, 0.12);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.pm-search-item:hover {
    border-color: var(--light-green-color);
    background: #DDFFF6;
}

.pm-search-item .name {
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 4px;
}

.pm-search-item .text {
    font-size: var(--font-text-size-sm);
    color: var(--light-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}