/* The interactive Customer Service forms (ApplyForService, SetupNewService, ReplacementWaterApplication, Reporting),
   linked from each page's HeadContent. */

/* DevExpress sizes its fonts, padding and heights in rem, and Bootstrap 3 sets the root to 10px, so its editors came
   out at 62% size. Bootstrap 3 and the theme size everything in px, so these pages get the browser's 16px root back
   without moving anything else on them. This file loads before the site bundle, so :root, which outranks Bootstrap's
   html selector, is what lets it win. */
:root {
    font-size: 16px;
}

.customer-service-form .validation-message {
    margin-top: 5px;
    color: #a94442;
    font-size: 14px;
}

/* The section headings read as headings, in the site's blue, rather than as small captions. */
.customer-service-form .dxbl-group-header {
    color: #1857A5;
    font-weight: 700;
}

/* iOS zooms the page into any text box under 16px when it gets focus. */
@media (max-width: 767px) {
    .customer-service-form input,
    .customer-service-form textarea {
        font-size: 16px;
    }
}

/* ---- Forms on the design system (.wb-page, see design-system.css and /DesignSystem) ----
   The DevExpress editors take the system's shapes and colors: groups become mist panels, inputs get a granite
   edge and the river focus ring, the submit button matches .wb-btn--primary. Scoped to .wb-page so the forms that
   are still on the old theme are untouched. */

.wb-page .customer-service-form {
    font-family: var(--wb-font);
}

.wb-page .customer-service-form .dxbl-fl-group {
    margin-bottom: var(--wb-space-5);
}

.wb-page .customer-service-form .dxbl-group {
    border: 0;
    border-radius: var(--wb-radius-md);
    background: var(--wb-mist);
    box-shadow: none;
}

.wb-page .customer-service-form .dxbl-group-header {
    padding: var(--wb-space-5) var(--wb-space-5) 0;
    border: 0;
    background: transparent;
}

.wb-page .customer-service-form .dxbl-group-header .dxbl-text {
    font-family: var(--wb-font);
    font-size: var(--wb-text-xl);
    font-weight: 700;
    line-height: 1.25;
    color: var(--wb-navy);
}

/* DevExpress's own body padding rule beats any selector here (its theme loads after this file), so this one is
   marked important. The side padding matches the header's, so the fields line up under the heading. */
.wb-page .customer-service-form .dxbl-group .dxbl-group-body .dxbl-group-body-content {
    padding: var(--wb-space-4) var(--wb-space-5) var(--wb-space-5) !important;
}

@media (min-width: 768px) {
    .wb-page .customer-service-form .dxbl-group-header {
        padding: var(--wb-space-6) var(--wb-space-6) 0;
    }

    .wb-page .customer-service-form .dxbl-group .dxbl-group-body .dxbl-group-body-content {
        padding: var(--wb-space-4) var(--wb-space-6) var(--wb-space-6) !important;
    }
}

/* A group inside a group (the responsible party) sits on white so it reads as its own block. */
.wb-page .customer-service-form .dxbl-group .dxbl-group {
    background: var(--wb-surface);
}

.wb-page .customer-service-form .dxbl-fl-item {
    margin-bottom: var(--wb-space-2);
}

.wb-page .customer-service-form .dxbl-fl-cpt {
    margin-bottom: var(--wb-space-2);
    font-family: var(--wb-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wb-ink);
    /* DevExpress clips a long caption to one line with an ellipsis, and its theme loads after this file, so these
       need !important. Some captions are a whole question or sentence. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.wb-page .customer-service-form .dxbl-text-edit {
    min-height: 44px;
    border: 1px solid var(--wb-granite);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-surface);
    box-shadow: none;
    transition: border-color 0.15s var(--wb-ease), box-shadow 0.15s var(--wb-ease);
}

.wb-page .customer-service-form .dxbl-text-edit:focus-within {
    border-color: var(--wb-river);
    box-shadow: var(--wb-ring);
}

/* The ring belongs to the whole editor. design-system.css gives every input a keyboard outline, but here the input
   is only the left part of the box, so its outline stopped short of the drop-down and clear buttons. */
.wb-page .customer-service-form .dxbl-text-edit .dxbl-text-edit-input:focus-visible,
.wb-page .customer-service-form .dxbl-text-edit textarea:focus-visible {
    outline: none !important;
}

.wb-page .customer-service-form .dxbl-text-edit-input {
    padding-left: 14px;
    padding-right: 14px;
    font-family: var(--wb-font);
    font-size: 16px;
    color: var(--wb-ink);
}

/* The memo's text area keeps DevExpress's 14px Segoe UI unless it is set here, so it reads like the text boxes. */
.wb-page .customer-service-form .dxbl-text-edit textarea {
    padding: var(--wb-space-2) 14px;
    font-family: var(--wb-font);
    font-size: 16px;
    line-height: 1.4;
    color: var(--wb-ink);
}

.wb-page .customer-service-form .dxbl-checkbox .dxbl-text {
    font-family: var(--wb-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--wb-ink);
}

/* Check boxes under a caption are choices in a list (what was submitted, who to contact), so they read as plain
   options; a lone check box with no caption is a statement the visitor confirms, so it stays bold. */
.wb-page .customer-service-form .dxbl-fl-item:has(> .dxbl-fl-cpt) .dxbl-checkbox .dxbl-text {
    font-weight: 400;
}

/* The file input sits under its caption like every other control. DevExpress pads the whole control 20px at the
   top and keeps a 22px-tall empty file list under the button, which pushed the help text 27px down. Both paddings
   are set through its variables (its own rules load after this file and would win a tie), and the list gets its gap
   back only once a file is in it. */
.wb-page .customer-service-form .dxbl-upload {
    --dxbl-upload-padding-top: 0px;
    --dxbl-upload-file-list-view-padding-top: 0px;
}

.wb-page .customer-service-form .dxbl-upload:has(.dxbl-upload-file-view) {
    --dxbl-upload-file-list-view-padding-top: var(--wb-space-2);
}

/* The note under a combo box or a file input: the same 8px gap a caption has to its control, in the fine print size. */
.wb-page .customer-service-form .form-combo-item__note,
.wb-page .customer-service-form .form-attachment-item__help {
    padding-top: var(--wb-space-2);
    font-size: 14px;
    line-height: 1.55;
    color: var(--wb-ink-soft);
}

/* DevExpress pads the check box 8px on every side, which indented it past the other controls' left edge. The
   vertical padding stays so the row keeps its height. */
.wb-page .customer-service-form .dxbl-checkbox {
    padding-left: 0;
    padding-right: 0;
}

/* Lines up under the check box's label text (the 16px box plus the label's 8px gap) and wraps at the same measure
   as the panel's other text. */
.wb-page .customer-service-form .form-check-item__detail {
    max-width: calc(var(--wb-measure) + 24px);
    padding: var(--wb-space-1) 0 var(--wb-space-2) 24px;
    font-size: 16px;
    font-style: normal;
    line-height: 1.6;
    color: var(--wb-ink);
}

/* ---- Text inside a form panel ----
   A panel holds fields. Any text in it reads like the rest of the page instead of DevExpress's 14px default, and
   comes in two kinds only: .form-intro, one or two plain sentences under the panel's heading, and .form-fine-print,
   the terms or acknowledgement that sit just above the field that agrees to them. Longer instructions belong above
   the form as page prose, not in a panel.
   The panel is tinted, so its text is a step darker than on white: ink for anything a visitor reads, ink-soft for
   fine print and hints. Size and weight, not a paler grey, set the fine print apart. */
.wb-page .customer-service-form .dxbl-group-body-content {
    font-size: 16px;
    line-height: 1.6;
    color: var(--wb-ink);
}

.wb-page .customer-service-form .form-intro {
    max-width: var(--wb-measure);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--wb-ink);
}

.wb-page .customer-service-form .form-fine-print {
    max-width: var(--wb-measure);
    margin: 0 0 var(--wb-space-3);
    font-size: 14px;
    line-height: 1.55;
    color: var(--wb-ink-soft);
}

.wb-page .customer-service-form .form-fine-print:last-child {
    margin-bottom: 0;
}

.wb-page .customer-service-form .validation-message {
    margin-top: var(--wb-space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--wb-mahogany);
}

.wb-page .customer-service-form .alert {
    margin: 0 0 var(--wb-space-4);
    padding: var(--wb-space-4) var(--wb-space-5);
    border: 0;
    border-radius: var(--wb-radius-md);
    font-size: 16px;
    font-weight: 600;
    color: var(--wb-ink);
}

.wb-page .customer-service-form .alert-danger {
    background: var(--wb-surface-rose);
}

.wb-page .customer-service-form .alert-warning {
    background: var(--wb-surface-sand);
}

.wb-page .customer-service-form .dxbl-btn.dxbl-btn-primary {
    min-height: 44px;
    padding: var(--wb-space-2) var(--wb-space-5);
    border: 2px solid var(--wb-river);
    border-radius: var(--wb-radius-sm);
    background: var(--wb-river);
    font-family: var(--wb-font);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    box-shadow: none;
    transition: background-color 0.15s var(--wb-ease), border-color 0.15s var(--wb-ease);
}

.wb-page .customer-service-form .dxbl-btn.dxbl-btn-primary:hover:not(:disabled) {
    border-color: var(--wb-river-deep);
    background: var(--wb-river-deep);
}

.wb-page .customer-service-form .dxbl-btn.dxbl-btn-primary:focus-visible {
    outline: 3px solid var(--wb-river);
    outline-offset: 3px;
}

.wb-page .customer-service-form .dxbl-btn.dxbl-btn-primary:disabled {
    border-color: var(--wb-mist-deep);
    background: var(--wb-mist);
    color: var(--wb-slate-ink);
    opacity: 1;
}

/* ---- DevExpress popups (DxPopup CssClass="wb-popup") ----
   A popup renders at the end of the body, outside .wb-page, so its frame is styled here rather than in the page's
   scoped CSS: the system's corners, a line instead of DevExpress's heavy shadow, and no body padding so the content
   component lays itself out. */
.wb-popup.dxbl-popup,
.wb-popup .dxbl-popup-content {
    border: 1px solid var(--wb-mist-deep);
    border-radius: var(--wb-radius-md);
    box-shadow: var(--wb-shadow-float);
    font-family: var(--wb-font);
}

.wb-popup .dxbl-popup-body {
    padding: 0;
}

/* The popup's MaxWidth percentage resolves against a zero-width DevExpress wrapper, so it never caps the width on a
   phone, and DevExpress's own 28px side margins push a capped popup off center. This caps it against the viewport
   and centers it with an even 16px gutter. */
.wb-popup.dxbl-popup {
    max-width: calc(100vw - 32px) !important;
}

@media (max-width: 799px) {
    .wb-popup.dxbl-popup {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}