/* Iraq Brokers — mobile layer. Base styling stays inline (desktop); these rules only reflow small screens. */
@media (max-width: 768px) {
  body { min-width: 0 !important; }
  [style*="min-width: 1200px"], [style*="min-width: 1100px"] { min-width: 0 !important; }

  /* Header: brand row + actions, nav becomes a swipeable row below */
  /* Header becomes a 2-row grid: brand + actions on row 1, nav on row 2 — cannot wrap */
  header { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; height: auto !important; padding: 8px 12px !important; gap: 4px 8px !important; }
  header > a[href*="Homepage"] { grid-row: 1; grid-column: 1; }
  header > div[style*="margin-left: auto"] { grid-row: 1; grid-column: 2; }
  header nav { grid-row: 2; grid-column: 1 / -1; order: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; display: flex; }
  header nav::-webkit-scrollbar { display: none; }
  header nav a { padding: 8px 0 !important; white-space: nowrap; border-bottom-width: 2px; }
  /* Top row fits on one line: brand + search + actions share the row */
  header > a[href*="Homepage"] { flex-shrink: 0; gap: 6px !important; }
  header > a[href*="Homepage"] span { font-size: 14px !important; }
  header img[alt="Iraq Brokers logo"] { width: 24px !important; height: 24px !important; }
  header > div[style*="margin-left: auto"] { margin-left: auto !important; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; gap: 6px !important; justify-content: flex-end; }
  header > div[style*="margin-left: auto"] > * { min-width: 0; }
  header > div[style*="margin-left: auto"] > span[style*="border-radius: 999px"] { flex: 0 1 110px; min-width: 34px; padding: 3px 3px 3px 8px !important; }
  header > div[style*="margin-left: auto"] input { font-size: 11px !important; min-width: 0 !important; width: auto !important; flex: 1 1 30px !important; }
  header span[onclick] , header > div[style*="margin-left: auto"] span[style*="border-radius: 50%"] { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; }
  header a[href$="/signin"] { font-size: 11px !important; white-space: nowrap; flex: 0 0 auto !important; }
  /* TradingView badge: keep logo + text on phones */
  header a:has(> img[alt="TradingView"]) { font-size: 11px !important; gap: 5px !important; flex: 0 0 auto !important; }
  header img[alt="TradingView"] { width: 16px !important; height: 16px !important; }
  /* Hide the nav search pill on phones */
  header div:has(> input), header span:has(> input) { display: none !important; }
  header a[href*="complaints/new"] { font-size: 10px !important; padding: 6px 8px !important; white-space: nowrap !important; flex: 0 0 auto !important; }

  /* Type scale */
  h1 { font-size: clamp(26px, 7.5vw, 34px) !important; white-space: normal !important; }
  h2 { font-size: clamp(19px, 5.5vw, 24px) !important; }
  [style*="font-size: 44px"], [style*="font-size: 48px"], [style*="font-size: 52px"] { font-size: 30px !important; line-height: 1.15 !important; }
  [style*="font-size: 38px"][style*="font-family: 'IBM Plex Mono'"] { font-size: 28px !important; }

  /* Hero: tighter scale on phones */
  #hero-grid h1 { font-size: 23px !important; line-height: 1.18 !important; margin-bottom: 8px !important; }
  #hero-grid h1 + p { font-size: 13px !important; margin-bottom: 14px !important; }
  #hero-grid [style*="border-radius: 999px; margin-bottom: 16px"] { font-size: 11.5px !important; padding: 4px 10px !important; margin-bottom: 10px !important; }
  #hero-grid input { font-size: 13px !important; }
  section[style*="padding: 44px 24px 40px 40px"] { padding-top: 20px !important; padding-bottom: 20px !important; }

  /* Section gutters */
  [style*="padding: 40px 40px"], [style*="padding: 36px 40px"], [style*="padding: 32px 40px"],
  [style*="padding: 44px 40px"], [style*="padding: 48px 40px"], [style*="padding: 52px 40px"],
  [style*="padding: 56px 40px"], [style*="padding: 64px 40px"], [style*="padding: 72px 40px"],
  [style*="padding: 24px 40px"], [style*="padding: 28px 40px"], [style*="padding: 9px 40px"] {
    padding-left: 16px !important; padding-right: 16px !important;
  }

  /* Card grids collapse; stat strips go 2-up */
  [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }

  /* Two-column layouts stack (content first, rail after) */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 320px"], [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 240px 1fr"], [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"], [style*="grid-template-columns: 1.7fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"], [style*="grid-template-columns: 1fr 1.3fr"],
  [style*="grid-template-columns: 150px minmax(0,1fr) 300px 220px"],
  [style*="grid-template-columns: 180px 1fr"] { grid-template-columns: 1fr !important; }

  /* Sticky rails flow normally on mobile */
  [style*="position: sticky; top: 92px"], [style*="position: sticky; top: 132px"] { position: static !important; }

  /* Data tables: keep their columns, scroll sideways inside their card */
  [style*="background: #fff"][style*="border-radius: 0"] { overflow-x: auto !important; }
  [style*="border-radius: 0 0 12px 12px"] { overflow-x: auto !important; }
  [style*="grid-template-columns: 48px"], [style*="grid-template-columns: 210px repeat(3, 1fr)"],
  [style*="grid-template-columns: 70px 50px"], [style*="grid-template-columns: 90px 1.4fr"],
  [style*="grid-template-columns: 1.4fr 0.8fr"], [style*="grid-template-columns: 110px 160px"],
  [style*="grid-template-columns: 1.7fr 1.3fr"] { min-width: 820px; }

  /* Pill tab groups swipe instead of wrapping awkwardly */
  [style*="display: inline-flex"][style*="background: #EEEEEE"] { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  [style*="display: inline-flex"][style*="background: #EEEEEE"]::-webkit-scrollbar { display: none; }

  /* Search pills stack their button below the input */
  [style*="padding: 6px 6px 6px 24px"] { border-radius: 999px !important; padding: 4px 4px 4px 14px !important; gap: 6px; }
  [style*="padding: 6px 6px 6px 24px"] > input { flex: 1 1 30px; min-width: 0; padding: 7px 4px !important; font-size: 12.5px !important; }
  [style*="padding: 6px 6px 6px 24px"] > span:last-child { font-size: 12px !important; padding: 8px 14px !important; }

  /* Footer rows wrap */
  footer [style*="display: flex"] { flex-wrap: wrap; row-gap: 10px; }
  footer [style*="margin-left: auto"] { margin-left: 0 !important; }

  img[alt="Iraq Brokers logo"] { width: 30px !important; height: 30px !important; }

  /* Homepage: community feed 2-up, compact — all 6 posts on one screen */
  #community-feed { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #community-feed > a > div:first-child { height: 40px !important; font-size: 16px !important; }
  #community-feed > a > div:last-child { padding: 8px 9px !important; gap: 6px !important; }
  #community-feed [style*="font-size: 13.5px"] { font-size: 11px !important; line-height: 1.3 !important; }
  #community-feed [style*="width: 22px"] { width: 16px !important; height: 16px !important; font-size: 8px !important; }
  #community-feed [style*="font-size: 12px"] { font-size: 9.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #community-feed [style*="font-size: 11.5px"] { font-size: 9.5px !important; }

  /* Homepage: inspections 2-up, compact — all 6 on one screen */
  #inspections-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #inspections-grid [style*="height: 160px"] { height: 54px !important; }
  #inspections-grid [style*="height: 160px"] > span { font-size: 8px !important; }
  #inspections-grid [style*="position: absolute"][style*="border-radius: 999px"] { font-size: 8px !important; padding: 3px 7px !important; }
  #inspections-grid [style*="padding: 16px 18px"], #inspections-grid [style*="padding: 18px 20px"] { padding: 9px 10px !important; }
  #inspections-grid [style*="font-size: 14.5px"], #inspections-grid [style*="font-size: 15px"] { font-size: 11px !important; }
  #inspections-grid [style*="font-size: 12.5px"] { font-size: 9.5px !important; }
  #inspections-grid p, #inspections-grid [style*="font-size: 13px"] { font-size: 10px !important; line-height: 1.4 !important; margin: 0 !important; }

  /* Site header flows (no sticky) so it never overlaps section navs */
  header { position: static !important; }
  [style*="position: sticky; top: 68px"][style*="z-index: 15"] { top: 0 !important; padding: 8px 0 !important; }

  /* Broker profile v2 hero: wrap into stacked blocks */
  #overview { flex-wrap: wrap !important; padding: 18px !important; }
  #overview h1 { white-space: normal !important; font-size: 23px !important; }
  #overview > div[style*="width: 240px"] { width: 100% !important; }
  #overview > div[style*="text-align: center"] { margin: 0 auto !important; }

  /* Wide grids inside white cards scroll sideways */
  [style*="background: #fff"][style*="border-radius: 0"][style*="padding: 22px 26px"] { overflow-x: auto !important; }
  [style*="grid-template-columns: 90px 1.4fr 0.8fr 1fr 110px 90px 110px"] { min-width: 760px; }
  [style*="grid-template-columns: 1.4fr 0.8fr 1fr 0.8fr"] { min-width: 560px; }

  /* Reach & marketing 3-col stacks */
  [style*="grid-template-columns: 1fr 1.3fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Live trades keep 3 compact columns */
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr 1fr !important; font-size: 12px !important; }

  /* Metric tiles 2-up instead of full stack */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 12px"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns: repeat(5, 1fr)"][style*="gap: 12px"] { grid-template-columns: 1fr 1fr !important; }

  /* Dark stat cards: compact 2×2 on phones */
  section[style*="padding: 52px 40px 56px"] { padding: 24px 16px 28px !important; }
  section[style*="padding: 52px 40px 56px"] [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  section[style*="padding: 52px 40px 56px"] [style*="padding: 36px 22px"] { padding: 16px 10px !important; }
  section[style*="padding: 52px 40px 56px"] [style*="font-size: 38px"] { font-size: 22px !important; }
  section[style*="padding: 52px 40px 56px"] [style*="font-size: 13.5px"] { font-size: 11px !important; margin-top: 6px !important; }

  /* Field-surveys block: airy compact layout on phones */
  #sv-block { margin-top: 28px !important; }
  #sv-block [style*="font-size: 30px"] { font-size: 20px !important; }
  #sv-block [style*="letter-spacing: 0.14em"] { font-size: 9.5px !important; letter-spacing: 0.12em !important; margin-bottom: 5px !important; }
  #sv-block [style*="gap: 26px"] { gap: 6px 14px !important; font-size: 10.5px !important; }
  #sv-block [style*="gap: 26px"] strong { font-size: 13px !important; }
  #sv-block [style*="gap: 8px"][style*="margin-bottom: 14px"] { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px !important; }
  #sv-block [style*="padding: 7px 16px"] { padding: 5px 11px !important; font-size: 11px !important; white-space: nowrap; }
  #sv-block select { font-size: 11px !important; padding: 5px 10px !important; }
  #sv-block [style*="margin-left: auto"] { margin-left: 0 !important; }

  /* Top-rated table: 5 rows + View all on phones */
  #trust-table > div:nth-child(n+7) { display: none !important; }
  #rank-viewall { display: block !important; }
  /* Compact columns that FIT: # · broker · years · score (chips/flags/profile hidden) */
  #trust-table [style*="grid-template-columns: 48px 1.5fr 1.6fr 80px 1.2fr 96px 96px"] { grid-template-columns: 20px minmax(0, 1fr) 42px 46px !important; gap: 8px !important; padding: 11px 12px !important; min-width: 0 !important; }
  #trust-table [style*="grid-template-columns: 48px 1.5fr 1.6fr 80px 1.2fr 96px 96px"] > *:nth-child(3),
  #trust-table [style*="grid-template-columns: 48px 1.5fr 1.6fr 80px 1.2fr 96px 96px"] > *:nth-child(5),
  #trust-table [style*="grid-template-columns: 48px 1.5fr 1.6fr 80px 1.2fr 96px 96px"] > *:nth-child(7) { display: none !important; }
  #trust-table a[style*="font-size: 15px"] { font-size: 13px !important; }
  #trust-table [style*="font-size: 12px"] { font-size: 10.5px !important; }
  #trust-table [style*="width: 36px"] { width: 28px !important; height: 28px !important; border-radius: 2px !important; }
  #trust-table span[style*="width: 56px"] { width: 44px !important; font-size: 12.5px !important; }
  #trust-table span[style*="font-size: 13.5px"] { font-size: 11.5px !important; }
  #trust-table [style*="font-size: 14px"][style*="rgb(138, 150, 142)"] { font-size: 11px !important; }

  /* Broker Search: one "Filters" pill that expands the filter groups */
  #search-filters { position: static !important; gap: 10px !important; }
  #filter-toggle { display: flex !important; }
  #search-filters:not([data-open="1"]) > *:not(#filter-toggle) { display: none !important; }

  /* Broker Search result cards: compact rectangles */
  #search-filters ~ div [style*="padding: 18px 22px"][style*="gap: 18px"] { padding: 10px 12px !important; gap: 10px !important; }
  #search-filters ~ div [style*="width: 46px"][style*="border-radius: 11px"] { width: 32px !important; height: 32px !important; border-radius: 2px !important; }
  #search-filters ~ div a[style*="font-size: 16px"] { font-size: 13.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #search-filters ~ div span[style*="font-size: 13px"] { font-size: 10.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #search-filters ~ div [style*="width: 62px"][style*="border-radius: 50%"] { width: 40px !important; height: 40px !important; }
  #search-filters ~ div [style*="width: 46px"][style*="border-radius: 50%"] { width: 30px !important; height: 30px !important; font-size: 11.5px !important; }
  #search-filters ~ div a[style*="View" i], #search-filters ~ div a[href*="Broker Profile"][style*="border: 1px solid"] { font-size: 10.5px !important; padding: 6px 10px !important; }
  #search-filters ~ div span[style*="font-size: 12.5px"][style*="margin-left: 4px"] { display: block; margin: 4px 0 0 !important; font-size: 10.5px !important; width: 100%; }
  #search-filters ~ div [style*="gap: 6px"][style*="margin-top: 8px"] { margin-top: 5px !important; }
  #search-filters ~ div [style*="padding: 3px 8px"] { padding: 2px 6px !important; font-size: 9.5px !important; }

  /* Never allow sideways overflow (stops iOS zoom-out) */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  section { max-width: 100vw !important; }

  /* Wide fixed-column layouts stack */
  [style*="grid-template-columns: 430px 1fr"], [style*="grid-template-columns: 380px 1fr"] { grid-template-columns: 1fr !important; }

  /* Exposure wall masonry: one column */
  [style*="columns: 3"] { columns: 1 !important; }

  /* Mediation banner stacks */
  [style*="align-items: center; gap: 56px"] { flex-wrap: wrap; gap: 28px !important; }
  [style*="text-align: right"][style*="gap: 40px"] { text-align: left !important; flex-wrap: wrap; gap: 24px !important; }
}

/* Hero 3-col grid: collapse before the middle column gets crushed */
@media (max-width: 1350px) {
  #hero-grid { grid-template-columns: 1fr 1fr !important; }
  #hero-grid > div:nth-child(2) { order: -1; grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  #hero-grid { grid-template-columns: 1fr !important; }
  /* order on phones: headline+search (+history) first, rail next, ranking box last */
  #hero-grid > div:nth-child(1) { order: 3; }
  /* mobile history under the search; hide the rail copy */
  #hist-mobile { display: block !important; padding: 10px 12px !important; }
  #hist-mobile > div:first-child { font-size: 11px !important; margin-bottom: 7px !important; }
  #hist-mobile a { gap: 5px !important; }
  #hist-mobile a > span:first-child { width: 17px !important; height: 17px !important; border-radius: 2px !important; }
  #hist-mobile a > span:last-child { font-size: 10.5px !important; }
  #hist-rail { display: none !important; }
  /* hero grid cells can never exceed the phone width */
  #hero-grid > div { min-width: 0 !important; max-width: 100% !important; }
  #rank-widget, #rank-widget > div { min-width: 0 !important; max-width: 100% !important; }
  #rank-widget [style*="min-width"] { min-width: 0 !important; }
  #rank-widget a[style*="white-space: nowrap"], #rank-widget span[style*="white-space: nowrap"], #rank-widget div[style*="white-space: nowrap"] { white-space: normal !important; }
  #rank-widget [style*="gap: 12px"] { gap: 8px !important; }
  /* rank widget: show top 3 rows only, then Full rankings */
  #rank-widget > div:nth-of-type(n+5):not(:last-child) { display: none !important; }
  /* compact Lens Index right under the history; hide the rail copy */
  #lens-mobile { display: block !important; }
  #lens-rail { display: none !important; }
  /* Top Community between the index and the feed; hide the rail copy */
  #topcom-mobile { display: block !important; }
  #topcom-rail { display: none !important; }
}

/* ── v2: redesigned homepage, Arabic pages, bottom app bar ── */
@media (max-width: 768px) {
  [style*="font-size: 56px"] { font-size: 30px !important; line-height: 1.15 !important; }
  header > div:last-child { grid-row: 1; grid-column: 2; margin-left: auto !important; display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden; gap: 6px !important; justify-content: flex-end; }
  header nav { margin: 0 !important; }
  header nav a { font-size: 12.5px !important; }
  /* homepage: dropdown becomes inline links in the swipe nav */
  #nav-more { display: none !important; }
  #nav-extra { display: contents !important; }
  /* hero stat strip */
  [style*="padding: 0 44px"] { padding: 0 18px !important; }
  [style*="font-size: 34px"][style*="Archivo"] { font-size: 24px !important; }
  /* leaderboard + bordered tables scroll sideways instead of forcing zoom-out */
  #trust-table { overflow-x: auto !important; }
  div[style*="border: 1px solid #E4E4E4"] > div[style*="grid-template-columns: 48px 1.8fr"] { min-width: 720px; }
  div[style*="border: 1px solid #E4E4E4"]:has(> div[style*="grid-template-columns: 48px 1.8fr"]) { overflow-x: auto !important; }
  /* dark stats section (new paddings) */
  section[style*="padding: 56px 40px 60px"] [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  section[style*="padding: 56px 40px 60px"] [style*="padding: 32px 22px"] { padding: 16px 10px !important; }
  section[style*="padding: 56px 40px 60px"] [style*="font-size: 38px"] { font-size: 22px !important; }
  /* regulatory feed band reads as a list */
  section[style*="background: #111111"] div[style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 0"] { grid-template-columns: 1fr !important; }
  section[style*="background: #111111"] div[style*="border-left: 1px solid #2A2A2A"] { border-left: none !important; border-top: 1px solid #2A2A2A; padding: 12px 2px !important; }
  /* Arabic header component (margin-inline-start cluster) */
  header > div[style*="margin-inline-start:auto"] { margin-inline-start: auto !important; flex: 1 1 auto; min-width: 0; overflow: hidden; gap: 6px !important; justify-content: flex-end; }
  header > div[style*="margin-inline-start:auto"] a { font-size: 11px !important; padding: 6px 8px !important; }
  /* room for the bottom app bar */
  body { padding-bottom: 64px !important; }
  /* ticker slightly slimmer on phones */
  x-import[component-from-global-scope="price-ticker"] { zoom: 0.7; }
}