/*==================================================
JP ORGANIC CHECKOUT
PART 1 : LAYOUT + FORM
==================================================*/

/*------------------------------------
Page
------------------------------------*/

.woocommerce-checkout {

    background: #f8f5ee;



}

.woocommerce-checkout .woocommerce {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 15px;

}


/*------------------------------------
Checkout Layout
------------------------------------*/

.woocommerce-checkout form.checkout {

    display: flex;

    flex-wrap: wrap;

    gap: 40px;

    align-items: flex-start;

}


/*------------------------------------
Left Column
------------------------------------*/

.woocommerce-checkout #customer_details {

    flex: 0 0 calc(65% - 20px);

    max-width: calc(65% - 20px);

}


/*------------------------------------
Right Column
------------------------------------*/

.woocommerce-checkout #order_review_heading {

    display: none;

}

.woocommerce-checkout #order_review {

    flex: 0 0 calc(35% - 20px);

    max-width: calc(35% - 20px);

    background: #fff;

    padding: 30px;

    border-radius: 20px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);

    position: sticky;

    top: 110px;

    align-self: flex-start;

}


/*------------------------------------
Cards
------------------------------------*/

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.checkout_coupon,
.woocommerce-form-login,
.woocommerce-checkout #payment {

    background: #fff;

    padding: 30px;

    border-radius: 20px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);

    margin-bottom: 30px;

}


/*------------------------------------
Section Heading
------------------------------------*/

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {

    font-size: 28px;

    font-weight: 700;

    color: #222;

    margin-bottom: 25px;

}


/*------------------------------------
Rows
------------------------------------*/

.woocommerce form .form-row {

    margin-bottom: 20px;

    padding: 0;

}

.woocommerce form .form-row label {

    display: block;

    margin-bottom: 8px;

    font-size: 15px;

    font-weight: 600;

    color: #333;

}


/*------------------------------------
Inputs
------------------------------------*/

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout select {

    width: 100%;

    height: 54px;

    border: 1px solid #ddd;

    border-radius: 12px;

    padding: 0 16px;

    background: #fff;

    transition: .3s;

    box-shadow: none;

}


.woocommerce-checkout textarea {

    width: 100%;

    min-height: 120px;

    border: 1px solid #ddd;

    border-radius: 12px;

    padding: 15px;

    resize: vertical;

    transition: .3s;

}


/*------------------------------------
Placeholder
------------------------------------*/

.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {

    color: #999;

}


/*------------------------------------
Focus
------------------------------------*/

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {

    border-color: #3f7d20;

    outline: none;

    box-shadow: 0 0 0 4px rgba(63, 125, 32, .12);

}


/*------------------------------------
Select2
------------------------------------*/

.woocommerce-checkout .select2-container {

    width: 100% !important;

}

.woocommerce-checkout .select2-selection--single {

    height: 54px !important;

    border: 1px solid #ddd !important;

    border-radius: 12px !important;

}

.woocommerce-checkout .select2-selection__rendered {

    line-height: 54px !important;

    padding-left: 16px !important;

}

.woocommerce-checkout .select2-selection__arrow {

    height: 54px !important;

}


/*------------------------------------
Checkbox
------------------------------------*/

.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {

    width: 18px;

    height: 18px;

    margin-right: 8px;

    accent-color: #3f7d20;

}


/*------------------------------------
Required Mark
------------------------------------*/

.woocommerce form .required {

    color: #d62828;

}

/*==================================================
JP ORGANIC CHECKOUT
PART 2 : ORDER SUMMARY + PAYMENT
==================================================*/


/*------------------------------------
Order Review Title
------------------------------------*/

.woocommerce-checkout-review-order h3,
#order_review h3 {

    font-size: 28px;

    font-weight: 700;

    color: #222;

    margin-bottom: 25px;

}


/*------------------------------------
Order Table
------------------------------------*/

.woocommerce-checkout .shop_table {

    width: 100%;

    border: none;

    border-collapse: collapse;

    margin: 0;

}

.woocommerce-checkout .shop_table th {

    padding: 16px 0;

    font-size: 15px;

    font-weight: 600;

    color: #444;

    border-bottom: 1px solid #ececec;

}

.woocommerce-checkout .shop_table td {

    padding: 16px 0;

    font-size: 15px;

    border-bottom: 1px solid #ececec;

    vertical-align: middle;

}

.woocommerce-checkout .shop_table tfoot th {

    font-weight: 700;

    color: #222;

}

.woocommerce-checkout .shop_table tfoot td {

    font-size: 18px;

    font-weight: 700;

    color: #3f7d20;

}


/*------------------------------------
Product Name
------------------------------------*/

.woocommerce-checkout .product-name {

    font-weight: 600;

    color: #222;

}

.woocommerce-checkout .product-name strong {

    color: #3f7d20;

}


/*------------------------------------
Subtotal / Total
------------------------------------*/

.woocommerce-checkout .cart-subtotal td,
.woocommerce-checkout .order-total td {

    text-align: right;

}

.woocommerce-checkout .order-total th {

    font-size: 18px;

}

.woocommerce-checkout .order-total td {

    font-size: 22px;

    color: #3f7d20;

}


/*------------------------------------
Payment Box
------------------------------------*/

.woocommerce-checkout #payment {

    margin-top: 30px;

    border: none;

    background: #fff;

}

.woocommerce-checkout #payment ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.woocommerce-checkout #payment ul li {

    border: 1px solid #e6e6e6;

    border-radius: 14px;

    padding: 18px;

    margin-bottom: 15px;

    transition: .3s;

}

.woocommerce-checkout #payment ul li:hover {

    border-color: #3f7d20;

}

.woocommerce-checkout #payment label {

    font-weight: 600;

    color: #222;

}


/*------------------------------------
Payment Description
------------------------------------*/

.woocommerce-checkout #payment .payment_box {

    background: #f8f5ee;

    border: none;

    border-radius: 12px;

    padding: 18px;

    margin-top: 15px;

    color: #555;

    line-height: 1.7;

}


/*------------------------------------
Privacy Policy
------------------------------------*/

.woocommerce-privacy-policy-text {

    font-size: 14px;

    line-height: 1.7;

    color: #666;

    margin-bottom: 20px;

}


/*------------------------------------
Place Order Button
------------------------------------*/

#place_order,
.wc-block-components-checkout-place-order-button {

    width: 100% !important;

    height: 58px;

    border: none;

    border-radius: 50px;

    background: #3f7d20 !important;

    color: #fff !important;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    transition: .35s;

}

#place_order:hover,
.wc-block-components-checkout-place-order-button:hover {

    background: #2f6518 !important;

    transform: translateY(-2px);

}


/*------------------------------------
Coupon Box
------------------------------------*/

.checkout_coupon {

    margin-bottom: 30px;

}

.checkout_coupon p {

    margin-bottom: 15px;

}

.checkout_coupon input {

    margin-bottom: 15px;

}

.checkout_coupon button {

    height: 52px;

    padding: 0 30px;

    border: none;

    border-radius: 50px;

    background: #3f7d20;

    color: #fff;

    font-weight: 600;

}


/*------------------------------------
Login Form
------------------------------------*/

.woocommerce-form-login p {

    margin-bottom: 18px;

}

.woocommerce-form-login .button {

    height: 52px;

    padding: 0 30px;

    border: none;

    border-radius: 50px;

    background: #3f7d20;

    color: #fff;

    font-weight: 600;

}


/*------------------------------------
Notice
------------------------------------*/

.woocommerce-info,
.woocommerce-message {

    border: none;

    border-left: 4px solid #3f7d20;

    background: #edf7e8;

    border-radius: 12px;

    padding: 18px 20px;

    margin-bottom: 30px;

}

.woocommerce-error {

    border: none;

    border-left: 4px solid #d62828;

    background: #fff0f0;

    border-radius: 12px;

    padding: 18px 20px;

    margin-bottom: 30px;

}


/*------------------------------------
Shipping Method
------------------------------------*/

.woocommerce-checkout .shipping {

    background: #fafafa;

}

.woocommerce-checkout .shipping ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.woocommerce-checkout .shipping li {

    margin-bottom: 12px;

}

.woocommerce-checkout .shipping label {

    font-weight: 500;

}


/*------------------------------------
Terms
------------------------------------*/

.woocommerce-terms-and-conditions-wrapper {

    margin: 20px 0;

}

.woocommerce-terms-and-conditions-wrapper label {

    display: flex;

    align-items: center;

    gap: 10px;

    line-height: 1.6;

}

/*==================================================
JP ORGANIC CHECKOUT
PART 3 : FINAL POLISH
==================================================*/


/*------------------------------------
Sticky Order Review
------------------------------------*/

.woocommerce-checkout #order_review {

    position: sticky;

    top: 110px;

    align-self: flex-start;

}


/*------------------------------------
Trust Box
------------------------------------*/

.jp-checkout-trust {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid #ececec;

}

.jp-checkout-trust ul {

    margin: 0;

    padding: 0;

    list-style: none;

}

.jp-checkout-trust li {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #555;

    font-size: 15px;

}


/*------------------------------------
Order Total Highlight
------------------------------------*/

.woocommerce-checkout .order-total {

    background: #f8f5ee;

}

.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td {

    padding: 18px;

}


/*------------------------------------
Input Validation
------------------------------------*/

.woocommerce-invalid input,
.woocommerce-invalid select,
.woocommerce-invalid textarea {

    border-color: #d62828 !important;

}

.woocommerce-validated input,
.woocommerce-validated select,
.woocommerce-validated textarea {

    border-color: #3f7d20 !important;

}


/*------------------------------------
Required Mark
------------------------------------*/

.required {

    color: #d62828;

}


/*------------------------------------
Disabled Button
------------------------------------*/

#place_order:disabled {

    opacity: .6;

    cursor: not-allowed;

}


/*------------------------------------
Loading Overlay
------------------------------------*/

.woocommerce-checkout.processing {

    opacity: .7;

    pointer-events: none;

}


/*------------------------------------
Autofill Fix
------------------------------------*/

input:-webkit-autofill {

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

}


/*------------------------------------
Links
------------------------------------*/

.woocommerce-checkout a {

    color: #3f7d20;

    text-decoration: none;

}

.woocommerce-checkout a:hover {

    text-decoration: underline;

}


/*------------------------------------
Order Notes
------------------------------------*/

#order_comments {

    min-height: 140px;

}


/*------------------------------------
Coupon Toggle
------------------------------------*/

.showcoupon {

    font-weight: 600;

}


/*------------------------------------
Login Toggle
------------------------------------*/

.showlogin {

    font-weight: 600;

}


/*------------------------------------
Radio Buttons
------------------------------------*/

input[type="radio"] {

    accent-color: #3f7d20;

}


/*------------------------------------
Checkbox
------------------------------------*/

input[type="checkbox"] {

    accent-color: #3f7d20;

}


/*------------------------------------
Responsive
------------------------------------*/

@media (max-width:991px) {

    .woocommerce-checkout form.checkout {

        display: block;

    }

    .woocommerce-checkout #customer_details {

        width: 100%;

        max-width: 100%;

    }

    .woocommerce-checkout #order_review {

        width: 100%;

        max-width: 100%;

        margin-top: 30px;

        position: relative;

        top: 0;

    }

}


@media (max-width:767px) {

    .woocommerce-checkout {

        padding: 30px 0;

    }

    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields,
    #payment,
    #order_review,
    .checkout_coupon,
    .woocommerce-form-login {

        padding: 20px;

        border-radius: 16px;

    }

    .woocommerce-billing-fields h3,
    .woocommerce-shipping-fields h3 {

        font-size: 24px;

    }

    .woocommerce-checkout input[type="text"],
    .woocommerce-checkout input[type="email"],
    .woocommerce-checkout input[type="tel"],
    .woocommerce-checkout input[type="password"],
    .woocommerce-checkout select {

        height: 50px;

    }

    #place_order {

        height: 54px;

        font-size: 17px;

    }

}


@media (max-width:575px) {

    .woocommerce-checkout .shop_table th,
    .woocommerce-checkout .shop_table td {

        padding: 12px 0;

        font-size: 14px;

    }

    .woocommerce-checkout .order-total td {

        font-size: 20px;

    }

}