/*
 * Site-wide dropdown baseline (public site via base.html).
 * :where() keeps specificity at 0 so any page / Tailwind class still wins for
 * colours, borders and sizing; only the native chrome is replaced.
 * Still a real <select>, so phones keep their native wheel picker.
 */
:where(select:not([multiple]):not([size]):not(.bm-native-select)) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.1rem 1.1rem;
  color: #0f172a;
  font: inherit;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Page classes often set padding / height / background; keep room for the
   chevron, a 44px tap target, and the chevron itself on glass / form inputs. */
select:not([multiple]):not([size]):not(.bm-native-select) {
  padding-right: 2.25rem;
  min-height: 2.75rem;
}

select.glass-input:not([multiple]):not([size]),
select.form-select:not([multiple]):not([size]),
select.form-input:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.75 10 12.25l4.5-4.5' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.1rem 1.1rem;
}

:where(select:not([multiple]):not([size]):not(.bm-native-select)):hover {
  border-color: #94a3b8;
}

:where(select:not([multiple]):not([size]):not(.bm-native-select)):focus-visible {
  outline: none;
  border-color: #e11d48;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

:where(select:not([multiple]):not([size]):not(.bm-native-select)):disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Placeholder option ("请选择…") shows muted until a real value is picked. */
:where(select:not([multiple]):not([size]):not(.bm-native-select)):has(option[value=""]:checked) {
  color: #94a3b8;
}

:where(select) option {
  color: #0f172a;
}

/* iOS zooms the page when a control under 16px gets focus. !important beats
   custom.css's global `select { font-size: 0.875rem !important }`. */
@media (max-width: 639px) {
  select:not([multiple]):not([size]):not(.bm-native-select) {
    font-size: 16px !important;
  }
}

/* Same for text fields: custom.css forces 0.875rem !important on inputs, which
   makes iOS zoom in on focus. 16px on phones only; desktop keeps 14px. */
@media (max-width: 639px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  textarea {
    font-size: 16px !important;
  }
}