/* Lightning exchanges. Shared colors, navigation, buttons and FAQ come from the home layout.
   The cards are rendered at build time (website/build.rb) and again by public/exchanges.js. */
.ex-page h1, .ex-page h2 { font-weight:500; letter-spacing:-.045em; line-height:1.08; }
.ex-page h1 { font-size:clamp(38px,4.4vw,60px); margin:0 0 20px; }
.ex-page h2 { font-size:clamp(32px,3.8vw,50px); margin:0 0 26px; }
.ex-page h1 span, .ex-page h2 span { color:var(--bitcoin-orange); }
.ex-page h3 { font-size:19px; font-weight:500; letter-spacing:-.02em; }
.ex-page p, .ex-page li { line-height:1.75; }
.ex-page a { text-underline-offset:4px; }

/* The list belongs on the first screen: a short hero, then the count, the
   search and the filters straight above the cards. */
.ex-hero { padding-block:52px 30px; }
.ex-lead { color:#babbb4; font-size:18px; max-width:880px; margin-bottom:14px; }
.ex-hero-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
/* What SatsRail is, for a visitor who came for the exchanges. */
.ex-page .ex-hero-fine { margin:16px 0 0; max-width:880px; font-size:14px; line-height:1.6; color:#a8aa9f; }
.ex-hero-fine a { color:#c5c7bb; text-decoration:underline; }
.ex-count { margin:0; font:13px/1.7 var(--font-mono); letter-spacing:.04em; color:#a8aa9f; }
.ex-count strong { color:var(--bitcoin-orange); font-weight:500; font-size:15px; }
.ex-count time { color:#c5c7bb; }
.ex-updated, .ex-count-part, .ex-count time { white-space:nowrap; } /* a separator dot is joined to the next word by a no-break space */

.ex-list-section { padding-block:32px 72px; background:var(--surface); border-block:1px solid #303229; scroll-margin-top:70px; }
.ex-toolbar { display:flex; justify-content:space-between; align-items:end; gap:14px 32px; flex-wrap:wrap; margin-bottom:16px; }
.ex-toolbar > div:first-child { flex:1 1 520px; min-width:0; } /* the count wraps beside the search rather than pushing it down */
.ex-page .ex-list-title { font-size:24px; letter-spacing:-.025em; line-height:1.2; margin:0 0 6px; }
.ex-search { flex:0 1 380px; min-width:0; }
.ex-search label { display:block; font-size:13px; color:#a8aa9f; margin-bottom:8px; }
.ex-search-box { display:flex; align-items:center; gap:10px; border:1px solid #494532; border-radius:8px; background:var(--ink); padding:0 14px; }
.ex-search-box:focus-within { border-color:var(--bitcoin-orange); }
.ex-search-box i { color:#8f9185; }
.ex-search-box input { flex:1; min-width:0; min-height:50px; border:0; background:transparent; color:var(--text); font-size:16px; }
.ex-search-box input:focus { outline:none; }
/* One row of chips that scrolls sideways, so the countries don't push the cards below the first screen. */
.ex-country-list { list-style:none; display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:0 0 8px; margin:0 0 20px; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to right,#000 92%,transparent); mask-image:linear-gradient(to right,#000 92%,transparent); }
.ex-country-list li { flex:0 0 auto; }
.ex-country-list:empty { display:none; }
.ex-country-list button { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 12px; border:1px solid #3b3b34; border-radius:var(--radius-pill); background:transparent; color:#c5c7bb; font-size:13px; cursor:pointer; }
.ex-country-list button span { color:#8f9185; font:11px var(--font-mono); }
.ex-country-list button:hover, .ex-country-list button[aria-pressed="true"] { border-color:var(--bitcoin-orange); color:var(--bitcoin-orange); }
.ex-country-list .ex-chip-filter { margin-right:6px; padding-right:14px; border-right:1px solid #3b3b34; }
.ex-country-list .ex-chip-filter button { border-color:rgba(232,181,60,.45); color:var(--text); }
.ex-country-list .ex-chip-filter i { color:var(--bitcoin-orange); }
.ex-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } /* rows line up; a card's source and link sit at its foot */
.ex-grid:empty { display:none; }
.ex-card { display:flex; flex-direction:column; gap:6px; padding:24px; border:1px solid #3b3b34; border-radius:10px; background:var(--ink); }
.ex-card.is-featured { border-color:var(--bitcoin-orange-dark); box-shadow:0 0 0 1px rgba(232,181,60,.15) inset; }
.ex-card[hidden] { display:none; }
.ex-card-top { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:40px; }
.ex-logo { max-height:40px; max-width:120px; width:auto; height:auto; object-fit:contain; }
.ex-featured { font:10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; padding:5px 8px; border-radius:var(--radius-pill); background:rgba(232,181,60,.12); border:1px solid rgba(232,181,60,.35); color:var(--bitcoin-orange); }
.ex-card h3 { margin:8px 0 2px; }
.ex-card h3 a { text-decoration:none; }
.ex-card h3 a:hover { color:var(--bitcoin-orange); }
.ex-facts { margin:6px 0 4px; }
.ex-facts>div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; border-bottom:1px solid #26271f; font-size:13px; line-height:1.4; }
.ex-facts>div:last-child { border-bottom:0; }
.ex-facts dt { font-weight:400; color:#a8aa9f; }
.ex-facts dd { margin:0; text-align:right; color:var(--text); }
.ex-facts .is-yes { color:var(--bitcoin-orange); }
.ex-facts .is-no { color:#c5c7bb; }
.ex-facts .is-unknown { color:#8f9185; }
.ex-notes { margin:0; font-size:13px; color:#a8aa9f; }
.ex-tags { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0; padding-top:10px; }
.ex-tags li { font-size:12px; line-height:1.5; padding:3px 9px; border-radius:var(--radius-pill); background:rgba(255,255,255,.06); color:#c5c7bb; }
.ex-tags .ex-tags-more { background:transparent; border:1px dashed #3b3b34; color:#8f9185; }
.ex-flag { font-style:normal; }
/* When the card's facts were checked, and the exchange's page they were checked against. */
.ex-card .ex-source { margin:auto 0 0; padding-top:10px; font-size:12px; line-height:1.5; color:#8f9185; } /* the source and Visit sit at the card's foot */
.ex-tags + .ex-visit { margin-top:auto; } /* a card without a source */
.ex-source a { color:#c5c7bb; text-decoration:underline; }
.ex-source a:hover { color:var(--bitcoin-orange); }
.ex-visit { display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:14px; color:var(--text); text-decoration:underline; }
.ex-visit:hover { color:var(--bitcoin-orange); }
.ex-loading { text-align:center; padding:40px 0; color:#a8aa9f; }
.ex-empty { margin:0 0 18px; padding:14px 18px; border:1px solid #494532; border-radius:8px; color:#c5c7bb; font-size:14px; }
.ex-empty[hidden] { display:none; }
.ex-empty a { color:var(--text); text-decoration:underline; }
.ex-empty a:hover { color:var(--bitcoin-orange); }
.ex-dir-section { background:var(--surface); border-block:1px solid #303229; }
.ex-dir-section:has(.ex-directory:empty) { display:none; }
.ex-directory { display:grid; grid-template-columns:repeat(4,1fr); gap:22px 28px; }
.ex-dir-country { scroll-margin-top:90px; }
.ex-faq details { scroll-margin-top:90px; } /* the search's "here's why" link lands below the navbar */
.ex-faq-list { margin:10px 25px 0 0; padding-left:18px; font-size:16px; line-height:1.7; color:#9b9e8d; }
.ex-faq-list li { margin:4px 0; }
.rail-faq details[open] .ex-faq-list { animation:railUp .45s var(--ease-out) both; }
.ex-faq-list strong { color:#d0cbb3; font-weight:500; }
.ex-dir-head { display:flex; align-items:baseline; gap:6px; margin:0 0 6px; } /* the flag sits outside the heading */
.ex-dir-country h3 { font-size:15px; margin:0; }
.ex-dir-country ul { list-style:none; padding:0; margin:0; }
.ex-dir-country li { font-size:14px; line-height:1.7; color:#a8aa9f; }
.ex-dir-country a { color:#c5c7bb; text-decoration:underline; text-decoration-color:rgba(197,199,187,.35); }
.ex-dir-country a:hover { color:var(--bitcoin-orange); text-decoration:underline; }
.ex-dir-global .ex-dir-head i { color:var(--bitcoin-orange); }
.ex-page .ex-dir-note { margin:-6px 0 30px; max-width:820px; font-size:15px; line-height:1.6; color:#babbb4; }
.ex-dir-note a { color:#c5c7bb; text-decoration:underline; }
.ex-dir-note:empty { display:none; }
/* Under each country: where it cashes out locally, or that nothing does yet. */
.ex-dir-country .ex-dir-none { margin:0; font-size:14px; line-height:1.7; color:#8f9185; }
.ex-dir-country .ex-dir-cashout { margin:6px 0 0; font-size:13px; line-height:1.55; color:#8f9185; }
.ex-dir-country .ex-dir-cashout.is-local { color:#c5c7bb; }
.ex-dir-country .ex-dir-cashout a { text-decoration:underline; }
.ex-mid-cta { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-top:34px; padding:24px 28px; border:1px solid #494532; border-radius:10px; background:radial-gradient(ellipse at top right,var(--gold-glow),transparent 75%); }
.ex-mid-cta p { margin:0; color:#c5c7bb; }
.ex-mid-cta strong { color:var(--text); font-weight:500; }
.ex-loading .spinner-border { color:var(--bitcoin-orange); }
.ex-loading p { margin:14px 0 0; }
.ex-disclaimer { margin:28px 0 0; font-size:13px; color:#8f9185; max-width:900px; }
.ex-disclaimer i { color:var(--bitcoin-orange); margin-right:4px; }
.ex-disclaimer strong { color:#c5c7bb; font-weight:500; }
.ex-link-button { background:none; border:0; padding:0; color:#c5c7bb; font:inherit; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.ex-link-button:hover { color:var(--bitcoin-orange); }

.ex-section { padding-block:80px; scroll-margin-top:70px; }
.ex-cashout { display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:start; }
.ex-cashout>div:first-child>p:not(.rail-eyebrow) { color:#babbb4; font-size:17px; }
.ex-cashout .rail-actions { margin-top:8px; }
.ex-cashout>div:first-child>.ex-cashout-where { padding:12px 16px; border-left:2px solid var(--bitcoin-orange); background:rgba(232,181,60,.08); color:#c5c7bb; font-size:15px; line-height:1.6; }
.ex-cashout-where:empty { display:none; }
.ex-steps { list-style:none; padding:0; margin:0; display:grid; gap:22px; }
.ex-steps li { display:grid; grid-template-columns:44px 1fr; gap:14px; }
.ex-steps li>span, .ex-pay-steps span { color:var(--bitcoin-orange); font:13px/2 var(--font-mono); }
.ex-steps h3 { margin:0 0 4px; }
.ex-steps p { margin:0; color:#babbb4; font-size:15px; }
.ex-steps a { text-decoration:underline; }
.ex-check { margin-top:30px; padding:22px 24px; border:1px solid #494532; border-radius:10px; }
.ex-check h3 { font-size:16px; margin:0 0 12px; }
.ex-check ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.ex-check li { font-size:14px; color:#c5c7bb; }
.ex-check i { color:var(--bitcoin-orange); margin-right:6px; }

/* The steps beside the checkout the customer scans. */
.ex-pay-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:center; }
.ex-pay-steps { gap:26px; }
.ex-pay-shot { margin:0; }
.ex-pay-shot img { display:block; width:100%; height:auto; border-radius:14px; border:1px solid #303229; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.ex-pay-shot figcaption { margin-top:12px; font-size:13px; line-height:1.5; color:#8f9185; text-align:center; }
.ex-note { margin:30px 0 0; padding-top:24px; border-top:1px solid #303229; color:#a8aa9f; font-size:14px; }
.ex-note strong { color:var(--text); font-weight:500; }

.ex-faq { display:grid; grid-template-columns:1fr 1.5fr; gap:70px; }

.ex-final { padding-block:80px; text-align:center; border-top:1px solid #303229; background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(232,181,60,.1),transparent 70%); }
.ex-final .rail-eyebrow, .ex-final .rail-actions { justify-content:center; }
.ex-final p:not(.rail-eyebrow) { color:#babbb4; margin:0 auto 30px; max-width:560px; }

@media(max-width:991px) {
  .ex-hero { padding-block:40px 26px; }
  .ex-pay-grid { grid-template-columns:minmax(0,1fr) 240px; gap:40px; }
  .ex-grid { grid-template-columns:1fr 1fr; }
  .ex-directory { grid-template-columns:repeat(3,1fr); }
  .ex-cashout, .ex-faq { gap:36px; }
}
@media(max-width:767px) {
  .ex-page h1 { font-size:34px; margin-bottom:14px; }
  .ex-updated { white-space:normal; } /* "· Lista actualizada el 15 de octubre de 2026" is wider than a phone */
  .ex-hero { padding-block:28px 22px; }
  /* The button, then the two jump links side by side, so the list starts on the first screen. */
  .ex-hero-links { display:grid; grid-template-columns:auto 1fr; gap:8px 22px; }
  .ex-hero-links .rail-button { grid-column:1 / -1; justify-self:start; }
  .ex-hero-links .rail-text-link { display:block; padding-block:9px; font-size:14px; } /* the arrow follows the last word */
  .ex-lead { font-size:16px; line-height:1.6; }
  .ex-grid, .ex-cashout, .ex-pay-steps, .ex-faq, .ex-check ul { grid-template-columns:1fr; }
  .ex-search { flex-basis:100%; }
  .ex-toolbar { gap:12px; margin-bottom:12px; }
  .ex-page .ex-list-title { font-size:20px; }
  .ex-country-list { scrollbar-width:none; margin-bottom:16px; padding-bottom:2px;
    -webkit-mask-image:linear-gradient(to right,#000 82%,transparent); mask-image:linear-gradient(to right,#000 82%,transparent); }
  .ex-country-list::-webkit-scrollbar { display:none; }
  .ex-hero h1 br { display:none; } /* on a phone the line breaks where it fits */
  .ex-directory { grid-template-columns:1fr 1fr; }
  .ex-mid-cta { padding:20px; }
  .ex-grid { gap:12px; }
  .ex-card { padding:18px 18px 16px; gap:4px; }
  .ex-card-top { min-height:0; }
  .ex-card h3 { margin-top:4px; font-size:18px; }
  .ex-tags { padding-top:6px; }
  .ex-visit { margin-top:8px; }
  .ex-list-section { padding-block:22px 52px; }
  .ex-section, .ex-final { padding-block:52px; }
  .ex-pay-steps { gap:22px; }
  .ex-pay-grid { grid-template-columns:1fr; gap:32px; }
  .ex-pay-shot { max-width:280px; margin-inline:auto; }
  .ex-dir-country li a { display:inline-block; padding-block:6px; } /* a tap target, not a 17px line */
  .ex-dir-country li { line-height:1.4; }
  .ex-faq h2 { margin-bottom:0; }
}