/* =====================================================
   Audi Theme
   Scope: buttons, text inputs/selects, text, text links only
   (page background/layout is left untouched).

   Per Audi's vendor-CTA rule ("Only ONE primary CTA... vendors
   must use the secondary button or text link standalone style"),
   this app never uses Audi's Primary button style — only
   Secondary (#submit / #btnSubmit / #btnSpanishToggle) and
   Text link standalone (.btn-link.submit-Btn, .lang-swap.submit-Btn).

   TODO: --audi-secondary-* values below are PLACEHOLDERS. The
   spec screenshots only gave exact hex for Text link standalone;
   Secondary's fill/border per state was shown as an un-labelled
   swatch. Replace with real hex once available.
   ===================================================== */

:root {
    --audi-font: "Audi Type Variable", "Lato", Arial, sans-serif;

    /* Text link standalone — spec's #FCFCFD/near-white tokens assume a dark
       page background; this app's page stays light, so idle/hover/pressed
       use a dark gray instead so the links stay visible; underline treatment
       and focus outline still follow the Audi spec. */
    --audi-link-idle: #1A1A1A;
    --audi-link-hover: rgba(26, 26, 26, 0.7);
    --audi-link-pressed: rgba(26, 26, 26, 0.7);
    --audi-link-disabled: rgba(154, 163, 177, 0.85);
    --audi-focus-stroke: #0989FF;

    /* Secondary button — PLACEHOLDER, pending real hex */
    --audi-secondary-bg-idle: #34363B;
    --audi-secondary-bg-hover: #44474D;
    --audi-secondary-bg-pressed: #26282C;
    --audi-secondary-bg-disabled: #34363B;
    --audi-secondary-border-idle: rgba(252, 252, 253, 0.24);
    --audi-secondary-text-idle: #FCFCFD;
    --audi-secondary-text-disabled: rgba(154, 163, 177, 0.3);
}

.audi-theme,
.audi-theme input,
.audi-theme select,
.audi-theme textarea,
.audi-theme button {
    font-family: var(--audi-font);
}

/* =====================================================
   Text boxes (form-control inputs + custom-select-style)
   ===================================================== */
.audi-theme input.form-control,
.audi-theme select.custom-select-style,
.audi-theme textarea.form-control {
    font-size: 16px;
    line-height: 24px;
    transition: outline-color .15s ease-in-out, border-color .15s ease-in-out;
}

    .audi-theme input.form-control:disabled,
    .audi-theme select.custom-select-style:disabled {
        cursor: not-allowed;
    }

    /* Focus (keyboard accessibility) — 4px stroke outside the field, same token as buttons/links */
    .audi-theme input.form-control:focus-visible,
    .audi-theme select.custom-select-style:focus-visible,
    .audi-theme textarea.form-control:focus-visible {
        outline: 4px solid var(--audi-focus-stroke);
        outline-offset: 0;
    }

/* =====================================================
   Buttons — Secondary style only (#submit / #btnSubmit / #btnSpanishToggle)
   Targeted by id, not by the shared .submit-Btn class, since that
   class is also used by the text-link-standalone buttons below
   ("Add Previous Address", "Remove", "Use same address", etc.)
   which must NOT get the filled/pill button treatment.
   ===================================================== */
.audi-theme #submit,
.audi-theme #btnSubmit,
.audi-theme #btnSpanishToggle {
    border-radius: 999px !important;
    /* One shared fixed size for all three. The only labels these buttons
       actually carry in this (700Credit-only) scope are "Submit"/"Enviar"
       and "English"/"En Español" — all short enough that a single width
       comfortably fits every case without overflow, so a fixed size gives
       consistent-looking buttons instead of each one being a different
       shape depending on its own text length. */
    width: 140px !important;
    height: 52px !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-align: center !important;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: var(--audi-secondary-bg-idle) !important;
    color: var(--audi-secondary-text-idle) !important;
    border: 1px solid var(--audi-secondary-border-idle) !important;
    transition: background-color .15s ease-in-out, outline-color .15s ease-in-out;
}

/* btnSpanishToggle's own classes include Bootstrap's btn-block
   (display:block; width:100%) — cancel that so it shrinks to its text
   like the other two buttons, then float it right so it still lines up
   with the video/text boxes' right edge instead of stretching to reach it. */
.audi-theme #btnSpanishToggle {
    display: inline-block !important;
    float: right !important;
}

/* ---- Hover ---- */
.audi-theme #submit:hover:not(:disabled),
.audi-theme #btnSubmit:hover:not(:disabled),
.audi-theme #btnSpanishToggle:hover {
    background-color: var(--audi-secondary-bg-hover) !important;
}

/* ---- Pressed ---- */
.audi-theme #submit:active:not(:disabled),
.audi-theme #btnSubmit:active:not(:disabled),
.audi-theme #btnSpanishToggle:active {
    background-color: var(--audi-secondary-bg-pressed) !important;
}

/* ---- Disabled / blocked (native [disabled], driven today by ng-disabled) ---- */
.audi-theme #submit:disabled,
.audi-theme #btnSubmit:disabled {
    background-color: var(--audi-secondary-bg-disabled) !important;
    color: var(--audi-secondary-text-disabled) !important;
    border-color: transparent !important;
    cursor: not-allowed !important;
}

/* ---- Focus (keyboard accessibility) — 4px stroke OUTSIDE the button ---- */
.audi-theme #submit:focus-visible,
.audi-theme #btnSubmit:focus-visible,
.audi-theme #btnSpanishToggle:focus-visible {
    outline: 4px solid var(--audi-focus-stroke);
    outline-offset: 0;
}

/* ---- Submitted / loading (ng-class="{'audi-submitted': submitted}") ----
   NOTE: #submit/#btnSubmit are native <input type="submit">, not <button> —
   ::before/::after generated content does not reliably apply to replaced
   form controls, so a literal spinner animation isn't achievable here
   without a markup change. This gives the same disabled/blocked look. */
.audi-theme #submit.audi-submitted,
.audi-theme #btnSubmit.audi-submitted {
    background-color: var(--audi-secondary-bg-disabled) !important;
    color: var(--audi-secondary-text-disabled) !important;
    cursor: not-allowed !important;
}

/* ---- Spanish-toggle "language active"/selected state (ng-class="{'audi-lang-active': isspanish}") ---- */
.audi-theme #btnSpanishToggle.audi-lang-active {
    background-color: var(--audi-secondary-bg-pressed) !important;
}

/* ---- Add/Remove Co-Applicant (#lblcoapp) ----
   Left-aligned per demo feedback. Its wrapper div carries Bootstrap 3's
   real .text-left utility (text-align: left !important) — that's the
   default, correct behavior already, so no override is needed here. */

/* ---- "I Agree" checkbox alignment ----
   Submit button reverted to its original centered position per feedback
   (no override on it anymore). Pinning the checkbox+label with absolute
   positioning at a fixed offset from its column's own edge, rather than
   relying on text-align/float/width (which kept behaving inconsistently
   between "I Agree" and the longer "Concuerdo") — this removes any
   dependency on the label's own content length entirely, so both
   languages render at the identical fixed spot. Scoped to :only-child so
   the normal two-column layout (checkbox + signature box) is untouched. */
.audi-theme .row > .rowfield.col-sm-3:only-child {
    position: relative !important;
    min-height: 60px;
}

.audi-theme .row > .rowfield.col-sm-3:only-child .checkboxagree {
    position: absolute !important;
    left: -20px !important;
    top: 0 !important;
    text-align: left !important;
    width: auto !important;
    white-space: nowrap !important;
}

/* =====================================================
   Text link standalone (.btn-link.submit-Btn and .lang-swap.submit-Btn) —
   "Add Previous Address", "Remove", "Add Co-Applicant", "Use same address", etc.
   ===================================================== */
.audi-theme .btn-link.submit-Btn,
.audi-theme .lang-swap.submit-Btn {
    color: var(--audi-link-idle) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

    .audi-theme .btn-link.submit-Btn:hover,
    .audi-theme .lang-swap.submit-Btn:hover,
    .audi-theme .btn-link.submit-Btn:active,
    .audi-theme .lang-swap.submit-Btn:active {
        color: var(--audi-link-hover) !important;
    }

    .audi-theme .btn-link.submit-Btn:disabled,
    .audi-theme .lang-swap.submit-Btn:disabled {
        color: var(--audi-link-disabled) !important;
        cursor: not-allowed !important;
    }

    /* Focus (keyboard accessibility) — 4px stroke, drawn outside via outline */
    .audi-theme .btn-link.submit-Btn:focus-visible,
    .audi-theme .lang-swap.submit-Btn:focus-visible {
        color: var(--audi-link-idle) !important;
        outline: 4px solid var(--audi-focus-stroke);
        outline-offset: 2px;
    }