/* =========================================================
   ONLINE PAYMENT FORM
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP
   1025px and above
   --------------------------------------------------------- */

@media (min-width: 1025px)
{
    .fa-outer-border
    {
        width: 100%;
        padding: 40px 0;
        background-color: #f2f2f2;
        box-sizing: border-box;
    }


    .payment-header
    {
        width: 600px;
        margin: 0 auto 25px auto;
        text-align: center;
    }


    .payment-header h2
    {
        margin: 0;
        font-size: 28px;
    }


    .pay-form-container
    {
        width: 600px;
        margin: 0 auto;
        padding: 30px;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 6px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }


    #payment-form
    {
        width: 100%;
    }


    #payment-form label
    {
        display: block;
        margin-bottom: 7px;
        font-size: 16px;
        font-weight: 600;
    }


    #payment-form input
    {
        display: block;
        width: 100%;
        height: 42px;
        margin-bottom: 20px;
        padding: 8px 12px;
        border: 1px solid #bbbbbb;
        border-radius: 4px;
        font-size: 16px;
        box-sizing: border-box;
    }


    #payment-form input:focus
    {
        outline: none;
        border-color: #777777;
    }


    .pay-button
    {
        display: block;
        width: 100%;
        height: 45px;
        margin-top: 10px;
        border: none;
        border-radius: 4px;
        background-color: #8b0000;
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
    }


    .pay-button:hover
    {
        opacity: 0.9;
    }
    .home-line-button
    {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        margin-top: 10px;
        border: none;
        border-radius: 4px;
        background-color: #8b0000;
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
    }
    .home-line-button:hover
    {
        opacity: 0.9;
    }
}


/* ---------------------------------------------------------
   TABLET
   768px to 1024px
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px)
{
    .fa-outer-border
    {
        width: 100%;
        padding: 35px 0;
        background-color: #f2f2f2;
        box-sizing: border-box;
    }


    .payment-header
    {
        width: 80%;
        margin: 0 auto 25px auto;
        text-align: center;
    }


    .payment-header h2
    {
        margin: 0;
        font-size: 26px;
    }


    .pay-form-container
    {
        width: 80%;
        margin: 0 auto;
        padding: 28px;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 6px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }


    #payment-form
    {
        width: 100%;
    }


    #payment-form label
    {
        display: block;
        margin-bottom: 7px;
        font-size: 16px;
        font-weight: 600;
    }


    #payment-form input
    {
        display: block;
        width: 100%;
        height: 42px;
        margin-bottom: 20px;
        padding: 8px 12px;
        border: 1px solid #bbbbbb;
        border-radius: 4px;
        font-size: 16px;
        box-sizing: border-box;
    }


    #payment-form input:focus
    {
        outline: none;
        border-color: #777777;
    }


    .pay-button
    {
        display: block;
        width: 100%;
        height: 45px;
        margin-top: 10px;
        border: none;
        border-radius: 4px;
        background-color: #8b0000;
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
    }
    .pay-button:hover
    {
        opacity: 0.9;
    }
    .home-line-button
    {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        margin-top: 10px;
        border: none;
        border-radius: 4px;
        background-color: #8b0000;
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
    }
    .home-line-button:hover
    {
        opacity: 0.9;
    }
}


/* ---------------------------------------------------------
   MOBILE
   767px and below
   --------------------------------------------------------- */

@media (max-width: 767px)
{
    .fa-outer-border
    {
        width: 100%;
        padding: 25px 0;
        background-color: #f2f2f2;
        box-sizing: border-box;
    }


    .payment-header
    {
        width: 90%;
        margin: 0 auto 20px auto;
        text-align: center;
    }


    .payment-header h2
    {
        margin: 0;
        font-size: 22px;
        line-height: 1.3;
    }


    .pay-form-container
    {
        width: 90%;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
        box-sizing: border-box;
    }


    #payment-form
    {
        width: 100%;
    }


    #payment-form label
    {
        display: block;
        margin-bottom: 6px;
        font-size: 15px;
        font-weight: 600;
    }


    #payment-form input
    {
        display: block;
        width: 100%;
        height: 42px;
        margin-bottom: 18px;
        padding: 8px 10px;
        border: 1px solid #bbbbbb;
        border-radius: 4px;
        font-size: 16px;
        box-sizing: border-box;
    }


    #payment-form input:focus
    {
        outline: none;
        border-color: #777777;
    }


    .pay-button
    {
        display: block;
        width: 100%;
        height: 45px;
        margin-top: 8px;
        border: none;
        border-radius: 4px;
        background-color: #8b0000;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    .pay-button
    {
        opacity: 0.9;
    }
    .home-line-button
    {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 45px;
        margin-top: 8px;
        border: none;
        border-radius: 4px;
        background-color: #8b0000;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    .home-line-button:hover
    {
        opacity: 0.9;
    }
}