/* ==========================================
   PAY DETAILS
========================================== */

.pay-wrapper{
    width:100%;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:3rem 1rem 4rem;
    box-sizing:border-box;

}

.pay-card{

    width:100%;
    max-width:600px;

    background:#ffffff;

    border-radius:20px;

    padding:40px;

    border:1px solid #ececec;

    box-shadow:
        0 15px 45px rgba(0,0,0,.08);

}

.pay-card h2{

    margin:0 0 2rem;

    text-align:center;

    color:#2c3e50;

    font-size:30px;

    font-weight:700;

    letter-spacing:.5px;

}

/* ==========================================
   FORM
========================================== */

.pay-card form{

    width:100%;

}

.pay-card form p{

    margin:0 0 1.4rem;

}

.pay-card label{

    display:block;

    margin-bottom:.45rem;

    color:#444;

    font-size:15px;

    font-weight:600;

}

.pay-card input,
.pay-card select,
.pay-card textarea{

    width:100%;

    padding:14px 16px;

    font-size:15px;

    color:#333;

    background:#fafafa;

    border:1px solid #d8d8d8;

    border-radius:12px;

    outline:none;

    box-sizing:border-box;

    transition:
        border-color .25s,
        box-shadow .25s,
        background .25s;

}

.pay-card input:focus,
.pay-card select:focus,
.pay-card textarea:focus{

    background:#fff;

    border-color:#3B5EA8;

    box-shadow:
        0 0 0 4px rgba(59,94,168,.15);

}

.pay-card textarea{

    resize:vertical;

    min-height:140px;

}

/* ==========================================
   BUTTON
========================================== */

.pay-card button{

    width:100%;

    margin-top:1rem;

    padding:16px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:17px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #3B5EA8,
        #5678c7
    );

    transition:
        transform .25s,
        box-shadow .25s,
        opacity .25s;

    box-shadow:
        0 10px 22px rgba(59,94,168,.28);

}

.pay-card button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 32px rgba(59,94,168,.35);

}

.pay-card button:active{

    transform:scale(.98);

}

/* ==========================================
   ERROR MESSAGE
========================================== */

.error-message{

    margin-bottom:1.5rem;

    padding:14px 18px;

    border-radius:12px;

    background:#fdeaea;

    color:#b42318;

    border:1px solid #f3b6b6;

    font-size:15px;

    font-weight:600;

}

/* ==========================================
   DJANGO ERRORS
========================================== */

.errorlist{

    margin:.4rem 0 0;

    padding-left:18px;

    color:#d32f2f;

    font-size:14px;

}

.errorlist li{

    margin:.2rem 0;

}

/* ==========================================
   PLACEHOLDERS
========================================== */

.pay-card input::placeholder,
.pay-card textarea::placeholder{

    color:#999;

}

/* ==========================================
   AUTOFILL
========================================== */

.pay-card input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fafafa inset;

}
/* ==========================================
   TERMS BOX
========================================== */

.terms-box{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:1.5rem 0;

    padding:16px;

    background:#f8faff;

    border:1px solid #d9e6ff;

    border-radius:12px;

    transition:.25s;

}

.terms-box:hover{

    border-color:#3B5EA8;

    box-shadow:0 6px 18px rgba(59,94,168,.12);

}

.terms-box input[type="checkbox"]{

    width:20px;

    height:20px;

    margin-top:3px;

    flex-shrink:0;

    accent-color:#3B5EA8;

    cursor:pointer;

}

.terms-box label{

    flex:1;

    margin:0;

    font-size:15px;

    font-weight:500;

    line-height:1.6;

    color:#444;

    cursor:pointer;

}

.terms-box a{

    color:#3B5EA8;

    font-weight:700;

    text-decoration:none;

}

.terms-box a:hover{

    text-decoration:underline;

}
/* ==========================================
   MOBILE PORTRAIT
   240px - 600px
========================================== */

/* ==========================================
   MOBILE PORTRAIT
   240px - 600px
========================================== */

@media only screen and (min-width:240px) and (max-width:600px) and (orientation:portrait){

    .pay-wrapper{
        margin-top:7rem;
        padding:2rem 1rem 3rem;
    }

    .pay-card{
        max-width:100%;
        padding:22px 18px;
        border-radius:16px;
    }

    .pay-card h2{
        font-size:22px;
    }

    .pay-card textarea{
        min-height:120px;
    }

    .terms-box{
        padding:14px;
        gap:10px;
    }

    .terms-box label{
        font-size:14px;
    }

    .terms-box input[type="checkbox"]{
        width:18px;
        height:18px;
    }

}


/* ==========================================
   MOBILE LANDSCAPE
   481px - 950px
========================================== */

@media only screen and (min-width:481px) and (max-width:950px) and (orientation:landscape){

    .pay-card{
        max-width:520px;
        padding:24px;
    }

}


/* ==========================================
   TABLET PORTRAIT
   601px - 1024px
========================================== */

@media only screen and (min-width:601px) and (max-width:1024px) and (orientation:portrait){

    .pay-card{
        max-width:620px;
        padding:30px;
        margin-top: 4rem;
    }

}


/* ==========================================
   SMALL DESKTOP
   951px - 1366px
========================================== */

@media only screen and (min-width:951px) and (max-width:1366px) and (orientation:landscape){

    .pay-card{
        padding:36px;
        margin-top: 4rem;
    }

}


/* ==========================================
   DESKTOP
   1367px - 1599px
========================================== */

@media only screen and (min-width:1367px) and (max-width:1599px) and (orientation:landscape){

    .pay-card{
        padding:40px;
    }

}


/* ==========================================
   LARGE DESKTOP
   1600px - 1920px
========================================== */

@media only screen and (min-width:1600px) and (max-width:1920px) and (orientation:landscape){

    .pay-card{
        max-width:700px;
        padding:46px;
    }

}


/* ==========================================
   2K / 4K
   1921px+
========================================== */

@media only screen and (min-width:1921px){

    .pay-card{
        max-width:800px;
        padding:55px;
    }

    .pay-card h2{
        font-size:38px;
    }

}