/*
  Public site layout: header, hero, sections, footer.
  Loaded together with tokens.css and base.css.
*/

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-header nav a {
  font-size: 14px;
  color: var(--text-secondary);
}

.site-header nav a:hover {
  color: var(--text-primary);
}

/* .site-header nav a's color rule otherwise beats .btn-primary's specificity,
   washing out the Sign up button text to muted gray on the teal background. */
.site-header nav a.btn-primary,
.site-header nav a.btn-primary:hover {
  color: var(--on-accent);
}

.site-header .logout-form {
  display: inline-flex;
  margin: 0;
}

.site-header .logout-form .link-button {
  font-size: 14px;
  color: var(--text-secondary);
}

.site-header .logout-form .link-button:hover {
  color: var(--text-primary);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-base);
  padding: 32px 0;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.site-footer .footer-links a:hover {
  color: var(--text-primary);
}

.site-footer .footer-notice {
  max-width: 420px;
  text-align: left;
}

/* Hero */

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero-subheadline {
  margin-top: 16px;
  max-width: 480px;
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

.hero-stat-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-heading);
}

.hero-stat-label {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
}

/* Calculator card */

.calculator-card {
  max-width: 420px;
  width: 100%;
}

.calculator-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.calculator-title {
  min-width: 0;
}

.calculator-result {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  margin: 8px 0 20px;
}

.calculator-result-value {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent-light);
  margin-top: 4px;
}

.calculator-result-monthly {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.calculator-cta {
  width: 100%;
}

.rebate-footnote {
  margin-top: 12px;
  text-align: center;
}

/* Pricing mode segmented control (Classic/Standard vs Raw/ECN) */

.pricing-mode-heading {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pricing-mode-toggle {
  display: flex;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.pricing-mode-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pricing-mode-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
}

.pricing-mode-btn:not(.is-active):hover {
  color: var(--text-primary);
}

@media (max-width: 480px) {
  .pricing-mode-btn {
    font-size: 12px;
    padding: 7px 6px;
  }
}

/* Classic-mode "Estimated rate" indicator (Tickmill, RoboForex only) */

.calc-estimate-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
}

/* [hidden] and .calc-estimate-note have equal selector specificity, so without this
   override the class rule's "display: flex" above would win the cascade (it comes
   later in this file) and defeat the hidden attribute calculator.js toggles — the
   badge would stay visible for every broker/mode, not just Tickmill/RoboForex in
   Classic mode. */
.calc-estimate-note[hidden] {
  display: none;
}

.calc-estimate-badge {
  font-size: 10px;
}

.calc-info-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.calc-info-trigger {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-body);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.calc-info-icon {
  display: block;
}

.calc-info-trigger:hover,
.calc-info-trigger:focus-visible {
  color: var(--accent-light);
  border-color: var(--accent);
}

.calc-info-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: min(300px, calc(100vw - 40px));
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.calc-info-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.calc-info-general {
  margin: 0;
}

/* Separates the broker-specific paragraph (Tickmill/RoboForex's own
   classic_display_rate_note, appended only for those two in Classic mode) from
   the general assumptions above it — a thin rule plus a small uppercase label,
   both using existing tokens only. */
.calc-info-broker-note-wrap {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.calc-info-broker-note-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.calc-info-broker-note {
  margin: 0;
}

/* Mouse hover reveals the popover purely via CSS, deliberately never touching the
   JS-driven .is-open class or aria-expanded (see the long comment in calculator.js).
   A JS mouseenter/mouseleave that also toggled .is-open used to share that state with
   the click handler — since a real mouse always hovers the button immediately before
   clicking it, the click's "was it already open?" check saw the hover-triggered open
   and closed it right back, so the first real click appeared to do nothing. Splitting
   hover into its own CSS-only affordance fixes that: hover shows/hides on its own,
   click/keyboard exclusively own .is-open and aria-expanded. Gated to hover-capable,
   fine-pointer devices only, for the same reason as .how-it-works-icon-link above —
   touch browsers apply :hover on tap and it can stick until a tap elsewhere, which
   would otherwise fight with the tap's own is-open toggle.

   :not(:focus-within) is required, not cosmetic: without it, a second click that
   removes .is-open (closing it) would stay visually open as long as the mouse
   hasn't moved off the button, since :hover keeps matching independently of the
   class. Clicking always focuses the button first, so gating hover on "not
   currently focus-within" means the moment focus lands here (click, or Tab), this
   rule stops applying and .is-open (or its absence) becomes the only thing
   deciding visibility — exactly the state calculator.js just set, so the DOM
   class, computed style, and aria-expanded can never disagree for a click/tap
   interaction. Pure hover with no focus involved (never clicked or tabbed to)
   is unaffected: focus-within is false the whole time, so hover shows/hides
   normally. The one accepted trade-off: if focus leaves the button via blur
   while the real mouse happens to still be resting on it (e.g. Tab pressed
   without moving the mouse), hover CSS reactivates and can show it again even
   though aria-expanded just went false from the blur handler — an edge case
   outside the click/tap consistency this fixes, not exercised by normal use. */
@media (hover: hover) and (pointer: fine) {
  /* Invisible hover bridge across the visual gap between the icon and the
     popover (top: calc(100% + 8px) below) — without it, moving the pointer
     from the icon down into the popover crosses a strip of blank page that
     belongs to neither element, :hover drops off .calc-info-wrap for that
     instant, and the popover (visibility: hidden, pointer-events: none)
     vanishes and stops being hoverable before the pointer ever reaches it.
     Same width/offset as the popover so it covers the same horizontal span. */
  .calc-info-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: min(300px, calc(100vw - 40px));
    height: 8px;
  }

  .calc-info-wrap:hover:not(:focus-within) .calc-info-popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-mode-btn,
  .calc-info-popover {
    transition: none;
  }
}

/* How It Works */

.how-it-works {
  background: var(--bg-section);
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.how-it-works-icon {
  width: 108px;
  height: 108px;
  object-fit: contain;
  display: block;
}

/* Clickable icon tiles. The anchor is sized to exactly match the existing 108x108
   icon box (the tile's rounded shape/border/background are baked into the PNG
   itself, not drawn by CSS), so wrapping the <img> in a link introduces no layout
   shift and leaves the neighboring title/description text non-interactive. */
.how-it-works-icon-link {
  position: relative;
  display: block;
  width: 108px;
  height: 108px;
  border-radius: 20px;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.how-it-works-icon-link .how-it-works-icon {
  transition: filter 0.16s ease;
}

/* Tooltip: a small chip centered ON the tile itself (not floated above/below it).
   The grid's 24px gap (unchanged — see AGENTS.md layout-preservation requirement) is
   too tight for a floating tooltip once the grid wraps to 2 or 1 columns: positioned
   above, it would overlap the previous row's description text; positioned below, the
   item's own title. Centering it on the 108x108 tile keeps it fully inside that
   tile's own footprint on every row/column count, so it can never overlap a
   neighboring item regardless of viewport width. Reuses the card/accent tokens used
   elsewhere on the page; solid --bg-card background (not the translucent
   --accent-tint used for badges) keeps the label legible over the icon glyph
   underneath it. aria-hidden since the link's own aria-label already carries the
   accessible name — this span is purely the visible hover/focus affordance, not a
   second, competing label. */
.how-it-works-tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--accent);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 5;
}

/* Hover effects are gated to hover-capable, fine-pointer devices only. Without this,
   touch browsers apply :hover on the first tap (showing the tooltip/lift) and only
   navigate on a second tap — the tile must navigate on the first tap. */
@media (hover: hover) and (pointer: fine) {
  .how-it-works-icon-link:hover {
    cursor: pointer;
    transform: translateY(-2px);
    /* Crisp 1px accent ring (border shifts toward accent) plus a soft accent-tinted
       halo just outside it (background "strengthens") — existing tokens only, no
       blur radius, so this reads as a restrained edge highlight, not a glow. */
    box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-tint);
  }

  .how-it-works-icon-link:hover .how-it-works-icon {
    filter: brightness(1.12);
  }

  .how-it-works-icon-link:hover .how-it-works-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Keyboard focus shows the same lift/brighten/tooltip as hover (a:focus-visible in
   base.css already supplies the visible outline ring — not overridden here). */
.how-it-works-icon-link:focus-visible {
  transform: translateY(-2px);
}

.how-it-works-icon-link:focus-visible .how-it-works-icon {
  filter: brightness(1.12);
}

.how-it-works-icon-link:focus-visible .how-it-works-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Pressed state: cancel the lift so the tile feels pushed down. */
.how-it-works-icon-link:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works-icon-link,
  .how-it-works-icon-link .how-it-works-icon,
  .how-it-works-tooltip {
    transition: none;
  }

  .how-it-works-icon-link:hover,
  .how-it-works-icon-link:focus-visible,
  .how-it-works-icon-link:active {
    transform: none;
  }
}

.how-it-works-item .how-it-works-title,
.how-it-works-item .text-muted {
  margin-left: 9px;
}

.how-it-works-title {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Step captions are now full sentences instead of short fragments — a small gap
   keeps them from reading as glued to the title above. */
.how-it-works-item .text-muted {
  margin-top: 4px;
}

/* Brokers */

.brokers-grid {
  display: grid;
  /* 3 columns, dropping to 2 then 1 (breakpoints below) so every card stays wide
     enough for the IC Markets header (logo + Recommended badge) to stay on one line
     — dedicated breakpoints, not shared with other sections' 768px/480px blocks.
     minmax(0,1fr) stops a column being forced wider by a card's min-content.
     grid-auto-rows:1fr equalizes height across BOTH rows of the 2-row/6-card grid
     (plain align-items:stretch only matches heights within a single row). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  margin-top: 32px;
}

@media (max-width: 1100px) {
  .brokers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .brokers-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.broker-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  /* Grid rows already stretch every card to the tallest card in that row by default
     (grid's align-items:stretch) — this flex column additionally pins the Open
     account button to the bottom of that stretched height, so buttons line up across
     a row regardless of how much condition-list copy each broker card has. */
  display: flex;
  flex-direction: column;
}

.broker-card > .btn {
  margin-top: auto;
  /* .btn is inline-flex (content-width) by default; without this a flex column
     parent would stretch it to the card's full width, changing its current
     content-hugging pill appearance. */
  align-self: flex-start;
}

.broker-card.recommended {
  border: 1.5px solid var(--accent);
}

.broker-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.broker-card-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-heading);
}

.broker-card-brand {
  display: flex;
  align-items: center;
}

.broker-card-logo {
  display: inline-flex;
  align-items: center;
  height: 32px;
}

.broker-card-logo img {
  max-height: 32px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Some official broker marks are colored/dark and designed for light backgrounds —
   a light plate keeps them legible without altering the source artwork. */
.broker-card-logo--plate {
  height: 32px;
  padding: 5px 10px;
  background: var(--text-heading);
  border-radius: 6px;
}

.broker-card-logo--plate img {
  max-height: 22px;
}

.broker-card-rate {
  margin: 12px 0 12px;
  color: var(--accent-light);
  font-weight: 500;
}

/* Compact 2-column mini-grid so 5 short condition lines take ~3 rows instead of 5 —
   keeps the card at 3-per-row desktop widths (~260-360px) from growing tall. The
   last, unpaired item (5 items in a 2-col grid) simply leaves its second cell empty. */
.broker-card-conditions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.broker-card-conditions li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.broker-card-conditions li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* FAQ */

.faq-list {
  margin-top: 32px;
}

.faq-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.faq-row:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}

.faq-question::after {
  content: "+";
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
}

.faq-question[aria-expanded="true"]::after {
  content: "\2212";
}

.faq-question[aria-expanded="true"] {
  color: var(--text-heading);
}

.faq-answer {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 8px;
}

/* Transfer an existing account */

.transfer-request-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 32px;
  align-items: start;
}

.transfer-request-form .field:last-child {
  margin-bottom: 0;
}

.transfer-request-output label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.transfer-request-output textarea {
  min-height: 380px;
  resize: vertical;
  white-space: pre-wrap;
}

.transfer-request-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.transfer-copy-status {
  font-size: 13px;
  color: var(--accent-light);
  min-height: 1em;
}

.transfer-request-note {
  margin-top: 20px;
  max-width: 480px;
}

.transfer-request-cta {
  margin-top: 16px;
  display: inline-flex;
}

@media (max-width: 768px) {
  .transfer-request-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-header nav {
    gap: 14px;
  }

  .site-footer .container {
    flex-direction: column;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .calculator-card {
    max-width: none;
  }

  .how-it-works-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Reserve an internal rail for the fixed support widget (static/css/support-widget.css)
   at the width band where the hero-grid above stacks the calculator card full-width
   below the hero copy. The card itself stays full-width (max-width: none, same as the
   768px-and-below rule above) — only its right padding grows, so the extra 100px is empty
   space *inside* the card's own background/border rather than a shortened card with dead
   space beside it. The widget's launcher then sits over that padding: it's still
   position:fixed and can visually sit on the card's background, but every real control
   (broker/lots fields, estimated-rebate label, monthly/annual result, CTA, disclaimer) is
   pushed left of the rail by the padding, so none of them ever sit under the launcher at
   any scroll position or card height. 100px covers the widget's widest footprint in this
   band (66px launcher + 24px offset) with a ~30px safety margin either side of that width
   range. Verified zero bounding-box intersection with every calculator child via Playwright
   at 481x800, 600x800, 700x900, 768x800 and 768x900. Scoped to >=481px because <=480px
   already uses the smaller 60px launcher with a 20px offset and has never shown an overlap
   at any tested height. */
@media (min-width: 481px) and (max-width: 768px) {
  .calculator-card {
    max-width: none;
    padding-right: calc(var(--card-padding) + 100px);
  }
}

@media (max-width: 480px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
  }

  .transfer-request-cta {
    width: 100%;
    justify-content: center;
  }

  /* At full-width single-column rows, the icon's fixed 108px block (left-aligned by
     default so it lines up with its 4-column desktop layout) reads as shifted off to
     the left. Center the icon and caption together instead. The desktop title/caption
     margin-left:9px nudge (to line up under the icon in the narrow desktop columns)
     is reset here since text-align:center already aligns them under the icon. */
  .how-it-works-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .how-it-works-item .how-it-works-title,
  .how-it-works-item .text-muted {
    margin-left: 0;
  }

  /* Logo + 3 nav links don't reliably fit one row at very narrow widths (e.g. 380px).
     Wrap instead of risking horizontal overflow. */
  .site-header .container {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .site-header nav {
    gap: 10px;
  }
}