/* Meta fees calculator (meta-fees-calculator): the coral chapter of /whatsapp-pricing-calculator, then Meta's rate
   table on the ground. The look follows the plan calculator (pricing-calculator): Sheet cards on the coral field,
   real inputs (48px, 14px corners, 2px Field Line, from .form in components.css), the slider, and the total rolling
   like a meter (motion.css). The two cards share one height (the Level Row Rule); the result inside stays in view
   while a long list of countries scrolls past. Logical properties throughout, so Arabic (dir="rtl") mirrors. */
.mf-field {
  margin-inline: var(--inset);
  padding-block: clamp(44px, 5.4vw, 84px);
  border-radius: var(--r-xl);
  background: var(--field-coral);
  corner-shape: var(--sq-shape, round);
}
.mf-head { display: grid; gap: 18px; max-width: 860px; }
.mf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; font: 600 15px/1.4 var(--text); color: var(--ink); }
.mf-date { display: inline-flex; align-items: center; gap: 8px; padding-block: 10px; }
.mf-date .i, .mf-next .i { width: 18px; height: 18px; color: var(--ink-soft); }
.mf-src { color: var(--ink-soft); }
.mf-src a {
  padding-block: 10px;
  color: var(--accent-ink); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.mf-next { display: flex; align-items: flex-start; gap: 8px; max-width: 62ch; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.mf-next .i { margin-top: 2px; }
.mf-noscript, .mf-nodata { margin-top: 24px; max-width: 62ch; font: 700 16px/1.45 var(--text); }

.mf-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.mf-controls, .mf-results {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: var(--sheet-bg); color: var(--ink);
  corner-shape: var(--sq-shape, round);
}
.mf-controls.form { --form-max: none; display: grid; gap: 0; align-content: start; box-shadow: var(--shadow-sm); }
.mf-group { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mf-group + .mf-group { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.mf-legend { display: block; padding: 0; font: 800 17px/1.3 var(--text); color: var(--ink); }
/* A floated legend is laid out inside its fieldset like any other child, so the divider above the group runs clear
   of it instead of through it */
legend.mf-legend { float: left; width: 100%; margin: 0; }
.mf-controls .field-help { margin: 0; }

/* Billing currency: a select (and, without JavaScript, a button that reloads the page) */
.mf-cur-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mf-cur-row .field-select { flex: 1 1 14rem; max-width: 24rem; }
.mf-cur-go[hidden] { display: none; }

/* A country and its messages: one Mist panel per country */
.mf-rows { display: grid; gap: 12px; margin: 4px 0 0; }
.mf-row {
  position: relative; display: grid; gap: 10px; min-width: 0;
  padding: 14px 16px 16px;
  border-radius: calc(20px * var(--sq-scale, 1));
  background: var(--surface-2);
  corner-shape: var(--sq-shape, round);
}
.mf-row-head { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.mf-cc { flex: 1 1 auto; display: grid; gap: 8px; min-width: 0; }
.mf-cc-box { position: relative; }
.mf-cc-box::after {
  content: ""; position: absolute; inset-inline-end: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2.5px solid var(--ink-soft); border-bottom: 2.5px solid var(--ink-soft);
  translate: 0 -70%; rotate: 45deg; pointer-events: none;
}
.form .mf-cc-input { padding-inline-end: 44px; text-overflow: ellipsis; }
.mf-cc-list {
  position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 6px);
  max-height: min(19rem, 46vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px;
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--sq-scale, 1));
  background: var(--sheet-bg); color: var(--ink);
  box-shadow: var(--shadow-lift);
  scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent;
  transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out);
  corner-shape: var(--sq-shape, round);
}
@starting-style {
  .mf-cc-list { opacity: 0; translate: 0 -4px; }
}
.mf-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 12px;
  border-radius: calc(10px * var(--sq-scale, 1));
  font: 600 16px/1.3 var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  corner-shape: var(--sq-shape, round);
}
.mf-opt.is-active { background: var(--field-sky); }
.mf-opt[aria-selected="true"] { font-weight: 800; }
.mf-opt[aria-selected="true"] .mf-opt-name::after {
  content: ""; display: inline-block; width: 0.55em; height: 0.3em; margin-inline-start: 0.5em;
  border-inline-start: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  rotate: -45deg; translate: 0 -0.2em;
}
.mf-opt-name { min-width: 0; overflow-wrap: anywhere; }
.mf-opt-code { flex: none; font: 500 13px/1.2 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mf-opt-none { padding: 12px; font-size: 15px; color: var(--ink-soft); }
.mf-cc-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.mf-cc-note .i { width: 18px; height: 18px; margin-top: 1px; color: var(--ink); }
.mf-cc-note.is-warn { color: var(--ink); font-weight: 600; }
.mf-remove {
  flex: none; display: grid; place-items: center;
  width: 48px; height: 48px; margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mf-remove .i { width: 20px; height: 20px; }
.mf-remove:active { transform: scale(0.94); }
.mf-remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mf-remove[hidden] { display: none; }
.mf-vols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.25rem), 1fr));
  align-items: stretch; gap: 10px;
}
/* Labels can wrap to two lines in some languages: the boxes still line up along the bottom */
.mf-vol { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.mf-num { font-variant-numeric: tabular-nums; }
.mf-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 700 13px/1.4 var(--text); color: var(--err); }
.mf-err .i { width: 16px; height: 16px; margin-top: 1px; }
.mf-err[hidden] { display: none; }
.mf-add {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: 2px; padding: 8px 18px 8px 14px;
  border: 2px dashed var(--field-line); border-radius: 999px;
  background: transparent; color: var(--ink);
  font: 700 16px/1.2 var(--text);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mf-add .i { width: 20px; height: 20px; }
.mf-add:active { transform: scale(0.97); }
.mf-add:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mf-add[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mf-remove:hover { background: var(--sheet-bg); color: var(--ink); }
  .mf-add:hover { border-style: solid; background: var(--surface-2); }
}
/* What the message types mean: the FAQ disclosure row, set smaller inside the card */
.mf-cats { margin-top: 2px; }
.mf-cats summary { min-height: 44px; padding-block: 8px; font-size: 15px; }
.mf-cats .faq-a { padding-bottom: 8px; font-size: 15px; }

/* Numbers and ads */
.mf-pair { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 18px 24px; align-items: start; }
.mf-pair .field { display: grid; gap: 8px; min-width: 0; }
/* Side by side, the two questions share rows, so their boxes line up whatever their labels wrap to */
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    .mf-pair { row-gap: 8px; }
    .mf-pair .field { grid-row: span 3; grid-template-rows: subgrid; gap: 8px; }
    .mf-pair .mf-legend { align-self: end; }
  }
}
.mf-numbers .mf-num { max-width: 9rem; }
.mf-ads-row { --thumb: 30px; display: flex; align-items: center; gap: 14px; min-height: 48px; }
.mf-range {
  --fill: 0%;
  flex: 1 1 auto; min-width: 0;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mf-range::-webkit-slider-runnable-track {
  height: 12px; border-radius: 999px;
  background: linear-gradient(var(--mf-dir, to right), var(--btn-bg) 0 var(--fill), var(--surface-2) var(--fill) 100%);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.mf-range::-moz-range-track {
  height: 12px; border-radius: 999px;
  background: linear-gradient(var(--mf-dir, to right), var(--btn-bg) 0 var(--fill), var(--surface-2) var(--fill) 100%);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.mf-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb); margin-top: calc((12px - var(--thumb)) / 2);
  border: 3px solid var(--btn-bg); border-radius: 50%;
  background: var(--sheet-bg); box-shadow: var(--shadow-sm);
  transition: scale 160ms var(--ease-out);
}
.mf-range::-moz-range-thumb {
  box-sizing: border-box; width: var(--thumb); height: var(--thumb);
  border: 3px solid var(--btn-bg); border-radius: 50%;
  background: var(--sheet-bg); box-shadow: var(--shadow-sm);
}
.mf-range:active::-webkit-slider-thumb { scale: 1.1; }
.mf-range:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
[dir="rtl"] .mf-range { --mf-dir: to left; }
.mf-ads-out { flex: none; min-width: 3.4em; font: 800 1.25rem/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: end; }

/* Authentication-international: shown only when it can change the estimate */
.mf-ai[hidden], .mf-ai-home[hidden] { display: none; }
.mf-ai-choices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.mf-ai-home { display: grid; gap: 8px; margin-top: 4px; max-width: 26rem; }

/* Phones: the total rides along the bottom of the screen while the questions are in view (sticky inside the card,
   so it leaves with it), and jumps to the working when tapped */
.mf-peek {
  position: sticky; bottom: 12px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; margin-top: 22px; padding: 8px 20px;
  border-radius: 999px;
  background: var(--ink); color: var(--ground);
  text-decoration: none;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
.mf-peek[hidden] { display: none; }
.mf-peek-l { min-width: 0; font: 700 14px/1.25 var(--text); }
.mf-peek-v { flex: none; font: 800 1.15rem/1.15 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-peek:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:lang(ar) .mf-peek-v { letter-spacing: 0; }

/* The estimate */
.mf-results { position: relative; box-shadow: var(--shadow); container-type: inline-size; }
.mf-results-in { display: grid; gap: 16px; align-content: start; }
.mf-total-h { font: 800 16px/1.3 var(--text); color: var(--ink); }
.mf-total {
  --len: 8;
  margin-top: -6px;
  font: 800 2.4rem/1.15 var(--display);
  font-size: min(clamp(2.1rem, 1.5rem + 1.4vw, 2.9rem), calc(100cqi / (var(--len) * 0.7)));
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow-anchor: none;
}
:lang(ar) .mf-total { letter-spacing: 0; }
.mf-total-sub { margin-top: -10px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.mf-results[aria-busy="true"] .mf-lines { opacity: 0.55; transition: opacity 200ms ease; }
.mf-lines { display: grid; gap: 14px; }
.mf-empty { padding-block: 6px; font-size: 16px; color: var(--ink-soft); }
.mf-mkt { padding-top: 14px; border-top: 1px solid var(--line); }
.mf-mkt-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font: 800 17px/1.3 var(--text); }
.mf-mkt-name { min-width: 0; }
.mf-mkt-sum { font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.mf-mkt-c { margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.mf-dl { display: grid; margin-top: 6px; font-size: 15px; line-height: 1.35; }
.mf-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 8px; }
.mf-dl > div + div { border-top: 1px solid var(--line); }
.mf-dl dt { min-width: 0; color: var(--ink); font-weight: 600; }
.mf-dl dt small { display: block; margin-top: 3px; font: 500 12px/1.45 var(--mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mf-dl dt small.is-note { font: 500 13px/1.45 var(--text); }
.mf-dl dd { flex: none; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }
.mf-free {
  display: grid; gap: 10px;
  padding: 16px 18px;
  border-radius: calc(18px * var(--sq-scale, 1));
  background: var(--surface-2);
  corner-shape: var(--sq-shape, round);
}
.mf-free-h { font: 800 16px/1.3 var(--text); }
.mf-free-list { display: grid; gap: 8px; }
.mf-free-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.mf-free-list .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--green); color: var(--on-bright); }
.mf-free-list li.is-warn { font-weight: 600; }
.mf-free-list li.is-warn .i { padding: 0; background: none; color: var(--ink); }
.mf-note { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.mf-note .i { width: 18px; height: 18px; margin-top: 1px; }

/* Meta's rates, on the ground below the chapter */
.mf-rates-head { display: grid; gap: 16px; max-width: 860px; }
.mf-filter.form { --form-max: 26rem; gap: 8px; margin-top: clamp(24px, 2.8vw, 34px); }
.mf-filter[hidden] { display: none; }
.mf-filter .field-help { min-height: 1.45em; margin: 0; }
.mf-table-wrap { margin-top: clamp(16px, 2vw, 22px); }
.mf-filter[hidden] + .mf-table-wrap { margin-top: clamp(24px, 2.8vw, 34px); }
.mf-table :is(td, thead th:not(:first-child)) { text-align: end; }
.mf-table thead th { vertical-align: bottom; }
.mf-table tbody th { min-width: 13rem; }
.mf-tname { display: block; }
.mf-tsub { display: block; margin-top: 2px; font: 500 13px/1.4 var(--text); color: var(--ink-soft); }
.mf-members { margin-top: 2px; font-weight: 500; }
.mf-members summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; margin-block: -8px; padding-block: 8px;
  font: 600 14px/1.3 var(--text); color: var(--accent-ink);
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mf-members summary::-webkit-details-marker { display: none; }
.mf-members summary::marker { content: ""; }
.mf-members summary .i { width: 16px; height: 16px; transition: rotate 200ms var(--ease-out); }
.mf-members[open] summary .i { rotate: 180deg; }
.mf-members summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 999px; }
.mf-members p { max-width: 34ch; padding-bottom: 6px; font: 500 14px/1.5 var(--text); color: var(--ink-soft); white-space: normal; }
.mf-table tbody tr[hidden] { display: none; }
.mf-filter-none { margin-top: 14px; max-width: 62ch; font: 600 15px/1.45 var(--text); color: var(--ink-soft); }
.mf-filter-none[hidden] { display: none; }

/* Wide screens: the estimate stays in view while the list of countries scrolls past */
@media (min-width: 1024px) {
  .mf-results-in { position: sticky; top: calc(var(--header-h) + 20px); }
  .mf-peek { display: none; }
}
@media (max-width: 1023px) {
  .mf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .mf-pair { grid-template-columns: minmax(0, 1fr); }
  .mf-row { padding: 12px 12px 14px; }
}
@media (pointer: coarse) {
  .mf-ads-row { --thumb: 34px; }
}

/* Reduced motion: values change in place, nothing travels or scales */
@media (prefers-reduced-motion: reduce) {
  .mf-cc-list { transition: opacity 150ms ease; }
  @starting-style {
    .mf-cc-list { translate: none; }
  }
  .mf-add:active, .mf-remove:active { transform: none; }
  .mf-range::-webkit-slider-thumb { transition: none; }
  .mf-range:active::-webkit-slider-thumb { scale: 1; }
  .mf-members summary .i { transition: none; }
}