/* ============================================================
   PayPlug Custom — Feuille de style du formulaire de paiement
   ============================================================ */

:root {
    --pp-primary:    #1c4ed8;
    --pp-primary-h:  #1d40b0;
    --pp-success:    #16a34a;
    --pp-danger:     #dc2626;
    --pp-warning:    #d97706;
    --pp-gray-50:    #f9fafb;
    --pp-gray-100:   #f3f4f6;
    --pp-gray-200:   #e5e7eb;
    --pp-gray-400:   #9ca3af;
    --pp-gray-600:   #4b5563;
    --pp-gray-800:   #1f2937;
    --pp-radius:     12px;
    --pp-shadow:     0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    --pp-transition: .18s ease;
}

/* Badge test ------------------------------------------------- */
.payplug-test-badge {
    background: #fef3c7;
    color: #92400e;
    text-align: center;
    padding: .45rem 1rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: 1px solid #fcd34d;
}

/* Erreur */
.payplug-error {
    background:red;
    color: white;
    border-radius:1rem;
    padding: .75rem 1rem;
    font-size:.9rem;
    font-weight:500;
    text-align:center;
}

/* Spinner */
.payplug-spinner {
    width:18px;height:18px;animation:payplug-spin .7s linear infinite;
}
@keyframes payplug-spin {
    to { transform: rotate(360deg); }
}
.payplug-btn-loader {
    display:inline-flex;align-items:center;gap:.5rem;
}

/* Pages retour ---------------------------------------------- */
.payplug-return {
    text-align:center;padding:3rem 2rem;
}
.payplug-return-icon {
    display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;
}
.payplug-success-icon {color:var(--pp-success); }
.payplug-cancel-icon  {color:var(--pp-danger); }
.payplug-pending-icon {color:var(--pp-warning); }
.payplug-return-icon svg {width:38px;height:38px;}
.payplug-return h3 {
    font-size:1.4rem;font-weight:700;margin:0 0 .75rem;
}
.payplug-return-msg {
    color:var(--pp-gray-600);margin-bottom:1.5rem;
}
.payplug-ref {
    font-size:13px;color:var(--pp-gray-400);margin-top:.5rem;
}

#payplug-payment-block {
    display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;margin:1rem auto;gap:.5rem;
    & .payplug-row {
        display:flex;flex-direction:column;align-items:center;justify-content:center;width:50rem;max-width:90vw;padding:1rem;margin-inline:auto;
        & .payplug-field {
            width:100%;display:flex;flex-wrap:wrap;gap:1rem;
        }
    }
    & label{
        width:calc(50% - .5rem);position:relative;padding-bottom:.5rem;
        & input, & textarea{
            width:100%;background-color:transparent;border:none;padding:1rem;border:1px solid #99c555;color:#99c555;resize:none;display:block;border-radius:2rem;font-size:1rem;
            &[type="number"] {
                -moz-appearance:textfield;appearance:none;
                &::-webkit-inner-spin-button,
                &::-webkit-outer-spin-button {
                    -webkit-appearance:none;margin:0;
                }
            }
            & + i {
                position:absolute;right:1rem;top:calc(50% - 0.5rem);width:1rem;height:1rem;opacity:.8;transition: opacity .3s cubic-bezier(0, 0.07, 0.57, 0.99);
                & svg {
                    width:100%;height:100%;
                    &:not([fill="none"]) {
                        & path {
                            fill:#99c555;
                        }
                    }
                }
            }
            &::placeholder{
                color:#99c555;opacity: .6;transition:opacity .3s ease-in-out;font-size:1rem;
            }
            &:focus,&:hover{
                outline:none;
                &::placeholder,&::placeholder{
                    opacity:1; 
                }    
                & + i {
                    opacity:1;
                }   
            }
            &:-webkit-autofill {
                -webkit-text-fill-color:#99c555!important;
                -webkit-box-shadow:0 0 0px 1000px black inset!important;
                appearance:none;background-color:transparent!important;color:#99c555!important;border:2px solid #99c555!important;
            }
            &:focus{
                &::-webkit-contacts-auto-fill-button {
                    visibility:hidden;display:none!important;pointer-events:none;position:absolute;right:0;
                }
            }
            &:not(:placeholder-shown){
                & + i{
                    opacity:1;
                }
            }
        }
        &.big{
            width:100%;
            & i {
                top:1rem;
            }
        }
    }
    & button#payplug-submit-btn {
        -webkit-user-select:none;
        -moz-user-select:none;user-select:none;padding:.75rem 1.5rem .6rem 1.5rem;display:block;font-size:.9rem;color:#ffffff;cursor:pointer;position:relative;text-transform:uppercase;background-color:#143f4d;border-radius:2rem;font-weight:bold;border:none;margin:0 auto 2rem auto;
        &:hover {
            background-color:#99c555;color:#143f4d;
        }
        &:disabled {
            opacity:.7;cursor:not-allowed;
        }
        & .payplug-btn-text {
            display:flex;align-items:center;gap:.5rem;
        }
    }
    & .payplug-footer {
        font-size:.8rem;color:#99c555;text-align:center;
        & img {
            display:block;max-width:10rem;margin:0 auto 1rem auto;
        }
    }
}

@media (max-width:640px) {
    #payplug-payment-block {
        & label {
            width:100%;padding:0;
            & input, & textarea {
                & + i {
                    top:1rem;
                }
            }
        }
    }
}