/*
 * site-fixes.css — small local fixes layered over Duda's generated styles.
 * Linked from every page, just before </head>.
 */

/*
 * Date field ("Requested Move-in Date").
 *
 * iPhone Safari draws <input type="date"> with its own intrinsic minimum width
 * that ignores the layout, pushes the value off-centre, and shows no calendar
 * icon -- so on phones the field overhung the others and gave no hint that it
 * needed a date picking. Force it into exactly the same 40px, full-width box as
 * every other field and draw our own calendar icon.
 *
 * Duda's stylesheets load asynchronously and use very specific selectors, so
 * the properties that matter are !important to win regardless of load order.
 */
.dmforminput input[type="date"],
.dmforminput input.dmDatePicker {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  position: relative;
  text-align: left !important;
  padding-right: 42px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* 40px box minus the 2px top and bottom borders = 36px of content. Without
     this, iPhone Safari pins the chosen date to the top of the field. */
  line-height: 36px !important;
  /* Safari draws the chosen date in its blue system tint; match the black text
     every other field uses. */
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 20px 20px !important;
}

/* The chosen date is drawn in this inner box. Left-align it like the other
   fields, give it the same 36px line so it sits in the vertical middle, and
   use the form's font and colour instead of Safari's defaults. */
.dmforminput input[type="date"]::-webkit-date-and-time-value,
.dmforminput input.dmDatePicker::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 36px;
  min-height: 36px;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-text-fill-color: inherit;
}

/* Chrome/Android draw their own icon. Make it invisible and stretch it over the
   whole field so a tap anywhere still opens the picker, while ours is shown. */
.dmforminput input[type="date"]::-webkit-calendar-picker-indicator,
.dmforminput input.dmDatePicker::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

/*
 * Dropdowns (Storage Unit Type, Vehicle Type, How Long..., How contacted).
 *
 * Duda's mobile styles switch off the native select look (appearance: none)
 * but never draw an arrow back, so on phones the dropdowns looked like blank
 * text boxes. Draw a chevron in the same style as the date field's calendar
 * icon, on every form dropdown so all browsers look the same, and leave room
 * so a long choice never runs under it.
 */
.dmforminput select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
  /* iPhone Safari draws the chosen option in its blue system tint; use the
     black Duda specifies, matching the typed fields and the date. */
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}