/* ---- POP UP COMMANDE PLAQUE ---- */

.popUp {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    align-items: center;
    justify-content: center;
}

.popUp2 {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 14;
    align-items: center;
    justify-content: center;
}

.containerPopUp {
    position: relative;
    background-color: white;
    width: 544px;
    padding: 30px;
    box-shadow: 0px 4px 20px rgb(0 0 0 / 20%);
    border-radius: 10px;
    height: 740px;
}

.bodyPopUp {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
}

.bouttonChangerValeur {
    cursor: pointer;
    height: 26px;
    width: 26px;
    border: 1px solid #dedede;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border 0.3s ease-in-out;
}

.bouttonChangerValeur:hover {
    animation: border ease-in-out 0.3;
    border-color: var(--rose-color);
}

.bouttonChangerValeur span {
    padding-bottom: 3px;
}

.contenuPopUp {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.checkChoixTypePlaque {
    color: #ffffff;
}

.bouttonChoixTypePlaque {
    transition: border 0.3s ease-in-out;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    width: 130px;
    height: 35px;
    border-color: #D4D4D4;
}

.bouttonChoixTypePlaque:hover {
    border-color: var(--rose-color);
}

.inputPlaque {
    width: 100%;
    border: solid 1px #d0d0d0;
    font-family: inherit;
    padding: 5px 5px 5px 10px;
}

.itemSpaceBetweenPopUp {
    display: flex;
    justify-content: space-between;
}

.titrePopUp {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.titrePopUp h4 {
    font-weight: bold;
    margin: 0;
}

.titrePopUp hr {
    width: 20%;
    height: 2px;
    background-color: var(--rose-color);
}

.item {
    display: flex;
    flex-direction: column;
}

.item span {
    color: #3f3f3f;
    font-size: larger;
}

.item span:nth-child(2) {
    color: #5b5b5b;
}

#input_qtePlaquePopUp {
    color: var(--rose-color);
}



.itemRowPopUp {
    display: flex;
    align-items: center;
    gap: 15px;
}

.selectPopUp {
    transition: border 0.3s ease-in-out;
    cursor: pointer;
    width: 55%;
    height: 30px;
    border-color: #D4D4D4;
    color: #5b5b5b;
    font-weight: bold;
    font-family: inherit;
}

.selectPopUp:hover {
    border-color: var(--rose-color);
}

.infoBullePopUp {
    padding-left: 5px;
    position: relative;
    cursor: help;
}

.infoBullePopUp:hover::after {
    content: attr(aria-label);
    position: absolute;
    top: -2.4em;
    left: 0;
    transform: translateX(-65%);
    z-index: 1;
    white-space: wrap;
    padding: 5px 14px;
    background: #fff;
    color: var(--rose-color);
    font-weight: normal;
    border-radius: 4px;
    font-size: 17px;
    width: 500px;
    top: 2.5em;
    border: solid 2px var(--rose-color);
}

.infoBullePopUp[aria-label]:hover::before {
    content: "▲";
    position: absolute;
    top: 1.1em;
    left: 92%;
    transform: translateX(-100%);
    font-size: 20px;
    color: #CF0B5D;
}

#adresse_plaque {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#adresse_plaque input {
    color: #313131;
}

#boutonAnnuler {
    padding: 20px 30px;
    background-color: #ffffff;
    color: #000000;
    border: solid 1px #e8e8e8;
}

#boutonAnnuler:hover {
    animation: ease-in-out 0.2s;
    background-color: #b6b6b6;
    color: #ffffff;
}

.croix {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
}

#boutonPayerPopUp {
    padding: 20px 40px;
    background-color: var(--rose-color);
}

#boutonPayerPopUp:hover {
    animation: ease-in-out 0.2s;
    background-color: #b4074f;
}

#div-informations {
    gap: 35px;
    padding: 0px 20px 0px 20px;
}

#div-prixPaiement {
    gap: 20px;
}

#div-qtePlaquePopUp {
    display: flex;
    gap: 5px;
}

#input-cp_plaque {
    width: 18%;
}

#input_qtePlaquePopUp {
    text-align: center;
    width: 22px;
    background: none;
    border: none;
    padding: 0;
    color: var(--rose-color);
    font-family: inherit;
    font-weight: bold;
}

#prixPlaque {
    color: var(--rose-color);
}

#text-immat {
    display: none;
}

#text-dept {
    display: none;
}

#text-plaqueImmat {
    display: none;
}

#bandeauDescriptionPaiement {
    width: 285px;
    border-radius: 6px 0 0 6px;
    border-right: 2px solid #D4D4D4;
}

.contenuInformationsTransaction {
    font-size: 22px;
    line-height: 0;
    font-weight: 200;
}

#containerBlocSecurite {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 17px 0;
}

#titreBlocSecurite {
    font-size: 18px
}

#paragrapheSecurite {
    font-size: 11px;
    color: #aaaaaa;
    text-align: justify;
}

#containerSaisieCb {
    position: relative;
    padding: 70px 46px;
    width: 454px;
}

#containerSaisieCb img {
    width: 170px;
}

#topSaisieNumCb {
    display: flex;
    justify-content: space-between;
}

#iconeMoyenPaiement {
    display: flex;
    gap: 8px;
}

.titreChampCb {
    text-transform: uppercase;
    color: #aaaaaa;
    font-weight: 100;
    margin-bottom: 10px;
    font-size: 14px;
}

.inputSaisieBancaire {
    position: relative;
}

.inputSaisieBancaire svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    pointer-events: none;
}

.kr-help-icon {
    display: none;
}

.inputSaisieBancaire input {
    width: 100%;
    height: 40px;
    border: 2px solid #aaaaaa;
    border-radius: 2px !important;
    padding-left: 38px;
}

.containerCarteBancaire {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

#blockExpirationCVV {
    display: flex;
    gap: 20px;
}

#topCVVcontainer {
    position: relative;
    margin-bottom: 7px;
}

#topCVVcontainer svg {
    position: absolute;
    left: 34px;
}

#boutonPayerTransaction {
    background: var(--rose-color);
    color: #fff;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 2px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#containerBoutonPayerTransaction {
    position: relative;
    margin-top: 10px;
}

#containerBoutonPayerTransaction input {
    line-height: 1.3;
}

#containerBoutonPayerTransaction svg {
    position: absolute;
    fill: #fff;
    top: 50%;
    transform: translate3d(-188%, -50%, 0);
    left: 50%;
    pointer-events: none;
}

#logoSecuritePaiement {
    height: auto;
    width: 100% !important;
}

.kr-input-field:focus:invalid,
textarea:focus:invalid {
    border: 2px solid var(--rose-color);
    transition: border .2s;
}

.kr-input-field:valid {
    border: 2px solid #096A09;
    transition: border .2s;
}

input,
textarea {
    transition: border .2s;
}

.kr-pan,
.kr-expiry,
.kr-security-code,
.kr-card-holder-name,
.kr-card-holder-mail {
    height: 40px;
    border: 2px solid #aaaaaa;
    padding-left: 40px;
    border-radius: 4px;
    padding-top: 7px;
}

.kr-visibility-button,
.kr-visibility-button svg {
    display: none;
}

.kr-payment-button {
    width: 100%;
    background: var(--rose-color);
    border: none;
    color: white;
    padding: 8px;
    padding-top: 9px;
    font-weight: bold;
    letter-spacing: 1px;
}

.chargementInputPaiement {
    height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#iconeChargement {
    width: 60px !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 44%;
}

.kr-form-error {
    padding-top: 20px;
}



/* ---- MEDIA QUERY POP UP ---- */

@media screen and (max-width: 544px) {
    .infoBullePopUp:hover::after {
        content: attr(aria-label);
        position: absolute;
        left: 0;
        transform: translateX(-45%);
        z-index: 1;
        padding: 5px 14px;
        background: #fff;
        color: var(--rose-color);
        font-weight: normal;
        border-radius: 4px;
        font-size: 17px;
        width: 300px;
        top: 2.5em;
        border: solid 2px var(--rose-color);
    }

    .containerPopUp {
        width: 370px;
        height: 650px;
        padding: 20px 15px;
    }

    .boutonChoixTypePlaque {
        width: 115px;
    }

    #text-departement {
        display: none;
    }

    #text-dept {
        display: block;
    }

    #text-plaqueDimmatriculation {
        display: none;
    }

    #text-immat {
        display: block;
    }

    #text-materiaux {
        display: none;
    }

    #text-commandeDePlaque {
        display: none;
    }

    #text-plaqueImmat {
        display: block;
    }

    #input-cp_plaque {
        width: 30%;
    }

    #div-informations {
        gap: 15px;
        padding: 20px 20px 0px 20px;
    }

    #div-prixPaiement {
        gap: 10px;
    }

}

@media screen and (max-width: 320px) {

    hr {
        margin: 5px;
    }

    .containerPopUp {
        width: 370px;
        height: 630px;
        padding: 20px 15px;
    }

    .titrePopUp {
        display: none;
    }

    #adresse_plaque {
        gap: 10px;
    }

    .bodyPopUp {
        padding: 0;
        justify-content: flex-end;
    }

    #div-prixPaiement {
        gap: 10px;
    }

    .itemSpaceBetweenPopUp {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .item {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }



}

input#inputField .kr-input-field::-webkit-input-placeholder {
    content: "Test";
}

#logoSystempay {
    width: 100px;
}

.containerPopUpPaiement {
    display: flex;
    background: #fff;
    border-radius: 6px;
}

#bandeauDescriptionPaiement {
    background: #F6F6F8;
    padding: 70px 30px;
}

#titreDescriptionPaiement {
    font-weight: bold;
    color: var(--rose-color);
    font-size: 22px;
}

.containerInformationsTransaction {
    display: flex;
    gap: 12px;
    padding: 14px 0 0 0;
}

.titreInformationsTransaction {
    color: #aaaaaa;
    font-size: 19px;
    margin-top: 4px;
}

.containerInformationsTransaction svg {
    fill: #AAAAAA;
}

.containerPopUpCheckout {
    position: relative;
    background-color: white;
    /* width: 544px; */
    width: 80%;
    padding: 45px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#titreContainerCheckout {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    height: 40px;
}

#titreCheckout {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--rose-color);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
}

.titreDetailCheckout {
    font-weight: 600;
    color: var(--gris-clair-color);
    text-align: center;
    margin: 0;
    width: fit-content;
}

.infosDetailCheckout {
    font-size: 20px;
    color: var(--gris-clair-color);
    font-weight: 500;
    text-align: left;
}

.detailContainerCheckout {
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}

.detailContainerCheckout:nth-child(2) {
    margin-top: 34px;
}

#boutonContainerCheckout {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    height: 50px;
    margin-top: 34px;
}

#boutonFermerCheckout {
    border: 1px solid #D5D5D5;
    background: none;
    width: 100%;
    font-weight: 100;
    color: #4C4C4C;
    font-size: 18px;
    cursor: pointer;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    height: 50px;
}

#boutonRecuCheckout {
    border: none;
    background: var(--rose-color);
    color: #fff;
    width: 100%;
    /* font-weight: 700; */
    font-weight: 100;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    height: 50px;
}

.popupFinDemarche {
    width: 40vw;
    /* text-align: center; */
}

.popupFinDemarcheCheckout {
    width: 50vw;
}

.ulCheckout {
    font-size: 20px;
    list-style: none;
}

.popUpFinDemarcheBleu {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
}

.popUpAlign {
    display: flex !important;
    flex-direction: column !important;
    gap: 34px;
}

@media screen and (max-width: 1366px) {

    .popupFinDemarche {
        width: 90vw;
    }

}

@media screen and (max-width: 768px) {

    .popupFinDemarcheCheckout {
        width: 90vw;
    }

    .popupFinDemarche {
        width: 80vw;
    }

}

@media screen and (max-width: 700px) {
    /*flagy */

    #bandeauDescriptionPaiement {
        display: none !important;
    }


}

@media screen and (max-width: 543px) {

    .popupFinDemarcheCheckout {
        width: 100vw;
        height: 100%;
        overflow: scroll;
    }

    /* #boutonContainerCheckout {
        flex-direction: column-reverse;
        height: fit-content;
    } */

    #popUpCheckoutFinDemarche {
        padding: 15px;
    }

}

@media screen and (max-width: 450px) {
    .popupFinDemarche {
        width: 100vw;
        height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .titreDetailCheckout {
        text-align: left;
    }

    .containerPopUpPaiement {
        height: 100%;
    }

    #containerSaisieCb {
        width: 100%;
        padding: 30px 30px;
    }
}

@media screen and (max-width: 320px) and (max-height: 568px) {

    .containerPopUpCheckout {
        padding: 31px;
    }



}