/*
 * Prelude phone-verification modal (HS + HW, and BL Australia).
 *
 * Styled to the funnel's own system rather than Bootstrap's defaults: the
 * purple is #6514dd (the only brand purple in home-style.css / debt-pl-style.css,
 * 48 uses), headings are weight 300, and the layout follows the one modal
 * precedent in the codebase, become-ng-globals/css/email-exists-modal.css.
 *
 * TWO BOOTSTRAP-4 TRAPS THIS FILE EXISTS TO UNDO:
 *
 * 1. `.modal-header` is `display: flex` in BS4, so a close button placed
 *    before the title renders to its LEFT, on top of it. The precedent file
 *    solves it the same way - `display: block` on the header and `float: right`
 *    on the button - and the markup now also puts the <h4> first so the order
 *    is sane even with CSS off.
 * 2. `.close` inherits a 1.5rem BS4 size that reads as a stray glyph against a
 *    300-weight title; the precedent bumps it to 30px, which is what the rest
 *    of the funnel's modals look like.
 *
 * The `.update-phone-number` half of the old port is deliberately gone: the
 * modal no longer edits the number, it closes and hands the customer back to
 * the lead form's own #phone_number field.
 */

/* ---- Shell ------------------------------------------------------------- */

#prelude-verification-modal .modal-dialog {
    max-width: 420px;
}

#prelude-verification-modal .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(32, 8, 70, 0.28);
    overflow: hidden;
}

/* No accent bar across the top - the card is plain white. A purple hairline
   was tried here and removed: against the funnel's purple page background it
   read as a seam rather than a detail. */

#prelude-verification-modal .modal-header {
    display: block;
    position: relative;
    text-align: center;
    background-color: transparent;
    border-bottom: 0;
    padding: 18px 44px 0 44px;
}

/* Absolute, not floated. The precedent file (email-exists-modal.css) floats it
   right, which only works because its markup puts the button BEFORE the title
   - a float following a block-level <h4> drops onto the next line, which is
   exactly what it did here. Positioning it instead keeps the close button on
   the title's line while leaving the markup in reading order. The header's
   symmetric 44px side padding is what stops a long title running under it. */
#prelude-verification-modal .modal-header .close {
    position: absolute;
    top: 14px;
    right: 16px;
    float: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 30px;
    font-weight: normal;
    opacity: 0.45;
}

#prelude-verification-modal .modal-header .close:hover {
    opacity: 0.8;
}

#prelude-verification-modal .modal-title {
    color: #6514dd;
    font-weight: 300;
    font-size: 23px;
    line-height: 1.25;
}

#prelude-verification-modal .modal-body {
    padding: 8px 26px 26px 26px;
}

/* ---- The verification panel -------------------------------------------- */

.prelude-verify {
    background-color: #fff;
    text-align: center;
    color: #222;
}

.prelude-verify .prelude-sent-to {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 2px;
}

/* The number is the one thing on this screen the customer has to check, so it
   is the largest text in the body - larger than the instruction above it. */
.prelude-verify .prelude-phone-holder {
    display: block;
    font-size: 21px;
    font-weight: 500;
    color: #222;
    letter-spacing: 0.2px;
}

.prelude-verify .prelude-usually-arrives {
    font-size: 12.5px;
    font-style: italic;
    display: block;
    color: #8a8989;
    margin-top: 2px;
}

/* ---- Code boxes --------------------------------------------------------- */

.prelude-verify .prelude-code-inputs {
    margin: 22px 0 6px 0;
}

.prelude-verify .prelude-code-box {
    width: 46px;
    height: 56px;
    margin: 0 4px;
    font-size: 25px;
    font-weight: 400;
    text-align: center;
    color: #222;
    background-color: #fbfaff;
    border: 1.5px solid #ddd8ea;
    border-radius: 10px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    -moz-appearance: textfield;
}

.prelude-verify .prelude-code-box::-webkit-outer-spin-button,
.prelude-verify .prelude-code-box::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.prelude-verify .prelude-code-box:focus {
    border-color: #6514dd;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(101, 20, 221, 0.14);
    outline: none;
}

/* A filled box reads as done, so the customer can see at a glance how far
   through the code they are without counting carets. */
.prelude-verify .prelude-code-box.is-filled {
    border-color: #b9a0e8;
    background-color: #fff;
}

/* Shaken on a rejected code - the boxes clear themselves, and without this the
   only signal that anything happened is the error line below them. */
.prelude-verify .prelude-code-inputs.is-wrong {
    animation: prelude-shake 0.32s ease;
}

@keyframes prelude-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* ---- Status lines ------------------------------------------------------- */

.prelude-verify #prelude-code-error {
    text-align: center;
    color: #dc3545;
    font-size: 13px;
    min-height: 19px;
    line-height: 19px;
}

.prelude-verify #prelude-code-loading {
    display: none;
    font-size: 14px;
    color: #555;
    margin-top: 6px;
}

.prelude-verify #prelude-code-sent-again {
    display: none;
    font-size: 14px;
    font-weight: 300;
    padding-top: 4px;
    color: #28a745;
}

/* Hidden by default - the modal auto-submits on the sixth digit. This is the
   fallback for a browser that swallows the auto-advance. */
.prelude-verify .prelude-confirm-btn {
    display: none;
    font-size: 17px;
    border-radius: 999px;
    padding-left: 34px;
    padding-right: 34px;
    background-color: #6514dd;
    border-color: #6514dd;
}

/* ---- Resend + change-number --------------------------------------------- */

/* One row, two equal-weight actions. Both are 13px: an earlier pass left a
   20px rule here from the pencil-glyph version, which made "Change it" the
   loudest thing in the modal. */
.prelude-verify .prelude-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eeebf6;
    font-size: 13px;
    color: #6c757d;
    line-height: 1.9;
}

.prelude-verify .prelude-actions a {
    color: #6514dd;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
}

.prelude-verify .prelude-actions a:hover {
    color: #4d0fab;
}

/* The resend link spends its first 60 seconds inactive, counting down.
   The number itself is RESEND_SECONDS in prelude-verification.js. */
.prelude-verify .prelude-actions a.inactive {
    color: #a4a3a7;
    text-decoration: none;
    cursor: default;
}

.prelude-verify .prelude-actions .prelude-actions-sep {
    color: #d8d4e4;
    margin: 0 8px;
}

/* ---- Reassurance footer -------------------------------------------------- */

/* A tinted panel rather than the 5px grey border the Spinwheel slide uses -
   that border was sized for a full-width slide and looks like a bug at modal
   width. */
.prelude-verify .prelude-privacy {
    margin-top: 18px;
    padding: 12px 14px;
    background-color: #f7f4ff;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6c757d;
}

.prelude-verify .prelude-privacy .mdi {
    display: block;
    font-size: 21px;
    line-height: 24px;
    color: #6514dd;
}

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 400px) {
    #prelude-verification-modal .modal-body {
        padding: 8px 14px 20px 14px;
    }

    .prelude-verify .prelude-code-box {
        width: 40px;
        height: 50px;
        margin: 0 2px;
        font-size: 22px;
    }

    .prelude-verify .prelude-phone-holder {
        font-size: 19px;
    }
}