/*
    Fusha e kodit gjashteshifror, e paraqitur me katrore te ndare.

    Katroret jane vetem paraqitje. Input-i origjinal - ai i lidhur me modelin - mbetet i vetmi
    ne forme: behet transparent dhe shtrihet mbi katrore. Kjo e ruan te paprekur validimin e
    klientit (data-val-*), lidhjen me modelin, kopjimin e kodit me paste dhe
    autocomplete="one-time-code" ne telefon.
*/

/*
    Mbeshtjellesi eshte bllok me gjeresi te kufizuar e jo inline-block me katrore fikse:
    kartela e kyqjes e kufizon hapesiren e brendshme (shih login-qendror.css per gjeresine e
    karteles dhe padding-un), kurse dritarja e 2FA-se eshte modal-lg. Me gjeresi fikse katroret
    dukeshin ndryshe ne secilin vend; keshtu ndahet gjithmone e njejta hapesire ne gjashte pjese.
*/
.kodi-otp {
    position: relative;
    display: block;
    width: 100%;
    /* 6 x 44px + 5 x 8px hapesire: gjeresia ku katrori del pak me i larte se i gjere. */
    max-width: 304px;
    box-sizing: border-box;
}

/*
    Mbeshtjellesi eshte bllok, prandaj text-align nuk e centron dot. Aty ku forma e do kodin
    ne mes - hapi i dyte i kyqjes - grupit i vihet .text-center dhe centrimi behet me margin.
*/
.text-center .kodi-otp {
    margin-left: auto;
    margin-right: auto;
}

/*
    Selektoret jane te dyfishuar (.kodi-otp .kodi-otp-input) me qellim: pa mbeshtjellesin
    ne selektor, rregullat e template-it per input-at do ta ktheheshin sfondin dhe kufirin.
*/
.kodi-otp .kodi-otp-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    z-index: 2;
    cursor: text;
    /*
        Teksti fshihet me ngjyre transparente e jo me opacity/display: elementi duhet te
        mbetet i dukshem per jQuery validate, i cili nuk validon fushat ":hidden".
    */
    color: transparent;
    caret-color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

    .kodi-otp .kodi-otp-input:focus {
        outline: 0;
        border: 0;
        box-shadow: none;
        background-color: transparent;
    }

    /* Zgjedhja e tekstit te padukshem do te dukej si bllok i ngjyrosur mbi katrore. */
    .kodi-otp .kodi-otp-input::-moz-selection {
        background-color: transparent;
    }

    .kodi-otp .kodi-otp-input::selection {
        background-color: transparent;
    }

    /*
        Chrome e ngjyros sfondin e fushave te plotesuara automatikisht. Transition-i i gjate
        e shtyn ate ngjyrosje pafundesisht, qe katroret te mos mbulohen.
    */
    .kodi-otp .kodi-otp-input:-webkit-autofill {
        -webkit-text-fill-color: transparent;
        transition: background-color 100000s ease-in-out 0s;
    }

.kodi-otp .kodi-otp-katroret {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.kodi-otp .kodi-otp-katror {
    /* Gjashte pjese te barabarta te gjeresise se lire - kurre nuk dalin jashte kolones. */
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    margin-right: 8px;
    box-sizing: border-box;
    border: 1px solid #d5dbe2;
    border-radius: 6px;
    background-color: #fff;
    color: #37474f;
    font-size: 22px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -o-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .kodi-otp .kodi-otp-katror:last-child {
        margin-right: 0;
    }

    .kodi-otp .kodi-otp-katror.is-plot {
        border-color: #b6c0cb;
    }

.kodi-otp.is-fokus .kodi-otp-katror.is-aktiv {
    border-color: #03a9f3;
    box-shadow: 0 0 0 3px rgba(3, 169, 243, .18);
}

    /* Vija vertikale ne katrorin ku pritet shifra e radhes. */
    .kodi-otp.is-fokus .kodi-otp-katror.is-aktiv:empty:after {
        content: "";
        display: inline-block;
        width: 2px;
        height: 24px;
        vertical-align: middle;
        background-color: #03a9f3;
        -webkit-animation: kodiOtpVija 1s step-end infinite;
        animation: kodiOtpVija 1s step-end infinite;
    }

@-webkit-keyframes kodiOtpVija {
    50% {
        opacity: 0;
    }
}

@keyframes kodiOtpVija {
    50% {
        opacity: 0;
    }
}

/* Gabimi i validimit vendoset ne input-in transparent, kurse duhet te shihet ne katrore. */
.kodi-otp-input.input-validation-error ~ .kodi-otp-katroret .kodi-otp-katror {
    border-color: #d32f2f;
}

/* Faqja e kyqjes ka nuance tjeter primare nga pjesa e brendshme e sistemit. */
.login-page .kodi-otp.is-fokus .kodi-otp-katror.is-aktiv {
    border-color: #4b89fc;
    box-shadow: 0 0 0 3px rgba(75, 137, 252, .18);
}

    .login-page .kodi-otp.is-fokus .kodi-otp-katror.is-aktiv:empty:after {
        background-color: #4b89fc;
    }

@media (max-width: 480px) {
    .kodi-otp .kodi-otp-katror {
        height: 46px;
        margin-right: 6px;
        font-size: 19px;
        line-height: 44px;
    }
}

/*
    Afati i kodit: numeruesi 05:00 -> 00:00 dhe mesazhi qe e zevendeson kur kodi skadon.
    Te dyja rrine te fshehura derisa te kerkohet kodi (shih kodi-afati.js).
*/
.kodi-afati {
    margin-top: 8px;
    margin-bottom: 0;
    color: #5b6b79;
    font-size: 13px;
}

.kodi-afati .kodi-afati-koha {
    /* Shifrat me gjeresi te njejte: pa kete, teksti dridhet ne çdo sekonde. */
    font-family: Consolas, "Courier New", monospace;
    font-size: 15px;
    font-weight: 600;
    color: #37474f;
}

.kodi-afati-skaduar {
    margin-top: 8px;
    margin-bottom: 0;
    color: #d32f2f;
    font-size: 13px;
}