.elementor-619 .elementor-element.elementor-element-f685d10{--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;}.elementor-619 .elementor-element.elementor-element-e89d7b7{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-619 .elementor-element.elementor-element-e89d7b7:not(.elementor-motion-effects-element-type-background), .elementor-619 .elementor-element.elementor-element-e89d7b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#050505;}.elementor-619 .elementor-element.elementor-element-e89d7b7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-619 .elementor-element.elementor-element-fba4e06{--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;}@media(max-width:767px){.elementor-619 .elementor-element.elementor-element-e89d7b7{--width:100%;}}/* Start custom CSS *//* ============================================================
   FACTTRIVIA - THE ULTIMATE FLEXBOX CHECKOUT (APPLE STYLE)
   ============================================================ */

/* 1. Page Background */
body.woocommerce-checkout {
    background-color: #050505 !important;
    color: #ffffff !important;
}

/* 2. Force Center Alignment & Flexbox for the whole form */
.woocommerce {
    max-width: 800px !important;
    margin: 40px auto 100px auto !important;
    padding: 0 20px !important;
}

.woocommerce form.checkout {
    display: flex !important;
    flex-direction: column !important; /* Forces everything to stack */
    width: 100% !important;
}

/* 3. Destroy WooCommerce Columns completely */
.woocommerce .col2-set {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce .col2-set .col-1, 
.woocommerce .col2-set .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    flex: 1 1 100% !important; /* Force full width */
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* 4. Giant, Easy-to-Tap Input Fields (Apple Vibe) */
.woocommerce form .form-row {
    width: 100% !important;
    margin-bottom: 25px !important;
    display: block !important;
}

.woocommerce form .form-row input[type="text"], 
.woocommerce form .form-row input[type="email"], 
.woocommerce form .form-row input[type="tel"], 
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 55px !important; /* Tall boxes for fat fingers */
    background-color: #111111 !important; /* Dark Grey Box - HIGH VISIBILITY */
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    border-radius: 8px !important; /* Smooth Apple Corners */
    padding: 0 15px !important;
    font-family: 'Lora', serif !important;
    font-size: 16px !important; /* Stops mobile auto-zoom */
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* Textarea needs special height */
.woocommerce form .form-row textarea {
    height: 100px !important;
    padding-top: 15px !important;
}

/* Golden Focus Effect */
.woocommerce form .form-row input:focus, 
.woocommerce form .form-row textarea:focus {
    border-color: #d4af37 !important;
    background-color: #1a1a1a !important;
    outline: none !important;
}

/* Dropdown Text Fix */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: 55px !important; /* Match box height */
    padding-left: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 55px !important;
}

/* 5. Labels - Clean & Gold */
.woocommerce form .form-row label {
    color: #d4af37 !important;
    font-family: 'Cinzel', serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 11px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* 6. Order Review Section */
#order_review_heading {
    color: #d4af37 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 24px !important;
    text-align: center !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}

#order_review {
    width: 100% !important;
}

/* Clean up the Table */
.woocommerce table.shop_table {
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    border-collapse: separate !important;
    background-color: #0a0a0a !important;
}

.woocommerce table.shop_table th, 
.woocommerce table.shop_table td {
    border-top: none !important;
    border-bottom: 1px solid #222 !important;
    padding: 15px !important;
    color: #fff !important;
}

.woocommerce table.shop_table th {
    color: #d4af37 !important;
    font-family: 'Cinzel', serif !important;
}

/* 7. Payment Box (Remove White Background) */
#payment {
    background: #0a0a0a !important;
    border-radius: 8px !important;
    border: 1px solid #333 !important;
    padding: 20px !important;
    margin-top: 30px !important;
}
#payment div.payment_box {
    background-color: #111 !important;
    color: #aaa !important;
    border: 1px solid #333 !important;
}
#payment div.payment_box::before {
    display: none !important; /* Hide ugly arrow */
}

/* 8. The Giant Place Order Button */
#place_order {
    background: linear-gradient(135deg, #d4af37, #aa771c) !important;
    color: #000000 !important;
    font-family: 'Cinzel', serif !important;
    letter-spacing: 4px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 20px !important;
    width: 100% !important;
    border-radius: 8px !important; /* Match inputs */
    border: none !important;
    margin-top: 20px !important;
}

/* 9. Hide Extra Mess */
.woocommerce-additional-fields, #billing_company_field, #billing_address_2_field, .woocommerce-form-login-toggle, .woocommerce-form-coupon-toggle {
    display: none !important;
}

/* 10. Notices Fix (Blue links to Gold) */
.woocommerce-info, .woocommerce-error {
    background-color: #111 !important;
    border: 1px solid #d4af37 !important;
    color: #fff !important;
}
.woocommerce-info a { color: #d4af37 !important; }/* End custom CSS */