/*
 * WhatsRay form fields: one field style for every customer page, matching the mobile app.
 * Text boxes, native selects, text areas and Select2 dropdowns share the same height, corners,
 * border, background, text and focus ring.
 *
 * Loaded last. The selectors carry id-level specificity (`:not(#_z)`) because older theme
 * layers style these fields with long !important selectors; this file is the one place that
 * decides how a field looks. The web inbox is left alone (it follows WhatsApp's own style).
 * Fields inside an .input-group keep the group's own corners and border.
 */

:root {
  --wr-field-height: 44px;
  --wr-field-radius: 12px;
  --wr-field-border: #d5dfda;
  --wr-field-bg: #ffffff;
  --wr-field-text: #1d1d1f;
  --wr-field-placeholder: #69736e;
  --wr-field-focus: #006b5f;
  --wr-field-ring: 0 0 0 3px rgba(0, 107, 95, 0.15);
  --wr-field-font: 14px;
}

/* ---- Text boxes, native selects, text areas ---- */

html body:not(.is-inbox):not(#_z) :is(.form--control, .form-control, .form-select):not(.amount) {
  font-size: var(--wr-field-font) !important;
  font-weight: 400 !important;
  color: var(--wr-field-text) !important;
  -webkit-text-fill-color: var(--wr-field-text);
  background-color: var(--wr-field-bg) !important;
}

html body:not(.is-inbox):not(#_z) :is(.form--control, .form-control, .form-select):not(.amount):not(.input-group *) {
  border: 1px solid var(--wr-field-border) !important;
  border-radius: var(--wr-field-radius) !important;
}

html body:not(.is-inbox):not(#_z) .input-group :is(.form--control, .form-control, .form-select):not(.amount) {
  border-color: var(--wr-field-border) !important;
}

html body:not(.is-inbox):not(#_z) :is(input.form--control, input.form-control, select.form--control, select.form-control, .form-select):not(.amount) {
  height: var(--wr-field-height) !important;
  min-height: var(--wr-field-height) !important;
}

html body:not(.is-inbox):not(#_z) textarea:is(.form--control, .form-control) {
  min-height: 88px;
}

/* Placeholders: grey that reads as a hint (not a filled-in value) and still meets contrast. */
html body:not(.is-inbox):not(#_z) :is(.form--control, .form-control)::placeholder {
  font-size: inherit !important;
  color: var(--wr-field-placeholder) !important;
  -webkit-text-fill-color: var(--wr-field-placeholder);
  opacity: 1 !important;
}

/* Focus: every field shows where you are. */
html body:not(.is-inbox):not(#_z) :is(.form--control, .form-control, .form-select):focus {
  border-color: var(--wr-field-focus) !important;
  box-shadow: var(--wr-field-ring) !important;
  outline: none !important;
}

/* ---- Select2 dropdowns: same box as a text field ---- */

/* A form field's Select2 never widens its column: its selected text can't wrap, and in grid
   forms that text would otherwise set the column's width (fields spilled off phone screens).
   Filter-bar and input-group Select2s still size to their text. */
html body:not(.is-inbox):not(#_z) .select2-container {
  max-width: 100%;
}

html body:not(.is-inbox):not(#_z) .form-group .select2-container:not(.input-group *) {
  contain: inline-size;
}

html body:not(.is-inbox):not(#_z) .select2-container--default .select2-selection--single {
  position: relative !important;
  padding: 0 !important;
  height: var(--wr-field-height) !important;
  min-height: var(--wr-field-height) !important;
  border: 1px solid var(--wr-field-border) !important;
  border-radius: var(--wr-field-radius) !important;
  background: var(--wr-field-bg) !important;
  box-shadow: none !important;
}

html body:not(.is-inbox):not(#_z) .select2-container--default .select2-selection--single .select2-selection__rendered {
  height: calc(var(--wr-field-height) - 2px) !important;
  line-height: calc(var(--wr-field-height) - 2px) !important;
  padding-left: 12px !important;
  padding-right: 32px !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: var(--wr-field-font) !important;
  font-weight: 400 !important;
  color: var(--wr-field-text) !important;
  -webkit-text-fill-color: var(--wr-field-text);
}

html body:not(.is-inbox):not(#_z) .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--wr-field-placeholder) !important;
  -webkit-text-fill-color: var(--wr-field-placeholder);
}

/* The chevron box fills the field's height, so the arrow sits on the centre line. */
html body:not(.is-inbox):not(#_z) .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0 !important;
  bottom: 0 !important;
  right: 8px !important;
  height: 100% !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body:not(.is-inbox):not(#_z) .select2-container--default .select2-selection--single .select2-selection__arrow b {
  position: static !important;
  margin: 0 !important;
}

/* A Select2 placed inside an input group's label box (e.g. the phone-number country code) is
   the field itself: the grey box around it is dropped so it looks like its neighbours. */
html body:not(.is-inbox):not(#_z) .input-group-text:has(.select2-container) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body:not(.is-inbox):not(#_z) .input-group-text .select2-container {
  height: auto !important;
}

html body:not(.is-inbox):not(#_z) .select2-container--default .select2-selection--multiple {
  min-height: var(--wr-field-height) !important;
  border: 1px solid var(--wr-field-border) !important;
  border-radius: var(--wr-field-radius) !important;
  background: var(--wr-field-bg) !important;
  box-shadow: none !important;
}

html body:not(.is-inbox):not(#_z) .select2-container--default .select2-selection--multiple .select2-search__field {
  font-size: var(--wr-field-font) !important;
}

html body:not(.is-inbox):not(#_z) .select2-container--default:is(.select2-container--focus, .select2-container--open) :is(.select2-selection--single, .select2-selection--multiple) {
  border-color: var(--wr-field-focus) !important;
  box-shadow: var(--wr-field-ring) !important;
}

/* ---- Input groups: "+94" + number, "https://..." + slug + button, a copy button after a URL.
   One joined control: outer corners rounded, inner corners square, neighbours share a border
   (the theme gave every piece its own rounded corners, so they clashed). ---- */

html body:not(.is-inbox):not(#_z) .input-group {
  flex-wrap: nowrap;
}

html body:not(.is-inbox):not(#_z) .input-group > .input-group-text:not([class*="bg--"]):not(:has(.select2-container)) {
  min-height: var(--wr-field-height);
  padding: 0 14px !important;
  border: 1px solid var(--wr-field-border) !important;
  background: #f5f8f7 !important;
  color: #3c4a44 !important;
  font-size: var(--wr-field-font) !important;
}

html body:not(.is-inbox):not(#_z) .input-group > :not(:first-child):not(.dropdown-menu):not(.invalid-feedback) {
  margin-left: -1px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

html body:not(.is-inbox):not(#_z) .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html body:not(.is-inbox):not(#_z) .input-group > :first-child {
  border-top-left-radius: var(--wr-field-radius) !important;
  border-bottom-left-radius: var(--wr-field-radius) !important;
}

html body:not(.is-inbox):not(#_z) .input-group > :last-child {
  border-top-right-radius: var(--wr-field-radius) !important;
  border-bottom-right-radius: var(--wr-field-radius) !important;
}

/* A country picker (Select2) inside the group's label box takes the same corners. */
html body:not(.is-inbox):not(#_z) .input-group > .input-group-text:has(.select2-container):not(:last-child) .select2-selection {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html body:not(.is-inbox):not(#_z) .input-group > .input-group-text:has(.select2-container):not(:first-child) .select2-selection {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* The focused piece sits above its neighbours so its whole ring shows. */
html body:not(.is-inbox):not(#_z) .input-group > :focus,
html body:not(.is-inbox):not(#_z) .input-group > :focus-within {
  position: relative;
  z-index: 3;
}

/* ---- Phones ---- */
@media (max-width: 767.98px) {
  /* iOS Safari zooms the page into any field with text under 16px. */
  html body:not(.is-inbox):not(#_z) {
    --wr-field-font: 16px;
  }

  html body:not(.is-inbox):not(#_z) .select2-search__field {
    font-size: 16px !important;
  }

  /* Checkboxes and radios: the whole row is the tap target (44px), not just the 20px box. */
  html body:not(.is-inbox):not(#_z) .form-check:not(.form-switch) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  html body:not(.is-inbox):not(#_z) .form-check:not(.form-switch) .form-check-label {
    padding-block: 10px;
    cursor: pointer;
  }
}

/* Browser autofill (e.g. picking a saved email, then Tab): the theme's main.css painted autofilled
   .form--control text white for its old dark forms, so the value vanished on our light fields. */
html body .form--control:-webkit-autofill,
html body .form--control:-webkit-autofill:hover,
html body .form--control:-webkit-autofill:focus,
html body .form-control:-webkit-autofill,
html body textarea:-webkit-autofill,
html body select:-webkit-autofill {
  -webkit-text-fill-color: #1d1d1f !important;
  caret-color: #1d1d1f;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}