/* Shared native contact preference for WATCHLIFE forms. */
.wl-contact-preference {
   --wl-pref-line: rgba(255, 255, 255, .58);
   --wl-pref-focus: #c9a96a;
   --wl-pref-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23f8f7f4' stroke-width='1.3'/%3E%3C/svg%3E");
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   margin: 18px 0 12px;
   color: inherit;
   text-align: left;
}

.wl-contact-preference label,
form.contacting__inner-right .wl-contact-preference label {
   display: block;
   position: static;
   transform: none;
   margin: 0 0 3px;
   color: inherit;
   font: inherit;
   font-size: clamp(14px, 1vw, 16px);
   font-weight: 300;
   line-height: 1.45;
   letter-spacing: .02em;
   pointer-events: auto;
}

.wl-contact-preference label span {
   margin-left: .35em;
   font-size: clamp(12px, .8em, 13px);
   font-weight: 300;
   opacity: .65;
   white-space: nowrap;
}

.wl-contact-preference select,
.wl-contact-preference input {
   display: block;
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   height: 42px;
   min-height: 42px;
   margin: 0;
   padding: 7px 27px 7px 0;
   border: 0;
   border-bottom: 1px solid var(--wl-pref-line);
   border-radius: 0;
   background-color: transparent;
   color: inherit;
   font: inherit;
   font-size: 16px;
   font-weight: 300;
   line-height: 1.3;
   letter-spacing: .02em;
}

.wl-contact-preference select {
   -webkit-appearance: none;
   appearance: none;
   background-image: var(--wl-pref-chevron);
   background-repeat: no-repeat;
   background-position: right 5px center;
   background-size: 12px 8px;
   color-scheme: dark;
   cursor: pointer;
}

.wl-contact-preference select:hover,
.wl-contact-preference input:hover {
   border-bottom-color: currentColor;
}

.wl-contact-preference select:focus,
.wl-contact-preference input:focus {
   border-bottom-color: var(--wl-pref-focus);
}

.wl-contact-preference select:focus-visible,
.wl-contact-preference input:focus-visible {
   outline: 2px solid var(--wl-pref-focus);
   outline-offset: 3px;
}

.wl-contact-preference select[aria-invalid="true"],
.wl-contact-preference input[aria-invalid="true"] {
   border-bottom-color: #b74646;
}

.wl-contact-preference [hidden],
.wl-contact-preference .wl-contact-hint:empty {
   display: none;
}

.wl-telegram-contact {
   margin-top: 14px;
}

.wl-contact-preference .wl-contact-hint {
   max-width: 58ch;
   margin: 7px 0 0;
   font-size: clamp(12px, .9vw, 14px);
   font-weight: 300;
   line-height: 1.45;
   letter-spacing: 0;
   opacity: .78;
}

/* The model dialog uses the same 70% field column as name, email and phone. */
.contacting__inner-right[data-wl-model-form-v1="true"] .wl-contact-preference {
   --wl-pref-line: rgba(0, 0, 0, .8);
   --wl-pref-focus: #9b742c;
   --wl-pref-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23292929' stroke-width='1.3'/%3E%3C/svg%3E");
   width: 70%;
   color: #292929;
}

.contacting__inner-right[data-wl-model-form-v1="true"] .wl-contact-preference select {
   color-scheme: light;
}

/* Home and application forms place their other fields in narrower columns. */
.index .contacting__inner-right .wl-contact-preference {
   width: 63%;
   margin-right: auto;
   margin-left: auto;
}

.form-page .form__body .wl-contact-preference {
   width: min(88%, 750px);
   margin-right: auto;
   margin-left: auto;
}

@media (max-width: 767px) {
   .contacting__inner-right[data-wl-model-form-v1="true"] .wl-contact-preference,
   .index .contacting__inner-right .wl-contact-preference {
      width: 100%;
   }
}