/* ============================================
   WIDGET: GOLD PRICE SEARCH BAR (Frame 30)
   Dark-blue header — title + state/city dropdowns + CTA
   ============================================ */

/* ---- Outer dark-blue card ---- */
.gsb-card {
  background-color: #002765;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
  overflow: hidden;
  margin-bottom: 40px;
}

/* ---- Single inner row ---- */
.gsb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

/* ---- Left: title + date block ---- */
.gsb-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 0 0;
  min-width: 120px;
}

.gsb-info__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.gsb-info__date {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

/* ---- Dropdown wrapper ---- */
.gsb-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  min-width: 160px;
  background-color: #ffffff;
  border-radius: 4px;
  padding: 6px 10px;
  box-sizing: border-box;
  cursor: pointer;
}

/* Location pin icon */
.gsb-dropdown__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.gsb-dropdown__icon svg {
  width: 18px;
  height: 18px;
  fill: #555555;
  display: block;
}

/* Native select — fills the wrapper, invisible styling */
.gsb-dropdown__select {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Noto Sans', 'Noto Sans Devanagari', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 23px;
  color: #000000;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 4px;
  white-space: nowrap;
  min-width: 0;
}

/* Chevron arrow on right */
.gsb-dropdown__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.gsb-dropdown__arrow svg {
  width: 12px;
  height: 8px;
  fill: #333333;
  display: block;
}

/* ---- GET PRICE button ---- */
.gsb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  background-color: #d71920;
  border: none;
  border-radius: 10px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.15s ease;
}

.gsb-btn:hover {
  background-color: #b5151b;
}

/* ============================================
   RESPONSIVE: Tablet (≤768px)
   ============================================ */
@media (max-width: 768px) {
  .gsb-info__title   { font-size: 20px; }
  .gsb-info__date    { font-size: 15px; }
  .gsb-dropdown__select { font-size: 15px; }
  .gsb-btn           { font-size: 14px; padding: 9px 20px; }
  .gsb-dropdown      { padding: 6px 8px; gap: 6px; }


  .gsb-card {
  margin-bottom: 20px;
}

}

/* ============================================
   RESPONSIVE: Mobile (≤480px) — stack vertically
   ============================================ */
@media (max-width: 480px) {
  .gsb-card  { padding: 14px; gap: 12px; }
  .gsb-row   { flex-direction: column; align-items: stretch; gap: 10px; }

  .gsb-info  { flex-direction: row; align-items: center; justify-content: space-between; }
  .gsb-info__title { font-size: 18px; }
  .gsb-info__date  { font-size: 14px; }

  .gsb-dropdown { min-width: unset; }
  .gsb-dropdown__select { font-size: 15px; }

  .gsb-btn   { width: 100%; justify-content: center; font-size: 15px; padding: 10px; }
}