/**
 * Lance's Gym — additions to the ported s2member checkout.css.
 * Covers what the WordPress theme used to supply: the dark page background,
 * Bootstrap 3 float classes, and the form/Stripe-Element styling s2member had.
 */

.lg-checkout {
    background: #1b1b1b;
}

/* checkout.css was written for Bootstrap 3 (.pull-left / .pull-right). */
.checkout-logo.float-left,
.checkout-logo {
    float: left;
    /* checkout.css pulls the logo up 12px; that must not survive into a
       clipping context, or the top of the wordmark gets cut off. */
    margin-top: 0;
}
.security-logos.float-right,
.security-logos {
    float: right;
}

/* Clear the floats WITHOUT establishing a BFC — `overflow:auto` here would
   crop anything sitting above the column's content box. */
.checkout-header .col-sm-12::after {
    content: '';
    display: table;
    clear: both;
}
.checkout-logo img,
.security-logos img,
.checkout-progress-icon img {
    max-width: 100%;
    height: auto;
}

.checkout-progress-icon {
    padding: 0 15px;
}

/* ---------------------------------------------------------------- forms -- */

.checkout-panel label {
    display: block;
    color: #4a4a4a;
    font-weight: 500;
    margin: 14px 0 4px;
}

.checkout-panel .form-control {
    border: 1px solid #ccd0d2;
    border-radius: 4px;
    color: #32325d;
    height: auto;
    padding: 10px 12px;
}

.checkout-panel .form-control:focus {
    border-color: #006bff;
    box-shadow: 0 0 0 2px rgba(0, 107, 255, 0.15);
}

.checkout-field-readonly .form-control:disabled {
    background: #e9ecef;
}

.checkout-section-title {
    font-size: 1.35em;
    font-weight: 700;
    color: #1a1a1a;
    border-bottom: 2px solid #e3e3e3;
    padding-bottom: 8px;
    margin: 35px 0 10px;
}

.checkout-section-icon {
    float: right;
    font-size: 1.1em;
    line-height: 1;
}

.more-info-inline {
    font-weight: 400;
    font-size: 85%;
    color: #8a8a8a;
}

.checkout-liability {
    margin-top: 25px;
}

.checkout-liability .form-check-label {
    color: #4a4a4a;
    font-weight: 400;
    margin-top: 0;
    display: inline;
}

/* ------------------------------------------------------- payment element -- */

#payment-element {
    margin-top: 10px;
    min-height: 60px;
}

.payment-element-loading {
    color: #8a8a8a;
    font-size: 0.95em;
    padding: 18px 0;
}

#checkout-error {
    font-size: 1rem;
}

.checkout-cancel-note {
    font-size: 0.85em !important;
    margin-top: 18px;
}

#payment-submit:disabled {
    opacity: 0.7;
}

/* -------------------------------------------------- account-status login -- */

.checkout-login-title {
    font-size: 1.5em;
    font-weight: 300;
    color: #2d2d2d;
    margin-bottom: 12px;
}

.checkout-login-links {
    margin: 8px 0 12px;
    font-size: 0.95em;
}

.checkout-login-links a {
    color: #d60409;
}

.checkout-remember {
    margin-bottom: 18px;
}

.checkout-remember .form-check-label {
    color: #4a4a4a;
    font-weight: 400;
    margin: 0;
    display: inline;
}

.checkout-login-form .btn-block {
    border-radius: 2rem;
}

.checkout-panel-continue .btn {
    border-radius: 2rem;
    padding-left: 32px;
    padding-right: 32px;
}

/* --------------------------------------------------------------- modal --- */

#email-conflict .modal-body p {
    color: #4a4a4a;
    font-size: 1.1em;
}

@media (max-width: 767px) {
    .checkout-panel {
        padding: 25px;
    }
    .checkout-panel-continue {
        padding: 25px;
    }
    .checkout-page-title {
        font-size: 2em;
    }
    .checkout-account-status-inner-title {
        font-size: 1.7em;
    }
}