/* Code-confirmation step on the gated campaign redeem pages, injected by
   ttai-redeem-join.js into whichever templates/redeem/*.tpl is serving the campaign.

   Scoped on #ttai-redeem-join — the one id every one of those templates carries — so
   these beat ttai-redeem-join.css's own #ttai-com rules. Values are taken from the join
   form it replaces (field 59px on rgba(42,24,55,1), pink #f80353 links, 14px/600 notes)
   so the step reads as part of that form rather than a second one.

   The CONFIRM button deliberately carries .start-btn untouched: it stands where START
   stood, and matching it is what makes the swap read as one flow. */

#ttai-redeem-join .ttai-code-step {
    display: none;
}

#ttai-redeem-join .ttai-code-step.is-active {
    display: block;
}

#ttai-redeem-join .ttai-code-step .ttai-code-lead {
    margin: 0 0 2px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* Its own line, not inline in the sentence: addresses run long enough to wrap
   mid-domain, which reads as a typo in the thing they're being asked to confirm. */
#ttai-redeem-join .ttai-code-step .ttai-code-email {
    margin: 0 0 22px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: break-word;
}

#ttai-redeem-join .ttai-code-step .form-group {
    margin-bottom: 20px;
}

#ttai-redeem-join .ttai-code-step .ttai-code-input {
    width: 100%;
    height: 59px;
    padding: 16px;
    border: none;
    border-radius: 3px;
    background-color: rgba(42, 24, 55, 1);
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.4em;
    /* letter-spacing trails the last glyph, which shifts centred text left by one
       gap — the indent puts it back. */
    text-indent: 0.4em;
}

#ttai-redeem-join .ttai-code-step .ttai-code-input::placeholder {
    color: rgba(108, 108, 108, 1);
    font-weight: 400;
}

#ttai-redeem-join .ttai-code-step .ttai-code-error {
    display: none;
    margin: 10px 0 0;
}

/* Stacked, not a row: the form column is narrow enough that the two labels wrap into
   each other, and a wrapped flex row reads as one broken sentence. */
#ttai-redeem-join .ttai-code-step .ttai-code-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 18px;
}

#ttai-redeem-join .ttai-code-step .ttai-code-actions button {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

/* White, not the #f80353 the rest of the page gives links: this sits on the middle of
   the background gradient where that pink barely separates from it, and the CONFIRM
   button directly above already carries the accent. Weight and opacity do the ranking. */
#ttai-redeem-join .ttai-code-step .ttai-code-resend {
    color: #FFFFFF;
}

#ttai-redeem-join .ttai-code-step .ttai-code-back {
    color: #FFFFFF;
    opacity: 0.7;
}

#ttai-redeem-join .ttai-code-step .ttai-code-actions button:hover {
    opacity: 0.85;
}

#ttai-redeem-join .ttai-code-step .ttai-code-actions button[disabled] {
    color: #FFFFFF;
    opacity: 0.5;
    text-decoration: none;
    cursor: default;
}

#ttai-redeem-join .ttai-code-step .ttai-code-note {
    margin: 0;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    opacity: 0.7;
}

@media (max-width: 600px) {
    #ttai-redeem-join .ttai-code-step .ttai-code-lead,
    #ttai-redeem-join .ttai-code-step .ttai-code-email {
        font-size: 16px;
    }

    #ttai-redeem-join .ttai-code-step .ttai-code-input {
        font-size: 20px;
        letter-spacing: 0.3em;
        text-indent: 0.3em;
    }
}

/* The throttle countdown borrows the page's 36px CTA, where a whole sentence wraps out
   of the button. Also applied to the panel's own CONFIRM, which is the same element. */
#ttai-redeem-join .start-btn.ttai-countdown {
    font-size: 20px;
    opacity: 0.75;
    cursor: default;
}

#ttai-redeem-join .start-btn.ttai-countdown:hover {
    transform: none;
}