/*
 * Shipit Matkahuolto — Noutopiste widget. Minimal styling that lets the
 * widget inherit FluentCart's checkout theme (typography, colors) and only
 * adds the structural bits the widget needs.
 */

#shipit-mh-widget {
  margin: 12px 0 4px;
  padding: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font: inherit;
  color: inherit;
}

.shipit-mh-label {
  font-weight: 600;
  margin: 0 0 12px;
}

/* ── Search ──────────────────────────────────────────────────────────────── */

.shipit-mh-search {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}

#shipit-mh-postcode {
  flex: 0 0 auto;
  width: 130px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  color: inherit;
  letter-spacing: 1px;
  box-sizing: border-box;
  height: 38px;
}

#shipit-mh-postcode:focus {
  border-color: rgba(64, 128, 255, 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(64, 128, 255, 0.15);
}

#shipit-mh-search-btn {
  padding: 0 16px;
  height: 38px;
  background: #1f2937;
  color: #fff;
  border: 1px solid #1f2937;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}

#shipit-mh-search-btn:hover { background: #111827; border-color: #111827; }
#shipit-mh-search-btn:focus { outline: 2px solid rgba(64, 128, 255, 0.4); outline-offset: 2px; }

/* ── Results list ────────────────────────────────────────────────────────── */

#shipit-mh-results { max-height: 320px; overflow-y: auto; }

/* The !important defends against FluentCart's checkout stylesheet — which
   sets ul { padding-inline-start: 1em } at higher specificity and was the
   real cause of the visible offset (not our previously-correct 12px math). */
.shipit-mh-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background: #fff;
}

.shipit-mh-point {
  display: block;
  margin: 0 !important;
  /* 9px padding + 3px transparent border = 12px effective inset, which
     matches the search input's internal padding so item text aligns with
     the postcode value. The transparent border stays present in every
     state so selection never shifts content horizontally. */
  padding: 12px 14px 12px 9px !important;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid transparent;
  transition: background 0.1s ease, border-left-color 0.1s ease;
  line-height: 1.5;
  list-style: none !important;
}
.shipit-mh-point:last-child { border-bottom: none; }
.shipit-mh-point:hover { background: rgba(64, 128, 255, 0.04); }

.shipit-mh-point--selected {
  background: rgba(64, 128, 255, 0.08);
  border-left-color: rgba(64, 128, 255, 0.7);
}

.shipit-mh-point strong { display: block; }
.shipit-mh-addr { color: rgba(0, 0, 0, 0.55); font-size: 0.9em; }

/* ── Status ──────────────────────────────────────────────────────────────── */

.shipit-mh-loading,
.shipit-mh-error {
  padding: 10px 14px;
  margin: 0;
  border-radius: 6px;
  font-size: 0.95em;
}

.shipit-mh-loading {
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.03);
}

.shipit-mh-error {
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

/* ── Selected ────────────────────────────────────────────────────────────── */

.shipit-mh-selected {
  margin-top: 12px;
  padding: 10px 14px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  color: #065f46;
  font-size: 0.95em;
  line-height: 1.5;
}

.shipit-mh-selected strong { display: block; margin-bottom: 2px; }