/* ════════════════════════════════════════════════════════════
   MARAAZ Currency Pro — main.css v4.0
   Design System: Deep Navy + Electric Blue + Teal
   Fonts: Plus Jakarta Sans (UI) + JetBrains Mono (numbers)
════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  /* Colors */
  --mcc-navy:       #0a1628;
  --mcc-navy-2:     #0f2044;
  --mcc-navy-3:     #162d5a;
  --mcc-blue:       #0052cc;
  --mcc-blue-2:     #0065ff;
  --mcc-blue-3:     #003d99;
  --mcc-blue-light: rgba(0,82,204,.08);
  --mcc-blue-mid:   rgba(0,82,204,.15);
  --mcc-teal:       #00c7be;
  --mcc-teal-2:     #00a8a1;
  --mcc-green:      #00875a;
  --mcc-green-2:    #00a878;
  --mcc-red:        #de350b;
  --mcc-amber:      #ff8b00;
  --mcc-white:      #ffffff;
  --mcc-gray-0:     #f7f9fc;
  --mcc-gray-1:     #ebf0f8;
  --mcc-gray-2:     #d4dde9;
  --mcc-gray-3:     #8fa3bf;
  --mcc-text:       #091e42;
  --mcc-text-2:     #344563;
  --mcc-text-3:     #5e6c84;
  --mcc-text-4:     #97a0af;
  --mcc-border:     #dfe4ec;
  --mcc-border-2:   #eaecef;

  /* Shadows */
  --mcc-shadow-sm:  0 1px 3px rgba(9,30,66,.10), 0 0 1px rgba(9,30,66,.06);
  --mcc-shadow:     0 4px 14px rgba(9,30,66,.12), 0 0 2px rgba(9,30,66,.06);
  --mcc-shadow-md:  0 8px 24px rgba(9,30,66,.14), 0 1px 4px rgba(9,30,66,.08);
  --mcc-shadow-lg:  0 16px 40px rgba(9,30,66,.16), 0 2px 8px rgba(9,30,66,.08);
  --mcc-shadow-xl:  0 24px 60px rgba(9,30,66,.20), 0 4px 16px rgba(9,30,66,.10);
  --mcc-glow-blue:  0 0 0 3px rgba(0,82,204,.18);

  /* Radii */
  --mcc-r-sm:  8px;
  --mcc-r:     12px;
  --mcc-r-lg:  18px;
  --mcc-r-xl:  24px;

  /* Typography */
  --mcc-font:  'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --mcc-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Motion */
  --mcc-ease:  cubic-bezier(.4,0,.2,1);
  --mcc-t:     all .18s var(--mcc-ease);
  --mcc-t-slow: all .35s var(--mcc-ease);
}

/* ── Base Reset ───────────────────────────────────────────── */
.mcc-wrapper *, .mcc-wrapper *::before, .mcc-wrapper *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
.mcc-wrapper {
  font-family: var(--mcc-font);
  color: var(--mcc-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.mcc-hero {
  background: var(--mcc-navy);
  padding: 56px 24px 88px;
  position: relative;
  overflow: hidden;
}
.mcc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 65% -10%, rgba(0,101,255,.22) 0%, transparent 65%),
    radial-gradient(ellipse 60% 80% at 5%  110%, rgba(0,199,190,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 95%  80%, rgba(0,82,204,.08)  0%, transparent 50%);
  pointer-events: none;
}
.mcc-hero::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 64px;
  background: var(--mcc-white);
  clip-path: ellipse(56% 100% at 50% 100%);
  /* This curve is positioned relative to .mcc-hero's own height. While
     the page is still loading (web fonts / converter widget not
     rendered yet), the hero is shorter than its final height, so the
     curve briefly appears in the wrong spot and then jumps once
     everything settles — visible as a white ring flashing near the top
     of the hero before the layout finishes.

     A fixed CSS delay isn't reliable here — slower connections/fonts
     can take longer than any guessed delay, so the jump would still be
     visible. Instead this only becomes visible once JS confirms the
     WHOLE page (fonts, images, everything) has actually finished
     loading — see the tiny script in includes/layout.php that adds
     .mcc-page-loaded on the real "load" event. Until then it's fully
     invisible, so there's nothing to jump. */
  opacity: 0;
  /* Belt-and-suspenders: if JS never fires for some reason, still reveal
     it after a generous delay so it's never permanently invisible. */
  animation: mccHeroCurveFallback .01s linear 2.2s forwards;
}
@keyframes mccHeroCurveFallback {
  to { opacity: 1; }
}
html.mcc-page-loaded .mcc-hero::after {
  opacity: 1;
  transition: opacity .2s ease;
}
.mcc-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.mcc-hero h1 {
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 14px;
  letter-spacing: -0.6px;
}
.mcc-hero p {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,.68);
  margin-bottom: 36px;
  font-weight: 400;
  max-width: 580px;
}
.mcc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,199,190,.14);
  border: 1px solid rgba(0,199,190,.32);
  color: var(--mcc-teal);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
@keyframes mcc-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.mcc-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mcc-green-2);
  animation: mcc-pulse 2s infinite;
  flex-shrink: 0;
  display: inline-block;
}

/* ════════════════════════════════════════════════════════════
   CONVERTER CARD
════════════════════════════════════════════════════════════ */
.mcc-converter-card {
  background: var(--mcc-white);
  border-radius: var(--mcc-r-xl);
  box-shadow: var(--mcc-shadow-xl);
  overflow: hidden;
  max-width: 980px;
  margin: 0 auto;
}

/* Tabs */
.mcc-tabs {
  display: flex;
  background: var(--mcc-gray-0);
  border-bottom: 1px solid var(--mcc-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.mcc-tabs::-webkit-scrollbar { display: none; }
.mcc-tab {
  flex: 1;
  padding: 15px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mcc-text-3);
  cursor: pointer;
  text-align: center;
  border: none;
  background: transparent;
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--mcc-font);
  transition: var(--mcc-t);
  text-decoration: none;
  min-width: 0;
}
.mcc-tab:hover { color: var(--mcc-blue); background: var(--mcc-blue-light); }
.mcc-tab.active { color: var(--mcc-blue); background: var(--mcc-white); border-bottom-color: var(--mcc-blue); }

/* 2-col layout */
.mcc-converter-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
}
@media (max-width: 860px) {
  .mcc-converter-grid { grid-template-columns: 1fr; }
  .mcc-chart-panel { border-left: none; border-top: 1px solid var(--mcc-border); }
}

/* Converter body */
.mcc-converter-body { padding: 28px 28px 22px; }

/* From/To row */
.mcc-convert-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 0;
  align-items: center;
  background: #f7f9fc;
  border: 1.5px solid #dfe1e6;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.mcc-field-group { display: flex; flex-direction: column; gap: 6px; }
.mcc-field-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--mcc-text-3);
  text-transform: uppercase;
  letter-spacing: .8px;
}
.mcc-field-box {
  border: 1.5px solid var(--mcc-border);
  border-radius: var(--mcc-r);
  background: var(--mcc-white);
  transition: border-color .15s, box-shadow .15s;
  overflow: visible;
  position: relative;
}
.mcc-field-box:focus-within {
  border-color: var(--mcc-blue);
  box-shadow: var(--mcc-glow-blue);
}

/* Currency selector button */
.mcc-cur-select {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  cursor: pointer;
  user-select: none;
  min-height: 56px;
  border-bottom: 1px solid var(--mcc-border);
}
.mcc-cur-flag {
  width: 30px; height: 21px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--mcc-border-2);
  flex-shrink: 0;
}
.mcc-cur-info { flex: 1; min-width: 0; }
.mcc-cur-code { font-size: 15px; font-weight: 700; color: var(--mcc-text); display: block; line-height: 1.2; }
.mcc-cur-name { font-size: 11px; color: var(--mcc-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcc-cur-arrow { color: var(--mcc-text-4); font-size: 13px; transition: transform .2s; flex-shrink: 0; }
.mcc-cur-select:hover .mcc-cur-arrow { color: var(--mcc-blue); transform: rotate(180deg); }

/* Search input */
.mcc-cur-search {
  width: 100%;
  border: none;
  border-top: 1px solid var(--mcc-border);
  outline: none;
  padding: 8px 14px;
  font-size: 16px;
  font-family: var(--mcc-font);
  background: var(--mcc-gray-0);
  color: var(--mcc-text);
}
.mcc-cur-search::placeholder { color: var(--mcc-text-4); }

/* Amount inputs */
.mcc-amount-input, .mcc-result-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 10px 14px 13px;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--mcc-mono);
  background: transparent;
  text-align: right;
  letter-spacing: -0.3px;
}
.mcc-amount-input { color: var(--mcc-text); }
.mcc-result-input { color: var(--mcc-blue); }
.mcc-amount-input::-webkit-outer-spin-button,
.mcc-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Swap button */
.mcc-swap-col { display: flex; align-items: center; justify-content: center; padding-bottom: 2px; }
.mcc-swap-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--mcc-gray-0);
  border: 1.5px solid var(--mcc-border);
  color: var(--mcc-text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--mcc-t);
  flex-shrink: 0;
}
.mcc-swap-btn svg { width: 17px; height: 17px; }
.mcc-swap-btn:hover {
  background: var(--mcc-blue);
  border-color: var(--mcc-blue);
  color: #fff;
  transform: rotate(180deg);
  box-shadow: 0 4px 14px rgba(0,82,204,.35);
}

/* Rate bar */
.mcc-rate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--mcc-gray-0);
  border-radius: var(--mcc-r-sm);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.mcc-rate-display { font-size: 13px; color: var(--mcc-text-2); }
.mcc-rate-display strong { color: var(--mcc-text); font-family: var(--mcc-mono); font-weight: 600; }
.mcc-rate-updated { font-size: 12px; color: var(--mcc-text-3); display: flex; align-items: center; gap: 5px; }

/* Date nav */
.mcc-date-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mcc-date-label { font-size: 13px; font-weight: 600; color: var(--mcc-text-3); }
.mcc-date-nav {
  display: flex; align-items: center; gap: 6px;
  background: var(--mcc-gray-0); border: 1px solid var(--mcc-border);
  border-radius: 8px; padding: 6px 12px;
}
.mcc-date-nav button { background: none; border: none; cursor: pointer; color: var(--mcc-text-3); font-size: 16px; padding: 0 3px; line-height: 1; }
.mcc-date-nav button:hover { color: var(--mcc-blue); }
.mcc-date-val { font-size: 13px; font-weight: 600; color: var(--mcc-text); min-width: 90px; text-align: center; }

/* Convert button */
.mcc-convert-btn {
  width: 100%;
  padding: 15px;
  background: var(--mcc-blue);
  color: #fff;
  border: none;
  border-radius: var(--mcc-r);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--mcc-font);
  cursor: pointer;
  transition: var(--mcc-t);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  letter-spacing: .1px;
}
.mcc-convert-btn:hover {
  background: var(--mcc-blue-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,82,204,.38);
}
.mcc-convert-btn:active { transform: none; }

/* Bid/Ask stats */
.mcc-stats-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--mcc-border);
  border-radius: var(--mcc-r-sm);
  overflow: hidden;
  margin-top: 18px;
}
.mcc-stat-cell { background: var(--mcc-white); padding: 12px 14px; text-align: center; }
.mcc-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--mcc-text-3); margin-bottom: 3px; }
.mcc-stat-val { font-size: 14px; font-weight: 700; font-family: var(--mcc-mono); color: var(--mcc-text); }
.mcc-stat-val.bid { color: var(--mcc-green-2); }
.mcc-stat-val.ask { color: var(--mcc-red); }

/* Spinner */
.mcc-spinner {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mcc-spin .6s linear infinite;
  display: none;
}
@keyframes mcc-spin { to { transform: rotate(360deg); } }

/* ── Chart Panel ──────────────────────────────────────────── */
.mcc-chart-panel {
  background: var(--mcc-white);
  border-left: 1px solid var(--mcc-border);
  padding: 22px;
}
.mcc-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mcc-chart-title { font-size: 13px; font-weight: 700; color: var(--mcc-text); }
.mcc-chart-periods { display: flex; gap: 4px; }
.mcc-period-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--mcc-text-3);
  transition: var(--mcc-t);
  font-family: var(--mcc-font);
}
.mcc-period-btn:hover { background: var(--mcc-blue-light); color: var(--mcc-blue); }
.mcc-period-btn.active { background: var(--mcc-blue); color: #fff; }

/* ── Dropdown ─────────────────────────────────────────────── */
.mcc-dropdown {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--mcc-white);
  border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-r);
  box-shadow: var(--mcc-shadow-lg);
  z-index: 9999;
  max-height: 340px;
  overflow-y: auto;
  display: none;
}
.mcc-dropdown.open { display: block; }
.mcc-dd-section-title {
  padding: 9px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--mcc-text-3);
  background: var(--mcc-gray-0);
  border-bottom: 1px solid var(--mcc-gray-1);
  position: sticky;
  top: 0;
}
.mcc-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .1s;
  font-size: 13px;
}
.mcc-dd-item:hover, .mcc-dd-item.active { background: var(--mcc-blue-light); color: var(--mcc-blue); }
.mcc-dd-flag { width: 24px; height: 17px; object-fit: cover; border-radius: 2px; border: 1px solid var(--mcc-border); flex-shrink: 0; }
.mcc-dd-code { font-weight: 700; min-width: 38px; font-family: var(--mcc-mono); font-size: 13px; color: inherit; }
.mcc-dd-name { color: var(--mcc-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcc-dd-symbol { margin-left: auto; font-size: 12px; color: var(--mcc-text-4); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   LIVE RATES TABLE
════════════════════════════════════════════════════════════ */
.mcc-section { max-width: 1100px; margin: 0 auto; padding: 48px 20px; }
.mcc-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.mcc-section-title { font-size: 22px; font-weight: 800; color: var(--mcc-text); }
.mcc-section-sub { font-size: 14px; color: var(--mcc-text-3); margin-top: 4px; }
.mcc-view-more { font-size: 13px; font-weight: 600; color: var(--mcc-blue); text-decoration: none; }

.mcc-rates-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; overflow: hidden; min-width: 0; }
@media (max-width: 720px) { .mcc-rates-2col { grid-template-columns: 1fr; } }

.mcc-live-table {
  background: var(--mcc-white);
  border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-r);
  overflow: hidden;
  box-shadow: var(--mcc-shadow-sm);
  overflow: hidden;
  min-width: 0;
}
.mcc-live-table-header { padding: 16px 20px; border-bottom: 1px solid var(--mcc-border); display: flex; align-items: center; justify-content: space-between; }
.mcc-live-table-header h3 { font-size: 15px; font-weight: 700; }

.mcc-table { width: 100%; border-collapse: collapse; }
.mcc-table th {
  text-align: left;
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--mcc-text-3);
  background: var(--mcc-gray-0);
  border-bottom: 1px solid var(--mcc-border);
}
.mcc-table td { padding: 11px 16px; font-size: 13px; border-bottom: 1px solid var(--mcc-gray-1); }
.mcc-table tr:last-child td { border-bottom: none; }
.mcc-table tr:hover td { background: var(--mcc-blue-light); }
.mcc-pair-cell { font-weight: 700; font-family: var(--mcc-mono); font-size: 13px; }
.mcc-rate-cell { font-family: var(--mcc-mono); font-size: 13px; font-weight: 500; }
.mcc-rate-cell .sup { font-size: 10px; vertical-align: super; color: var(--mcc-text-3); }
.mcc-change-up   { color: var(--mcc-green-2); font-weight: 600; font-size: 12px; }
.mcc-change-down { color: var(--mcc-red);     font-weight: 600; font-size: 12px; }
.mcc-change-flat { color: var(--mcc-text-3);  font-weight: 600; font-size: 12px; }

.mcc-popular-conversions { display: flex; flex-direction: column; gap: 7px; overflow: hidden; width: 100%; max-width: 100%; box-sizing: border-box; }
.mcc-pop-conv-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--mcc-white);
  border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-r-sm);
  text-decoration: none;
  color: var(--mcc-text);
  font-size: 13px;
  font-weight: 600;
  transition: var(--mcc-t);
  box-shadow: var(--mcc-shadow-sm);
}
.mcc-pop-conv-item:hover {
  border-color: var(--mcc-blue);
  background: var(--mcc-blue-light);
  color: var(--mcc-blue);
  transform: translateX(4px);
}
.mcc-pop-arrow { color: var(--mcc-blue); font-size: 16px; }

/* ════════════════════════════════════════════════════════════
   FIND OTHER CURRENCIES
════════════════════════════════════════════════════════════ */
.mcc-find-currencies {
  background: var(--mcc-gray-0);
  border-radius: var(--mcc-r-lg);
  padding: 28px;
  max-width: 1100px;
  margin: 0 auto 44px;
}
.mcc-find-currencies h2 { font-size: 20px; font-weight: 800; margin-bottom: 18px; }
.mcc-cur-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 9px; }
.mcc-cur-grid-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--mcc-white);
  border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-r-sm);
  text-decoration: none;
  color: var(--mcc-text);
  font-size: 13px;
  font-weight: 500;
  transition: var(--mcc-t);
  box-shadow: var(--mcc-shadow-sm);
}
.mcc-cur-grid-item:hover { border-color: var(--mcc-blue); color: var(--mcc-blue); background: var(--mcc-blue-light); transform: translateY(-2px); box-shadow: var(--mcc-shadow); }
.mcc-cur-grid-flag { width: 28px; height: 19px; object-fit: cover; border-radius: 3px; border: 1px solid var(--mcc-border); flex-shrink: 0; }
.mcc-cur-grid-code { font-weight: 700; font-size: 13px; min-width: 34px; }
.mcc-cur-grid-name { color: var(--mcc-text-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   FAQ
════════════════════════════════════════════════════════════ */
.mcc-faq { max-width: 760px; margin: 0 auto 44px; padding: 0 20px; }
.mcc-faq h2 { font-size: 20px; font-weight: 800; margin-bottom: 18px; }
.mcc-faq-item { border: 1px solid var(--mcc-border); border-radius: var(--mcc-r-sm); margin-bottom: 8px; overflow: hidden; background: var(--mcc-white); box-shadow: var(--mcc-shadow-sm); }
.mcc-faq-q {
  width: 100%; text-align: left; background: none; border: none;
  padding: 17px 20px; font-size: 14px; font-weight: 600; color: var(--mcc-text);
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mcc-font); transition: background .15s; gap: 12px;
}
.mcc-faq-q:hover { background: var(--mcc-gray-0); }
.mcc-faq-q .mcc-faq-icon { font-size: 18px; color: var(--mcc-text-3); transition: transform .25s; flex-shrink: 0; }
.mcc-faq-item.open .mcc-faq-icon { transform: rotate(45deg); color: var(--mcc-blue); }
.mcc-faq-a { display: none; padding: 0 20px 17px; font-size: 14px; color: var(--mcc-text-2); line-height: 1.75; border-top: 1px solid var(--mcc-gray-1); }
.mcc-faq-item.open .mcc-faq-a { display: block; }

/* ════════════════════════════════════════════════════════════
   WHY MARAAZ
════════════════════════════════════════════════════════════ */
.mcc-why { background: var(--mcc-navy); padding: 48px 20px; color: #fff; }
.mcc-why-inner { max-width: 1100px; margin: 0 auto; }
.mcc-why h2 { font-size: 26px; font-weight: 800; margin-bottom: 8px; color: #fff !important; }
.mcc-why-sub { color: rgba(255,255,255,.6); margin-bottom: 32px; font-size: 15px; }
.mcc-why-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 16px; }
.mcc-why-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--mcc-r);
  padding: 22px;
  transition: var(--mcc-t);
}
.mcc-why-card:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.mcc-why-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.mcc-why-title { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.mcc-why-desc { font-size: 13px; color: rgba(255,255,255,.62); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════
   IBAN CALCULATOR
════════════════════════════════════════════════════════════ */
.mcc-iban-wrap { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .mcc-iban-wrap { grid-template-columns: 1fr; } }
.mcc-iban-hero { background: linear-gradient(135deg,var(--mcc-navy),var(--mcc-navy-2)); border-radius: var(--mcc-r-lg); padding: 36px 32px; color: #fff; }
.mcc-iban-hero h1 { font-size: 30px; font-weight: 800; margin-bottom: 12px; }
.mcc-iban-hero p  { color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 22px; font-size: 14px; }
.mcc-iban-card { background: var(--mcc-white); border-radius: var(--mcc-r-lg); box-shadow: var(--mcc-shadow-xl); padding: 28px; }
.mcc-iban-tabs { display: flex; border-bottom: 2px solid var(--mcc-border); margin-bottom: 22px; }
.mcc-iban-tab { padding: 9px 20px; font-size: 14px; font-weight: 600; color: var(--mcc-text-3); cursor: pointer; border: none; background: none; border-bottom: 2.5px solid transparent; margin-bottom: -2px; transition: var(--mcc-t); font-family: var(--mcc-font); }
.mcc-iban-tab.active { color: var(--mcc-blue); border-bottom-color: var(--mcc-blue); }

.mcc-input-field {
  width: 100%; padding: 13px 15px;
  border: 1.5px solid var(--mcc-border);
  border-radius: var(--mcc-r-sm);
  font-size: 14px; font-family: var(--mcc-font);
  color: var(--mcc-text); outline: none;
  transition: var(--mcc-t); margin-bottom: 14px;
  background: var(--mcc-gray-0);
}
.mcc-input-field:focus { border-color: var(--mcc-blue); background: var(--mcc-white); box-shadow: var(--mcc-glow-blue); }

.mcc-btn-primary {
  width: 100%; padding: 14px;
  background: var(--mcc-blue); color: #fff; border: none;
  border-radius: var(--mcc-r-sm); font-size: 14px; font-weight: 700;
  font-family: var(--mcc-font); cursor: pointer; transition: var(--mcc-t);
}
.mcc-btn-primary:hover { background: var(--mcc-blue-2); box-shadow: 0 6px 18px rgba(0,82,204,.38); }

.mcc-result-box { margin-top: 18px; padding: 16px; border-radius: var(--mcc-r-sm); font-size: 14px; display: none; }
.mcc-result-box.valid   { background: rgba(0,135,90,.07);  border: 1.5px solid rgba(0,135,90,.3); }
.mcc-result-box.invalid { background: rgba(222,53,11,.05); border: 1.5px solid rgba(222,53,11,.28); }
.mcc-result-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.mcc-result-box.valid   .mcc-result-title { color: var(--mcc-green); }
.mcc-result-box.invalid .mcc-result-title { color: var(--mcc-red); }
.mcc-result-detail { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.mcc-result-detail dt { color: var(--mcc-text-3); font-weight: 500; }
.mcc-result-detail dd { font-weight: 600; font-family: var(--mcc-mono); word-break: break-all; }

/* ════════════════════════════════════════════════════════════
   TOOLS HUB
════════════════════════════════════════════════════════════ */
.mcc-tools-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 14px; }
.mcc-tool-card {
  background: var(--mcc-white);
  border: 1px solid var(--mcc-border);
  border-radius: var(--mcc-r);
  padding: 22px;
  text-decoration: none;
  color: var(--mcc-text);
  display: block;
  transition: var(--mcc-t);
  box-shadow: var(--mcc-shadow-sm);
}
.mcc-tool-card:hover { border-color: var(--mcc-blue); box-shadow: var(--mcc-shadow-md); transform: translateY(-3px); }
.mcc-tool-icon { width: 46px; height: 46px; background: var(--mcc-blue-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 13px; }
.mcc-tool-name { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.mcc-tool-desc { font-size: 13px; color: var(--mcc-text-3); line-height: 1.55; }

/* ════════════════════════════════════════════════════════════
   MORTGAGE CALCULATOR
════════════════════════════════════════════════════════════ */
.mcc-mortgage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 700px) { .mcc-mortgage-grid { grid-template-columns: 1fr; } }
.mcc-range-input { width: 100%; accent-color: var(--mcc-blue); margin-top: 6px; cursor: pointer; }
.mcc-form-group { margin-bottom: 18px; }
.mcc-form-label { font-size: 13px; font-weight: 600; color: var(--mcc-text-2); margin-bottom: 6px; display: flex; justify-content: space-between; }
.mcc-form-label span { color: var(--mcc-blue); font-family: var(--mcc-mono); font-weight: 700; }
.mcc-result-panel { background: var(--mcc-blue); color: #fff; border-radius: var(--mcc-r-lg); padding: 28px; }
.mcc-result-panel h3 { font-size: 13px; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.mcc-result-monthly { font-size: 44px; font-weight: 800; font-family: var(--mcc-mono); margin-bottom: 22px; letter-spacing: -1px; }
.mcc-result-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.mcc-result-item label { font-size: 11px; opacity: .65; text-transform: uppercase; display: block; margin-bottom: 3px; }
.mcc-result-item span  { font-size: 17px; font-weight: 700; font-family: var(--mcc-mono); }

/* ════════════════════════════════════════════════════════════
   BREADCRUMBS
════════════════════════════════════════════════════════════ */
.mcc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mcc-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.mcc-breadcrumb a:hover { color: #fff; }
.mcc-breadcrumb .sep { opacity: .4; }

/* ════════════════════════════════════════════════════════════
   INTERNAL LINK BAR
════════════════════════════════════════════════════════════ */
.mcc-link-bar {
  background: var(--mcc-blue-light);
  border: 1px solid rgba(0,82,204,.15);
  border-radius: var(--mcc-r);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.mcc-link-bar-label { font-size: 12px; font-weight: 700; color: var(--mcc-blue); white-space: nowrap; }
.mcc-link-bar a {
  font-size: 12px;
  color: var(--mcc-text-2);
  text-decoration: none;
  padding: 4px 11px;
  border-radius: 16px;
  background: var(--mcc-white);
  border: 1px solid var(--mcc-border);
  transition: var(--mcc-t);
  font-weight: 500;
  white-space: nowrap;
}
.mcc-link-bar a:hover { background: var(--mcc-blue); color: #fff; border-color: var(--mcc-blue); }

/* ════════════════════════════════════════════════════════════
   SKELETON LOADER
════════════════════════════════════════════════════════════ */
.mcc-skel {
  background: linear-gradient(90deg, var(--mcc-gray-1) 25%, var(--mcc-gray-2) 50%, var(--mcc-gray-1) 75%);
  background-size: 200% 100%;
  animation: mcc-shimmer 1.4s infinite;
  border-radius: 6px;
}
@keyframes mcc-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .mcc-convert-row { grid-template-columns: 1fr; }
  .mcc-swap-col { order: 3; }
  .mcc-converter-body { padding: 18px 16px; }
  .mcc-hero { padding: 44px 16px 76px; }
  .mcc-section { padding: 32px 16px; }
  .mcc-why-grid { grid-template-columns: 1fr; }
  .mcc-amount-input, .mcc-result-input { font-size: clamp(14px, 4vw, 22px); }
  .mcc-tabs { gap: 0; }
  .mcc-tab { font-size: 12px; padding: 13px 10px; }
  .mcc-stats-grid { grid-template-columns: 1fr 1fr 1fr; }
  .mcc-cur-grid { grid-template-columns: 1fr 1fr; }
  .mcc-cur-grid-name { display: none; }
  .mcc-cur-grid-name { display: none; }
  .mcc-link-bar { flex-wrap: wrap; gap: 7px; }
  .mcc-faq { padding: 0 16px; }
  .mcc-find-currencies { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .mcc-hero h1 { font-size: 26px; }
  .mcc-cur-grid { grid-template-columns: 1fr 1fr; }
  .mcc-cur-grid-name { display: none; }
  .mcc-tools-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   PRINT STYLES (Invoice)
════════════════════════════════════════════════════════════ */
@media print {
  .mcc-nav-bar, .mcc-hero, .mcc-why, .mcc-link-bar, .mcc-faq { display: none !important; }
  .mcc-wrapper { color: #000 !important; }
}

/* ════════════════════════════════════════════════════════════
   ADMIN
════════════════════════════════════════════════════════════ */
.mcc-admin-wrap { max-width: 1200px; }
.mcc-admin-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; margin: 16px 0; }
.mcc-admin-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.mcc-admin-card h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #64748b; margin: 0 0 8px; }
.mcc-admin-card p  { font-size: 22px; font-weight: 800; color: #0a1628; margin: 0; }
.mcc-admin-card.green { border-left: 4px solid #00a878; }
.mcc-admin-card.blue  { border-left: 4px solid #0052cc; }
.mcc-admin-card.amber { border-left: 4px solid #ff8b00; }

/* ── FLAGS ───────────────────────────────────────────────────── */
.mcc-cur-flag {
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.08);
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.mcc-dd-flag {
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.08);
  object-fit: cover;
  flex-shrink: 0;
}
img[src*="flagcdn.com"] {
  min-width: 20px;
  background: #e2e8f0;
}

/* ── CONVERTER FIXES ─────────────────────────────────────────── */
.mcc-converter-card {
  background: var(--mcc-white);
  border-radius: var(--mcc-r-xl);
  box-shadow: var(--mcc-shadow-xl);
  overflow: visible;
  max-width: 980px;
  margin: 0 auto;
}
.mcc-tabs {
  border-radius: var(--mcc-r-xl) var(--mcc-r-xl) 0 0;
  overflow: hidden;
}
.mcc-field-box {
  position: relative;
}
/* Portal dropdown handles all positioning */
.mcc-dd-section-title {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--mcc-text-3);
  background: var(--mcc-gray-0);
  border-bottom: 1px solid var(--mcc-gray-1);
}
.mcc-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  transition: background .1s;
}
.mcc-dd-item:hover, .mcc-dd-item.active {
  background: var(--mcc-blue-light);
  color: var(--mcc-blue);
}
.mcc-dd-code { font-weight: 700; min-width: 40px; font-family: var(--mcc-mono); font-size: 13px; }
.mcc-dd-name { color: var(--mcc-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mcc-dd-symbol { color: var(--mcc-text-4); font-size: 12px; flex-shrink: 0; }

/* ── DROPDOWN (PORTAL) ────────────────────────────────────────── */
/* Portal dropdown: appended to body, fixed-positioned to escape overflow */
.mcc-dropdown-portal {
  background: #fff;
  border: 1.5px solid #0052cc;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(9,30,66,.22), 0 4px 16px rgba(0,82,204,.14);
  overflow: hidden;
  display: none;
}
.mcc-dropdown-portal.open { display: flex; flex-direction: column; }

/* Search inside dropdown */
.mcc-dd-search-wrap {
  padding: 10px 10px 8px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  flex-shrink: 0;
}
.mcc-portal-search {
  width: 100%;
  border: 1.5px solid #dfe1e6;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 16px;
  outline: none;
  background: #f7f9fc;
  color: #344563;
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.mcc-portal-search:focus {
  border-color: #0052cc;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,82,204,.12);
}

/* List inside dropdown */
.mcc-dd-list {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: #dfe1e6 transparent;
}
.mcc-dd-list::-webkit-scrollbar { width: 5px; }
.mcc-dd-list::-webkit-scrollbar-thumb { background: #dfe1e6; border-radius: 4px; }

.mcc-dd-section-title {
  position: sticky; top: 0; z-index: 1;
  padding: 7px 14px 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: #6b778c; background: #f8fafc;
  border-bottom: 1px solid #f0f0f0;
}
.mcc-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  font-size: 13px; transition: background .08s;
  border-bottom: 1px solid #f9fafb;
}
.mcc-dd-item:hover, .mcc-dd-item:active { background: #e8f0fe; }
.mcc-dd-item:last-child { border-bottom: none; }
.mcc-dd-code { font-weight: 700; min-width: 42px; font-family: monospace; font-size: 13px; color: #0a1628; flex-shrink: 0; }
.mcc-dd-name { color: #5e6c84; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; font-size: 13px; }
.mcc-dd-symbol { color: #97a0af; font-size: 12px; flex-shrink: 0; }
.mcc-dd-flag { border-radius: 2px; flex-shrink: 0; }

/* Currency selector box styles */
.mcc-cur-select {
  display: flex !important; align-items: center; gap: 10px;
  padding: 12px 14px 10px; cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  user-select: none; -webkit-user-select: none;
  transition: background .15s;
  min-height: 56px;
}
.mcc-cur-select:hover { background: #f7f9fc; }
.mcc-cur-arrow { color: #6b778c; font-size: 14px; margin-left: auto; transition: transform .2s; flex-shrink: 0; }

/* Hide the original search input (we use portal search) */
.mcc-cur-search {
  width: 100%; border: none; 
  border-bottom: 1px solid #f0f0f0;
  padding: 9px 14px; font-size: 16px; outline: none;
  background: #fafbfc; color: #344563;
  display: none; /* Hidden - search is inside portal dropdown */
}

/* ── AMOUNT INPUT FIX ─────────────────────────────────────────── */
.mcc-amount-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 10px 14px 13px;
  font-size: 28px;
  font-weight: 700;
  font-family: var(--mcc-mono);
  background: transparent;
  text-align: right;
  letter-spacing: -0.3px;
  color: var(--mcc-text);
}
.mcc-amount-input::-webkit-outer-spin-button,
.mcc-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mcc-result-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 10px 14px 13px;
  font-size: 28px;
  font-weight: 700;
  font-family: var(--mcc-mono);
  background: transparent;
  text-align: right;
  color: var(--mcc-blue);
  cursor: default;
}

/* ── DATE ROW ─────────────────────────────────────────────────── */
.mcc-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mcc-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--mcc-gray-0);
  border: 1px solid var(--mcc-border);
  border-radius: 8px;
  padding: 6px 10px;
}
.mcc-date-prev, .mcc-date-next {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mcc-text-3);
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
  transition: color .15s;
}
.mcc-date-prev:hover, .mcc-date-next:hover { color: var(--mcc-blue); }
.mcc-date-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--mcc-text);
  min-width: 80px;
  text-align: center;
}

/* ── CHART PANEL ──────────────────────────────────────────────── */
.mcc-chart-panel {
  background: var(--mcc-white);
  border-left: 1px solid var(--mcc-border);
  padding: 20px;
  min-height: 240px;
}
.mcc-chart-panel canvas {
  max-height: 280px;
}

/* ── RESPONSIVE FIXES ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .mcc-converter-grid { grid-template-columns: 1fr !important; }
  .mcc-chart-panel { border-left: none; border-top: 1px solid var(--mcc-border); }
}
@media (max-width: 640px) {
  .mcc-convert-row { grid-template-columns: 1fr !important; }
  .mcc-swap-col { order: 3; display: flex; justify-content: center; }
  .mcc-converter-body { padding: 16px !important; }
  .mcc-amount-input, .mcc-result-input { font-size: clamp(14px, 4vw, 22px); }
  .mcc-stats-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── NAV STICKY FIX ───────────────────────────────────────────── */
.mcc-nav-bar + * { margin-top: 0; }
body.admin-bar .mcc-nav-bar { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mcc-nav-bar { top: 46px; } }

/* ── TOOLS GRID ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mcc-tools-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .mcc-tools-grid { grid-template-columns: 1fr !important; }
}

/* ── LIVE RATES RESPONSIVE ────────────────────────────────────── */
.mcc-table { min-width: 0; width: 100%; }
.mcc-live-table { overflow-x: auto; }
@media (max-width: 640px) {
  .mcc-table th, .mcc-table td { padding: 9px 10px; font-size: 12px; }
}

/* ── CURRENCY PAGE ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .mcc-cur-page-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .mcc-cur-page-grid { grid-template-columns: 1fr !important; }
  .mcc-about-grid { grid-template-columns: 1fr !important; }
}



/* ═══════════════════════════════════════════════════════════
   MARAAZ CONVERTER - Clean XE-style, v4 (final)
═══════════════════════════════════════════════════════════ */

/* Outer wrapper */
.mcc-cx-wrap { width: 100%; }
.mcc-cx-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(9,30,66,.1);
  overflow: visible;
}

/* Grid: converter body + chart panel */
.mcc-cx-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
}
/* When no chart */
.mcc-cx-grid:has(.mcc-cx-body:only-child),
.mcc-cx-grid > .mcc-cx-body:only-child {
  grid-column: 1 / -1;
}

/* Converter body */
.mcc-cx-body { padding: 24px; }

/* ── XE ROW ─────────────────────────────────────────────── */
.mcc-xe-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  border: 2px solid #dfe1e6;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 16px;
  position: relative;
  z-index: 20;
  overflow: visible;
}

/* Each side */
.mcc-xe-side {
  padding: 14px 16px;
  position: relative;
  overflow: visible;
  min-width: 0;
}
.mcc-xe-side[data-side="from"] { border-right: 1px solid #dfe1e6; }

/* From/To label */
.mcc-xe-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #6b778c;
  margin-bottom: 8px;
}

/* Inner: [amount/result] + [picker button] side by side */
.mcc-xe-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Amount input (FROM) */
.mcc-xe-amount {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font-size: 28px;
  font-weight: 700;
  color: #0a1628;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  background: transparent;
  padding: 0;
  letter-spacing: -.5px;
  width: 100%;
}
.mcc-xe-amount::-webkit-outer-spin-button,
.mcc-xe-amount::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Result display (TO) */
.mcc-xe-result {
  flex: 1;
  min-width: 0;
  font-size: clamp(14px, 3.5vw, 28px);
  font-weight: 700;
  color: #0052cc;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: -.5px;
  word-break: break-all;
  line-height: 1.2;
  overflow: visible;
  white-space: normal;
}

/* Currency picker button */
.mcc-xe-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f4f5f7;
  border: 1.5px solid #dfe1e6;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 160px;
}
.mcc-xe-pick:hover { background: #e8f0fe; border-color: #0052cc; }
.mcc-xe-pick img { border-radius: 3px; flex-shrink: 0; }
.mcc-xe-cur {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.mcc-xe-cur strong {
  font-size: 13px;
  font-weight: 700;
  color: #0a1628;
  font-family: monospace;
  line-height: 1.2;
}
.mcc-xe-name {
  font-size: 10px;
  color: #6b778c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
  display: none !important;
}
.mcc-xe-caret { color: #6b778c; flex-shrink: 0; transition: transform .2s; }
.mcc-xe-pick:hover .mcc-xe-caret { color: #0052cc; transform: rotate(180deg); }

/* Swap button - perfect center */
.mcc-xe-swap {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 48px;
  background: transparent;
  border: none;
  border-left: 1px solid #dfe1e6;
  border-right: 1px solid #dfe1e6;
  cursor: pointer;
  color: #6b778c;
  transition: all .2s;
  padding: 0;
  border-radius: 0;
}
.mcc-xe-swap:hover { background: #e8f0fe; color: #0052cc; }
.mcc-xe-swap svg { transition: transform .3s; }
.mcc-xe-swap:hover svg { transform: rotate(180deg); }

/* Chart panel */
.mcc-chart-panel {
  padding: 24px;
  border-left: 1px solid #f0f0f0;
}

/* ── PORTAL DROPDOWN ─────────────────────────────────────── */
.mcc-dropdown-portal {
  background: #fff;
  border: 2px solid #0052cc;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(9,30,66,.2);
  overflow: hidden;
  z-index: 999999 !important;
  display: none;
  flex-direction: column;
}
.mcc-dropdown-portal.open { display: flex !important; }
.mcc-dd-search-wrap { padding: 10px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
.mcc-portal-search {
  width: 100%;
  border: 1.5px solid #dfe1e6;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 16px;
  outline: none;
  background: #f7f9fc;
  box-sizing: border-box;
  transition: border-color .15s;
}
.mcc-portal-search:focus { border-color: #0052cc; background: #fff; box-shadow: 0 0 0 3px rgba(0,82,204,.1); }
.mcc-dd-list { overflow-y: auto; flex: 1; max-height: 300px; }
.mcc-dd-list::-webkit-scrollbar { width: 4px; }
.mcc-dd-list::-webkit-scrollbar-thumb { background: #dfe1e6; border-radius: 4px; }
.mcc-dd-section-title {
  position: sticky; top: 0;
  padding: 6px 14px 4px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: #6b778c; background: #f8fafc;
  border-bottom: 1px solid #f0f0f0;
}
.mcc-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid #f9fafb; transition: background .08s;
}
.mcc-dd-item:hover { background: #e8f0fe; }
.mcc-dd-code { font-weight: 700; min-width: 40px; font-family: monospace; color: #0a1628; }
.mcc-dd-name { color: #5e6c84; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcc-dd-flag { border-radius: 2px; flex-shrink: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .mcc-cx-grid { grid-template-columns: 1fr !important; }
  .mcc-chart-panel { display: none; }
}
@media (max-width: 580px) {
  .mcc-xe-row { grid-template-columns: 1fr !important; }
  .mcc-xe-side[data-side="from"] {
    border-right: none !important;
    border-bottom: 2px solid #dfe1e6;
  }
  .mcc-xe-swap {
    width: 100% !important;
    height: 42px;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #dfe1e6;
    border-bottom: 1px solid #dfe1e6;
    background: #f7f9fc;
  }
  .mcc-xe-amount, .mcc-xe-result { font-size: 22px !important; }
  .mcc-xe-name { display: none !important; }
  .mcc-xe-pick { max-width: none !important; }
  .mcc-cx-body { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL MOBILE RESPONSIVE FIXES - All pages
═══════════════════════════════════════════════════════ */

/* Global container fixes */
@media (max-width: 768px) {
  /* Wrapper padding */
  .mcc-wrapper { padding: 0 12px !important; }
  .mcc-hero-inner { padding: 24px 16px !important; }
  .mcc-section { padding: 24px 0 !important; }

  /* All grids collapse to 1 column */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar hides on mobile */
  [style*="grid-template-columns:1fr 320px"] > div:last-child,
  [style*="grid-template-columns: 1fr 320px"] > div:last-child { 
    display: none !important; 
  }

  /* Hero text */
  .mcc-hero h1 { font-size: clamp(22px, 5vw, 32px) !important; }
  .mcc-hero p  { font-size: 14px !important; }

  /* Cards padding */
  [style*="padding:28px"],
  [style*="padding: 28px"] { padding: 16px !important; }

  /* Converter card */
  .mcc-cx-card { border-radius: 12px !important; }
  .mcc-cx-body { padding: 14px !important; }

  /* Tables */
  table { font-size: 13px !important; }
  th, td { padding: 8px 10px !important; }

  /* Chart panels hide */
  .mcc-chart-panel { display: none !important; }

  /* Buttons full width */
  .mcc-convert-btn { padding: 12px !important; font-size: 14px !important; }

  /* IBAN, mortgage, swift forms */
  .mcc-iban-wrap,
  .mcc-mortgage-grid,
  [style*="display:grid;grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Lang switcher wrap */
  .mcc-lang-switcher { gap: 4px !important; }
  .mcc-lang-switcher a { font-size: 10px !important; padding: 3px 6px !important; }

  /* Encyclopedia form */
  .mcc-enc-hero-form { flex-direction: column !important; }
  .mcc-enc-hero-form select,
  .mcc-enc-hero-form button { width: 100% !important; min-width: unset !important; box-sizing: border-box !important; }

  /* Historical form grid */
  [style*="grid-template-columns:1fr 1fr 1fr auto"],
  [style*="grid-template-columns: 1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Quick shortcuts wrap */
  #mcc-hist-btn { width: 100%; }
}

@media (max-width: 480px) {
  /* XE converter stacks vertically */
  [style*="grid-template-columns:1fr 48px 1fr"],
  [style*="display:grid!important;grid-template-columns:1fr 48px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .mcc-from-box { border-right: none !important; border-bottom: 2px solid #dfe1e6 !important; }
  .mcc-swap-btn { 
    width: 100% !important; height: 42px !important; 
    border-left: none !important; border-right: none !important; 
    background: #f7f9fc !important; 
  }
  .mcc-xe-amount, .mcc-result-input { font-size: 22px !important; }
  .mcc-xe-name { display: none !important; }

  /* Navigation */
  .mcc-nav-bar { gap: 8px !important; }
  .mcc-nav-bar a { font-size: 12px !important; }

  /* Stats grid */
  .mcc-stats-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .mcc-stat { padding: 8px !important; }
}

/* ── CONVERTER MOBILE FIX (currency page & all pages) ────────── */
@media(max-width:500px) {
  /* Make result div font smaller if number is long */
  .mcc-result-input { min-width: 0 !important; overflow: hidden !important; }
  
  /* Picker buttons: hide name, shrink */
  .mcc-xe-cur span:last-child,
  .mcc-from-name, .mcc-to-name,
  [style*="max-width:75px"] { display: none !important; }
  
  /* Make picker button narrower */
  .mcc-cur-select { max-width: 90px !important; min-width: 0 !important; }
  
  /* Reduce flag size */
  .mcc-cx-card img[width="24"] { width: 20px !important; height: 14px !important; }
  
  /* Amount input font smaller */
  .mcc-xe-amount, .mcc-amount-input { font-size: 22px !important; }
}

@media(max-width:400px) {
  /* Stack FROM/SWAP/TO vertically */
  [style*="grid-template-columns:1fr 48px 1fr!important"],
  .mcc-cx-card [style*="display:grid!important;grid-template-columns:1fr 48px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .mcc-from-box { border-right: none !important; border-bottom: 2px solid #dfe1e6 !important; }
  .mcc-swap-btn {
    width: 100% !important; height: 40px !important;
    border-left: none !important; border-right: none !important;
    background: #f7f9fc !important;
  }
  /* Show names again since we have full width */
  .mcc-from-name, .mcc-to-name,
  [style*="max-width:75px"] { display: block !important; }
  .mcc-cur-select { max-width: 155px !important; }
}

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL CONVERTER — works identically on ALL pages
   Mobile-first, CSS-driven responsive layout
════════════════════════════════════════════════════════════════ */

/* Wrapper */
.mcc-cx-wrap { width: 100%; }
.mcc-cx-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(9,30,66,.1);
  overflow: visible;
}

/* Main grid: body + optional chart panel */
.mcc-cx-grid { display: grid; grid-template-columns: 1fr; }
@media(min-width:861px) {
  .mcc-cx-grid.has-chart { grid-template-columns: 1fr 280px; }
}
.mcc-cx-body { padding: 20px; min-width: 0; }
@media(min-width:480px) { .mcc-cx-body { padding: 24px; } }

/* Tab bar */
.mcc-tabs { display: flex; border-bottom: 2px solid #f0f0f0; }
.mcc-tab  {
  flex: 1; padding: 13px 8px; background: none; border: none;
  cursor: pointer; font-size: 14px; font-weight: 600; color: #6b778c;
  font-family: inherit; transition: color .15s;
}
.mcc-tab.active {
  color: #0052cc; border-bottom: 3px solid #0052cc; margin-bottom: -2px;
  font-weight: 700;
}

/* XE ROW — the FROM|SWAP|TO grid */
.mcc-xe-row {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  border: 2px solid #dfe1e6;
  border-radius: 12px;
  background: #fff;
  margin-bottom: 14px;
  overflow: visible;
  position: relative;
}

/* FROM side */
.mcc-xe-from, .mcc-xe-to {
  padding: 12px 14px;
  min-width: 0;
  overflow: visible;
}
.mcc-xe-from { border-right: 1px solid #dfe1e6; }

/* Label above input */
.mcc-xe-lbl {
  display: block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: #6b778c; margin-bottom: 6px;
}

/* Inner: [amount/result] + [picker] */
.mcc-xe-inner { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* Amount input */
.mcc-xe-amt, .mcc-xe-amount, .mcc-amount-input {
  flex: 1;
  min-width: 0 !important;
  border: none; outline: none;
  font-size: 26px; font-weight: 700;
  color: #0a1628; font-family: monospace;
  background: transparent; padding: 0;
  width: 100%;
}
.mcc-xe-amt::-webkit-outer-spin-button,
.mcc-xe-amt::-webkit-inner-spin-button,
.mcc-amount-input::-webkit-outer-spin-button,
.mcc-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Result display */
.mcc-xe-res, .mcc-result-input {
  flex: 1;
  min-width: 0 !important;
  font-size: clamp(13px, 3.5vw, 26px); font-weight: 700;
  color: #0052cc; font-family: monospace;
  overflow: visible;
  white-space: normal;
  word-break: break-all;
  line-height: 1.3;
}

/* Currency picker button */
.mcc-xe-pick, .mcc-cur-select {
  display: flex; align-items: center; gap: 5px;
  background: #f4f5f7; border: 1.5px solid #dfe1e6;
  border-radius: 8px; padding: 6px 8px;
  cursor: pointer; font-family: inherit; flex-shrink: 0;
  transition: background .15s; white-space: nowrap;
  min-width: 0;
}
.mcc-xe-pick:hover, .mcc-cur-select:hover {
  background: #e8f0fe; border-color: #0052cc;
}
.mcc-xe-code, .mcc-from-code, .mcc-to-code {
  font-size: 13px; font-weight: 700;
  color: #0a1628; font-family: monospace; line-height: 1;
  display: block;
}
.mcc-xe-name, .mcc-from-name, .mcc-to-name {
  font-size: 10px; color: #6b778c; display: none !important;
  max-width: 65px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* Swap button */
.mcc-xe-swap, .mcc-swap-btn {
  display: flex !important; align-items: center !important;
  justify-content: center !important; align-self: stretch !important;
  border: none;
  border-left: 1px solid #dfe1e6;
  border-right: 1px solid #dfe1e6;
  background: transparent; cursor: pointer;
  color: #6b778c; padding: 0; transition: all .2s;
}
.mcc-xe-swap:hover, .mcc-swap-btn:hover {
  background: #f0f4ff; color: #0052cc;
}

/* Rate bar */
.mcc-rate-bar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #f7f9fc; border-radius: 8px;
  margin-bottom: 12px; font-size: 13px;
  color: #344563; flex-wrap: wrap; gap: 6px;
}

/* Date row */
.mcc-date-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; font-size: 13px;
  color: #344563; margin-bottom: 12px;
}

/* Convert button */
.mcc-convert-btn {
  width: 100%; padding: 13px;
  background: #0052cc; color: #fff;
  border: none; border-radius: 10px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; margin-bottom: 12px;
  font-family: inherit; transition: background .15s;
}
.mcc-convert-btn:hover { background: #003fa3; }

/* Stats grid - always 3 columns */
.mcc-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.mcc-stat {
  background: #f7f9fc; border-radius: 8px;
  padding: 10px 8px; text-align: center;
}
.mcc-stat-label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: #6b778c; margin-bottom: 3px;
}
.mcc-stat-val {
  display: block; font-size: 13px; font-weight: 700;
  color: #0a1628; font-family: monospace;
}

/* Chart panel */
.mcc-chart-panel {
  padding: 20px;
  border-left: 1px solid #f0f0f0;
}

/* ── MOBILE BREAKPOINTS ─────────────────────────────────────── */
@media(max-width:600px) {
  /* Hide currency name in picker (save space) */
  .mcc-xe-name, .mcc-from-name, .mcc-to-name { display: none !important; }
  
  /* Picker button: smaller */
  .mcc-xe-pick, .mcc-cur-select { padding: 6px 7px; gap: 4px; }
  
  /* Result and amount: font stays 24px - enough space after name hidden */
  .mcc-xe-amt, .mcc-xe-amount, .mcc-amount-input { font-size: 24px; }
  .mcc-xe-res, .mcc-result-input { font-size: clamp(13px, 3.5vw, 24px); }
  
  /* Body padding smaller */
  .mcc-cx-body { padding: 14px; }
  
  /* Chart panel hides */
  .mcc-chart-panel { display: none !important; }
  .mcc-cx-grid { grid-template-columns: 1fr !important; }
}

@media(max-width:420px) {
  /* Stack FROM/SWAP/TO vertically on very small screens */
  .mcc-xe-row { grid-template-columns: 1fr !important; }
  .mcc-xe-from { border-right: none !important; border-bottom: 2px solid #dfe1e6 !important; }
  .mcc-xe-swap, .mcc-swap-btn {
    height: 40px !important;
    border-left: none !important; border-right: none !important;
    border-top: 1px solid #dfe1e6; border-bottom: 1px solid #dfe1e6;
    background: #f8f9fa !important;
    width: 100% !important;
  }
  /* Names always hidden */
  .mcc-xe-name, .mcc-from-name, .mcc-to-name { display: none !important; }
  /* Bigger font on full width */
  .mcc-xe-amt, .mcc-xe-amount, .mcc-amount-input { font-size: 28px !important; }
  .mcc-xe-res, .mcc-result-input { font-size: clamp(13px, 3.5vw, 28px) !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile fixes (single authoritative block)
   All rules use !important to override any inline or earlier styles
═══════════════════════════════════════════════════════════════════ */

/* ── Find other currencies ─────────────────────────────────── */
.mcc-find-currencies { overflow: hidden; box-sizing: border-box; }
.mcc-cur-grid { overflow: hidden; box-sizing: border-box; width: 100%; }
/* Always hide name on mobile — prevents overflow */
@media (max-width: 768px) {
  .mcc-find-currencies { padding: 20px 14px !important; }
  .mcc-cur-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .mcc-cur-grid-item { padding: 9px 10px !important; gap: 7px !important; font-size: 12px !important; overflow: hidden !important; }
  .mcc-cur-grid-name { display: none !important; }
  .mcc-cur-grid-code { font-size: 12px !important; }
}

/* ── Popular conversions ───────────────────────────────────── */
.mcc-popular-conversions { overflow: hidden; width: 100%; box-sizing: border-box; }
.mcc-pop-conv-item { box-sizing: border-box; width: 100%; overflow: hidden; }
@media (max-width: 768px) {
  .mcc-popular-conversions { gap: 5px !important; }
  .mcc-pop-conv-item { padding: 10px 12px !important; font-size: 12px !important; }
  .mcc-pop-conv-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Live rates table ──────────────────────────────────────── */
.mcc-live-rates-table, .mcc-rates-table { width: 100%; overflow: hidden; table-layout: fixed; }
@media (max-width: 600px) {
  .mcc-live-rates-table th, .mcc-live-rates-table td,
  .mcc-rates-table th, .mcc-rates-table td { padding: 7px 6px !important; font-size: 11px !important; }
  /* Hide CHANGE column on very small screens */
  .mcc-rates-table th:last-child, .mcc-rates-table td:last-child { display: none !important; }
}

/* ── Converter picker — hide currency name on mobile ───────── */
@media (max-width: 640px) {
  .mcc-from-name, .mcc-to-name, .mcc-xe-name { display: none !important; }
  .mcc-cur-select { max-width: 80px !important; min-width: 0 !important; }
  .mcc-xe-pick { max-width: 80px !important; min-width: 0 !important; }
}
/* Very small screens — keep names hidden, allow more width for amounts */
@media (max-width: 400px) {
  .mcc-from-name, .mcc-to-name, .mcc-xe-name { display: none !important; }
  .mcc-cur-select, .mcc-xe-pick { max-width: 90px !important; min-width: 0 !important; }
  /* Shrink amount font so large numbers fit */
  .mcc-xe-amount, .mcc-xe-result { font-size: 20px !important; }
  .mcc-xe-pick .mcc-xe-code { font-size: 11px !important; }
}

/* ── General overflow prevention ───────────────────────────── */
@media (max-width: 768px) {
  .mcc-wrapper { overflow-x: hidden !important; }
  .mcc-section { overflow: hidden; }
  .mcc-cx-card { overflow: visible; }
}

/* ── Live rates table mobile overflow fix ─────────────────── */
.mcc-live-table, .mcc-live-table > div { max-width: 100%; overflow-x: auto; }
.mcc-table { table-layout: auto; }
@media (max-width: 480px) {
  .mcc-table th, .mcc-table td { padding: 8px 8px !important; font-size: 11px !important; }
  .mcc-table th:last-child, .mcc-table td:last-child { display: none !important; } /* hide Change */
  .mcc-rates-2col { grid-template-columns: 1fr !important; }
}
/* Popular conversions section containment */
.mcc-section { max-width: 100%; box-sizing: border-box; }


/* ════════════════════════════════════════════════════════════
   v5.20 LAYOUT FIXES
════════════════════════════════════════════════════════════ */

/* ── Encyclopedia hero form — mobile stack ─────────────── */
@media (max-width: 600px) {
  .mcc-enc-hero-form { flex-direction: column !important; }
  .mcc-enc-hero-form select,
  .mcc-enc-hero-form button {
    width: 100% !important; min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── Encyclopedia content — desktop padding ────────────── */
@media (min-width: 1024px) {
  .mcc-enc-section {
    max-width: 900px;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ── Live Exchange Rates — desktop constraint ──────────── */
@media (min-width: 1024px) {
  .mcc-live-rates-page .mcc-section {
    max-width: 900px;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  /* Also constrain the compact converter on this page */
  .mcc-live-rates-page .mcc-cx-wrap {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 48px;
    box-sizing: border-box;
  }
}

/* ── Currency Charts — desktop constraint ──────────────── */
@media (min-width: 1024px) {
  .mcc-charts-page .mcc-section {
    max-width: 900px;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ── IBAN Country List — desktop narrow + mobile scroll ── */
.mcc-iban-country-section {
  max-width: 900px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .mcc-iban-country-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Shrink Example column text on mobile */
  .mcc-iban-country-section .mcc-table td:last-child,
  .mcc-iban-country-section .mcc-table th:last-child {
    font-size: 10px !important;
  }
}

/* ── IBAN Validate Result Boxes — Wise-style ───────────── */
.mcc-iban-valid-result {
  margin-top: 18px; padding: 20px; border-radius: 12px;
  background: #f0faf5; border: 1.5px solid rgba(0,135,90,.25);
}
.mcc-iban-invalid-result {
  margin-top: 18px; padding: 20px; border-radius: 12px;
  background: #fff8f6; border: 1.5px solid rgba(222,53,11,.2);
}
.mcc-iban-valid-result button:hover { background: #0065ff !important; }



/* ════════════════════════════════════════════════════════════
   IBAN Country List — mobile only (v5.22)
   Desktop: unchanged (4 columns, no scroll)
   Mobile: 3 columns, Example hidden, full country name visible
════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* No horizontal scroll */
  .mcc-iban-country-section > div { overflow-x: visible !important; }
  .mcc-iban-country-section .mcc-table {
    width: 100%;
    table-layout: fixed;
    min-width: 0 !important;
  }
  /* Hide Example column on mobile */
  .mcc-iban-country-section .mcc-table th:nth-child(4),
  .mcc-iban-country-section .mcc-table td:nth-child(4) { display: none !important; }
  /* Country col — full width, no truncation */
  .mcc-iban-country-section .mcc-table th:nth-child(1),
  .mcc-iban-country-section .mcc-table td:nth-child(1) {
    width: auto;
    white-space: normal;
    word-break: break-word;
  }
  /* Code col */
  .mcc-iban-country-section .mcc-table th:nth-child(2),
  .mcc-iban-country-section .mcc-table td:nth-child(2) { width: 62px; text-align: center; }
  /* Length col */
  .mcc-iban-country-section .mcc-table th:nth-child(3),
  .mcc-iban-country-section .mcc-table td:nth-child(3) { width: 70px; text-align: center; }
  /* Compact padding */
  .mcc-iban-country-section .mcc-table th,
  .mcc-iban-country-section .mcc-table td { padding: 8px 8px !important; font-size: 13px !important; }
}

/* ── Languages page (/languages/) — matches hazoo.co.uk/languages/ ── */
.mcc-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.mcc-lang-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mcc-lang-card:hover {
  border-color: #0052cc;
  box-shadow: 0 4px 16px rgba(0,82,204,.15);
  transform: translateY(-2px);
}
.mcc-lang-flag { border-radius: 4px; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }
.mcc-lang-info { min-width: 0; }
.mcc-lang-native { font-size: 17px; font-weight: 700; color: #0a1628; }
.mcc-lang-name { font-size: 12.5px; color: #6b778c; margin-top: 2px; }
.mcc-lang-pairs { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.mcc-lang-pair {
  font-size: 10.5px; font-weight: 700; font-family: monospace;
  background: #e8f0fe; color: #0052cc; padding: 3px 7px; border-radius: 5px;
}

/* Mobile: single full-width column, same card proportions (just slightly
   tighter padding), like hazoo.co.uk/languages/ on mobile — NOT a 2-column
   grid, that made cards feel cramped. */
@media (max-width: 640px) {
  .mcc-lang-grid { grid-template-columns: 1fr; gap: 14px; }
  .mcc-lang-card { padding: 16px 18px; gap: 14px; }
  .mcc-lang-flag { width: 36px; height: 25px; }
  .mcc-lang-native { font-size: 16px; }
  .mcc-lang-name { font-size: 12px; }
  .mcc-lang-pairs { gap: 6px; }
  .mcc-lang-pair { font-size: 10px; padding: 3px 7px; }
}