.elementor-2580 .elementor-element.elementor-element-7bde354{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-2580 .elementor-element.elementor-element-602bfbb > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-2580 .elementor-element.elementor-element-7bde354{--content-width:1280px;}}/* Start custom CSS for checkout-form, class: .elementor-element-602bfbb *//* ==========================================================
   SWATTICK WEB STUDIO
   STORE CHECKOUT — V2
   Premium Dark / Electric Violet
   ========================================================== */


/* ==========================================================
   01. BRAND VARIABLES
   ========================================================== */

:root {
    --sws-bg: #05050B;
    --sws-surface: #0B0A14;
    --sws-card: #080020;

    --sws-primary: #6820E7;
    --sws-highlight: #A855FF;

    --sws-white: #FFFFFF;
    --sws-text: #B8B8C4;
    --sws-muted: #91909D;

    --sws-border: #252038;
    --sws-input: #080713;
    --sws-input-border: #2A2440;
}


/* ==========================================================
   02. PAGE BACKGROUND
   ========================================================== */

html,
body,
body.woocommerce-checkout {

    background: #05050B !important;

    color: #B8B8C4 !important;
}


/* ==========================================================
   03. CARTFLOWS CHECKOUT CONTAINER
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form {

    max-width: 1240px !important;

    margin: 0 auto !important;

    padding: 55px 30px 80px !important;

    box-sizing: border-box !important;

    background: transparent !important;

    color: #B8B8C4 !important;

    font-family: "Manrope", Arial, sans-serif !important;
}


/* ==========================================================
   04. HEADINGS
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
h1,

body.woocommerce-checkout
.wcf-embed-checkout-form
h2,

body.woocommerce-checkout
.wcf-embed-checkout-form
h3,

body.woocommerce-checkout
.wcf-embed-checkout-form
h4 {

    font-family: "Space Grotesk", Arial, sans-serif !important;

    color: #FFFFFF !important;

    font-weight: 600 !important;
}


/* Main section headings */

body.woocommerce-checkout
.wcf-embed-checkout-form
h3 {

    font-size: 22px !important;

    line-height: 1.3 !important;

    margin-top: 0 !important;
}


/* Your order */

body.woocommerce-checkout
.wcf-embed-checkout-form
#order_review_heading {

    color: #FFFFFF !important;

    font-family: "Space Grotesk", Arial, sans-serif !important;

    font-size: 22px !important;

    font-weight: 600 !important;

    line-height: 1.3 !important;

    margin: 0 0 18px !important;
}


/* ==========================================================
   05. WELCOME / CUSTOMER INFORMATION MESSAGE
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-info {

    background: transparent !important;

    border: 0 !important;

    color: #91909D !important;

    padding: 0 !important;

    margin: 0 0 24px !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 13px !important;

    line-height: 1.6 !important;
}


body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-info::before {

    display: none !important;
}


/* ==========================================================
   06. BILLING CARD
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields {

    background: #0B0A14 !important;

    border: 1px solid #252038 !important;

    border-radius: 16px !important;

    padding: 26px 22px 20px !important;

    margin: 0 0 30px !important;

    box-sizing: border-box !important;
}


/* Billing heading */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
> h3 {

    color: #FFFFFF !important;

    font-size: 20px !important;

    margin: 0 0 22px !important;
}


/* ==========================================================
   07. FORM ROWS
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
.form-row {

    margin-bottom: 15px !important;

    padding: 0 !important;
}


body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
.form-row:last-child {

    margin-bottom: 0 !important;
}


/* ==========================================================
   08. FORM LABELS
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
.form-row
label {

    display: block !important;

    color: #D0CDD9 !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    margin: 0 0 7px !important;
}


body.woocommerce-checkout
.wcf-embed-checkout-form
.required {

    color: #A855FF !important;
}


/* ==========================================================
   09. BILLING INPUTS
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
input.input-text,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
input[type="text"],

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
input[type="email"],

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
input[type="tel"],

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
input[type="number"],

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
select,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
textarea {

    width: 100% !important;

    min-height: 48px !important;

    box-sizing: border-box !important;

    background: #080713 !important;

    border: 1px solid #2A2440 !important;

    border-radius: 9px !important;

    color: #FFFFFF !important;

    padding: 13px 14px !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 13px !important;

    outline: none !important;

    box-shadow: none !important;

    transition:
        border-color .25s ease,
        box-shadow .25s ease !important;
}


/* Placeholder */

body.woocommerce-checkout
.wcf-embed-checkout-form
input::placeholder,

body.woocommerce-checkout
.wcf-embed-checkout-form
textarea::placeholder {

    color: #777784 !important;

    opacity: 1 !important;
}


/* Focus */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
input:focus,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
select:focus,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-billing-fields
textarea:focus {

    border-color: #6820E7 !important;

    box-shadow:
        0 0 0 3px rgba(104,32,231,.14) !important;

    outline: none !important;
}


/* ==========================================================
   10. ORDER SUMMARY
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
#order_review {

    background: #0B0A14 !important;

    border: 1px solid #252038 !important;

    border-radius: 16px !important;

    padding: 0 !important;

    margin: 0 !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* ==========================================================
   11. ORDER TABLE
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table {

    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;

    border-collapse: collapse !important;

    background: transparent !important;
}


/* Table header */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
thead,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
thead th {

    background: #10062A !important;

    color: #E8E5F0 !important;
}


body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
thead th {

    padding: 16px 15px !important;

    border: 0 !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    text-align: left !important;
}


/* Table cells */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
tbody td,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
tfoot th,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
tfoot td {

    padding: 17px 15px !important;

    background: #0B0A14 !important;

    border-top: 1px solid #252038 !important;

    color: #B8B8C4 !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 13px !important;
}


/* Product */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
.product-name {

    color: #FFFFFF !important;

    font-weight: 600 !important;
}


/* Product price */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
.product-total {

    color: #DAD6E4 !important;

    font-weight: 600 !important;
}


/* ==========================================================
   12. SUBTOTAL
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
.cart-subtotal
th,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
.cart-subtotal
td {

    color: #91909D !important;

    background: #0B0A14 !important;
}


/* ==========================================================
   13. TOTAL
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
.order-total
th {

    color: #FFFFFF !important;

    font-size: 16px !important;

    font-weight: 700 !important;
}


body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
.order-total
td,

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-checkout-review-order-table
.order-total
.amount {

    color: #A855FF !important;

    font-size: 17px !important;

    font-weight: 800 !important;
}


/* ==========================================================
   14. COUPON — ACTUAL CARTFLOWS / WOOCOMMERCE TARGETS
   ========================================================== */

/*
   CartFlows can render the coupon action using the
   WooCommerce apply_coupon name rather than the
   .woocommerce-form-coupon structure.

   Therefore we target the actual button attribute.
*/


body.woocommerce-checkout
.wcf-embed-checkout-form
button[name="apply_coupon"],

body.woocommerce-checkout
.wcf-embed-checkout-form
input[name="apply_coupon"],

body.woocommerce-checkout
.wcf-embed-checkout-form
#apply_coupon,

body.woocommerce-checkout
.wcf-embed-checkout-form
.coupon
.button[name="apply_coupon"] {

    background: #6820E7 !important;

    background-color: #6820E7 !important;

    background-image: none !important;

    border: 0 !important;

    border-color: #6820E7 !important;

    color: #FFFFFF !important;

    border-radius: 8px !important;

    min-height: 42px !important;

    padding: 10px 20px !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    text-shadow: none !important;

    box-shadow: none !important;

    cursor: pointer !important;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* Apply coupon hover */

body.woocommerce-checkout
.wcf-embed-checkout-form
button[name="apply_coupon"]:hover,

body.woocommerce-checkout
.wcf-embed-checkout-form
input[name="apply_coupon"]:hover,

body.woocommerce-checkout
.wcf-embed-checkout-form
#apply_coupon:hover,

body.woocommerce-checkout
.wcf-embed-checkout-form
.coupon
.button[name="apply_coupon"]:hover {

    background: #A855FF !important;

    background-color: #A855FF !important;

    color: #FFFFFF !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 22px rgba(104,32,231,.22) !important;
}


/* ==========================================================
   15. COUPON INPUT
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
input[name="coupon_code"],

body.woocommerce-checkout
.wcf-embed-checkout-form
.coupon
input[type="text"] {

    background: #080713 !important;

    background-color: #080713 !important;

    border: 1px solid #2A2440 !important;

    border-radius: 8px !important;

    color: #FFFFFF !important;

    min-height: 42px !important;

    padding: 10px 12px !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 12px !important;

    box-shadow: none !important;

    outline: none !important;
}


/* Coupon placeholder */

body.woocommerce-checkout
.wcf-embed-checkout-form
input[name="coupon_code"]::placeholder,

body.woocommerce-checkout
.wcf-embed-checkout-form
.coupon
input[type="text"]::placeholder {

    color: #777784 !important;

    opacity: 1 !important;
}


/* Coupon focus */

body.woocommerce-checkout
.wcf-embed-checkout-form
input[name="coupon_code"]:focus,

body.woocommerce-checkout
.wcf-embed-checkout-form
.coupon
input[type="text"]:focus {

    border-color: #6820E7 !important;

    box-shadow:
        0 0 0 3px rgba(104,32,231,.12) !important;

    outline: none !important;
}


/* ==========================================================
   16. PAYMENT BOX
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
#payment {

    margin: 0 !important;

    padding: 0 !important;

    background: #0B0A14 !important;

    border: 1px solid #252038 !important;

    border-radius: 14px !important;

    overflow: hidden !important;

    box-shadow: none !important;
}


/* Payment list */

body.woocommerce-checkout
.wcf-embed-checkout-form
#payment
ul.payment_methods {

    margin: 0 !important;

    padding: 18px !important;

    background: transparent !important;

    border: 0 !important;

    border-bottom: 1px solid #252038 !important;

    list-style: none !important;
}


/* Payment label */

body.woocommerce-checkout
.wcf-embed-checkout-form
#payment
.payment_methods
label {

    color: #FFFFFF !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 13px !important;

    font-weight: 600 !important;
}


/* Radio */

body.woocommerce-checkout
.wcf-embed-checkout-form
#payment
input[type="radio"] {

    accent-color: #6820E7 !important;
}


/* ==========================================================
   17. CASH ON DELIVERY DESCRIPTION
   ========================================================== */

/*
   This is the specific text visible in your screenshot:

   "Pay with cash upon delivery."

   It is deliberately brighter than the muted text.
*/

body.woocommerce-checkout
.wcf-embed-checkout-form
#payment
.payment_box,

body.woocommerce-checkout
.wcf-embed-checkout-form
#payment
.payment_box p {

    background: #080713 !important;

    color: #B8B8C4 !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 12px !important;

    line-height: 1.6 !important;
}


/* Remove WooCommerce payment arrow */

body.woocommerce-checkout
.wcf-embed-checkout-form
#payment
.payment_box::before {

    display: none !important;
}


/* ==========================================================
   18. PLACE ORDER BUTTON
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
#place_order {

    width: 100% !important;

    min-height: 54px !important;

    margin-top: 18px !important;

    padding: 14px 22px !important;

    background: #6820E7 !important;

    background-color: #6820E7 !important;

    background-image: none !important;

    border: 0 !important;

    border-radius: 9px !important;

    color: #FFFFFF !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 15px !important;

    font-weight: 800 !important;

    line-height: 1.2 !important;

    cursor: pointer !important;

    box-shadow:
        0 10px 30px rgba(104,32,231,.18) !important;

    transition:
        background-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease !important;
}


/* Place order hover */

body.woocommerce-checkout
.wcf-embed-checkout-form
#place_order:hover {

    background: #A855FF !important;

    background-color: #A855FF !important;

    color: #FFFFFF !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 14px 35px rgba(168,85,255,.24) !important;
}


/* ==========================================================
   19. TERMS & CONDITIONS
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-terms-and-conditions-wrapper {

    margin-top: 13px !important;

    color: #91909D !important;

    font-family: "Manrope", Arial, sans-serif !important;

    font-size: 11px !important;

    line-height: 1.6 !important;
}


body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-terms-and-conditions-wrapper
a {

    color: #A855FF !important;

    text-decoration: none !important;
}


/* Checkbox */

body.woocommerce-checkout
.wcf-embed-checkout-form
input[type="checkbox"] {

    accent-color: #6820E7 !important;
}


/* ==========================================================
   20. GENERAL LINKS
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
a {

    color: #A855FF;

    text-decoration: none;

    transition: color .2s ease;
}


body.woocommerce-checkout
.wcf-embed-checkout-form
a:hover {

    color: #C084FC;
}


/* ==========================================================
   21. VALIDATION / ERRORS
   ========================================================== */

body.woocommerce-checkout
.wcf-embed-checkout-form
.woocommerce-error {

    background: #160A13 !important;

    border: 1px solid #4B203F !important;

    border-radius: 9px !important;

    color: #FFB7D9 !important;

    padding: 14px 16px !important;
}


/* ==========================================================
   22. MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.woocommerce-checkout
    .wcf-embed-checkout-form {

        padding: 32px 16px 55px !important;
    }


    /* Billing */

    body.woocommerce-checkout
    .wcf-embed-checkout-form
    .woocommerce-billing-fields {

        padding: 21px 17px 18px !important;

        border-radius: 12px !important;
    }


    /* Headings */

    body.woocommerce-checkout
    .wcf-embed-checkout-form
    h3,

    body.woocommerce-checkout
    .wcf-embed-checkout-form
    #order_review_heading {

        font-size: 20px !important;
    }


    /* Order */

    body.woocommerce-checkout
    .wcf-embed-checkout-form
    #order_review {

        border-radius: 12px !important;
    }


    /* Coupon layout */

    body.woocommerce-checkout
    .wcf-embed-checkout-form
    .coupon {

        display: flex !important;

        gap: 10px !important;
    }


    body.woocommerce-checkout
    .wcf-embed-checkout-form
    button[name="apply_coupon"] {

        min-width: 100px !important;
    }


    /* Payment */

    body.woocommerce-checkout
    .wcf-embed-checkout-form
    #payment {

        border-radius: 12px !important;
    }


    /* Place order */

    body.woocommerce-checkout
    .wcf-embed-checkout-form
    #place_order {

        min-height: 53px !important;

        font-size: 14px !important;
    }

}/* End custom CSS */