/* -------------------------------------------
	Checkout Page
    - Login form & Coupons
    - Billing details
    - Order totals
---------------------------------------------- */

@import '../config';
@import '../mixins';
@import '../direction';

.woocommerce-checkout {
    .main {
        padding-top: 4rem;
        padding-bottom: 8rem;
    }
}

// Login form & Coupons
.woocommerce-form-coupon-toggle,
.woocommerce-form-login-toggle {
    margin-bottom: 0.8rem;

    .showcoupon,
    .showlogin {
        color: var(--alpha-change-color-dark-1);
        font-weight: 600;
        text-transform: uppercase;
    }
}

.woocommerce-form-login-toggle+.woocommerce-form-login {
    padding: 3rem;
    border: 1px solid var(--alpha-change-border-color);
    border-top-width: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    .button {
        font-weight: 600;
        font-size: 1.4rem;
        padding: 0.929em 1.934em;
        background-color: var(--alpha-change-color-light-2);
        border: 1px solid var(--alpha-change-color-light-2);
        color: var(--alpha-change-color-dark-1);

        &:hover {
            border-color: var(--alpha-change-border-color);
            background-color: var(--alpha-change-border-color);
        }
    }

    >p:first-child {
        width: 100%;
    }

    p:not(.lost-password),
    label {
        color: var(--alpha-body-color);
    }

    .form-footer {
        justify-content: flex-start;

        .lost_password {
            color: var(--alpha-primary-color);

            &:hover {
                color: var(--alpha-change-color-dark-1);
            }
        }
    }
}


.woocommerce-form-login label[for="rememberme"] {
    margin-#{$right}: 2rem;
}

.woocommerce-checkout .woocommerce {

    .login {
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .form-footer {
        width: 100%;
    }

    .login .button {
        width: auto;
    }

    .create-account p:last-of-type {
        margin-bottom: 0;
    }
}

@include mq(sm) {

    .woocommerce-checkout .login {
        .form-row-first {
            padding-#{$right}: 10px;
        }

        .form-row-last {
            padding-#{$left}: 10px;
        }
    }
}

.woocommerce-form-coupon-toggle~.checkout {
    margin-top: 2.5rem;
}

.checkout_coupon {
    margin-bottom: 2rem;
    padding: 3rem;
    border: 1px solid var(--alpha-change-border-color);
    border-top-width: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;

    .form-coupon {
        max-width: 40rem;
        height: 4.4rem;
    }

    .btn-default {
        border-color: var(--alpha-grey-color);
        background-color: transparent;
        padding: 1rem 3.9rem;

        &:hover {
            color: var(--alpha-change-color-light-1);
            border-color: var(--alpha-change-color-dark-1);
            background-color: var(--alpha-change-color-dark-1);
        }
    }

    p {
        color: var(--alpha-body-color);
    }
}

// Billing details
.woocommerce-billing-fields {
    margin-bottom: 2.2rem;

    h3 {
        margin-bottom: .8rem;
    }

    #billing_address_1_field {
        margin-bottom: 1rem;
    }
}

.woocommerce-billing-fields__field-wrapper .form-row {
    margin-bottom: 1rem;

    &.validate-email {
        margin-bottom: 2rem;
    }
}

.woocommerce-account-fields {
    margin-bottom: 2.2rem;
}

.woocommerce-billing-fields,
.woocommerce-additional-fields {
    h3 {
        margin-bottom: 1.8rem;
    }
}

.woocommerce-shipping-fields {
    margin-bottom: 4rem;

    h3 {
        color: inherit;
        font-size: var(--alpha-body-font-size);
        font-weight: 400;
        text-transform: none;
    }
}

.woocommerce-shipping-fields__field-wrapper .form-row {
    margin-bottom: 1rem;
}

.checkout h3:not(#ship-to-different-address) {
    margin-bottom: 2.7rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: .73;
    text-transform: uppercase;
}

textarea#order_comments {
    padding-top: 1.5rem;
}

// Order totals
.woocommerce-checkout-review-order {
    margin-bottom: 3rem;

    h4 {
        font-family: var(--alpha-body-font-family), sans-serif;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--alpha-change-color-dark-1);
        line-height: 1;
    }
}

.woocommerce-checkout-review-order-table {
    line-height: 2;

    thead th.product-total {
        text-indent: -9999px;
        padding-#{$right}: 0;
    }

    .cart_item td:last-child {
        display: block;
    }

    .cart_item>.product-name {
        font-weight: 400;
        color: var(--alpha-body-color);
    }

    td,
    th {
        padding: 1.1rem 0 0;
        border-top: none;
    }

    thead {
        th {
            padding: 0 0 1.5rem;
            line-height: 12px;
            border-bottom: 1px solid var(--alpha-change-border-color);
        }
    }

    .woocommerce-shipping-totals h4 {
        font-family: var(--alpha-body-font-family), sans-serif;
        margin-bottom: 1.5rem;
        line-height: 1.2rem;
    }

    .order-total th {
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--alpha-change-color-dark-1);
        line-height: 1;
    }

    .cart-subtotal {

        th,
        td {
            padding: 1rem 0;
        }
    }

    .order-total {

        th,
        td {
            padding: 1.5rem 0;
        }
    }

    .product-name strong {
        font-weight: inherit;
    }
}

.woocommerce-shipping-totals td {
    padding-bottom: 2.4rem;
}

.shipping-hidden .shipping {
    display: none;
}

.woocommerce-shipping-methods,
.wc_payment_methods {
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-checkout-payment {
    padding-top: 3rem;
    color: var(--alpha-body-color);

    .order_review & {
        padding-top: 3rem;
    }

    .wc_payment_methods {
        padding-bottom: 3rem;
        border-bottom: 1px solid var(--alpha-change-border-color);
    }

    li:last-child {
        margin-bottom: 0;
    }
}

.wc_payment_methods {
    .payment_box p {
        margin-bottom: 0;
    }
}

.wc_payment_method label {
    position: relative;
    font-weight: 400;
    cursor: pointer;
}

.payment_box {
    padding-top: 0.7rem;
    padding-#{$left}: 2.9rem;

    p {
        font-family: var(--alpha-body-font-family, 'sans-serif');
        line-height: 1.7;
    }
}

.payment_method_paypal img {
    vertical-align: middle;
    max-width: 190px;
}

a.about_paypal {
    margin-#{$left}: .8rem;
    color: var(--alpha-primary-color);

    &:hover {
        text-decoration: underline;
    }
}

.woocommerce-terms-and-conditions-wrapper {
    padding-top: 3rem;

    p {
        margin-bottom: 3rem;
    }

    .custom-input .woocommerce-terms-and-conditions-checkbox-text {
        line-height: 1.4;

        &::before {
            top: auto;
            transform: none;
        }
    }
}

.woocommerce-privacy-policy-text p {
    font-size: 1.3rem;
    line-height: 1.85;
}

.woocommerce-checkout-review-order .place-order,
.payment-box {
    .button {
        width: 100%;
    }
}

.woocommerce-checkout-review-order .button {
    padding: 1.4rem 2.9rem;
    border-color: var(--alpha-change-color-dark-1);
    background-color: var(--alpha-change-color-dark-1);

    &:hover,
    &:focus {
        border-color: var(--alpha-change-color-dark-1-hover);
        background-color: var(--alpha-change-color-dark-1-hover);
    }
}