/**
 * Surety Made Simple — forms & core conversion path
 * Source: surety-brand-guide.html
 *
 * Covers shared widgets used across quote.php, BondTypes/view.php,
 * widgets.php, and the Applications quick-add forms: text inputs, select2,
 * and the bond-amount range slider. Restyle-in-place — selectors/IDs the
 * JS depends on (select-filter, rd-range, form IDs) are untouched.
 *
 * Loaded last (see config/asset_compress.ini).
 */

/* ---------- TEXT INPUTS ---------- */

.form-control {
  color: var(--ink-900);
  background-color: var(--surface-0);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--slate-300);
}

.form-control:focus {
  border-color: var(--blue-500);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(59, 99, 219, .15);
}

/* ---------- SELECT2 ---------- */

.select2-container--bootstrap-big .select2-search--dropdown .select2-search__field,
.select2-container--bootstrap-big.select2-container--open .select2-selection,
.select2-container--bootstrap-big .select2-dropdown {
  border-color: var(--blue-500);
}

.select2-container--bootstrap-big.select2-container--open .select2-selection .select2-selection__arrow b {
  border-color: transparent transparent var(--blue-500) transparent;
}

.select2-container--bootstrap-big .select2-results__option--highlighted[aria-selected] {
  background-color: var(--blue-500);
  color: #fff;
}

.select2-container--bootstrap-big .select2-selection__clear:hover,
.select2-container--bootstrap-big .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--blue-500);
}

/* ---------- BOND-AMOUNT RANGE SLIDER (rd-range) ---------- */

.rd-range__line {
  background-color: var(--blue-500);
}

.rd-range.hasTooltip .rd-range__pointer:after {
  border-top-color: var(--blue-500);
}

.rd-range-wrap .rd-range-label {
  color: var(--ink-900);
  font-family: var(--font-body);
}

.rd-range-wrap .rd-range-input-value {
  color: var(--blue-500);
  font-family: var(--font-mono);
}

/* ---------- QUOTE / CONTACT FORM SUBMIT ---------- */
/* Scoped to .rd-mailform so the header's Login/Register button (also
   .btn-primary-contrast) keeps its muted ink treatment from theme-chrome.css
   while the actual "Get a Quote" conversion CTA gets the action-blue brand
   treatment reserved for the one primary action on the page. */

html .rd-mailform .btn-primary-contrast,
html .rd-mailform .btn-primary-contrast:active,
html .rd-mailform .btn-primary-contrast.active,
html .rd-mailform .btn-primary-contrast:focus {
  color: #fff;
  background: var(--action-gradient);
  background-color: var(--blue-500);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-action);
}

.open > html .rd-mailform .btn-primary-contrast.dropdown-toggle,
html .rd-mailform .btn-primary-contrast:hover {
  color: #fff;
  background: var(--action-gradient);
  background-color: var(--blue-800);
  border-color: var(--blue-800);
}

/* ---------- BOND RESULT ROWS (BondTypesHelper::displayListingItem) ---------- */

.demo-card.related-bond-type-item {
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  gap: 20px;
}

.demo-card-main {
  min-width: 0;
  flex: 1 1 auto;
}

.demo-card-action {
  flex: none;
}

/* ---------- RELATED-BOND SEARCH FILTER BUTTON (generic .btn-filter default;
   #relatedSearchBtn in theme-content.css overrides this to blue) ---------- */

section.bond-type-body .btn-filter {
  background-color: var(--ink-900);
  color: #fff;
  border-radius: 999px;
  transition: background-color var(--duration-base) var(--ease);
}

section.bond-type-body .btn-filter:hover {
  background-color: var(--blue-500);
}

/* ---------- "LOAD MORE OPTIONS" (BondTypes/listing.php) ---------- */

.next-listing-basic.btn-filter {
  background-color: var(--green-500);
  color: #fff;
  border-radius: 999px;
  transition: background-color var(--duration-base) var(--ease);
}

.next-listing-basic.btn-filter:hover {
  background-color: var(--green-600);
}

/* ---------- BOND GROUP TABLE (bondgroup.php) ---------- */

.table-primary thead > tr > th {
  color: #fff;
  background: var(--ink-900);
  font-family: var(--font-body);
}

.table-striped > tbody > tr:nth-of-type(even) {
  background-color: var(--surface-50);
}