/* Currency converter pages (/curs-valutar/*-ron, euro-lei) and the FX hub list.
   Converter first on every width; helper blocks follow the compact panel family
   (1px #e3e8f4 border, 16px radius, #f6f9fd heading strip, 16–20px headings, 14–15px text). */

/* Compact header: no Tino card, smaller title, no reserved 720px placeholder. */
.tool-suite .hero.fx-hero{padding:4px 0 18px;content-visibility:visible;contain-intrinsic-size:auto}
.tool-suite .hero.fx-hero .crumbs{flex-wrap:wrap;margin-bottom:10px;padding:14px 0 0!important;row-gap:2px}
.tool-suite .hero.fx-hero .crumbs b{overflow-wrap:anywhere}
/* !important only to outrank the global mobile h1 rule in mobile-performance.css. */
.tool-suite .hero.fx-hero h1{max-width:820px;font-size:clamp(1.45rem,5.6vw,2.4rem)!important;line-height:1.14!important;letter-spacing:-.025em;overflow-wrap:break-word;hyphens:manual}
.tool-suite .hero.fx-hero p{max-width:760px;margin:10px 0 12px;font-size:clamp(.94rem,2.4vw,1.04rem);line-height:1.55}
.tool-suite .hero.fx-hero .hero-badges span{padding:5px 8px;border-radius:8px;font-size:11.5px;font-weight:700}
/* The generic tool badges wrap to two rows on phones and push the converter down. */
@media (max-width:599px){.tool-suite .hero.fx-hero .hero-badges{display:none}}

/* Layout: one column on phones; converter + table side by side from 960px. */
.tool-suite .section.fx-tool{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-top:16px;padding-bottom:28px}
.fx-tool>*{min-width:0}
@media (min-width:960px){
  .tool-suite .section.fx-tool{grid-template-columns:minmax(0,1fr) minmax(300px,380px);column-gap:28px;align-items:start}
  .fx-tool>.fx-calc,.fx-tool>.fx-lead,.fx-tool>.fx-explain,.fx-tool>.fx-article,.fx-tool>.fx-faq{grid-column:1}
  .fx-tool>.fx-table{grid-column:2;grid-row:1 / span 5}
  .fx-tool>.fx-links{grid-column:1 / -1}
}

/* Converter card */
.fx-calc{padding:16px;border:1px solid #e3e8f4;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(16,26,54,.04)}
@media (min-width:600px){.fx-calc{padding:22px 24px}}
.fx-calc h2{margin:0 0 6px;color:#101a36;font-size:clamp(1rem,2.6vw,1.2rem);line-height:1.3;letter-spacing:0}
.fx-calc [data-fx-detail] p{margin:0}
.fx-calc .fx-rate{margin:2px 0 4px!important;color:#10225b;font-size:clamp(1.3rem,5vw,1.6rem);line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fx-calc .fx-rate b{font-weight:800}
.fx-calc .fx-meta{color:#4f5d7a;font-size:13.5px;line-height:1.5}
.fx-calc .fx-note{margin-top:4px!important;color:#5d6984;font-size:13px;line-height:1.5}
.fx-calc [role="status"]{margin:6px 0 0!important;color:#7a4b00;font-size:13.5px;line-height:1.5}
/* Converter: amount in, equivalent out, swap button between them (live, no submit button). */
.fx-calc .fx-rate{font-size:clamp(1.55rem,6.2vw,2.1rem)!important;letter-spacing:-.02em}
.fx-calc .fx-inverse{margin:0 0 6px!important;color:#4f5d7a;font-size:14.5px;font-weight:650;font-variant-numeric:tabular-nums}
.fx-calc .fx-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:#e9f7f1;color:#0c6b52;font-size:12px;font-weight:750;letter-spacing:.02em;vertical-align:1px}
.fx-conv{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px;align-items:end}
@media (min-width:720px){.fx-conv{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:12px}}
.fx-field{display:grid;gap:6px;min-width:0}
.fx-field label,.fx-field .fx-label{color:#33405c;font-size:14px;font-weight:700;line-height:1.3}
.fx-box{display:flex;align-items:center;min-width:0;min-height:60px;border:1.5px solid #cdd6e6;border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.fx-box:focus-within{border-color:#1b2a6b;box-shadow:0 0 0 3px rgba(27,42,107,.12)}
.fx-box input{flex:1 1 auto;min-width:0;width:100%;height:58px;margin:0;padding:0 12px 0 16px;border:0;outline:0;background:transparent;color:#101a36;font:inherit;font-size:clamp(1.25rem,5vw,1.5rem);font-weight:750;font-variant-numeric:tabular-nums}
.fx-box input[aria-invalid="true"]{color:#a1350f}
.fx-box-out{background:#f2fbf8;border-color:#c8eadf}
.fx-box output{flex:1 1 auto;min-width:0;padding:0 12px 0 16px;color:#0b1f5c;font-size:clamp(1.25rem,5vw,1.5rem);font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.2}
.fx-cur{flex:0 0 auto;margin-right:10px;padding:6px 10px;border-radius:10px;background:#eef1fb;color:#1b2a6b;font-size:14px;font-weight:800;letter-spacing:.03em}
.fx-box-out .fx-cur{background:#dff3ec;color:#0c6b52}
.fx-swap{justify-self:center;display:grid;place-items:center;width:48px;height:48px;margin:0;padding:0;border:1.5px solid #cdd6e6;border-radius:999px;background:#fff;color:#1b2a6b;cursor:pointer;transition:transform .2s,background .15s}
.fx-swap:hover,.fx-swap:focus-visible{background:#f6f9fd;border-color:#1b2a6b}
.fx-swap:focus-visible{outline:2px solid #1b2a6b;outline-offset:2px}
.fx-swap[aria-pressed="true"]{transform:rotate(180deg)}
.fx-swap:disabled{opacity:.5;cursor:not-allowed}
@media (min-width:720px){.fx-swap{margin-bottom:6px;transform:rotate(-90deg)}.fx-swap[aria-pressed="true"]{transform:rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.fx-swap,.fx-box{transition:none}}
.fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fx-chips button{min-height:44px;min-width:56px;margin:0;padding:0 14px;border:1px solid #dbe2ef;border-radius:999px;background:#f6f9fd;color:#1b2a6b;font:inherit;font-size:14px;font-weight:700;cursor:pointer;font-variant-numeric:tabular-nums}
.fx-chips button:hover,.fx-chips button:focus-visible{border-color:#1b2a6b;background:#fff}
.fx-sum{min-height:1.5em;margin:10px 0 0!important;color:#4f5d7a;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.fx-sum:empty{display:none}

/* Frequently asked questions: compact panel family. */
.fx-faq{max-width:760px;border:1px solid #e3e8f4;border-radius:16px;background:#fff;overflow:hidden}
.fx-faq h2{margin:0;padding:11px 16px;background:#f6f9fd;border-bottom:1px solid #e3e8f4;color:#101a36;font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.3;letter-spacing:0}
.fx-faq details{border-bottom:1px solid #eef1f7}
.fx-faq details:last-child{border-bottom:0}
.fx-faq summary{display:flex;align-items:center;min-height:48px;padding:10px 16px;color:#101a36;font-size:15px;font-weight:700;line-height:1.4;cursor:pointer}
.fx-faq summary:focus-visible{outline:2px solid #1b2a6b;outline-offset:-2px}
.fx-faq details p{margin:0;padding:0 16px 14px;color:#33405c;font-size:15px;line-height:1.62}

/* Short answer, table and article: readable column, no oversized headings. */
.fx-explain,.fx-article{max-width:760px}
.fx-explain h2,.fx-article h2,.fx-calc h2,.fx-links h2{hyphens:manual}
.fx-explain h2,.fx-article h2{margin:0 0 8px;color:#101a36;font-size:clamp(1.05rem,2.6vw,1.25rem);line-height:1.3;letter-spacing:0}
.fx-explain p,.fx-article p{margin:0 0 10px;color:#33405c;font-size:15px;line-height:1.62}
.fx-article .secondary-link{display:inline-flex;align-items:center;min-height:44px;margin-top:0}
.fx-table{border:1px solid #e3e8f4;border-radius:16px;background:#fff;overflow:hidden}
.fx-table:empty{display:none}
.fx-table table{width:100%;margin:0;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fx-table caption{padding:11px 16px;background:#f6f9fd;border-bottom:1px solid #e3e8f4;color:#101a36;font-size:15px;font-weight:750;text-align:left}
.fx-table th,.fx-table td{padding:9px 16px;border-bottom:1px solid #eef1f7;font-size:14.5px;text-align:left}
.fx-table td{text-align:right;font-weight:650;color:#10225b}
.fx-table thead th{color:#5d6984;font-size:13px;font-weight:700}
.fx-table thead th:last-child{text-align:right}
.fx-table tbody tr:last-child>*{border-bottom:0}
.fx-table table+table{border-top:1px solid #e3e8f4}

/* Related rates (also used on the hub). */
.fx-links{border:1px solid #e3e8f4;border-radius:16px;background:#fff;overflow:hidden}
.fx-links h2{margin:0;padding:11px 16px;background:#f6f9fd;border-bottom:1px solid #e3e8f4;color:#101a36;font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.3;letter-spacing:0}
.fx-links ul{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
@media (min-width:560px){.fx-links ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.fx-links ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fx-links li{margin:0;border-bottom:1px solid #eef1f7}
.fx-links a{display:flex;align-items:center;min-height:44px;padding:8px 16px;color:#1b2a6b;font-size:14.5px;font-weight:650;text-decoration:none;overflow-wrap:anywhere}
.fx-links a:hover,.fx-links a:focus-visible{background:#f6f9fd;text-decoration:underline}
.fx-hub-links{box-sizing:border-box;width:min(1160px,calc(100% - 32px));margin:8px auto 28px}

/* Page summary below the converter. */
.fx-lead{max-width:760px;margin:0;color:#33405c;font-size:15.5px;line-height:1.6}
/* Phones: result above the fold even with the first-visit consent bar (about 190px tall at 375x812).
   The swap button overlaps the gap between the two fields and the current-page crumb is dropped. */
@media (max-width:719px){
  .fx-conv{gap:0}
  .fx-swap{position:relative;z-index:1;width:42px;height:42px;margin:-8px auto -8px}
  .fx-field+.fx-swap+.fx-field{margin-top:0}
  .fx-calc .fx-note{font-size:12.5px}
}
@media (max-width:599px){
  .tool-suite .hero.fx-hero{padding-bottom:10px}
  .tool-suite .hero.fx-hero .crumbs>span:last-of-type,.tool-suite .hero.fx-hero .crumbs>b{display:none}
  .tool-suite .section.fx-tool{padding-top:10px}
  .fx-calc{padding:14px}
  .fx-conv{margin-top:12px}
  .fx-box{min-height:54px}.fx-box input{height:52px}
  /* Field captions stay for screen readers; the currency pills name both sides visually. */
  .fx-field label,.fx-field .fx-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}