/* =========================================================
   SAGA STORIES
   PMPRO CHECKOUT
========================================================= */


/* =========================================================
   PMPRO CHECKOUT WRAPPER
========================================================= */

.saga-membership-checkout-form {

    width: 100%;
}


/* =========================================================
   PMPRO OUTER CONTAINER
========================================================= */

.saga-membership-checkout-form .pmpro {

    width: 100%;
    margin: 0;
}


/* =========================================================
   PMPRO CARDS
========================================================= */

.saga-membership-checkout-form .pmpro_card {

    background:
        linear-gradient(
            180deg,
            #151520 0%,
            #0d0d16 100%
        );

    border:
        1px solid rgba(217, 70, 239, .14);

    border-radius: 28px;

    padding: 38px;

    color: rgba(255,255,255,.82);

    box-shadow:
        0 18px 45px rgba(0,0,0,.10);

    overflow: hidden;
}


/* =========================================================
   PMPRO HEADINGS
========================================================= */

.saga-membership-checkout-form .pmpro_card h2,
.saga-membership-checkout-form .pmpro_card h3,
.saga-membership-checkout-form .pmpro_card legend {

    color: #f5d0fe !important;

    font-size: 1.35rem;

    font-weight: 700;

    line-height: 1.3;

    border: none !important;

    background: none !important;

    margin-bottom: 22px;

    text-shadow:
        0 0 12px rgba(217,70,239,.16);
}


/* =========================================================
   PMPRO TEXT
========================================================= */

.saga-membership-checkout-form .pmpro_card p,
.saga-membership-checkout-form .pmpro_card li,
.saga-membership-checkout-form .pmpro_card span {

    color:
        rgba(255,255,255,.78);
}


/* =========================================================
   PMPRO LABELS
========================================================= */

.saga-membership-checkout-form .pmpro_card label {

    color:
        rgba(255,255,255,.88) !important;

    font-weight: 600;

    margin-bottom: 8px;
}


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

.saga-membership-checkout-form .pmpro_card input[type="text"],
.saga-membership-checkout-form .pmpro_card input[type="email"],
.saga-membership-checkout-form .pmpro_card input[type="password"],
.saga-membership-checkout-form .pmpro_card input[type="tel"],
.saga-membership-checkout-form .pmpro_card input[type="number"],
.saga-membership-checkout-form .pmpro_card input[type="url"],
.saga-membership-checkout-form .pmpro_card select,
.saga-membership-checkout-form .pmpro_card textarea {

    width: 100%;

    min-height: 56px;

    padding:
        14px 16px;

    background:
        rgba(255,255,255,.045) !important;

    border:
        1px solid rgba(217,70,239,.16) !important;

    border-radius: 14px;

    color:
        #ffffff !important;

    box-shadow:
        none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


/* =========================================================
   FORM FIELD FOCUS
========================================================= */

.saga-membership-checkout-form
.pmpro_card
input[type="text"]:focus,

.saga-membership-checkout-form
.pmpro_card
input[type="email"]:focus,

.saga-membership-checkout-form
.pmpro_card
input[type="password"]:focus,

.saga-membership-checkout-form
.pmpro_card
input[type="tel"]:focus,

.saga-membership-checkout-form
.pmpro_card
input[type="number"]:focus,

.saga-membership-checkout-form
.pmpro_card
select:focus,

.saga-membership-checkout-form
.pmpro_card
textarea:focus {

    outline: none;

    background:
        rgba(255,255,255,.06) !important;

    border-color:
        rgba(217,70,239,.48) !important;

    box-shadow:
        0 0 0 4px
        rgba(217,70,239,.09) !important;
}


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

.saga-membership-checkout-form
.pmpro_card
input::placeholder,

.saga-membership-checkout-form
.pmpro_card
textarea::placeholder {

    color:
        rgba(255,255,255,.34);
}


/* =========================================================
   SELECT OPTIONS
========================================================= */

.saga-membership-checkout-form
.pmpro_card
select option {

    background:
        #151520;

    color:
        #ffffff;
}


/* =========================================================
   DIVIDERS
========================================================= */

.saga-membership-checkout-form
.pmpro_card hr {

    border: 0;

    border-top:
        1px solid
        rgba(217,70,239,.12);

    margin:
        28px 0;
}


/* =========================================================
   PMPRO MESSAGES
========================================================= */

.saga-membership-checkout-form
.pmpro_message {

    background:
        rgba(217,70,239,.08) !important;

    border:
        1px solid
        rgba(217,70,239,.18) !important;

    border-radius:
        16px;

    padding:
        16px 18px;

    color:
        rgba(255,255,255,.84) !important;

    margin-bottom:
        24px;
}


/* =========================================================
   PAYMENT GATEWAY NOTICE
========================================================= */

.saga-membership-checkout-form
.pmpro_card
.pmpro_message {

    color:
        rgba(255,255,255,.88) !important;
}


/* =========================================================
   REQUIRED FIELD MARKER
========================================================= */

.saga-membership-checkout-form
.pmpro_card
.pmpro_asterisk {

    color:
        #f0a4ff !important;
}


/* =========================================================
   CHECKBOXES / RADIOS
========================================================= */

.saga-membership-checkout-form
.pmpro_card
input[type="checkbox"],

.saga-membership-checkout-form
.pmpro_card
input[type="radio"] {

    width: auto;

    min-height: auto;

    accent-color:
        #8b3dff;
}


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

.saga-membership-checkout-form
.pmpro_btn,

.saga-membership-checkout-form
.pmpro_checkout
input[type="submit"],

.saga-membership-checkout-form
input.pmpro_btn {

    width: 100%;

    min-height: 60px;

    padding:
        14px 24px;

    border:
        none !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #a855f7
        ) !important;

    color:
        #ffffff !important;

    font-size:
        1rem;

    font-weight:
        700;

    text-align:
        center;

    box-shadow:
        0 12px 28px
        rgba(124,58,237,.22);

    cursor:
        pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


/* =========================================================
   CHECKOUT BUTTON HOVER
========================================================= */

.saga-membership-checkout-form
.pmpro_btn:hover,

.saga-membership-checkout-form
.pmpro_checkout
input[type="submit"]:hover,

.saga-membership-checkout-form
input.pmpro_btn:hover {

    transform:
        translateY(-2px);

    opacity:
        .96;

    box-shadow:
        0 16px 34px
        rgba(124,58,237,.30);
}


/* =========================================================
   CHECKOUT BUTTON ACTIVE
========================================================= */

.saga-membership-checkout-form
.pmpro_btn:active,

.saga-membership-checkout-form
.pmpro_checkout
input[type="submit"]:active {

    transform:
        translateY(0);
}


/* =========================================================
   PMPRO ACCOUNT NOTICE
========================================================= */

.saga-membership-checkout-form
.pmpro_card
.pmpro_checkout-user-fields {

    margin-bottom:
        0;
}


/* =========================================================
   PMPRO TABLES / ORDER SUMMARY
========================================================= */

.saga-membership-checkout-form
.pmpro_card
table {

    width: 100%;

    border-collapse:
        collapse;

    color:
        rgba(255,255,255,.82);
}


.saga-membership-checkout-form
.pmpro_card
th,

.saga-membership-checkout-form
.pmpro_card
td {

    padding:
        12px 0;

    border-bottom:
        1px solid
        rgba(217,70,239,.10);
}


/* =========================================================
   LINKS
========================================================= */

.saga-membership-checkout-form
.pmpro_card a {

    color:
        #c084fc;

    text-decoration:
        none;
}


.saga-membership-checkout-form
.pmpro_card a:hover {

    color:
        #e9d5ff;

    text-decoration:
        underline;
}


/* =========================================================
   SMALL TEXT
========================================================= */

.saga-membership-checkout-form
.pmpro_card
.pmpro_checkout-fields-description,

.saga-membership-checkout-form
.pmpro_card
.pmpro_checkout-field-description {

    color:
        rgba(255,255,255,.52);

    font-size:
        .9rem;

    line-height:
        1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .saga-membership-checkout-form
    .pmpro_card {

        padding:
            24px;

        border-radius:
            22px;
    }


    .saga-membership-checkout-form
    .pmpro_card h2,
    .saga-membership-checkout-form
    .pmpro_card h3,
    .saga-membership-checkout-form
    .pmpro_card legend {

        font-size:
            1.2rem;
    }


    .saga-membership-checkout-form
    .pmpro_card
    input[type="text"],
    .saga-membership-checkout-form
    .pmpro_card
    input[type="email"],
    .saga-membership-checkout-form
    .pmpro_card
    input[type="password"],
    .saga-membership-checkout-form
    .pmpro_card
    input[type="tel"],
    .saga-membership-checkout-form
    .pmpro_card
    select,
    .saga-membership-checkout-form
    .pmpro_card
    textarea {

        min-height:
            54px;
    }


    .saga-membership-checkout-form
    .pmpro_btn,
    .saga-membership-checkout-form
    .pmpro_checkout
    input[type="submit"] {

        min-height:
            56px;
    }

}