/* --- ULTIMATIVER CONVERSION CHECKOUT --- */

/* 1. Verstecke alles Unnötige (Header, Footer, Breadcrumbs, Gutschein-Box) */
header, footer, .site-header, .site-footer, .sidebar, .ast-header-breadcrumb, { 
    display: none !important; 
}

/* 2. Hintergrund und Grundlayout */
body, html { 
    background-color: #f3f4f6 !important; 
}

/* 3. Der Haupt-Container (Zentrierte weiße Karte) */
.woocommerce-checkout .site-main, 
.woocommerce-checkout #main, 
form.checkout {
    max-width: 500px !important; /* Schmaler, fokussierter Container */
    margin: 40px auto !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important;
    padding: 40px !important;
    display: block !important; /* Flexbox deaktivieren, um das Chaos zu beenden */
}

/* 4. Layout-Spalten auf 100% Breite zwingen (Kein 2-Spalten-Chaos mehr) */
.col2-set .col-1, 
.col2-set .col-2, 
#customer_details, 
#order_review {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 5. Überschriften ("Rechnungsdetails", "Zusätzliche Informationen") verstecken */
#customer_details h3, 
.woocommerce-additional-fields h3,
#order_review_heading { 
    display: none !important; 
}

/* 6. Bestellübersicht (Ganz oben) */
#order_review {
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 2px dashed #e5e7eb !important;
}
.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border: none !important;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    border: none !important;
    background: transparent !important;
    padding: 8px 0 !important;
}
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
    display: none !important;
}
.woocommerce-checkout-review-order-table tbody td.product-name { 
    font-weight: 600 !important; 
    color: #111827 !important;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 16px !important;
}

/* 7. Eingabefelder (Name, Land, E-Mail) */
.woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important; /* Abstand zwischen den Feldern */
    margin-bottom: 30px !important;
}
.woocommerce-checkout .form-row {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-checkout .form-row label { 
    display: none !important; /* Labels verstecken */
} 
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: none !important;
    line-height: 50px !important;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: #111827 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #111827 !important;
}

/* 8. Zahlungsarten (PayPal, Karte etc.) */
#payment { 
    background: transparent !important; 
    padding: 0 !important; 
}
#payment ul.payment_methods { 
    border: none !important; 
    padding: 0 !important; 
}
#payment ul.payment_methods li {
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    padding: 16px !important;
    background: #ffffff !important;
}
#payment ul.payment_methods li input[type="radio"] {
    margin-right: 12px !important;
    transform: scale(1.2);
}

/* 9. Der Kaufen Button */
#place_order {
    width: 100% !important;
    background-color: #111827 !important;
    color: #ffffff !important;
    padding: 18px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 999px !important; /* Pill shape */
    border: none !important;
    margin-top: 24px !important;
    transition: background 0.2s ease !important;
}
#place_order:hover { 
    background-color: #374151 !important; 
}

/* 10. Mobile Optimierung */
@media (max-width: 600px) {
    .woocommerce-checkout .site-main, 
    .woocommerce-checkout #main, 
    form.checkout {
        margin: 20px 16px !important;
        padding: 24px !important;
    }
}