/*!
 * ==================================================
 * Progres Themes - Checkout Engine
 * Version : 1.0.0
 * Status  : Stable
 *
 * Desktop Layout   : Final
 * Mobile Layout    : Final
 * Payment UI       : Planned (v1.1)
 * ==================================================
 */

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

.woocommerce-checkout{

    padding:20px 0 60px;

}

.woocommerce-checkout h3{

    margin:0 0 24px;

    font-size:32px;

    font-weight:700;

}

/*======================================
CHECKOUT CARD
======================================*/

.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-additional-fields,
.woocommerce-checkout #payment{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:28px;

    margin-bottom:28px;

}

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

.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{

    width:100%;

    height:50px;

    padding:0 16px;

    border:1px solid #D8DEE8;

    border-radius:12px;

    background:#fff;

    transition:.25s;

    font-size:15px;

}

.woocommerce form .form-row textarea{

    min-height:120px;

    padding:16px;

}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.10);

    outline:none;

}

.woocommerce form .form-row label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:var(--dark);

}

.woocommerce-form-coupon-toggle{

    margin-bottom:28px;

}

.woocommerce-info{

    border:none;

    border-left:4px solid var(--primary);

    border-radius:12px;

    background:#F8FAFC;

    padding:18px 20px;

}

/*======================================
ORDER REVIEW
======================================*/

.woocommerce table.shop_table{

    border:1px solid var(--border);

    border-radius:16px;

    overflow:hidden;

    border-collapse:separate;

    border-spacing:0;

    background:#fff;

}

.woocommerce table.shop_table th{

    background:#F8FAFC;

    padding:16px 20px;

    font-weight:600;

}

.woocommerce table.shop_table td{

    padding:18px 20px;

}

.woocommerce table.shop_table tr:last-child td{

    font-weight:700;

}

/*======================================
PAYMENT METHODS v2
======================================*/

/* Payment Container */

#payment{

    margin-top:30px;

}

/* Payment List */

#payment ul.payment_methods{

    margin:0;

    padding:0;

    border:none;

    background:transparent;

}

/* Payment Card */

#payment ul.payment_methods > li{

    margin:0 0 14px;

    padding:18px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    transition:

        border-color .25s,

        box-shadow .25s,

        transform .25s,

        background .25s;

}

/* Last Card */

#payment ul.payment_methods > li:last-child{

    margin-bottom:0;

}

/* Hover */

#payment ul.payment_methods > li:hover{

    border-color:var(--primary);

    box-shadow:0 8px 24px rgba(37,99,235,.08);
    
    transform:translateY(-2px);

}

/* Active */

#payment ul.payment_methods > li:has(input:checked){

    background:#fbfdff;

    border-color:var(--primary);

    box-shadow:0 8px 24px rgba(37,99,235,.08);

}

/* Logo */

#payment ul.payment_methods > li > label img{

    margin-left:auto;

    margin-right:0;

    margin-bottom:0;

    display:inline-block;

    vertical-align:middle;

    max-height:30px !important;

    width:auto;

}

#payment ul.payment_methods input[type="radio"]{

    transform:scale(1.15);

    accent-color:var(--primary);

    margin-right:12px;

}

/*======================================
CHECKOUT TRUST CARD
======================================*/

.progres-checkout-trust{

    background:#f8fbff;

    border:1px solid #dbeafe;

    border-radius:16px;

    padding:28px;

    position:sticky;

    top:30px;

}

.progres-checkout-trust h3{

    margin:0 0 24px;

    font-size:24px;

}

.progres-checkout-trust ul{

    list-style:none;

    margin:0;

    padding:0;

}

.progres-checkout-trust li{

    margin-bottom:22px;

}

.progres-checkout-trust strong{

    display:block;

    margin-bottom:6px;

    color:#0f172a;

}

.progres-checkout-trust span{

    display:block;

    color:#64748b;

    line-height:1.7;

    font-size:15px;

}

.checkout-secure{

    margin-top:28px;

    padding-top:22px;

    border-top:1px solid #dbeafe;

}

.checkout-secure strong{

    display:block;

    margin-bottom:8px;

}

.checkout-secure p{

    margin:0;

    color:#64748b;

}

/*======================================
TRUST CARD
======================================*/

.trust-card-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:28px;

}

.trust-card-header svg{

    color:var(--primary);

    flex-shrink:0;

}

.trust-card-header h3{

    margin:0;

    font-size:24px;

}

.trust-list{

    list-style:none;

    margin:0;

    padding:0;

}

.trust-list li{

    display:flex;

    gap:16px;

    margin-bottom:26px;

}

.trust-list li svg{

    color:var(--primary);

    flex-shrink:0;

    margin-top:3px;

}

.trust-list strong{

    display:block;

    margin-bottom:6px;

}

.trust-list span{

    display:block;

    color:#64748b;

    line-height:1.7;

}

.checkout-secure{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.checkout-secure svg{

    color:var(--primary);

    flex-shrink:0;

}

/*======================================
CHECKOUT COUPON
======================================*/

.woocommerce-form-coupon-toggle{

    margin-bottom:30px;

}

.woocommerce-info{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 22px;
    background:#f8fbff;
    border:1px solid #dbeafe;
    border-left:4px solid var(--primary);
    border-radius:12px;
    color:#334155;
}

.woocommerce-info::before{
    display:none;
}

.woocommerce-info::before{

    color:var(--primary);

    font-size:20px;

}

.woocommerce-info a{

    font-weight:600;

    color:var(--primary);

}

.woocommerce-info a:hover{

    text-decoration:underline;

}

/*======================================
COUPON FORM
======================================*/

.checkout_coupon{

    margin-top:20px;

    padding:24px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:12px;

}

.checkout_coupon p{

    margin-bottom:16px;

}

.checkout_coupon input{

    height:48px;

    border-radius:10px;

}

.checkout_coupon button{

    height:48px;

    border-radius:10px;

}

/*======================================
PROGRES TERMS
======================================*/

.progres-terms{

    margin-top:24px;

}

.progres-terms-label{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    font-weight:500;

}

.progres-terms-label input{

    width:18px;

    height:18px;

    margin:0;

    flex-shrink:0;

    accent-color:var(--primary);

}

.progres-terms-label span{

    line-height:1.7;

}

.progres-terms-label a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}

.progres-terms-label a:hover{

    text-decoration:underline;

}

/*======================================
CHECKOUT FIXES
Version 1.0.1
======================================*/

/* Trust Card Icons */

.trust-icon{

    width:22px;

    height:22px;

    flex-shrink:0;

    color:var(--primary);

}

.trust-card-header{

    display:flex;

    align-items:center;

    gap:14px;

}

.trust-list li{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.checkout-secure{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

/*==================================================
Terms Checkbox Fix
==================================================*/

.progres-terms{

    margin-top:24px;

}

.progres-terms .progres-terms-label{

    display:flex !important;

    align-items:flex-start !important;

    gap:12px;

    cursor:pointer;

    margin:0;

}

.progres-terms .progres-terms-label input[type="checkbox"]{

    width:18px;

    height:18px;

    margin:3px 0 0;

    flex-shrink:0;

    display:block;

}

.progres-terms .woocommerce-terms-and-conditions-checkbox-text{

    display:block;

    line-height:1.7;

    color:var(--dark);

}

.progres-terms a{

    font-weight:600;

}

/*==================================================
CREATE ACCOUNT
==================================================*/

.create-account{

    margin:24px 0;

}

.create-account label.checkbox{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0;

    cursor:pointer;

}

.create-account input[type="checkbox"]{

    width:18px;

    height:18px;

    margin:0;

    flex-shrink:0;

}

.create-account label span{

    line-height:1.5;

    font-weight:600;

}

/*==================================================
CREATE ACCOUNT FIX
==================================================*/

.woocommerce-checkout p.create-account{

    margin:24px 0;

}

.woocommerce-checkout p.create-account label.woocommerce-form__label-for-checkbox{

    display:flex !important;

    align-items:center !important;

    gap:12px;

    cursor:pointer;

}

.woocommerce-checkout p.create-account input#createaccount{

    width:18px;

    height:18px;

    margin:0;

    flex:0 0 18px;

}

.woocommerce-checkout p.create-account label span{

    display:block;

    margin:0;

    line-height:1.5;

}

/*======================================
CHECKOUT LAYOUT (Mobile)
======================================*/

@media (max-width:768px){

    .woocommerce-checkout form.checkout .col2-set,
    .woocommerce-checkout form.checkout #customer_details{

        display:block !important;

    }

    .woocommerce-checkout form.checkout .col-1,
    .woocommerce-checkout form.checkout .col-2{

        width:100% !important;

        float:none !important;

        max-width:100% !important;

        margin:0 !important;

    }

    .woocommerce-checkout form.checkout .form-row-first,
    .woocommerce-checkout form.checkout .form-row-last{

        width:100% !important;

        float:none !important;

        clear:both;

    }

}


/*======================================
ORDER REVIEW (Mobile UI)
======================================*/

@media (max-width:768px){

    .woocommerce-checkout-review-order-table{

        width:100%;
        border-collapse:collapse;
    }

    .woocommerce-checkout-review-order-table thead{

        display:none;
    }

    .woocommerce-checkout-review-order-table tbody,
    .woocommerce-checkout-review-order-table tfoot{

        display:block;
    }

    .woocommerce-checkout-review-order-table tr{

        display:block;
        padding:16px 0;
        border-bottom:1px solid var(--progres-border-color, #e5e7eb);
    }

    .woocommerce-checkout-review-order-table tr:last-child{

        border-bottom:none;
    }

    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td{

        display:block;
        width:100%;
        padding:0;
        border:none;
        text-align:left;
    }

}

@media (max-width:768px){

    .woocommerce-checkout-review-order-table td{

        margin-top:8px;
    }

    .woocommerce-checkout-review-order-table .product-name{

        font-weight:600;
        line-height:1.6;
    }

    .woocommerce-checkout-review-order-table .product-quantity{

        display:block;
        margin-top:4px;
        color:#6b7280;
        font-weight:500;
    }

    .woocommerce-checkout-review-order-table .order-total td{

        font-size:20px;
        font-weight:700;
    }

}

@media (max-width:768px){

    .woocommerce-checkout-review-order-table{
        table-layout: fixed;
        width:100%;
        flex-shrink:0;
    }

    .woocommerce-checkout-review-order-table .product-name{

        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .woocommerce-checkout-review-order-table .product-total{

        white-space: normal !important;
    }

}

@media (max-width:768px){
    
        /* Order Review */

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

    width:100% !important;

    float:none !important;

    max-width:100% !important;

    clear:both;

}

.woocommerce table.shop_table{

    display:block;

    overflow-x:auto;

    width:100%;

}

.woocommerce table.shop_table tbody{

    display:table;

    min-width:520px;

    width:100%;

}


    .woocommerce-checkout-review-order-table,
    .woocommerce-checkout-review-order-table tbody,
    .woocommerce-checkout-review-order-table tr,
    .woocommerce-checkout-review-order-table th,
    .woocommerce-checkout-review-order-table td{

        min-width:0 !important;
        max-width:100%;
    }

}

/*======================================
COMPACT PAYMENT METHODS (Mobile)
Version 1.1
======================================*/

@media (max-width:768px){

    /*
    ==================================================
    Compact Payment UI

    Payment descriptions are intentionally hidden
    on mobile to keep checkout clean, compact,
    and focused on payment selection.

    Desktop remains unchanged.
    ==================================================
    */

    #payment .payment_box{
        display:none !important;
    }

    #payment ul.payment_methods > li{
        padding:16px 18px;
    }

    #payment ul.payment_methods > li > label img{
        max-height:26px !important;
    }

    #payment ul.payment_methods > li > label img{

    margin-left:0 !important;
    margin-right:8px;
    display:inline-block;
    
    }
    
}
    
@media (max-width:768px){

    #payment ul.payment_methods > li > label{

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;

    }

    #payment ul.payment_methods input[type="radio"]{

        margin:0 0 12px;

    }

}

@media (max-width:768px){

    #payment .place-order{
        width:100%;
    }

    #payment .place-order .form-row{
        width:100%;
    }

    #payment #place_order{
        width:100%;
        display:block;
    }

}

/*======================================
PLACE ORDER BUTTON
======================================*/

.woocommerce #payment #place_order{

    width:100%;
    height:56px;

    border:none;
    border-radius:14px;

    font-size:16px;
    font-weight:700;
    letter-spacing:.2px;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;

    box-shadow:0 8px 20px rgba(37,99,235,.18);

}

.woocommerce #payment #place_order:hover{

    transform:translateY(-1px);

    box-shadow:0 12px 28px rgba(37,99,235,.24);

}

.woocommerce #payment #place_order:active{

    transform:translateY(0);

    box-shadow:0 4px 12px rgba(37,99,235,.16);

}

.woocommerce #payment #place_order:focus-visible{

    outline:3px solid rgba(37,99,235,.25);
    outline-offset:3px;

}

.woocommerce #payment #place_order:disabled,
.woocommerce #payment #place_order.disabled{

    opacity:.65;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;

}

/*======================================
CHECKOUT PROCESSING
======================================*/

#place_order{

    position:relative;

}

#place_order.is-processing{

    cursor:wait;
    opacity:.92;
    pointer-events:none;

}

#place_order.is-processing::before{

    content:"";

    display:inline-block;

    width:14px;
    height:14px;

    margin-right:10px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    animation:progres-spin .8s linear infinite;

    vertical-align:-2px;

}

@keyframes progres-spin{

    to{

        transform:rotate(360deg);

    }

}