/*
 * Proa Firme 0.23.0 — shared, scoped controls for all three services.
 * Intentionally visual only: native form elements, ids, names and validation remain unchanged.
 */
:root {
  --pf-control-ink: #133b59;
  --pf-control-muted: #648098;
  --pf-control-border: #b6ccdc;
  --pf-control-hover: #779fba;
  --pf-control-accent: #1768b6;
  --pf-control-focus: rgba(23,104,182,.16);
  --pf-control-arrow: #4d7592;
}

/* Each service retains its own accent without becoming another design system. */
.service-page-insurance {
  --pf-control-accent: #087f97;
  --pf-control-focus: rgba(8,127,151,.15);
  --pf-control-hover: #4babb8;
}
.service-page-registration {
  --pf-control-accent: #a46d23;
  --pf-control-focus: rgba(164,109,35,.15);
  --pf-control-hover: #c4a26a;
  --pf-control-border: #c9c6bd;
}

/* Accessible, consistent dropdowns; native picker stays intact, especially on mobile. */
.comparator-page :is(.place-country,.full-select,.route-timing select,.detail-grid select,.advanced-grid select,.lead-grid select,.provider-grid select,#offer-sort),
.service-page :is(.insurance-form select,.registration-form select),
#lead-form select,
#provider-form select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 49px;
  padding: 11px 43px 11px 15px;
  border: 1px solid var(--pf-control-border);
  border-radius: 12px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pf-control-arrow) 50%),
    linear-gradient(135deg, var(--pf-control-arrow) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 23px) calc(50% - 2px),calc(100% - 17px) calc(50% - 2px);
  background-repeat: no-repeat;
  color: var(--pf-control-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.35;
  text-overflow: ellipsis;
  box-shadow: 0 3px 10px rgba(10,51,82,.035);
  transition: border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
  cursor: pointer;
}

/* Preserve the carefully tuned country selector and avoid overriding the kg/t control. */
.comparator-page .place-country { min-height: 48px; }
.comparator-page #offer-sort { min-height: 45px; }
.service-page :is(.insurance-form select,.registration-form select) { min-height: 56px; margin-top: 8px; }

.comparator-page :is(.place-country,.full-select,.route-timing select,.detail-grid select,.advanced-grid select,.lead-grid select,.provider-grid select,#offer-sort):hover:not(:disabled),
.service-page :is(.insurance-form select,.registration-form select):hover:not(:disabled),
#lead-form select:hover:not(:disabled),#provider-form select:hover:not(:disabled) {
  border-color: var(--pf-control-hover);
  background-color: #fafdff;
}
.comparator-page :is(.place-country,.full-select,.route-timing select,.detail-grid select,.advanced-grid select,.lead-grid select,.provider-grid select,#offer-sort):focus,
.service-page :is(.insurance-form select,.registration-form select):focus,
#lead-form select:focus,#provider-form select:focus {
  outline: none;
  border-color: var(--pf-control-accent);
  box-shadow: 0 0 0 4px var(--pf-control-focus),0 5px 14px rgba(10,51,82,.055);
}

/* Scrollable native menus and optgroups remain browser owned. These colors are enhancement only. */
.comparator-page select option,.service-page select option,
#lead-form select option,#provider-form select option {
  background-color: #fff;
  color: #173d5c;
  font-size: 15px;
  font-weight: 500;
}
.comparator-page select optgroup,.service-page select optgroup {
  background: #f1f6fa;
  color: #365d79;
  font-size: 14px;
  font-weight: 750;
}

/* Focus should look familiar across services, not like three unrelated WordPress forms. */
.service-page :is(.insurance-form,.registration-form) :is(input:not([type="checkbox"]):not([type="radio"]),textarea):focus,
.comparator-page :is(.full-input,.full-textarea,.port-field input,.route-timing input):focus,
#lead-form :is(input:not([type="checkbox"]):not([type="radio"]),textarea):focus,
#provider-form :is(input:not([type="checkbox"]):not([type="radio"]),textarea):focus {
  outline: none;
  border-color: var(--pf-control-accent);
  box-shadow: 0 0 0 4px var(--pf-control-focus);
}
.service-page :is(.insurance-form,.registration-form) label:focus-within,
.comparator-page :is(.country-field,.port-field,.route-timing) label:focus-within {
  color: var(--pf-control-accent);
}
.service-page :is(.insurance-form,.registration-form) :is(input:not([type="checkbox"]):not([type="radio"]),textarea):hover:not(:disabled):not(:focus),
#lead-form :is(input:not([type="checkbox"]):not([type="radio"]),textarea):hover:not(:disabled):not(:focus),
#provider-form :is(input:not([type="checkbox"]):not([type="radio"]),textarea):hover:not(:disabled):not(:focus) {
  border-color: var(--pf-control-hover);
}
.service-page :is(.insurance-form,.registration-form) :is(input,select,textarea)::placeholder,
.comparator-page :is(input,textarea)::placeholder {
  color: #8298aa;
  opacity: 1;
}

/* Dynamic validation from 0.22.2 remains authoritative, including its red focus ring. */
.comparator-page [aria-invalid="true"],.service-page [aria-invalid="true"],
#lead-form [aria-invalid="true"],#provider-form [aria-invalid="true"] {
  border-color: #dc3545 !important;
  background-color: #fff3f3 !important;
  box-shadow: 0 0 0 2px rgba(220,53,69,.12) !important;
}

.comparator-page select:disabled,.service-page select:disabled,
#lead-form select:disabled,#provider-form select:disabled {
  cursor: not-allowed;
  background-color: #eef3f6;
  color: #71889b;
  box-shadow: none;
}

/* Ensure short form controls remain comfortable even on the smallest phones. */
@media (max-width: 600px) {
  .comparator-page :is(.place-country,.full-select,.route-timing select,.detail-grid select,.advanced-grid select,.lead-grid select,.provider-grid select,#offer-sort),
  .service-page :is(.insurance-form select,.registration-form select),
  #lead-form select,#provider-form select {
    min-height: 49px;
    font-size: 16px;
    padding-left: 13px;
    padding-right: 41px;
  }
  .service-page :is(.insurance-form select,.registration-form select) { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .comparator-page select,.service-page select,#lead-form select,#provider-form select { transition: none; }
}