/* Shared native controls for every public activity booking form.
   Load after activity styles so background shorthands cannot erase the chevron.
   Reuses the established Bali Wander pickup chevron from product.css. */
.activity-booking select,
.surya-booking select {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 44px 10px 12px;
  border: 1px solid var(--slate-deep);
  border-radius: 0;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m1 1 7 7 7-7' fill='none' stroke='%2317363b' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-size: 16px 10px;
  background-repeat: no-repeat;
  color: var(--slate-deep);
  color-scheme: light;
  font: 400 16px/1.5 var(--font-body);
  cursor: pointer;
}

.activity-booking select:focus-visible,
.surya-booking select:focus-visible {
  outline: 3px solid var(--slate-deep);
  outline-offset: 3px;
}

.activity-booking select:disabled,
.surya-booking select:disabled {
  cursor: default;
}

.activity-booking :is(.activity-date-control, .start-time-control, .pickup-control, .alasan-engine-control) > label {
  margin: 0;
  font: 750 14px/1.4 var(--font-body);
}

.activity-booking .pickup-control > p:not(.activity-error) {
  margin: 8px 0 0;
  max-width: 45ch;
  color: var(--muted);
  font: 400 13px/1.5 var(--font-body);
}

@media (forced-colors: active) {
  .activity-booking select,
  .surya-booking select {
    appearance: auto;
    background-image: none;
  }
}