/*====================================================
 HVAC SENIOR PREMIUM CHECKOUT
 Version: 1.0
====================================================*/


/*====================================================
1. VARIABLES
====================================================*/

:root{

    --primary:#0B4BA5;
    --primary-dark:#08245D;
    --primary-light:#EDF4FF;

    --heading:#08245D;
    --text:#667085;

    --background:#F5F8FD;
    --white:#FFFFFF;

    --border:#E4ECF5;

    --success:#28C76F;

    --radius:20px;

    --shadow:
        0 18px 45px rgba(15,23,42,.08);

}



/*====================================================
2. RESET
====================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body.woocommerce-checkout{

    background:var(--background);

    color:var(--text);

    font-family:inherit;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}



/*====================================================
3. GENERATEPRESS OVERRIDES
====================================================*/

body.woocommerce-checkout .entry-header,
body.woocommerce-checkout .page-header,
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error{

    display:none !important;

}

body.woocommerce-checkout .site-main,
body.woocommerce-checkout #main,
body.woocommerce-checkout article,
body.woocommerce-checkout .inside-article,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .content-area,
body.woocommerce-checkout #primary{

    margin:0 !important;
    padding:0 !important;

}

body.woocommerce-checkout .inside-article{

    background:transparent;
    box-shadow:none;

}



/*====================================================
4. MAIN WRAPPER
====================================================*/

.hvac-checkout{

    width:100%;

    background:var(--background);

}



/*====================================================
5. HERO
====================================================*/

.checkout-hero{

    position:relative;

    overflow:hidden;

    padding:55px 20px 70px;

    background:
    linear-gradient(
        180deg,
        #FBFDFF 0%,
        #EDF4FF 100%
    );

}

.checkout-hero-inner{

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.secure-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 30px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    border-radius:50px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);

    margin-bottom:28px;

}

.checkout-hero h1{

    font-size:64px;

    line-height:1.05;

    font-weight:800;

    color:var(--heading);

    margin-bottom:18px;

}

.checkout-hero p{

    max-width:700px;

    margin:auto;

    font-size:20px;

    color:var(--text);

}



/*====================================================
6. HERO DECORATION
====================================================*/

.checkout-hero::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    border:2px solid rgba(11,75,165,.07);

    left:-120px;

    top:20px;

}

.checkout-hero::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    border:2px solid rgba(11,75,165,.07);

    right:-120px;

    top:80px;

}

.dots-left,
.dots-right{

    position:absolute;

    width:170px;

    height:120px;

    background-image:
        radial-gradient(
            #CFE0FF 1.7px,
            transparent 1.7px
        );

    background-size:18px 18px;

    opacity:.8;

}

.dots-left{

    left:220px;
    top:90px;

}

.dots-right{

    right:220px;
    top:80px;

}

/*====================================================
7. CHECKOUT LAYOUT
====================================================*/

.checkout-wrapper{

    max-width:1400px;

    margin:0 auto;

    padding:60px 20px 80px;

}

.checkout-grid{

    display:grid;

    grid-template-columns:1.35fr 420px;

    gap:40px;

}

.checkout-left,
.checkout-right{

    width:100%;

}

.checkout-right{

    position:sticky;

    top:30px;

}


/*====================================================
8. BILLING CARD
====================================================*/

.billing-card{

    background:#fff;

    border-radius:24px;

    box-shadow:var(--shadow);

    padding:45px;

}

.billing-header{

    display:flex;

    align-items:center;

    gap:18px;

    padding-bottom:28px;

    margin-bottom:35px;

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

}

.billing-icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--primary-light);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:var(--primary);

    flex-shrink:0;

}

.billing-header-text{

    display:flex;

    flex-direction:column;

}

.billing-header h2{

    font-size:34px;

    color:var(--heading);

    font-weight:700;

    margin-bottom:5px;

}

.billing-header p{

    color:var(--text);

    font-size:16px;

}


/*====================================================
9. BILLING GRID
====================================================*/

.billing-fields{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

#billing_email_field,
#billing_country_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field{

    grid-column:1 / -1;

}


/*====================================================
10. FORM FIELDS
====================================================*/

.form-row{

    margin:0 !important;

    position:relative;

    width:100% !important;

}

.form-row label{

    display:block;

    font-size:15px;

    font-weight:600;

    color:var(--heading);

    margin-bottom:8px;

}

.input-text,
.select2-selection{

    width:100%;

    height:58px !important;

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

    border-radius:12px !important;

    background:#fff !important;

    font-size:16px;

    transition:.25s;

}

.input-text{

    padding:0 18px !important;

}

textarea.input-text{

    min-height:130px;

    padding:16px 18px !important;

}

.input-text:focus{

    border-color:var(--primary) !important;

    box-shadow:0 0 0 4px rgba(11,75,165,.08);

}

.select2-selection{

    display:flex !important;

    align-items:center;

    padding:0 15px;

}


/*====================================================
11. CHECKBOXES
====================================================*/

.woocommerce-form__label{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

input[type="checkbox"]{

    width:18px;

    height:18px;

}


/*====================================================
12. BILLING ANIMATION
====================================================*/

.billing-card{

    animation:fadeUp .6s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*====================================================

/*====================================================
8. PREMIUM ORDER SUMMARY
====================================================*/

.order-card{

    background:var(--white);

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

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--shadow);

}

/*==================================
ORDER HEADER
==================================*/

.order-header{

    background:linear-gradient(135deg,#0B4BA5,#08245D);

    display:flex;

    align-items:center;

    padding:10px 28px;

}

.order-header-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.order-header-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background:rgba(255,255,255,.14);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    flex-shrink:0;

}

.order-header-icon svg{

    width:22px;

    height:22px;

}

.order-header h2{

    margin:0;

    color:#fff;

    font-size:18px;

    font-weight:700;

    line-height:1;

}
/*==================================
PRODUCT
==================================*/

.product-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:26px;

}

.product-image{

    width:90px;

    flex-shrink:0;

}

.product-image img{

    width:100%;

    border-radius:10px;

    box-shadow:
        0 10px 22px rgba(15,23,42,.12);

}

.product-details{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.product-details h3{

    margin:0 0 8px;

    font-size:22px;

    line-height:1.35;

    font-weight:700;

    color:#0F172A;

}

/*==================================
RATING
==================================*/

.rating{

    display:flex;

    align-items:center;

    gap:8px;

    margin:0;

    font-size:14px;

}

.rating .stars{

    color:#F5B301;

    font-size:15px;

    letter-spacing:1px;

}

.rating span{

    color:#64748B;

    font-size:14px;

}
/*==================================
PRICE TABLE
==================================*/

.price-table{

    margin:24px 0;

    border:1px solid #E9EEF5;

    border-radius:14px;

    overflow:hidden;

    background:#FAFCFF;

}

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 22px;

    min-height:58px;

}

.price-row + .price-row{

    border-top:1px solid #E9EEF5;

}

.price-label{

    font-size:15px;

    font-weight:500;

    color:#64748B;

}

.price-value{

    font-size:16px;

    font-weight:600;

    color:#0F172A;

}

.old-price{

    font-size:16px;

    color:#94A3B8;

    text-decoration:line-through;

}

.today-price{

    color:#0B4BA5;

    font-weight:700;

}

.today-price .new-price{

    font-size:22px;

    font-weight:800;

    color:#0B4BA5;

}

/*==========================
DIVIDER
==========================*/

.summary-divider{

    border:none;

    border-top:1px solid #E8EEF7;

    margin:30px 0;

}

/*==================================
FEATURES
==================================*/

.product-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px 22px;

    margin:28px 0;

    padding:0;

}

.product-features li{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

    padding:0;

    font-size:15px;

    font-weight:500;

    color:#334155;

    line-height:1.4;

}

.feature-icon{

    width:18px;
    height:18px;
    min-width:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#0B4BA5;
    color:#fff;

    font-size:10px;
    font-weight:700;

    border:none;
    box-shadow:none;
    padding:0;

}

.product-features li{

    display:flex;
    align-items:center;

    gap:10px;

    font-size:15px;
    color:#334155;
}
/*==================================
TOTAL
==================================*/

.order-total{

    margin-top:28px;

    padding:22px 24px;

    background:#F8FBFF;

    border:1px solid #E5ECF5;

    border-radius:14px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.order-total span{

    font-size:17px;

    font-weight:600;

    color:#475569;

}

.order-total strong{

    font-size:32px;

    font-weight:800;

    color:#0B4BA5;

}
/*==================================
PAYMENT
==================================*/

.checkout-payment-card{

    margin-top:28px;

    padding-top:28px;

    border-top:1px solid #E9EEF5;

}

.payment-header{

    margin-bottom:18px;

}

.payment-header h3{

    margin:0 0 6px;

    font-size:22px;

    font-weight:700;

    color:#0F172A;

}

.payment-header p{

    margin:0;

    font-size:14px;

    color:#64748B;

}

.wc_payment_methods{

    margin:0;

    padding:0;

}

.wc_payment_method{

    padding:18px 20px;

}

.wc_payment_method label{

    display:flex;
    align-items:center;
    gap:12px;

}

.wc_payment_method:hover{

    border-color:#0B4BA5;

}

.payment_box{

    margin-top:15px !important;

    padding:16px !important;

    background:#F8FBFF !important;

    border-radius:12px;

    border:none !important;

}

#place_order{

    height:64px;

    border-radius:14px;

    font-size:20px;

    font-weight:700;

}
#place_order:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(11,75,165,.25);

}
/*==================================
PAYMENT METHODS
==================================*/

.wc_payment_methods{

    margin:0;

    padding:0;

}

.wc_payment_method{

    list-style:none;

    border:1px solid #E5ECF5;

    border-radius:16px;

    margin-bottom:16px;

    background:#fff;

    overflow:hidden;

    transition:.25s;

}

.wc_payment_method:hover{

    border-color:#0B4BA5;

}

.wc_payment_method > label{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 20px;

    cursor:pointer;

}

.payment-radio{

    display:flex;

    align-items:center;

}

.payment-radio input{

    width:18px;

    height:18px;

    margin:0;

}

.payment-title{

    flex:1;

    font-size:18px;

    font-weight:600;

    color:#0F172A;

}

.payment-icons{

    display:flex;

    align-items:center;

    gap:6px;

}

.payment-icons img{

    height:24px;

    width:auto;

}

.payment_box{

    margin:0 !important;

    padding:18px 20px !important;

    border-top:1px solid #EEF2F7;

    background:#F8FBFF !important;

    border-radius:0 !important;

}

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

#place_order{

    width:100%;

    height:64px;

    margin-top:30px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-size:20px;

    font-weight:700;

    cursor:pointer;

    transition:.30s ease;

}

#place_order:hover{

    transform:translateY(-2px);

    box-shadow:0 16px 35px rgba(11,75,165,.25);

}

#place_order:active{

    transform:translateY(0);

}

/*====================================================
10. TRUST SECTION
====================================================*/

.checkout-trust{

    max-width:1400px;

    margin:70px auto 90px;

    padding:0 20px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.trust-box{

    background:#fff;

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

    border-radius:22px;

    padding:32px 28px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.30s ease;

}

.trust-box:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow);

}

.trust-icon{

    width:64px;

    height:64px;

    margin:0 auto 20px;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.trust-box h4{

    font-size:18px;

    font-weight:700;

    color:var(--heading);

    margin-bottom:8px;

}

.trust-box p{

    color:var(--text);

    line-height:1.6;

    font-size:15px;

}

/*====================================================
11. RESPONSIVE
====================================================*/

@media (max-width:1200px){

    .checkout-grid{

        grid-template-columns:1fr;

    }

    .checkout-right{

        position:relative;

        top:0;

        margin-top:40px;

    }

}

@media (max-width:768px){

    .checkout-wrapper{

        padding:45px 16px 70px;

    }

    .checkout-hero{

        padding:45px 20px 60px;

    }

    .checkout-hero h1{

        font-size:42px;

    }

    .checkout-hero p{

        font-size:18px;

    }

    .billing-header{

        padding:30px;

    }

    .billing-content{

        padding:30px;

    }

    .billing-fields{

        grid-template-columns:1fr;

    }

    .product-card{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .product-image{

        width:140px;

    }

    .product-features{

        grid-template-columns:1fr;

    }

    .order-total{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

    .checkout-trust{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .checkout-hero h1{

        font-size:34px;

    }

    .billing-header{

        flex-direction:column;

        text-align:center;

    }

    .billing-icon{

        margin:0 auto;

    }

    .order-body{

        padding:24px;

    }

    .payment-header h3{

        font-size:22px;

    }

    #place_order{

        height:58px;

        font-size:18px;

    }

}
/*====================================================
HVAC SENIOR FINAL POLISH
====================================================*/

/*----------------------------------------------------
ORDER CARD
----------------------------------------------------*/

.order-card{

    border-radius:26px;

    overflow:hidden;

    border:1px solid #E6EDF6;

    box-shadow:
        0 30px 70px rgba(15,23,42,.08);

}

/*----------------------------------------------------
HEADER
----------------------------------------------------*/

.order-header{

    padding:20px 28px;

}

.order-header-icon{

    width:42px;

    height:42px;

}

.order-header h2{

    font-size:24px;

    letter-spacing:-.2px;

}

/*----------------------------------------------------
PRODUCT
----------------------------------------------------*/

.product-card{

    gap:16px;

    margin-bottom:18px;

    align-items:center;

}

.product-image{

    width:82px;

}

.product-image img{

    border-radius:10px;

    box-shadow:
        0 18px 35px rgba(15,23,42,.18);

}

.product-details h3{

    font-size:20px;

    line-height:1.28;

    margin-bottom:6px;

    letter-spacing:-.3px;

}

.rating{

    margin-top:4px;

    gap:6px;

}

.rating .stars{

    font-size:15px;

}

.rating span{

    font-size:14px;

}

/*----------------------------------------------------
PRICE
----------------------------------------------------*/

.price-table{

    margin:18px 0;

    border:none;

    background:none;

}

.price-row{

    padding:12px 0;

    min-height:auto;

}

.price-label{

    font-size:15px;

    color:#64748B;

}

.old-price{

    font-size:16px;

}

.today-price{

    font-size:15px;

}

.today-price .new-price{

    font-size:26px;

    color:#0B4BA5;

}

/*----------------------------------------------------
DIVIDER
----------------------------------------------------*/

.summary-divider{

    margin:18px 0;

    border-top:1px solid #EDF2F7;

}

/*----------------------------------------------------
FEATURES
----------------------------------------------------*/

.product-features{

    margin:18px 0;

    gap:12px 18px;

}

.product-features li{

    gap:8px;

    font-size:15px;

    font-weight:500;

}

.feature-icon{

    width:18px;

    height:18px;

    min-width:18px;

    border-radius:50%;

    background:#0B4BA5;

    color:#fff;

    font-size:10px;

    border:none;

    box-shadow:none;

}

.feature-icon svg{

    width:10px;

    height:10px;

}

/*----------------------------------------------------
TOTAL
----------------------------------------------------*/

.order-total{

    margin-top:18px;

    padding:18px 0;

    background:none;

    border:none;

    border-top:1px solid #EDF2F7;

    border-radius:0;

}

.order-total span{

    font-size:18px;

    font-weight:600;

}

.order-total strong{

    font-size:30px;

    color:#0B4BA5;

}

/*----------------------------------------------------
PAYMENT
----------------------------------------------------*/

.checkout-payment-card{

    margin-top:20px;

    padding-top:20px;

}

.payment-header{

    margin-bottom:16px;

}

.payment-header h3{

    font-size:22px;

    margin-bottom:4px;

}

.payment-header p{

    font-size:14px;

}

.wc_payment_method{

    margin-bottom:12px;

    border-radius:14px;

}

.wc_payment_method > label{

    padding:16px 18px;

}

.payment-title{

    font-size:17px;

}

.payment_box{

    padding:16px 18px !important;

}

#place_order{

    margin-top:20px;

    height:58px;

    border-radius:14px;

    font-size:18px;

    letter-spacing:.2px;

}

/*----------------------------------------------------
SECURE MESSAGE
----------------------------------------------------*/

.secure-checkout{

    margin-top:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    color:#64748B;

    font-size:14px;

}

.secure-checkout svg{

    color:#0B4BA5;

}