:root {

    --primary-blue: #2B4D94;

    --bg-light: #f4f6f9;

    --dark-blue: #0f172a;

    --card-blue: #1e293b;

    --accent-blue: #3b82f6;

}



body {

    font-family: 'Inter', sans-serif;

    color: #334155;
}

.checkout-container, .woocommerce-form-coupon-toggle  {
    max-width: 1276px;
}

.woocommerce-form-coupon-toggle, form#woocommerce-checkout-form-coupon {
    max-width: 1276px;
    margin: 20px auto;
    padding:0 12px;
    border: none;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    border-top-color: #3f7c9c00;
    border-radius: 10px;
}

.woocommerce-form-coupon-toggle a.showcoupon {
    text-decoration: none;
    color: #1e4cad;
}

.checkout_coupon button.button {
    background: linear-gradient(125deg, #578EFF, #27488C) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 600;
    padding: 11px 20px !important;
    transition: all 0.3s ease;
}

/* .checkout_coupon{
    display: flex !important;
} */
/* General Card Styling */

.custom-card, .custom-card-addons  {

    background: #F6F6F6;

    border: none;

    border-radius: 16px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

    margin-bottom: 24px;

    overflow: hidden;

}



.card-body {

    background: #F6F6F6;

    border-radius: 20px;

}
#wc_checkout_add_ons {
    background: #F6F6F6;
    border-radius: 0px 0px 20px 20px;
    margin: -35px 0px 20px 0px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
#wc_checkout_add_ons input {
    width: 20px;
    accent-color: #2c52a3;
    cursor: pointer;
    height: 20px;
}

#wc_checkout_add_ons label.checkbox {
    font-weight: 500;
    font-size: 18px;
    color: #313943;
}

#wc_checkout_add_ons span.woocommerce-Price-amount.amount{
    font-weight: 700;
    font-size: 18px;
    color: #0E275D;
}

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    opacity: 1;

    padding: 12px 30px;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    background: #EFF2F7;

}
.section-header-addon {
    padding: 20px 30px 25px 30px;
}

.change-btn {

    width: 150;

    border-radius: 10px;

    background: #FFFFFF;



}



.section-title {

    font-weight: 600;

    font-size: 20px;

    color: #1e293b;

    margin: 0;

}



/* Summary Section */

.summary-label {

    font-weight: 500;

    font-size: 18px;

    color: #313943;

}



.summary-value {

    font-weight: 700;

    font-size: 18px;

    color: #0E275D;



}



/* Platform Tabs Styling */

.nav-pills-custom {

    display: flex;

    gap: 10px;

    padding: 20px 24px;

}





.nav-pills-custom .nav-link.active {

    background-color: var(--primary-blue) !important;

    color: #fff !important;

    border-color: var(--primary-blue);

}



/* Bundle/Pricing Cards */

.bundle-grid {

    padding: 0 1.5rem 1.5rem 1.5rem;

}



.bundle-card {

    background: var(--primary-blue);

    border-radius: 20px;

    padding: 10px 10px 50px 10px;

    text-align: center;

    color: #fff;

    height: 100%;

    position: relative;

    transition: transform 0.2s ease;

    place-content: end;

}

/* 

.bundle-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-image: url('image/box-bg.png');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 1;

} */



.bundle-card:hover {

    transform: translateY(-5px);

}



.bundle-title {

    font-weight: 600;

    font-size: 32px;

    color: #FFFFFF;

    padding-top: 20px;

}



.bundle-sub-title {
    font-weight: 500;
    font-size: 22px;
    color: #9CBCFF;
    margin: 0;
}

.acc-size-badge {
    border-radius: 20px;
    display: inline-block;
    margin: 30px 03px;
    padding: 20px 22px;
    border: 1px solid #FFFFFF;
    background: #5B7EC8;
    font-weight: 700;
}

.price-large {
    font-size: 42px;
    font-weight: 800;
    margin: 0;
}

.price-subtext {

    font-size: 22px;

    color: #D7E3F9;

    margin: 0;

    ;

}



.btn-select-bundle {

    background: #fff;

    color: var(--dark-blue);

    border: none;

    border-radius: 50px;

    padding: 12px;

    font-weight: 700;

    width: 100%;

    margin-top: 20px;

}
.btn-select-bundle:hover{
background: #5B7EC8 !important;
}



.save-tag {

    background: #578EFF;

    color: #0E275D;

    font-size: 16px;

    padding: 4px 12px;

    border-radius: 20px;

    display: inline-block;

    margin: 0px;

    font-weight: 800;

}



/* Add this to your <style> section */

.add-ons-container {

    background-color: #f8fafc;

    /* Very light blue/grey background */

    border-radius: 12px;

    padding: 20px;

}



.add-on-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    transition: all 0.2s ease;

}





/* Custom Checkbox Styling */

.form-check-input {

    width: 1.25em;

    height: 1.25em;

    margin-top: 0.15em;

    cursor: pointer;

    border: 2px solid #cbd5e1;

}



.form-check-input:checked {

    background-color: #2c4da0;

    border-color: #2c4da0;

}



.form-check-label {

    cursor: pointer;

    font-weight: 500;

    color: #475569;

    padding-left: 8px;

}



/* Right side percentage and badge */

.add-on-value {

    font-weight: 700;

    color: #2c4da0;

}



.bundle-badge-popular {

    background: #9CBCFF;

    border-radius: 40px;

    padding: 11px;

    font-weight: 600;

    font-size: 22px;

    text-align: center;

    color: #0E275D;

}



.badge-popular {

    background: #578EFF;

    border-radius: 10px;

    padding: 3px 10px;

    font-size: 14px;

    text-align: center;

    color: #fff;

    font-weight: 500;

}



/* Responsive Mobile Adjustments */

@media (max-width: 768px) {

    .nav-pills-custom .nav-link {

        width: 100%;

        text-align: center;

    }

}




/* Plan Selection Area */

#plan-selection-section {

    display: none;

}



/* Selectable Button Styling */

.selector-grid {

    display: flex;

    gap: 10px;

    padding-bottom: 20px;

}



.nav-pills .nav-link {

    background: #fff;

    border-radius: 80px;

    color: #444D58;

    font-size: 17px;

    padding: 14px 50px;

    box-shadow: 0px 5px 20px 0px #0000000D;

}



.nav-pills .nav-link.active {

    border-radius: 80px;

    /* padding: 14px 60px; */

    background: #2B4D94;

}



/* Account Size Buttons */

.size-btn, .size-btn-plateform {

    background: #fff;

    border-radius: 80px;

    color: #444D58;

    font-size: 17px;

    padding: 14px 50px;

    box-shadow: 0px 5px 20px 0px #0000000D;

    position: relative;

    display: flex;

    justify-content: center;

    cursor: pointer;

}



.size-btn:hover , .size-btn-plateform:hover {

    border-color: var(--primary-blue);

}


.size-btn.active, .size-btn-plateform.active {

    background: var(--primary-blue);

    color: white;

    border-color: var(--primary-blue);

}


.btn-popular-badge {

    background: #578EFF;

    color: #fff;

    border-radius: 10px;

    padding: 3px 10px;

    position: absolute;

    top: -12px;

    ;

    font-size: 12px;

}



.popular-badge {

    font-size: 0.6rem;

    background: #578EFF;

    color: #fff;

    padding: 2px 6px;

    border-radius: 4px;

    display: block;

    margin-top: 2px;

}



.label-heading {

    font-weight: 700;

    color: #334155;

    padding: 15px 0 10px 0;

    display: block;

}



.payment-method-img {

    max-width: 555px;

    width: 100%;

}



/* Tab CSS */

@media (min-width: 768px) and (max-width: 1024px) {

    .bundle-grid {

        row-gap: 20px;

    }

}



/* Mobile CSS */

@media (max-width: 767px) {

    .nav-pills .nav-link {

        padding: 12px 24px;

          width: 100%;

    }



    .nav-pills .nav-link.active {

        padding: 12px 24px;

        width: 100%;



    }



    .size-btn, .size-btn-plateform {

        padding: 12px 24px;

    }



    .selector-grid {

        flex-flow: wrap;

        row-gap: 20px;

    }



    .bundle-grid {

        row-gap: 20px;

    }



    .acc-size-badge {

        margin: 5px 0px;

    }

    .nav-pills-custom{

    flex-flow: column;

    }
}




/* ================================================
                 Webiste Header CSS
==================================================*/
body {
    /* margin: 0;
    padding: 0; */
}

.site-header {
    gap: 22px;
    border-bottom: 3px solid #1e85be;
}

.site-header .container {
    max-width: 1300px;
    width: 100% !important;
    padding: 0 20px;
    padding-bottom: 10px;
}

/* TOP BAR */
.top-bar {
    background: url('/wp-content/uploads/2026/01/top-header-background.webp') center/cover no-repeat;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.top-bar img {
    width: 24px;
    height: 24px;
}

.top-bar .container {
    gap: 48px;
    justify-content: center;
}

/* LOGO */
.site-header .site-branding img {
    height: 56px;
    width: auto;
}

/* MENU */
.site-header .navbar-nav {
    gap: 81px;
}

.site-header .menu-item a {
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
    color: #444D58 !important;
    text-decoration: none;
}

.site-header .menu-item a:hover {
    color: #578EFF !important;
}

.site-header .current_page_item a {
    color: #578EFF !important;
    font-weight: 700 !important;
}

/* LOGIN BUTTON */
.login-btn {
    background: linear-gradient(125deg, #578EFF, #27488C);
    color: #fff !important;
    padding: 18px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.login-btn:hover {
    background: linear-gradient(135deg, #1e56d9, #3a7ee8);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(47, 109, 246, 0.4);
    color: #fff !important;
}

@media(min-width:768px) and (max-width:1024px) {
    .site-header {
        gap: 8px;
    }

    .top-bar {
        font-size: 14px;
    }

    .top-bar img {
        width: 18px;
        height: 18px;
    }

    .site-header .navbar-nav {
        gap: 25px;
    }

    .site-header .menu-item a {
        font-size: 14px;
    }

    .login-btn {
        padding: 10px 18px;
        font-size: 14px;
        line-height: 14px;
    }
}

@media (max-width:767px) {
    .site-header {
        gap: 2px;
    }

    .top-bar {
        font-size: 9px;
        padding: 8px 0;
    }

    .top-bar img {
        width: 9.74px;
        height: 9.74px;
    }

    .top-bar .container {
        gap: 19px;
    }

    .site-header .site-branding img {
        height: 44px;
    }

    .site-header .navbar {
        gap: 10px;
    }

    .site-header .navbar-nav {
        gap: 10px;
    }

    .site-header .navbar-brand {
        order: 0;
    }

    .login-btn {
        order: 1;
        padding: 14px 23px;
        font-size: 14px;
        line-height: 14px;
        margin-left: auto;
        justify-content: end;
    }

    .site-header .navbar-toggler {
        order: 2;
        border: none;
        padding: 0;
    }

    .site-header .navbar-toggler:focus-visible,
    .site-header .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }

    .site-header .navbar-collapse {
        background: #fff;
        margin-top: 20px;
        padding: 20px;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        position: absolute !important;
        top: 50px !important;
        width: 100% !important;
    }

    .site-header .menu-item a {
        font-size: 14px;
    }
}

/* ==================================================
            Website Footer Stying
===================================================== */
.site-footer {
    background: #000916;
    padding-top: 40px;
}

.site-footer .container {
    max-width: 1296px;
    padding: 0 20px;
}

.footer-navigation-section {
    padding-bottom: 30px;
    border-bottom: 1px solid #60748C;
}

.site-branding img {
    width: 85px;
    height: 56px;
}

.footer-links ul {
    display: flex;
    gap: 89px;
}

.footer-links a {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.footer-social-section {
    padding: 30px 0;
    border-bottom: 1px solid #60748C;
}

.social-title {
    font-size: 16px;
    font-weight: 700;
    color: #7F808A;
    margin-bottom: 12px;
}

.news-letter-section {
    padding: 0;
}

.news-letter-section p {
    color: #D9D9D9;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    width: 200px;
}

.news-letter-form {
    width: 280px;
    background: #fff;
    padding: 10px;
    border-radius: 60px;
}

.news-letter-form input[type="email"] {
    width: 50%;
    background: none;
    padding: 0 10px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Kanit';
}

.news-letter-form input[type="email"]:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.news-letter-form input[type="submit"] {
    width: 50%;
    background: linear-gradient(90deg, #578EFF, #27488C);
    font-size: 20px;
    font-weight: 700;
    font-family: 'Kanit', sans-serif;
    border: none;
    border-radius: 60px;
    padding: 7px 30px;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease;
}

.news-letter-form input[type="submit"]:hover {
    background: linear-gradient(90deg, #6b9eff, #355bb0);
}

.footer-text p {
    color: #D9D9D9;
    font-size: 12px;
    line-height: 24px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.copy-right-section {
    padding: 10px;
    border-top: 1px solid #FFFFFF33;
}

.copy-right-section p {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
}

.copy-right-section p a {
    color: #578EFF;
    text-decoration: none;
}

/* Responsive */
@media (min-width: 1024px) and (max-width: 1440px) {
    .footer-links ul {
        gap: 60px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .footer-links ul {
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .site-footer {
        padding-top: 24px;
    }

    .footer-navigation-section .site-branding {
        text-align: center;
        padding-bottom: 30px;
        border-bottom: 1px solid #FFFFFF33;
    }

    .footer-links ul {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px;
        padding-top: 30px;
    }

    .footer-links ul li {
        flex: 0 0 calc(50% - 18px);
        text-align: left;
    }

    .footer-social-section {
        gap: 12px;
    }

    .news-letter-section {
        flex-direction: column;
        align-items: center;
        gap: 12px !important;
    }

    .news-letter-section p {
        margin-top: 12px;
        margin-bottom: 0 !important;
        width: 272px;
        text-align: center;
        font-weight: 400;
    }

    .news-letter-form {
        width: 100%;
    }

    .news-letter-form input[type="email"] {
        font-size: 14px;
        font-weight: 400;
        width: 60%;
    }

    .news-letter-form input[type="submit"] {
        font-size: 16px;
        font-weight: 400;
        width: 40%;
        padding: 12px 30px;
    }

    .footer-text p {
        font-size: 10px;
        line-height: 16px;
        font-weight: 400;
    }
}

/* ==================================================
              THANKYOU PAGE STYLING
=====================================================*/
.woocommerce-order{
    max-width:1300px !important;
    margin: auto;
    padding:0 16px;
    /* border:3px solid blue; */
    margin-top:40px !important;
    display: flex;
    flex-direction:column;
    gap:30px;
}
.woocommerce-order{
/* over all style of thank you page sections */
.custom-thankyou-wrapper,
.woocommerce-order-details,
.woocommerce-customer-details{
    border-radius:20px;
    background:#F6F6F6;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

p.woocommerce-thankyou-order-received, section h2{
    padding:20px 30px;
    font-size:32px;
    font-weight: 700;
    background: #EFF2F7;
    border-radius: 20px 20px 0 0;
}

/* Thank you Section */
.woocommerce-order-overview{
    padding-bottom:35px;
    padding-top:25px;
    margin:0 !important;
}
.woocommerce-order-overview li{
   font-size:13px !important;
   color:#313943;
}
.woocommerce-order-overview li strong{
    color: #0E275D;
}

/* Order Details Section */
.wc-order-ul-wrapper{
    padding: 20px 30px;
}
.wc-order-details-list,
.wc-order-totals-list {
    list-style: none;
    margin:0;
    padding:0;
}

.wc-order-item,
.wc-order-total {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
}

.wc-order-item__name,
.wc-order-total__label {
    width:50%;
    font-size:18px;
    font-weight: 500;
    color:#313943;
}
.wc-order-item__name a{
    font-size: 24px;
    color:#578EFF;
    text-transform: capitalize;
}
.wc-item-meta {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wc-item-meta li {
    display: flex;
    align-items: center;
    gap:10px;
}

.wc-item-meta li::before {
    content: "\27A4";
    margin-right: 6px;
    color: #666;
}

.wc-order-item__total,
.wc-order-total__value {
    font-size:18px;
    font-weight: 700;
    color:#0E275D;
}

/* Adress Section */
.woocommerce-customer-details address{
    font-size:18px;
    font-weight: 500;
    border:none;
    padding:20px 30px;
}


@media(min-width:768px) and (max-width:1024px){
    p.woocommerce-thankyou-order-received,
        section h2{
            font-size:28px;
    }
    .woocommerce-order-overview li {
        font-size: 9px !important;
    }
}

@media(max-width:767px){
p.woocommerce-thankyou-order-received,
    section h2{
        padding:20px;
    }
    .wc-order-ul-wrapper,
    .woocommerce-customer-details address{
        padding:10px 20px;
    }

    p.woocommerce-thankyou-order-received,
        section h2 {
        font-size: 17px;
    }

    /* Thank you section */
    .woocommerce-order-overview {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding:20px;
    }

    .woocommerce-order-overview li {
        box-sizing: border-box;
        font-size: 9px !important;
        margin: 0 !important;
    }
    .woocommerce-order-overview::before,
    .woocommerce-order-overview::after{
        display: none !important;
    }

    /* Order Details Section */
        .wc-order-item__name,
        .wc-order-total__label{
            font-size:14px;
        }
        .wc-order-item__name a{
            font-size:14px;
        }
        .wc-order-item__total,
        .wc-order-total__value{
            font-size:14px;
        }
    
    /* Adress Section */
        .woocommerce-customer-details address{
            font-size:14px;
        }
}

}