/* ==========================================================================
   NexaGulf -- Calculator system

   One layout for eight tools. Inputs on the left, a persistent result panel
   on the right that stays in view while you type; on mobile the panel docks
   to the bottom of the viewport instead of scrolling away.

   Everything a crawler needs is in the server-rendered HTML: the rate tables,
   the method notes and the worked example all exist without JavaScript. The
   script only fills in the numbers.
   ========================================================================== */

.ngc {
  --ngc-pad: 26px;
  background: var(--ng-bg);
  border: 1px solid var(--ng-line);
  border-radius: var(--ng-radius-lg);
  overflow: hidden;
  margin: 0 0 var(--ng-space-5);
  container-type: inline-size;
}

/* Header ------------------------------------------------------------------ */
.ngc__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ng-space-4);
  padding: 20px var(--ngc-pad); border-bottom: 1px solid var(--ng-line); background: var(--ng-surface);
}
.ngc__title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.ngc__sub { font-size: 13.5px; color: var(--ng-muted); margin: 4px 0 0; line-height: 1.5; }
.ngc__verified {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ng-green); background: var(--ng-green-tint);
  border: 1px solid rgba(13,107,78,.16); border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.ngc__verified svg { width: 12px; height: 12px; }

/* Body -------------------------------------------------------------------- */
.ngc__body { display: grid; grid-template-columns: minmax(0,1fr) 340px; align-items: start; }
.ngc__inputs { padding: var(--ngc-pad); min-width: 0; }
.ngc__panel {
  position: sticky; top: 92px; align-self: start;
  border-left: 1px solid var(--ng-line); background: var(--ng-ink); color: #fff;
  padding: var(--ngc-pad); min-height: 100%;
}

/* Fieldsets --------------------------------------------------------------- */
.ngc fieldset { border: 0; margin: 0 0 var(--ng-space-5); padding: 0; min-width: 0; }
.ngc fieldset:last-child { margin-bottom: 0; }
.ngc legend, .ngc__label {
  display: block; padding: 0; font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ng-muted); margin-bottom: 11px;
}

/* Country / option chips -------------------------------------------------- */
.ngc__chips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.ngc__chip {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 11px 12px; border: 1px solid var(--ng-line-strong); background: var(--ng-bg);
  border-radius: var(--ng-radius); font-family: var(--ng-font-body);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ng-ink);
  transition: border-color var(--ng-dur) var(--ng-ease), background-color var(--ng-dur) var(--ng-ease), box-shadow var(--ng-dur) var(--ng-ease);
}
.ngc__chip .rate { font-size: 12px; font-weight: 500; color: var(--ng-muted); font-variant-numeric: tabular-nums; }
.ngc__chip:hover:not([disabled]) { border-color: var(--ng-line-strong); background: var(--ng-surface); }
.ngc__chip[aria-pressed="true"] { border-color: var(--ng-green); background: var(--ng-green-tint); box-shadow: inset 0 0 0 1px var(--ng-green); }
.ngc__chip[aria-pressed="true"] .rate { color: var(--ng-green); }
.ngc__chip[disabled] { opacity: .5; cursor: not-allowed; background: var(--ng-surface); }
.ngc__chip[disabled] .rate { color: var(--ng-amber); }

/* Segmented control ------------------------------------------------------- */
.ngc__seg { display: flex; background: var(--ng-surface); border: 1px solid var(--ng-line); border-radius: var(--ng-radius); padding: 3px; gap: 3px; }
.ngc__seg button {
  flex: 1; padding: 10px 12px; background: transparent; border: none; border-radius: 4px;
  font-family: var(--ng-font-body); font-size: 14px; font-weight: 600; color: var(--ng-muted); cursor: pointer;
  transition: background-color var(--ng-dur) var(--ng-ease), color var(--ng-dur) var(--ng-ease);
}
.ngc__seg button:hover { color: var(--ng-ink); }
.ngc__seg button[aria-pressed="true"] { background: var(--ng-bg); color: var(--ng-ink); box-shadow: var(--ng-shadow-sm); }

/* Inputs ------------------------------------------------------------------ */
.ngc__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--ng-space-4); }
.ngc__grid--1 { grid-template-columns: 1fr; }
.ngc__f { min-width: 0; }
.ngc__f > label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ng-ink); margin-bottom: 6px; }
.ngc__money { position: relative; display: flex; align-items: stretch; }
.ngc__money .cur {
  display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--ng-line-strong); border-right: 0;
  border-radius: var(--ng-radius) 0 0 var(--ng-radius); background: var(--ng-surface);
  font-size: 12.5px; font-weight: 650; letter-spacing: .04em; color: var(--ng-muted); white-space: nowrap;
}
.ngc__money input { border-radius: 0 var(--ng-radius) var(--ng-radius) 0 !important; }
.ngc__suffix { position: relative; display: flex; align-items: stretch; }
.ngc__suffix .unit {
  display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--ng-line-strong); border-left: 0;
  border-radius: 0 var(--ng-radius) var(--ng-radius) 0; background: var(--ng-surface);
  font-size: 12.5px; font-weight: 650; color: var(--ng-muted); white-space: nowrap;
}
.ngc__suffix input { border-radius: var(--ng-radius) 0 0 var(--ng-radius) !important; }
.ngc input[type="number"], .ngc input[type="text"], .ngc select {
  width: 100%; font-family: var(--ng-font-body); font-size: 15.5px; font-variant-numeric: tabular-nums;
  color: var(--ng-ink); padding: 11px 13px; border: 1px solid var(--ng-line-strong);
  background: var(--ng-bg); border-radius: var(--ng-radius); min-width: 0;
  transition: border-color var(--ng-dur) var(--ng-ease), box-shadow var(--ng-dur) var(--ng-ease);
}
.ngc input:focus, .ngc select:focus { outline: none; border-color: var(--ng-green); box-shadow: 0 0 0 3px rgba(13,107,78,.14); }
.ngc input[type="range"] { padding: 0; border: 0; accent-color: var(--ng-green); background: transparent; }
.ngc__hint { font-size: 12px; color: var(--ng-muted); margin: 6px 0 0; line-height: 1.5; }
.ngc__hint a { color: var(--ng-green); text-decoration: underline; text-underline-offset: 2px; }

/* Result panel ------------------------------------------------------------ */
.ngc__panel .ngc__label { color: rgba(255,255,255,.5); }
.ngc__headline { margin-bottom: 20px; }
.ngc__headline .k { display: block; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 6px; }
.ngc__headline .v {
  display: block; font-size: 33px; font-weight: 700; letter-spacing: -.032em; line-height: 1.05;
  color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ngc__headline .n { display: block; font-size: 12.5px; color: var(--ng-mint); margin-top: 7px; font-weight: 500; }
.ngc__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.ngc__rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: 14px; color: rgba(255,255,255,.66);
}
.ngc__rows li span:last-child { font-weight: 650; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.ngc__rows li.is-strong { font-size: 15px; }
.ngc__rows li.is-strong span:last-child { color: var(--ng-mint); }
.ngc__note { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.5); margin: 18px 0 0; }
.ngc__note strong { color: rgba(255,255,255,.8); font-weight: 600; }
.ngc__flag {
  display: none; margin-top: 16px; padding: 11px 13px; border-radius: var(--ng-radius);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.82);
}
.ngc__flag.is-on { display: block; }

/* Footer / disclaimer ----------------------------------------------------- */
.ngc__foot {
  padding: 15px var(--ngc-pad); border-top: 1px solid var(--ng-line); background: var(--ng-surface);
  font-size: 12.5px; line-height: 1.6; color: var(--ng-muted);
}
.ngc__foot p { margin: 0; }
.ngc__foot p + p { margin-top: 7px; }
.ngc__foot a { color: var(--ng-green); text-decoration: underline; text-underline-offset: 2px; }

/* Reference table -- server-rendered, crawlable ---------------------------- */
.ng-rate-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ng-rate-table caption {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ng-muted); padding-bottom: 11px;
}
.ng-rate-table thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ng-muted); padding: 0 12px 9px 0; border-bottom: 1px solid var(--ng-ink); white-space: nowrap;
}
.ng-rate-table tbody td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ng-line); vertical-align: top; line-height: 1.5; }
.ng-rate-table tbody th { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--ng-line); font-weight: 650; white-space: nowrap; }
.ng-rate-table tbody tr:hover td, .ng-rate-table tbody tr:hover th { background: var(--ng-surface); }
.ng-rate-table .is-pending { color: var(--ng-amber); }
.ng-rate-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-rate-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--ng-space-5) 0; }

/* Calculator index cards -------------------------------------------------- */
.ng-calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--ng-space-4); }
.ng-calc-card {
  display: flex; flex-direction: column; background: var(--ng-bg);
  border: 1px solid var(--ng-line); border-radius: var(--ng-radius-lg); padding: 24px;
  transition: border-color var(--ng-dur) var(--ng-ease), box-shadow var(--ng-dur) var(--ng-ease), transform var(--ng-dur) var(--ng-ease);
}
.ng-calc-card:hover { border-color: var(--ng-line-strong); box-shadow: var(--ng-shadow); transform: translateY(-2px); }
.ng-calc-card__icon {
  width: 38px; height: 38px; border-radius: var(--ng-radius); display: flex; align-items: center; justify-content: center;
  background: var(--ng-green-tint); color: var(--ng-green); margin-bottom: 15px;
}
.ng-calc-card__icon svg { width: 19px; height: 19px; }
.ng-calc-card h3 { font-size: 18px; letter-spacing: -.022em; margin: 0 0 7px; }
.ng-calc-card h3 a { color: var(--ng-ink); }
.ng-calc-card h3 a:hover { color: var(--ng-green); }
.ng-calc-card p { color: var(--ng-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 15px; }
.ng-calc-card .supported { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.ng-calc-card .supported span {
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em; padding: 3px 9px;
  border-radius: 999px; background: var(--ng-surface); color: var(--ng-muted);
}
.ng-calc-card__go { margin-top: auto; font-size: 14px; font-weight: 650; color: var(--ng-green); display: inline-flex; align-items: center; gap: 7px; }
.ng-calc-card:hover .ng-calc-card__go::after { transform: translateX(3px); }
.ng-calc-card__go::after { content: "\2192"; transition: transform var(--ng-dur) var(--ng-ease); }
.ng-calc-card__disclaimer { font-size: 12px; color: var(--ng-muted); margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--ng-line); line-height: 1.55; }

/* v2 compatibility -- old markup keeps working ---------------------------- */
.ng-calc-tool { background: var(--ng-bg); border: 1px solid var(--ng-line); border-radius: var(--ng-radius-lg); padding: var(--ng-space-5); }
.ng-calc-result { background: var(--ng-surface); border: 1px solid var(--ng-line); border-radius: var(--ng-radius-md); padding: var(--ng-space-4); margin-top: var(--ng-space-4); }
.ng-calc-result .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.ng-calc-result .row.total { border-top: 1px solid var(--ng-line-strong); margin-top: 6px; padding-top: 14px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.ng-calc-hint { font-size: 12.5px; color: var(--ng-muted); margin-top: 14px; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1120px) {
  .ng-calc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .ngc { --ngc-pad: 20px; }
  .ngc__body { grid-template-columns: 1fr; }
  .ngc__panel { position: static; border-left: 0; border-top: 1px solid var(--ng-line); }
  .ngc__chips { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .ngc__head { flex-direction: column; gap: 12px; }
  .ngc__grid { grid-template-columns: 1fr; gap: var(--ng-space-3); }
  .ngc__headline .v { font-size: 29px; }
  .ng-calc-grid { grid-template-columns: 1fr; }
  .ng-rate-table { font-size: 13.5px; }
}

@media print {
  .ngc__panel { background: #fff !important; color: #000 !important; border: 1px solid #000; }
  .ngc__headline .v, .ngc__rows li span:last-child { color: #000 !important; }
  .ngc__rows li { color: #333 !important; }
}

/* A pair of narrow fields sharing one grid cell (years + months). */
.ngc__grid--pair { grid-template-columns: 1fr 1fr; gap: 12px; }