/* ============================================================
   KINGHGLOBAL — rates.css  (live shipping rates table)
   Matches the redesigned theme; keeps IDs/classes used by rates.js
   ============================================================ */
.rates-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm);margin-bottom:18px}
.rates-toolbar .field{display:flex;flex-direction:column;gap:6px;min-width:170px}
.rates-toolbar .field-search{flex:1 1 220px}
.rates-toolbar label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--slate-500)}
.rates-toolbar select,.rates-toolbar input{
  font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg-soft);color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
.rates-toolbar select:focus,.rates-toolbar input:focus{outline:none;border-color:var(--blue);
  background:#fff;box-shadow:0 0 0 3px rgba(22,52,140,.15)}
.rates-toolbar input::placeholder{color:var(--slate-500)}

.rates-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto;
  text-align:right;min-width:160px}
.rates-count{font-size:14px;color:var(--slate)}
.rates-count strong{color:var(--blue)}
.rates-updated{font-size:12px;color:var(--slate-500)}

.rates-table-wrap{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.rates-table{width:100%;border-collapse:collapse;font-size:14.5px}
.rates-table thead th{position:sticky;top:0;background:var(--blue);color:#fff;text-align:left;
  font-weight:700;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;padding:14px 16px;
  white-space:nowrap}
.rates-table tbody td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:middle}
.rates-table tbody tr:nth-child(even){background:var(--bg-soft)}
.rates-table tbody tr:hover{background:rgba(22,52,140,.05)}

.rates-carrier{display:inline-block;font-weight:800;color:var(--blue);background:rgba(22,52,140,.08);
  padding:3px 10px;border-radius:8px;font-size:13px;letter-spacing:.02em}
.rates-route{font-weight:700;color:var(--ink);white-space:nowrap}
.rates-route .arrow{color:var(--crimson);margin:0 6px;font-weight:800}
.rates-tier{font-variant-numeric:tabular-nums;font-weight:700;text-align:center;color:var(--ink)}
.rates-tier.empty{color:var(--slate-500);font-weight:500}
.rates-tag{display:inline-block;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--bg-alt);color:var(--slate);border:1px solid var(--line)}
.rates-tag.special{background:rgba(178,34,34,.1);color:var(--crimson);border-color:rgba(178,34,34,.2)}
.rates-eff{display:inline-block;font-size:12.5px;font-weight:700;color:var(--blue-700);
  background:rgba(22,52,140,.08);padding:3px 9px;border-radius:8px;white-space:nowrap}
.rates-empty{text-align:center;color:var(--slate-500);padding:34px 16px!important}

.rates-note{margin:16px 2px 0;font-size:13.5px;color:var(--slate)}
.rates-note a{color:var(--crimson);font-weight:700}

/* ---- Mobile: collapse table to cards ---- */
@media (max-width:760px){
  .rates-toolbar{gap:12px}
  .rates-toolbar .field{min-width:calc(50% - 6px)}
  .rates-toolbar .field-search,.rates-meta{flex-basis:100%}
  .rates-meta{align-items:flex-start;text-align:left;margin-left:0}
  .rates-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rates-table,.rates-table tbody,.rates-table tr,.rates-table td{display:block;width:100%}
  .rates-table tbody tr{border:1px solid var(--line);border-radius:var(--radius-sm);margin:0 0 14px;
    box-shadow:var(--shadow-sm);overflow:hidden}
  .rates-table tbody tr:nth-child(even){background:var(--bg)}
  .rates-table tbody tr:hover{background:var(--bg)}
  .rates-table tbody td{display:flex;justify-content:space-between;align-items:center;gap:14px;
    border-top:1px solid var(--line);padding:11px 16px;text-align:right}
  .rates-table tbody td:first-child{border-top:0;background:var(--bg-soft)}
  .rates-table tbody td::before{content:attr(data-label);font-weight:700;color:var(--slate-500);
    font-size:12px;text-transform:uppercase;letter-spacing:.03em;text-align:left}
  .rates-tier{text-align:right}
  .rates-route{white-space:normal}
}