/* Keep comparison columns aligned and readable; only the table scrolls. */
@media (min-width: 901px) {
  .table { overflow-x: auto; overscroll-behavior-inline: contain; }
  .head, .row {
    min-width: 1230px;
    grid-template-columns: 24px minmax(175px, 1.5fr) minmax(102px, 1fr) minmax(96px, 1fr) minmax(54px, .6fr) minmax(68px, .7fr) minmax(92px, 1fr) minmax(88px, 1.1fr) minmax(88px, 1.1fr) minmax(85px, .9fr) minmax(100px, .85fr) minmax(78px, .8fr) minmax(80px, .8fr);
    gap: 6px;
    padding-inline: 14px;
  }
  .head { min-height: 48px; line-height: 1.2; }
  .row { min-height: 58px; padding-block: 6px; }
  .head > *, .row > * { min-width: 0; }
  .desktopcell, .review, .broker { overflow-wrap: anywhere; }
  .comparison-select { font-size: 11px; }
}

/* Compact comparison cards replace a wide table on tablets and phones. */
@media (max-width: 900px) {
  .wrap { padding-inline: 16px; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; margin-bottom: 14px; }
  .filters select, .filters button { height: 42px; min-width: 0; font-size: 13px; }
  .table { overflow: visible; background: transparent; }
  .head { display: none; }
  #rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .row {
    min-width: 0; min-height: 0; margin: 0; padding: 14px;
    display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
    grid-template-areas: 'rank broker broker' 'review review review' 'fields fields fields' 'details details details';
    background: #fff; border: 0; border-radius: 14px; align-items: center;
  }
  .row > .rank { grid-area: rank; }
  .row > .broker { grid-area: broker; min-width: 0; }
  .row > .desktopcell { display: none; }
  .row > .review { grid-area: review; min-width: 0; }
  .row > .review a { flex-wrap: wrap; }
  .row > .mobilefields { grid-area: fields; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 0; }
  .mobilefields > div { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
  .mobilefields small { display: block; color: #8995a7; margin-bottom: 2px; font-size: 11px; }
  .row > .detailaction { grid-area: details; }
  .row > .detailaction { min-width: 0; }
  .details-btn { min-height: 40px; padding: 10px 8px; }
  .mobile-comparison { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
  .mobile-comparison .comparison-select { background: #fff; border-radius: 9px; padding: 10px; color: #3d4759; }
  .broker > div { min-width: 0; overflow-wrap: anywhere; }
  .broker:has(.broker-awards) > div { white-space: normal; }
  .broker-awards { margin-inline-start: auto; }
  .social-links { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters select { padding-inline: 10px 21px; background-position: right 7px center; }
  [dir="rtl"] .filters select { background-position: left 7px center; padding-inline: 10px 21px; }
  #rows { grid-template-columns: minmax(0, 1fr); }
  .mobile-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-block: 16px; }
  .regions { margin-top: 12px; }
}
@media (max-width: 400px) {
  .topnav { display: none; }
  .broker { gap: 6px; }
  .broker .broker-awards img { width: 20px; height: 36px; }
}

@media (max-width: 450px) {
  .dialog { padding: 18px; }
  .dialog-header { top: -18px; }
  .dialog dl, .details-grid { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .dialog dd { margin: 0 0 10px; overflow-wrap: anywhere; }
}
/* Details dialog: the scroll track stays inside the rounded window. */
.dialog[open] { display: flex; flex-direction: column; overflow: hidden; padding: 0; max-height: 85vh; }
.dialog-header { position: static; flex: none; padding: 20px 24px 14px; }
#dialogBody { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-inline-end: 8px; padding: 0 16px 22px 24px; scrollbar-width: thin; scrollbar-color: #bdc9da transparent; }
[dir="rtl"] #dialogBody { padding: 0 24px 22px 16px; }
#dialogBody::-webkit-scrollbar { width: 9px; }
#dialogBody::-webkit-scrollbar-track { background: transparent; margin-block: 8px; }
#dialogBody::-webkit-scrollbar-thumb { background: #bdc9da; border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
#dialogBody::-webkit-scrollbar-thumb:hover { background-color: #8f9fb5; }
.dialog::backdrop { background: rgb(23 33 49 / 48%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 450px) {
  .dialog-header { padding: 16px 18px 12px; }
  #dialogBody { padding: 0 10px 16px 18px; }
  [dir="rtl"] #dialogBody { padding: 0 18px 16px 10px; }
}

/* Brand mark */
.brand,.footer-brand{display:inline-flex;align-items:center;line-height:0;flex:none}.brand img,.footer-brand img{display:block;width:155px;height:57px;object-fit:contain}.footer-brand img{width:150px;height:55px}@media(max-width:400px){.brand img{width:142px;height:52px}}
/* Keep long filter labels legible on small screens. */
@media (max-width: 700px) {
  .filters select[data-filter="metals"], .filters #all { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .filters { grid-template-columns: minmax(0, 1fr); }
  .filters select, .filters button { height: 38px; }
}

/* Regulatory records */
.region.warning-filter,.region.warning-filter.active{background:#c72e3a;color:#fff}.region.warning-filter:hover{background:#ad2631}.region.warning-filter:focus-visible{outline:2px solid #8f1520;outline-offset:2px}.warning-details{margin:0 0 20px;padding:14px 16px;border:1px solid #efc7c9;border-radius:12px;background:#fff5f5}.warning-details h3{margin:0 0 10px;color:#982a31;font-size:15px}.warning-details article+article{margin-top:14px;padding-top:14px;border-top:1px solid #efc7c9}.warning-details strong{font-size:12px;color:#982a31}.warning-details p{margin:6px 0 8px;font-size:13px;line-height:1.5;color:#43383b}.warning-details a{font-size:13px;font-weight:600}
.warning-note{margin:10px 0 0;font-size:12px;color:#856065}.warning-note[hidden]{display:none}

/* Initial catalog, replaced by the interactive table after JavaScript loads. */
.initial-catalog{padding:12px 20px}.initial-catalog ol{margin:0;padding-inline-start:24px}.initial-catalog li{padding:10px 0;border-bottom:1px solid #eef1f6;line-height:1.5}.initial-catalog a{font-weight:600;color:#3478f7}.initial-catalog .initial-details{display:block;color:#526078;font-size:13px}.language-links{display:flex;gap:12px}

/* Educational guide */
.forex-guide{background:#fff;border-radius:20px;padding:clamp(24px,4vw,48px);max-width:1050px;margin:28px auto 36px;color:#202b42;line-height:1.75;overflow-wrap:anywhere}
.forex-guide h2,.forex-guide h3,.forex-guide h4{color:#1c263a;line-height:1.25}
.forex-guide h2{font-size:clamp(25px,3vw,36px);margin:0 0 22px}
.forex-guide h3{font-size:clamp(20px,2vw,25px);margin:38px 0 13px}
.forex-guide h4{font-size:17px;margin:24px 0 8px}
.forex-guide p,.forex-guide ul,.forex-guide ol{margin:0 0 16px}
.forex-guide li{margin:8px 0}
.forex-guide a{color:#2563eb}
.guide-alert{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;align-items:start;background:#fff5f3;border:1px solid #f3d4ce;border-radius:14px;padding:20px 22px;margin:26px 0}
.guide-alert::before{content:"";grid-column:1;grid-row:1 / 3;width:32px;height:32px;border-radius:9px;background:#fbe1dc url('/icons/triangle-alert.svg') center / 19px 19px no-repeat}
.guide-alert strong,.guide-alert p{grid-column:2;min-width:0}.guide-alert strong{color:#9e3a30;line-height:1.4;font-size:15px}.guide-alert p{margin:6px 0 0;color:#4c3d3d;line-height:1.6}
.guide-table-wrap{overflow-x:auto;margin:18px 0 22px;max-width:100%;border:1px solid #e2e8f2;border-radius:12px}
.forex-guide table{border-collapse:collapse;width:100%;min-width:480px;text-align:start}
.forex-guide th,.forex-guide td{padding:12px 16px;border-bottom:1px solid #e7edf5;text-align:start;vertical-align:top}
.forex-guide th{background:#f1f5fc;color:#34425e;font-weight:700}
.forex-guide tbody tr:last-child td{border-bottom:0}
@media(max-width:600px){.forex-guide{padding:22px 18px;margin:20px 0 26px}.forex-guide h3{margin-top:30px}.guide-alert{padding:16px;column-gap:12px}}

@media(min-width:1151px){.filters{grid-template-columns:repeat(6,minmax(0,1fr)) auto}}
.category-details{margin-top:20px;padding:14px 16px;background:#f4f7fc;border-radius:12px}
.category-details h3{margin:0 0 8px;font-size:15px}.category-details p{font-size:12px;line-height:1.5;margin:5px 0}.category-details ul{padding-inline-start:20px;margin:10px 0 0}.category-details li{margin:8px 0;font-size:13px}
.broker .account{white-space:normal;line-height:1.25}
.info-page h1{font-size:clamp(27px,3vw,38px);margin:20px 0 30px}.info-page h2{font-size:22px;margin:30px 0 12px}.info-page p,.info-page ol{line-height:1.7}.info-back{font-size:13px;font-weight:600}.info-language,.info-footer{display:flex;align-items:center;flex-wrap:wrap;gap:16px}.info-language a{color:#536078;font-size:13px}.info-language a[aria-current=page]{color:#3478f7;font-weight:700}.info-footer{padding-block:28px;font-size:13px}.info-footer span{margin-inline-start:auto}.info-page a{color:#2563eb}

/* Space between the site header and directory heading. */
main.wrap > .hero { margin-top: 20px; }
@media (max-width: 700px) { main.wrap > .hero { margin-top: 12px; } }

/* Reserve the final controls' space while the interactive directory loads. */
#regions:empty { min-height: 38.85px; }
#filters:empty { min-height: 81px; }
@media (min-width: 901px) and (max-width: 1150px) { #filters:empty { min-height: 195px; } }
@media (min-width: 701px) and (max-width: 900px) {
  #filters:empty { min-height: 166px; }
  #mobile-comparison:empty { min-height: 38.5px; }
}
@media (max-width: 700px) {
  #filters:empty { min-height: 266px; }
  #mobile-comparison:empty { min-height: 85px; }
}
@media (max-width: 360px) { #filters:empty { min-height: 338px; } }

/* Regulatory notice button beside the broker name. */
.broker .broker-warning { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 3px; background: transparent; border-radius: 6px; }
.broker .broker-warning img { display: block; width: 20px; height: 20px; }
.broker .broker-warning:hover { background: #fff0f1; }
.broker .broker-warning:focus-visible { outline: 2px solid #c72e3a; outline-offset: 2px; }