.elementor-490 .elementor-element.elementor-element-6555c07{--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;}/* Start custom CSS for container, class: .elementor-element-6555c07 *//* ==========================================================================
ARCTIC FOX / CARTFLOWS ULTIMATE RESPONSIVE CHECKOUT STYLESHEET
Compatible with WooCommerce, CartFlows, Elementor & Gutenberg
========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------

DESIGN SYSTEM & CSS VARIABLES
-------------------------------------------------------------------------- */
:root {
--bg-main: #07090e;
--bg-surface: #0e121b;
--bg-card: rgba(18, 24, 38, 0.85);
--bg-card-hover: rgba(26, 35, 54, 0.95);
--bg-input: rgba(7, 9, 14, 0.85);

--border-color: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.2);
--border-glow: rgba(0, 242, 254, 0.4);

--accent-cyan: #00f2fe;
--accent-blue: #4facfe;
--accent-purple: #7928ca;
--accent-pink: #ff0080;
--accent-green: #00ff88;
--accent-warning: #ffb703;
--accent-danger: #ff4d4d;

--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--text-muted: #64748b;

--font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-heading: 'Orbitron', -apple-system, sans-serif;

--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-full: 9999px;

--shadow-card: 0 15px 35px rgba(0, 0, 0, 0.5);
--shadow-glow: 0 0 25px rgba(0, 242, 254, 0.35);
--shadow-glow-lg: 0 0 40px rgba(0, 242, 254, 0.6);

--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);


}

/* --------------------------------------------------------------------------
2. GLOBAL RESET & BASE CHECKOUT WRAPPER
-------------------------------------------------------------------------- */
body.woocommerce-checkout,
.wcf-checkout-page,
.wcf-embed-checkout,
.cartflows-container {
background-color: var(--bg-main) !important;
color: var(--text-primary) !important;
font-family: var(--font-main) !important;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

/* Ambient Ambient Glow Effects */
.wcf-embed-checkout-form::before {
content: '';
position: fixed;
top: -150px;
left: -100px;
width: clamp(300px, 40vw, 550px);
height: clamp(300px, 40vw, 550px);
background: radial-gradient(circle, rgba(0, 242, 254, 0.12) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}

.wcf-embed-checkout-form::after {
content: '';
position: fixed;
bottom: -150px;
right: -100px;
width: clamp(300px, 45vw, 600px);
height: clamp(300px, 45vw, 600px);
background: radial-gradient(circle, rgba(121, 40, 202, 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}

/* Container Constraint */
.wcf-embed-checkout-form,
.wcf-embed-checkout-form .woocommerce,
form.woocommerce-checkout {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 1.25rem 1rem !important;
position: relative;
z-index: 1;
width: 100%;
}

/* --------------------------------------------------------------------------
3. TWO-COLUMN LAYOUT & STICKY SIDEBAR (DESKTOP)
-------------------------------------------------------------------------- */
.wcf-embed-checkout-form .wcf-embed-checkout-two-column,
form.woocommerce-checkout {
display: flex !important;
flex-wrap: wrap !important;
gap: 2rem !important;
align-items: flex-start !important;
}

/* Left Column: Form Details /
.wcf-embed-checkout-form #customer_details,
.wcf-embed-checkout-form .col-1,
.wcf-embed-checkout-form .col-2,
.wcf-embed-checkout-form .wcf-col-left {
flex: 1 1 580px !important;
max-width: 100% !important;
min-width: 0; / Prevents flex children horizontal overflow */
}

/* Right Column: Order Summary & Payment (Sticky on Desktop) */
.wcf-embed-checkout-form #order_review,
.wcf-embed-checkout-form .wcf-col-right {
flex: 1 1 400px !important;
max-width: 100% !important;
min-width: 0;
background: var(--bg-card) !important;
border: 1px solid var(--border-glow) !important;
border-radius: var(--radius-lg) !important;
padding: 2rem !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--shadow-card) !important;
position: sticky !important;
top: 24px !important;
z-index: 10;
}

/* --------------------------------------------------------------------------
4. HEADINGS & SECTION TITLES
-------------------------------------------------------------------------- */
.wcf-embed-checkout-form h3,
.wcf-embed-checkout-form #order_review_heading,
.wcf-embed-checkout-form .wcf-checkout-header,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#ship-to-different-address span {
font-family: var(--font-heading) !important;
font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
letter-spacing: 0.5px !important;
margin-bottom: 1.25rem !important;
text-transform: uppercase !important;
display: flex !important;
align-items: center !important;
gap: 0.6rem !important;
line-height: 1.3 !important;
}

.wcf-embed-checkout-form h3::before,
.woocommerce-billing-fields h3::before,
.woocommerce-shipping-fields h3::before {
content: '';
display: inline-block;
width: 4px;
height: 18px;
background: var(--accent-cyan);
box-shadow: 0 0 12px var(--accent-cyan);
border-radius: 2px;
flex-shrink: 0;
}

/* --------------------------------------------------------------------------
5. FORM FIELDS, INPUTS & SELECT2 DROPDOWNS
-------------------------------------------------------------------------- */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.75rem;
margin-bottom: 1.5rem;
backdrop-filter: blur(12px);
}

.form-row {
margin-bottom: 1.25rem !important;
width: 100% !important;
}

.form-row label {
font-size: 0.88rem !important;
font-weight: 700 !important;
color: var(--text-secondary) !important;
margin-bottom: 0.45rem !important;
display: block !important;
letter-spacing: 0.2px;
}

.form-row label .required {
color: var(--accent-pink) !important;
text-decoration: none !important;
margin-left: 2px;
}

/* High performance 16px minimum font size for mobile inputs to prevent iOS Safari auto-zoom /
.form-row input.input-text,
.form-row textarea,
.form-row select,
.wcf-embed-checkout-form input[type="text"],
.wcf-embed-checkout-form input[type="email"],
.wcf-embed-checkout-form input[type="tel"],
.wcf-embed-checkout-form input[type="password"] {
width: 100% !important;
background-color: var(--bg-input) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-sm) !important;
color: var(--text-primary) !important;
padding: 0.85rem 1rem !important;
font-size: 1rem !important; / 16px keeps iOS from zooming in */
font-family: var(--font-main) !important;
outline: none !important;
transition: var(--transition-fast) !important;
min-height: 50px !important;
appearance: none;
-webkit-appearance: none;
}

.form-row input.input-text:focus,
.form-row textarea:focus,
.form-row select:focus,
.wcf-embed-checkout-form input:focus {
border-color: var(--accent-cyan) !important;
box-shadow: 0 0 16px rgba(0, 242, 254, 0.25) !important;
background-color: var(--bg-surface) !important;
}

/* Validated & Invalid Input States */
.woocommerce-invalid input.input-text {
border-color: var(--accent-danger) !important;
box-shadow: 0 0 12px rgba(255, 77, 77, 0.25) !important;
}

.woocommerce-validated input.input-text {
border-color: var(--accent-green) !important;
}

/* Select2 Dropdown Styling */
.select2-container--default .select2-selection--single {
background-color: var(--bg-input) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-sm) !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text-primary) !important;
padding-left: 1rem !important;
font-size: 0.95rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 50px !important;
right: 12px !important;
}

.select2-dropdown {
background-color: var(--bg-surface) !important;
border: 1px solid var(--border-glow) !important;
border-radius: var(--radius-sm) !important;
color: var(--text-primary) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9) !important;
overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
background-color: var(--bg-main) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
border-radius: 4px;
padding: 0.5rem;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--accent-purple) !important;
color: var(--text-primary) !important;
}

/* --------------------------------------------------------------------------
6. ORDER REVIEW TABLE & PRODUCT SUMMARY
-------------------------------------------------------------------------- */
.woocommerce-checkout-review-order-table {
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
margin-bottom: 1.5rem !important;
font-size: 0.92rem !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
padding: 1rem 0 !important;
border-bottom: 1px solid var(--border-color) !important;
color: var(--text-secondary) !important;
vertical-align: middle !important;
}

.woocommerce-checkout-review-order-table .product-name {
color: var(--text-primary) !important;
font-weight: 600 !important;
padding-right: 1rem !important;
word-break: break-word;
}

.woocommerce-checkout-review-order-table .product-quantity {
color: var(--accent-cyan) !important;
font-weight: 800 !important;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .cart-subtotal td,
.woocommerce-checkout-review-order-table .order-total td {
text-align: right !important;
color: var(--text-primary) !important;
font-weight: 700 !important;
white-space: nowrap;
}

.woocommerce-checkout-review-order-table .order-total th {
font-family: var(--font-heading) !important;
font-size: 1.05rem !important;
color: var(--text-primary) !important;
text-transform: uppercase;
}

.woocommerce-checkout-review-order-table .order-total td .woocommerce-Price-amount {
font-size: clamp(1.2rem, 2.5vw, 1.4rem) !important;
color: var(--accent-cyan) !important;
font-weight: 900 !important;
text-shadow: 0 0 12px rgba(0, 242, 254, 0.4);
}

/* Product thumbnail inside order review if enabled */
.wcf-checkout-table-product-img img,
.woocommerce-checkout-review-order-table img {
width: 50px !important;
height: 50px !important;
object-fit: cover !important;
border-radius: var(--radius-sm) !important;
border: 1px solid var(--border-color) !important;
margin-right: 0.75rem !important;
}

/* --------------------------------------------------------------------------
7. HIGH-CONVERSION ORDER BUMP (CARTFLOWS)
-------------------------------------------------------------------------- */
.wcf-bump-order-wrap,
.wcf-bump-order-style-1,
.wcf-bump-order-style-2,
.wcf-order-bump-container {
background: linear-gradient(135deg, rgba(121, 40, 202, 0.18) 0%, rgba(0, 242, 254, 0.12) 100%) !important;
border: 2px dashed var(--accent-cyan) !important;
border-radius: var(--radius-md) !important;
padding: 1.25rem !important;
margin: 1.5rem 0 !important;
position: relative;
box-shadow: 0 0 25px rgba(0, 242, 254, 0.15) !important;
transition: var(--transition-smooth) !important;
}

.wcf-bump-order-wrap:hover {
box-shadow: 0 0 35px rgba(0, 242, 254, 0.3) !important;
border-color: #ffffff !important;
}

/* Order Bump Pulsing Highlight Label */
.wcf-bump-order-wrap::before {
content: '🔥 LIMITED TIME OFFER';
position: absolute;
top: -12px;
left: 16px;
background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple));
color: #ffffff;
font-size: 0.7rem;
font-weight: 900;
padding: 2px 10px;
border-radius: var(--radius-full);
letter-spacing: 1px;
box-shadow: 0 4px 12px rgba(255, 0, 128, 0.4);
}

.wcf-bump-order-wrap .wcf-bump-order-field-wrap {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}

.wcf-bump-order-wrap input[type="checkbox"] {
accent-color: var(--accent-cyan) !important;
width: 22px !important;
height: 22px !important;
cursor: pointer !important;
margin-top: 2px !important;
flex-shrink: 0;
}

.wcf-bump-order-wrap .wcf-bump-order-title-wrap {
color: var(--text-primary) !important;
font-weight: 800 !important;
font-size: 0.98rem !important;
line-height: 1.4 !important;
}

.wcf-bump-order-wrap .wcf-bump-order-desc {
color: var(--text-secondary) !important;
font-size: 0.88rem !important;
margin-top: 0.5rem !important;
line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
8. WOOCOMMERCE PAYMENT GATEWAYS & CARDS
-------------------------------------------------------------------------- */
#payment,
.woocommerce-checkout-payment {
background: rgba(7, 9, 14, 0.6) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-md) !important;
padding: 1.25rem !important;
margin-top: 1.5rem !important;
}

#payment ul.payment_methods,
.woocommerce-checkout-payment ul.payment_methods {
list-style: none !important;
padding: 0 !important;
margin: 0 0 1.5rem 0 !important;
border-bottom: 1px solid var(--border-color) !important;
}

#payment ul.payment_methods li,
.woocommerce-checkout-payment ul.payment_methods li {
margin-bottom: 0.85rem !important;
padding: 0.9rem 1.1rem !important;
background: rgba(14, 18, 27, 0.85) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-sm) !important;
transition: var(--transition-fast) !important;
}

#payment ul.payment_methods li:hover {
border-color: var(--border-hover) !important;
}

#payment ul.payment_methods li.payment_method_selected,
#payment ul.payment_methods li:has(input:checked) {
border-color: var(--accent-cyan) !important;
background: rgba(26, 35, 54, 0.95) !important;
box-shadow: 0 0 15px rgba(0, 242, 254, 0.15) !important;
}

#payment ul.payment_methods li label {
font-weight: 700 !important;
color: var(--text-primary) !important;
cursor: pointer !important;
margin-left: 0.6rem !important;
font-size: 0.95rem !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
}

#payment ul.payment_methods li label img {
max-height: 26px !important;
width: auto !important;
object-fit: contain;
}

#payment ul.payment_methods li input[type="radio"] {
accent-color: var(--accent-cyan) !important;
width: 18px !important;
height: 18px !important;
cursor: pointer !important;
}

#payment div.payment_box,
.woocommerce-checkout-payment div.payment_box {
background: rgba(26, 35, 54, 0.95) !important;
color: var(--text-secondary) !important;
font-size: 0.88rem !important;
padding: 0.9rem 1.1rem !important;
border-radius: var(--radius-sm) !important;
margin-top: 0.75rem !important;
border-left: 3px solid var(--accent-cyan) !important;
line-height: 1.5 !important;
}

/* Stripe / PayPal Credit Card Inputs */
.wc-stripe-elements-field,
.wc-credit-card-form {
background: var(--bg-input) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-sm) !important;
padding: 0.85rem !important;
margin-top: 0.5rem !important;
}

/* --------------------------------------------------------------------------
9. PLACE ORDER BUTTON (HIGH CONVERSION CTA)
-------------------------------------------------------------------------- */
#place_order,
.wcf-btn-small,
.wcf-checkout-place-order-btn,
button[name="woocommerce_checkout_place_order"] {
width: 100% !important;
background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%) !important;
color: #040810 !important;
font-family: var(--font-heading) !important;
font-weight: 900 !important;
font-size: clamp(1rem, 2vw, 1.15rem) !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
padding: 1.15rem 2rem !important;
border: none !important;
border-radius: var(--radius-full) !important;
cursor: pointer !important;
box-shadow: var(--shadow-glow) !important;
transition: var(--transition-smooth) !important;
position: relative;
overflow: hidden;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.6rem !important;
}

#place_order:hover,
#place_order:focus,
button[name="woocommerce_checkout_place_order"]:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-glow-lg) !important;
color: #000000 !important;
}

#place_order:active {
transform: translateY(0) !important;
}

#place_order::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: rotate(30deg);
animation: buttonPulseShine 3.5s infinite;
}

@keyframes buttonPulseShine {
0% { transform: translateX(-100%) rotate(30deg); }
25%, 100% { transform: translateX(100%) rotate(30deg); }
}

/* --------------------------------------------------------------------------
10. NOTICES, COUPON TOGGLES & ALERT BANNERS
-------------------------------------------------------------------------- */
.woocommerce-NoticeGroup-checkout,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
background: var(--bg-card) !important;
border: 1px solid var(--border-glow) !important;
color: var(--text-primary) !important;
border-radius: var(--radius-md) !important;
padding: 1rem 1.25rem !important;
font-size: 0.9rem !important;
margin-bottom: 1.5rem !important;
backdrop-filter: blur(12px);
list-style: none !important;
}

.woocommerce-error {
border-color: var(--accent-danger) !important;
box-shadow: 0 0 15px rgba(255, 77, 77, 0.2) !important;
}

.woocommerce-info a,
.woocommerce-message a {
color: var(--accent-cyan) !important;
font-weight: 700 !important;
text-decoration: underline !important;
}

/* Coupon Form Box */
form.checkout_coupon,
form.woocommerce-form-login {
background: var(--bg-card) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-md) !important;
padding: 1.25rem !important;
margin-bottom: 1.5rem !important;
}

/* --------------------------------------------------------------------------
11. TRUST BADGES & GUARANTEE FOOTER
-------------------------------------------------------------------------- */
.wcf-checkout-trust-badges,
.wcf-security-badges {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border-color);
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 600;
}

.wcf-checkout-trust-badges span {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--text-secondary);
}

.wcf-checkout-trust-badges svg {
color: var(--accent-cyan);
}

/* --------------------------------------------------------------------------
12. WOOCOMMERCE AJAX SPINNER & LOADING OVERLAY
-------------------------------------------------------------------------- */
.blockUI.blockOverlay {
background-color: rgba(7, 9, 14, 0.75) !important;
backdrop-filter: blur(8px) !important;
opacity: 0.9 !important;
}

.blockUI.blockOverlay::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
margin-top: -18px;
margin-left: -18px;
border: 3px solid rgba(0, 242, 254, 0.2);
border-top-color: var(--accent-cyan);
border-radius: 50%;
animation: wcSpin 0.8s linear infinite;
}

@keyframes wcSpin {
to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
13. COMPREHENSIVE RESPONSIVE BREAKPOINTS
-------------------------------------------------------------------------- */

/* Large Screens & Ultra-wides (1200px and up) */
@media (min-width: 1200px) {
.wcf-embed-checkout-form #order_review {
max-width: 440px !important;
}
}

/* Laptops & Standard Desktops (992px to 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
.wcf-embed-checkout-form .wcf-col-left {
flex: 1 1 520px !important;
}
.wcf-embed-checkout-form .wcf-col-right {
flex: 1 1 360px !important;
padding: 1.5rem !important;
}
}

/* Tablets & Mobile Landscape (Max width 991px) */
@media (max-width: 991px) {
.wcf-embed-checkout-form .wcf-embed-checkout-two-column,
form.woocommerce-checkout {
flex-direction: column !important;
gap: 1.5rem !important;
}

.wcf-embed-checkout-form #customer_details,
.wcf-embed-checkout-form #order_review,
.wcf-embed-checkout-form .wcf-col-left,
.wcf-embed-checkout-form .wcf-col-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    position: static !important; /* Unstick sidebar on tablet/mobile */
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    padding: 1.4rem;
}


}

/* Mobile Portrait (Max width 600px) */
@media (max-width: 600px) {
.wcf-embed-checkout-form,
form.woocommerce-checkout {
padding: 0.75rem 0.5rem !important;
}

.wcf-embed-checkout-form #order_review,
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
    padding: 1.15rem !important;
    border-radius: var(--radius-md) !important;
}

.form-row-first,
.form-row-last {
    width: 100% !important;
    float: none !important;
}

#place_order,
button[name="woocommerce_checkout_place_order"] {
    font-size: 0.98rem !important;
    padding: 1rem 1.2rem !important;
    min-height: 52px !important;
}

.wcf-bump-order-wrap {
    padding: 1rem !important;
}

.wcf-checkout-trust-badges {
    gap: 0.8rem;
    flex-direction: column;
}


}

/* Ultra Small Devices / Foldables (Max width 360px) */
@media (max-width: 360px) {
.wcf-embed-checkout-form h3,
.woocommerce-billing-fields h3 {
font-size: 1rem !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    font-size: 0.82rem !important;
}

#payment ul.payment_methods li {
    padding: 0.75rem !important;
}


}/* End custom CSS */