/* Shared patient, doctor and Google signup dropdown presentation. */
.dr-body .dr-field:has(select):not(.is-invalid) {
  border-color: #cedef3;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff, #f4f8ff);
  box-shadow: 0 3px 10px rgba(27, 76, 139, 0.04);
}
.dr-body .dr-field:has(select):not(.is-invalid):hover {
  border-color: #94b9ef;
  box-shadow: 0 5px 16px rgba(27, 76, 139, 0.09);
}
.dr-body .dr-field:has(select):not(.is-invalid):focus-within {
  border-color: #397fe2;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(23, 102, 232, 0.13);
}
.dr-body .dr-field select { font-weight: 500; cursor: pointer; }
.dr-body .dr-field select:invalid { color: #667b99; }
.dr-body .dr-field :is(.dr-chev, .pp-cc__chev, .dp-cc__chev) {
  color: #3677cf;
  transition: transform 220ms ease, color 220ms ease;
}
.dr-body :is(.pp-cc, .dp-cc):focus-within :is(.pp-cc__chev, .dp-cc__chev) {
  transform: rotate(180deg);
}
.dr-body .dr-field select:disabled { cursor: not-allowed; opacity: 0.55; }
.gc-field select {
  appearance: none;
  padding-right: 40px;
  border-radius: 12px;
  font-weight: 500;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%233677cf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center, linear-gradient(135deg, #ffffff, #f4f8ff);
}
.gc-field select:focus-visible { outline: 3px solid rgba(23, 102, 232, 0.15); outline-offset: 1px; }
.gc-field--error select { border-color: #b83349; }
:is(.dr-body .dr-field, .gc-field) select option {
  color: #193758;
  background: #ffffff;
  font-weight: 400;
}
/* Use styled native pickers where supported, preserving keyboard/mobile behavior. */
@supports (appearance: base-select) {
  :is(.dr-body .dr-field, .gc-field) select,
  :is(.dr-body .dr-field, .gc-field) select::picker(select) { appearance: base-select; }
  :is(.dr-body .dr-field, .gc-field) select { align-items: center; }
  :is(.dr-body .dr-field, .gc-field) select::picker-icon { display: none; }
  :is(.dr-body .dr-field, .gc-field) select::picker(select) {
    min-width: 180px;
    max-width: calc(100vw - 24px);
    max-height: min(320px, 50svh);
    overflow-y: auto;
    margin-top: 7px;
    padding: 6px;
    border: 1px solid #d5e3f5;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(16, 55, 105, 0.18);
    scrollbar-width: thin;
    scrollbar-color: #a5c4ef #f3f7fc;
  }
  :is(.dr-body .dr-field, .gc-field) select option {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 8px;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    cursor: pointer;
  }
  :is(.dr-body .dr-field, .gc-field) select option:hover,
  :is(.dr-body .dr-field, .gc-field) select option:focus { background: #eff6ff; }
  :is(.dr-body .dr-field, .gc-field) select option:checked {
    color: #155bc0;
    background: #e8f1ff;
    font-weight: 600;
  }
  :is(.dr-body .dr-field, .gc-field) select option::checkmark { color: #1766e8; }
  :is(.dr-body .dr-field, .gc-field) select option:disabled { color: #7b8da6; cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
  .dr-body .dr-field:has(select),
  .dr-body .dr-field :is(.dr-chev, .pp-cc__chev, .dp-cc__chev) { transition: none; }
}