/* ═══════════════════════════════════════════════════════════════════════
   Freight Header Search Bar  —  fhsb-align.css   v1.1
   Loads ONLY on the homepage and /ddp-route/ archive.
   - Symmetric layout polish for the existing query forms
   - Styles for the REAL-HTML guide headlines (injected into the page so
     Google indexes them and browser translators can translate them)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Symmetric, centred form layout ───────────────────────────── */
.fp-hero-tool .lqe-widget,
.lri-archive-search .lqe-widget {
  max-width: 720px;
  margin: 0 auto;
  padding: 26px clamp(20px, 4vw, 34px);
}
.fp-hero-tool .lqe-widget-header,
.lri-archive-search .lqe-widget-header {
  text-align: center;
  margin-bottom: 22px;
}
.fp-hero-tool .lqe-widget-header h3,
.lri-archive-search .lqe-widget-header h3 { margin-bottom: 8px; }
.fp-hero-tool .lqe-widget-sub,
.lri-archive-search .lqe-widget-sub {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.fp-hero-tool .lqe-field-group,
.lri-archive-search .lqe-field-group { gap: 8px; }
.fp-hero-tool .lqe-field-label,
.lri-archive-search .lqe-field-label {
  min-height: 18px;
  display: flex;
  align-items: center;
  line-height: 1.3;
  font-size: 11.5px;
}

/* Identical input heights everywhere */
.fp-hero-tool .lqe-country-select,
.fp-hero-tool .lqe-weight-input,
.fp-hero-tool .lqe-qty-input,
.fp-hero-tool .lqe-vol-l,
.fp-hero-tool .lqe-vol-w,
.fp-hero-tool .lqe-vol-h,
.lri-archive-search .lqe-country-select,
.lri-archive-search .lqe-weight-input,
.lri-archive-search .lqe-qty-input,
.lri-archive-search .lqe-vol-l,
.lri-archive-search .lqe-vol-w,
.lri-archive-search .lqe-vol-h {
  height: 44px !important;
  padding: 0 12px !important;
  font-size: 14.5px !important;
  box-sizing: border-box;
}

.fp-hero-tool .lqe-vol-row,
.lri-archive-search .lqe-vol-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr auto 1fr !important;
  align-items: center;
  gap: 6px !important;
}
.fp-hero-tool .lqe-vol-l,
.fp-hero-tool .lqe-vol-w,
.fp-hero-tool .lqe-vol-h,
.lri-archive-search .lqe-vol-l,
.lri-archive-search .lqe-vol-w,
.lri-archive-search .lqe-vol-h {
  text-align: center !important;
  padding: 0 6px !important;
  min-width: 0;
}
.fp-hero-tool .lqe-vol-sep,
.lri-archive-search .lqe-vol-sep {
  text-align: center;
  font-weight: 700;
  color: #64748b;
  padding: 0 2px;
}

.fp-hero-tool .lqe-field-mode,
.lri-archive-search .lqe-field-mode { margin-top: 6px; text-align: center; }
.fp-hero-tool .lqe-mode-tabs,
.lri-archive-search .lqe-mode-tabs  { justify-content: center; }
.fp-hero-tool .lqe-btn-query,
.lri-archive-search .lqe-btn-query {
  margin-top: 6px;
  height: 50px;
  font-size: 16.5px;
  letter-spacing: .4px;
}

.fp-hero-tool .lqe-search-form,
.lri-archive-search .lqe-search-form {
  gap: 14px;
  padding: 4px 0 4px;
}

/* ── 2. REAL-HTML guide headline — homepage  ─────────────────────── */
/* (text lives in the page source as a <div>, so Google + page translators
   can both read and translate it) */
.fhsb-guide {
  font-family: inherit;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

.fhsb-guide-home {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 14px 22px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: clamp(15px, 2.2vw, 18px);
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 50%, #1e3a8a 100%);
  border-radius: 14px;
  box-shadow: 0 10px 28px -10px rgba(30,58,138,.55);
  letter-spacing: .2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  position: relative;
}
.fhsb-guide-home::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #2563eb;
  transform: translateX(-50%);
}
.fhsb-guide-home .fhsb-guide-icon {
  font-size: 20px;
  filter: drop-shadow(0 0 6px rgba(252,211,77,.85));
  animation: fhsb-guide-pulse 1.6s ease-in-out infinite;
}
@keyframes fhsb-guide-pulse {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 6px  rgba(252,211,77,.7)); }
  50%     { transform: scale(1.18); filter: drop-shadow(0 0 14px rgba(252,211,77,1)); }
}
.fhsb-guide-home .fhsb-guide-text { display: inline-block; }
.fhsb-guide-3s {
  display: inline-block;
  font-size: 1.55em;
  font-weight: 900;
  background: linear-gradient(180deg, #fde047 0%, #fb923c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 3px;
  position: relative;
  top: 4px;
  letter-spacing: 0;
  animation: fhsb-3s-bump 1.6s ease-in-out infinite;
}
.fhsb-guide-3s .fhsb-s { font-size: .55em; margin-left: 1px; }
@keyframes fhsb-3s-bump {
  0%,100% { transform: scale(1)    translateY(4px); }
  50%     { transform: scale(1.12) translateY(2px); }
}
.fhsb-guide-home .fhsb-guide-sub {
  width: 100%;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  letter-spacing: .3px;
  text-shadow: none;
}

/* ── 3. REAL-HTML guide headline — /ddp-route/ ───────────────────── */
.fhsb-guide-ddp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 12px 22px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(13px, 1.8vw, 15.5px);
  background: linear-gradient(90deg, #1e3a8a 0%, #f97316 100%);
  border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(249,115,22,.45);
  letter-spacing: .3px;
}
.fhsb-guide-ddp .fhsb-guide-icon {
  font-size: 17px;
  filter: drop-shadow(0 0 5px rgba(252,211,77,.7));
  animation: fhsb-guide-pulse 1.6s ease-in-out infinite;
}
.fhsb-guide-ddp .fhsb-guide-3s {
  font-size: 1.45em;
  top: 3px;
}

/* ── 4. Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .fp-hero-tool .lqe-widget,
  .lri-archive-search .lqe-widget {
    padding: 22px 18px;
  }
  .fhsb-guide-home { padding: 12px 16px; font-size: 14px; }
  .fhsb-guide-ddp  { padding: 10px 16px; font-size: 13px; border-radius: 16px; }
}