/* /assets/rates.css — Cek Ongkir (tema terang, mobile-first) */

*{box-sizing:border-box}

/* Layout dasar */
.wrap{max-width:1100px;margin:40px auto;padding:0 20px}
h1{margin:0 0 14px;font-size:32px}
p.lead{margin:0 0 18px;color:var(--muted)}

.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:860px){
  .grid{grid-template-columns:1fr}
}

/* Kartu & panel */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.pane{padding:14px}

/* Label & teks bantu */
label{
  display:block;
  margin:6px 0 6px 2px;
  color:var(--muted);
  font-size:14px;
}
.muted{color:var(--muted)}
.pill{
  display:inline-block;
  background: color-mix(in oklab, var(--brand) 10%, var(--card));
  border:1px solid var(--line);
  color:var(--fg);
  padding:2px 10px;border-radius:999px;font-size:13px;
}

/* Form controls: terang default */
input,select,button{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--fg);
  box-shadow:none;
}
.row > *:is(input,select,button){width:auto}
input[type=number]{appearance:textfield}

/* Button behavior (terang; aksen via :hover) */
button{font-weight:700;cursor:pointer}
button:hover{
  background: color-mix(in oklab, var(--brand) 8%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
}
button:disabled{opacity:.6;cursor:not-allowed}

/* ----- Autocomplete (sbox/sug) ----- */
.sbox{position:relative}
.sug{
  position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:6px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:none;
  max-height:260px;overflow-y:auto;
}
.sug button{
  display:block;width:100%;text-align:left;
  background:var(--card);
  color:var(--fg);
  border:0;border-bottom:1px solid var(--line);
  border-radius:0;
  padding:10px 12px;
  transition: background .15s ease, border-color .15s ease;
}
.sug button:hover{
  background: color-mix(in oklab, var(--brand) 10%, var(--card));
}
.sug .small{font-size:12px;color:var(--muted)}

/* ----- Toolbar, filter, sorter ----- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 8px}

/* ----- Grid hasil & item ----- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){
  .results{grid-template-columns:1fr}
}
.item{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
}
.price{font-size:22px;font-weight:800;margin:6px 0}
.cour{font-weight:700}
.foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;color:var(--muted)
}

/* ----- History ----- */
.history h3{margin:4px 0 8px}
.history .chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
  border-radius:999px;
  padding:6px 10px;margin:6px 6px 0 0;cursor:pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.history .chip:hover{
  background: color-mix(in oklab, var(--brand) 12%, var(--card));
  border-color: color-mix(in oklab, var(--brand) 25%, var(--line));
  box-shadow: 0 2px 10px rgba(10,146,208,.10);
}

/* ----- Hint/info box ----- */
.hint{
  margin-top:10px;padding:10px 12px;
  border-top:1px solid var(--line);
  background: color-mix(in oklab, var(--brand) 6%, var(--card));
  border-radius: calc(var(--radius) - 6px);
}