/* ============================================================================
 * pricing.css — pricing.html only.
 * ==========================================================================*/

.pricing__notice {
  max-width: 900px;
  margin-inline: auto;
  margin-block-end: var(--gap-lg);
}

.pricing__tableCta { margin-block-start: var(--gap-md); justify-content: center; }

/* Every rate cell is a placeholder today, so the pending marker appears on
   each row. Once real figures land, drop .is-pending from the cells. */
.table .rate.is-pending {
  color: var(--text-faint);
  font-weight: 600;
}

/* Route column carries the most meaning — keep it from wrapping mid-name. */
.table td:first-child { white-space: nowrap; }

/* --------------------------------------------------------- price factors */
.factorcard {
  padding: var(--gap-md);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  height: 100%;
}
.factorcard h3 { font-size: 1.05rem; margin-block-end: 8px; }
.factorcard p { color: var(--text-muted); font-size: .93rem; margin: 0; }
.factorcard .tile { margin-block-end: 16px; }

/* ------------------------------------------------------------- included */
.included__list { margin-block-start: var(--gap-md); }
.included__list li { font-size: 1rem; }

/* ============================================================== promises
 * The four service promises from the company's price flyer, in the same
 * order and with the same pairing of headline and qualifier.
 * ==================================================================== */
.promisegrid {
  display: grid;
  gap: var(--gap);
  padding: var(--gap-md) var(--gap);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--steel), var(--navy) 78%);
}
:root[data-theme="dark"] .promisegrid {
  background: linear-gradient(135deg, #1B3D57, #101B25 78%);
  border: 1px solid var(--border);
}
@media (min-width: 620px)  { .promisegrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .promisegrid { grid-template-columns: repeat(4, 1fr); } }

.promise {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 3px;
  padding-inline: 10px;
  position: relative;
}
@media (min-width: 1000px) {
  .promise:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    inset-block: 6px;
    width: 1px;
    background: rgba(255, 255, 255, .16);
  }
}

.promise__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-block-end: 10px;
  border-radius: 50%;
  background: rgba(245, 166, 35, .16);
  border: 1px solid rgba(245, 166, 35, .4);
  color: var(--amber);
}
.promise__icon .ico { width: 25px; height: 25px; }
.promise__title { font-weight: 800; color: #fff; font-size: 1.02rem; line-height: 1.3; }
.promise__note { font-size: .86rem; color: rgba(255, 255, 255, .72); }

/* ============================================================== rate card */
#rates { scroll-margin-block-start: calc(var(--header-h) + 32px); }

/* Two columns only: the full container width leaves a dead gap between the
   destination and its price, so the card is constrained and centred. */
#rates .table-wrap {
  max-width: 760px;
  margin-inline: auto;
}
.ratetable { min-width: 340px; }
/* Both columns are sized explicitly; leaving the rate column to auto lets it
   shrink to its content and the row rules stop short of the card edge. */
.ratetable th:first-child,
.ratetable td:first-child { width: 62%; }
.ratetable th:last-child,
.ratetable td:last-child { width: 38%; }
.ratetable td:first-child { white-space: normal; }
.ratetable__rateCol { text-align: end; }
.ratetable .rate {
  text-align: end;
  font-size: 1.05rem;
  color: var(--amber-deep);
  white-space: nowrap;
}
:root[data-theme="dark"] .ratetable .rate { color: var(--accent); }

/* Group headers split the card into domestic, Gulf and port lanes. */
.ratetable__group th {
  background: var(--surface-3);
  color: var(--text);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 11px 18px;
  text-align: start;
  border-block: 1px solid var(--border);
}
:root.is-ar .ratetable__group th {
  letter-spacing: 0;
  text-transform: none;
  font-size: .92rem;
}
.ratetable__group th > span { vertical-align: middle; }
.ratetable__group .ico {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 8px;
  color: var(--amber-deep);
}
:root[data-theme="dark"] .ratetable__group .ico { color: var(--accent); }
.ratetable__group:hover th { background: var(--surface-3); }

.ratetable__sub {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-block-start: 3px;
}

/* ============================================================== footnotes */
.ratenotes {
  max-width: 760px;
  margin-inline: auto;
  margin-block-start: var(--gap-md);
  padding: var(--gap-md);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.ratenotes__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  margin-block-end: 14px;
}
.ratenotes__title .ico { width: 19px; height: 19px; color: var(--amber-deep); }
:root[data-theme="dark"] .ratenotes__title .ico { color: var(--accent); }

.ratenotes__list { display: grid; gap: 9px; }
.ratenotes__list li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--text-muted);
  font-size: .93rem;
}
.ratenotes__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

/* ================================================================= badges */
.badgerow {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 760px) { .badgerow { grid-template-columns: repeat(3, 1fr); } }

.badgeitem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: .97rem;
  text-align: center;
}
.badgeitem .ico {
  width: 22px; height: 22px;
  flex: none;
  color: var(--amber-deep);
}
:root[data-theme="dark"] .badgeitem .ico { color: var(--accent); }