/**
 * ProCamp - OTP verification modal.
 *
 * The .hystmodal* classes match the markup used elsewhere in the theme
 * (single-vacancy share modal), but the styles are self-contained: the
 * hystmodal stylesheet is only loaded on vacancy pages, and the OTP modal
 * has to work on every form page.
 */

.procampOtp.hystmodal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: flex;
    overflow: hidden;
    overflow-y: auto;
    flex-flow: column nowrap;
    justify-content: flex-start;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.procampOtp.hystmodal--active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.procampOtp .hystmodal__wrap {
    display: flex;
    flex: 0 0 auto;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    margin: auto;
}

.procampOtp .hystmodal__window {
    flex: 0 0 auto;
    box-sizing: border-box;
    max-width: 100%;
    margin: 50px 0;
    opacity: 0;
    transform: scale(0.9);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.procampOtp.hystmodal--active .hystmodal__window {
    opacity: 1;
    transform: scale(1);
}

.procampOtp__shadow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 98;
    display: block;
    width: 100%;
    overflow: hidden;
    border: none;
    background: rgba(51, 51, 51, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.procampOtp__shadow.hystmodal__shadow--show {
    opacity: 1;
    pointer-events: auto;
}

.procampOtp__box {
    position: relative;
    box-sizing: border-box;
    width: 26.6666666667rem;
    max-width: calc(100vw - 1.7777777778rem);
    padding: 3.3333333333rem;
    border-radius: 2.7777777778rem;
    background-color: #fff;
    box-shadow: 0 6px 44px 0 rgba(23, 44, 68, 0.14);
    text-align: center;
}

.procampOtp__close {
    position: absolute;
    top: 1.1111111111rem;
    right: 1.1111111111rem;
    display: flex;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.procampOtp__close svg {
    width: 45%;
    height: auto;
}

.procampOtp__close svg path {
    transition: stroke 0.3s ease;
}

@media (any-hover: hover) {
    .procampOtp__close:hover svg path {
        stroke: #ff560e;
    }
}

.procampOtp__title {
    margin: 0 0 0.6666666667rem;
    font-size: 1.3333333333rem;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: -0.02em;
    color: #333;
}

.procampOtp__subtitle {
    margin: 0 0 1.6666666667rem;
    font-size: 0.8888888889rem;
    line-height: 150%;
    color: #666;
}

.procampOtp__inputs {
    display: flex;
    gap: 0.4444444444rem;
    justify-content: center;
    margin-bottom: 1.1111111111rem;
}

.procampOtp__cell {
    width: 2.6666666667rem;
    height: 3.1111111111rem;
    padding: 0;
    border: 1px solid #dfe3e7;
    border-radius: 0.7777777778rem;
    background-color: #fff;
    font-size: 1.3333333333rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -moz-appearance: textfield;
}

.procampOtp__cell::-webkit-inner-spin-button,
.procampOtp__cell::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.procampOtp__cell:focus {
    border-color: #ff560e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 86, 14, 0.15);
}

.procampOtp--error .procampOtp__cell {
    border-color: #e02b2b;
}

.procampOtp__error {
    min-height: 1.2222222222rem;
    margin: 0 0 0.8888888889rem;
    font-size: 0.7777777778rem;
    line-height: 140%;
    color: #e02b2b;
}

.procampOtp__submit {
    width: 100%;
    margin-bottom: 0.8888888889rem;
    cursor: pointer;
}

.procampOtp__submit[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

.procampOtp__resend,
.procampOtp__change {
    display: block;
    width: 100%;
    padding: 0.2222222222rem 0;
    border: none;
    background: none;
    font-size: 0.7777777778rem;
    font-weight: 700;
    line-height: 150%;
    color: #ff560e;
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.procampOtp__resend[disabled] {
    color: #999;
    cursor: default;
}

.procampOtp__change {
    color: #999;
}

/*
 * Out of attempts on the current code. Requesting a new one is the only way
 * forward, so mute the dead "Confirm" button and pull the eye to "Resend".
 */
.procampOtp--exhausted .procampOtp__submit {
    opacity: 0.4;
    pointer-events: none;
}

.procampOtp--exhausted .procampOtp__resend:not([disabled]) {
    text-decoration: underline;
}

@media (any-hover: hover) {
    .procampOtp__resend:not([disabled]):hover,
    .procampOtp__change:hover {
        color: #333;
    }
}

.procampOtp--busy .procampOtp__box {
    opacity: 0.7;
    pointer-events: none;
}

.procampOtp__fieldError {
    display: block;
    margin-top: 0.3333333333rem;
    font-size: 0.7222222222rem;
    line-height: 140%;
    color: #e02b2b;
}

@media (max-width: 590px) {
    .procampOtp__box {
        padding: 2.2222222222rem 1.1111111111rem;
        border-radius: 1.6666666667rem;
    }

    .procampOtp__cell {
        width: 2.2222222222rem;
        height: 2.7777777778rem;
        font-size: 1.1111111111rem;
    }

    .procampOtp__close {
        top: 0.5555555556rem;
        right: 0.5555555556rem;
        width: 2.2222222222rem;
        height: 2.2222222222rem;
    }
}