/* The boxes of an SMS code (js/Common/OtpInput.js). Colors come from the variables, so a dark page (the login) and a light one (the purchase) set their own. */
.z-otp {
    --otp-bg: #ffffff;
    --otp-border: #d6dbe6;
    --otp-text: #1e2532;
    --otp-focus: #3699ff;
    --otp-filled: #3699ff;
    --otp-error: #f64e60;
    display: flex;
    justify-content: center;
    gap: 10px;
    direction: ltr;
}

.z-otp-box {
    width: 48px;
    height: 56px;
    border-radius: 12px;
    border: 1.5px solid var(--otp-border);
    background: var(--otp-bg);
    color: var(--otp-text);
    font-size: 1.6rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    caret-color: var(--otp-focus);
    transition: border-color .15s, box-shadow .15s, transform .15s;
    padding: 0;
    outline: none;
}

.z-otp-box:focus {
    border-color: var(--otp-focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--otp-focus) 22%, transparent) !important;
    transform: translateY(-1px);
}

.z-otp-box.z-otp-filled {
    border-color: var(--otp-filled);
}

.z-otp.z-otp-error .z-otp-box {
    border-color: var(--otp-error);
}

.z-otp.z-otp-shake {
    animation: z-otp-shake .35s;
}

@keyframes z-otp-shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@media (max-width: 420px) {
    .z-otp { gap: 6px; }
    .z-otp-box { width: 42px; height: 50px; font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .z-otp-box { transition: none; }
    .z-otp.z-otp-shake { animation: none; }
}

/* on the dark login page */
.z-otp.z-otp-dark {
    --otp-bg: rgba(255, 255, 255, .08);
    --otp-border: rgba(255, 255, 255, .25);
    --otp-text: #ffffff;
    --otp-focus: #8fc4ff;
    --otp-filled: rgba(255, 255, 255, .7);
}

/* the picture that is asked after a wrong code (js/Common/Captcha.js) */
.z-captcha {
    --cap-bg: #ffffff;
    --cap-border: #d6dbe6;
    --cap-text: #1e2532;
    --cap-focus: #3699ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 4px auto 16px;
    animation: z-cap-in .25s ease-out;
}

.z-captcha[hidden] { display: none; }

@keyframes z-cap-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.z-captcha-row {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
}

.z-captcha-img {
    width: 190px;
    height: 60px;
    border-radius: 10px;
    border: 1.5px solid var(--cap-border);
    background: #eef2fb;
    transition: opacity .15s;
}

.z-captcha.z-captcha-loading .z-captcha-img { opacity: .4; }

.z-captcha-refresh {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--cap-border);
    background: var(--cap-bg);
    color: var(--cap-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.z-captcha-refresh i { font-size: 1.2rem; color: inherit; }
.z-captcha-refresh:hover, .z-captcha-refresh:focus { border-color: var(--cap-focus); outline: none; }

.z-captcha-input {
    width: 240px;
    max-width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1.5px solid var(--cap-border);
    background: var(--cap-bg);
    color: var(--cap-text);
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: .3em;
    font-variant-numeric: tabular-nums;
    outline: none;
}

.z-captcha-input:focus {
    border-color: var(--cap-focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cap-focus) 22%, transparent) !important;
}

.z-captcha-input::placeholder { letter-spacing: normal; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
    .z-captcha { animation: none; }
}

/* on the dark login page */
.z-captcha.z-captcha-dark {
    --cap-bg: rgba(255, 255, 255, .08);
    --cap-border: rgba(255, 255, 255, .25);
    --cap-text: #ffffff;
    --cap-focus: #8fc4ff;
}