/* Styles for the quote builder's own modal questions:
 *
 *   - the DUI / SR-22 modal (Views/Quote/_ApplicantSr22Modal.cshtml)
 *   - the DUI / SR-22 question shared with the Add Driver modal (Views/Shared/_SR22Question)
 *   - the DUI / SR-22 line on the driver summary cards
 *   - the non-owner option in the Add Vehicle modal (Views/Shared/_AddEditVehicleModal)
 *
 * The file name is narrower than its contents - it started as the SR-22 modal's stylesheet and
 * kept the name when the vehicle question landed here for the same <style>-in-a-Vue-template
 * reason. Renaming it means touching _Layout's link, so it is left alone deliberately.
 *
 * A standalone stylesheet, loaded by _Layout.cshtml for every brand, for the same two reasons
 * policy-coverages.css is one:
 *
 *   - a <style> block inside the partial does not work. The partials render inside
 *     #fields-section, the element the quoteData Vue instance is mounted on, and Vue 2's
 *     template compiler drops <style> and <script> tags from a template it compiles
 *     (isForbiddenTag), so the block is silently removed and never reaches the document; and
 *
 *   - _Layout loads exactly one brand stylesheet (LayoutSettings.Stylesheet) rather than
 *     styles.css plus a brand file, so rules put in styles.css would reach no brand at all.
 *
 * Loaded after the brand stylesheet so these rules win at equal specificity, and written
 * against var(--blue), var(--gray) and var(--white), which every brand defines.
 *
 * NOTHING HERE STYLES THE FIELDS OR THE TITLE. Those come from the brand stylesheet, through
 * the same classes the applicant screen uses - .customer-info-container for the inputs,
 * .contact-labels for the notched labels, .section-main-header for the title. This file covers
 * only what the applicant screen has no equivalent of: the question, the radios and the
 * modal's own chrome.
 */

#applicantSr22Modal .sr22-modal-content {
    border: 0;
    border-radius: 14px;
    padding: 6px 10px 10px;
}

#applicantSr22Modal .modal-header {
    padding-bottom: 0.25rem;
    align-items: flex-start;
}

/* The modal serves two paths. On Continue from the applicant screen it asks only for the name,
 * date of birth and the DUI/SR-22 answer; opened from an Edit link it carries the whole
 * applicant record. Default to the Continue set - sr22.js swaps them when it opens in edit
 * mode, so neither set flashes before the JS runs. */
#applicantSr22Modal .sr22-edit-only {
    display: none;
}

/* The (X) sits in a soft circle rather than bare on the white. */
#applicantSr22Modal .sr22-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background-color: #eef0f4;
    color: var(--gray);
    opacity: 1;
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
}

#applicantSr22Modal .sr22-modal-close:hover,
#applicantSr22Modal .sr22-modal-close:focus {
    background-color: #e0e3e9;
    opacity: 1;
}

/* The last field's notched label needs its 15px of clearance from .customer-info-container
 * input, and the question needs to clear the field above it. */
#applicantSr22Modal .bdate {
    margin-bottom: 0.5rem;
}

/* The question ------------------------------------------------------------------------- */

/* Deliberately NOT scoped to one modal. Views/Shared/_SR22Question.cshtml renders this markup
 * in both the DUI/SR-22 modal and the Add Driver modal, and the question is meant to look and
 * behave identically in the two.
 *
 * fieldset/legend so the two radios are announced as one group. legend carries browser
 * defaults that would otherwise make it look nothing like the field labels above it. */
/* The bottom margin is what separates the Yes/No radios from the Cancel/Save row below, and it
 * belongs here rather than on either modal's button row: the applicant's modal tags that row
 * with .sr22-modal-actions, but the Add Driver modal's is a plain Bootstrap .row with no
 * vertical margin of its own, so spacing set there would reach only one of the two. */
.sr22-question {
    border: 0;
    margin: 1.5rem 0;
    padding: 0;
}

.sr22-question legend {
    display: flex;
    align-items: center;
    float: none;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    color: var(--gray);
}

/* The rule that runs from the end of the question to the right edge. A ::after rather than an
 * element because ratingAPI.language() translates the legend's id with .html(), which would
 * replace any child markup. */
.sr22-question legend::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 0.85rem;
    background-color: #d5d9e0;
}

.sr22-options {
    display: flex;
    flex-wrap: wrap;
    gap: 2.25rem;
}

.sr22-option {
    display: flex;
    align-items: center;
}

/* The Add Driver modal renders this question INSIDE .customer-info-container, whose brand rule
 * ".customer-info-container input" would give these radios a 50px height, a blue border, a
 * 10px radius and a 15px top margin - it is written for text fields. Every one of those is put
 * back here. The selector is (0,2,1) against that rule's (0,1,1), so it wins without
 * !important; the radius and background still need stating because the brand rule sets them. */
.sr22-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0 0.6rem 0 0;
    border-radius: 50%;
    background-color: transparent;
    accent-color: var(--blue);
    cursor: pointer;
}

.sr22-option label {
    margin: 0;
    font-size: 16px;
    color: var(--gray);
    cursor: pointer;
}

/* Actions ------------------------------------------------------------------------------ */

/* The buttons themselves are the brand's .cancel-button / .continue-button, laid out by their
 * own floats exactly as in the Add Driver modal - nothing here restyles them. This only clears
 * the float so what follows the row is not dragged up beside them. The gap above the row comes
 * from .sr22-question's bottom margin, so both modals space it the same way. */
#applicantSr22Modal .sr22-modal-actions {
    overflow: hidden;
}

#applicantSr22Modal #sr22-applicant-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The Add Driver modal's Save is gated the same way once the radios are in play. */
#modal-AddNewApplicant-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Driver summary ----------------------------------------------------------------------- */

/* The DUI / SR-22 line under each driver's date of birth on the summary cards. Matches
 * .driver-birthday, which every brand stylesheet defines, so the two lines read as a pair. */
.driver-sr22 {
    color: var(--gray);
    font-size: 14px;
    font-weight: normal;
}

/* Add Vehicle modal: the non-owner option ------------------------------------------------ */

/* "I don't own or lease a vehicle." above the Year dropdown, with its own rule underneath.
 * Lives in this stylesheet for the same reason as everything above it: the partial renders
 * inside the Vue mount, which strips a <style> block out of the compiled template. */
.vehicle-non-owner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    cursor: pointer;
}

.vehicle-non-owner input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--blue);
    cursor: pointer;
}

.vehicle-non-owner-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.vehicle-non-owner-text strong {
    font-size: 15px;
    color: var(--gray);
}

.vehicle-non-owner-text span {
    font-size: 13px;
    color: var(--gray);
}

.vehicle-non-owner-warning {
    margin-bottom: 0.75rem;
    color: red;
    font-size: 13px;
    text-align: left;
}

.vehicle-non-owner-divider {
    margin: 0 0 1.25rem;
}