/******************************************************
   1. KACHEL-AUSWAHL (ZENTRALE STEUERUNG)
******************************************************/
.mf-checkout-selection {
    display: flex;
    gap: 1.5rem;
    margin: 2.5rem 0;
    width: 100%;
}

.mf-checkout-tile {
    flex: 1;
    background: #ffffff;
    border-radius: 15px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 46, 87, 0.06);
    border: 1px solid #f0f0f0;
    min-height: 120px;
}

.mf-checkout-tile:hover {
    transform: translateY(-5px);
    border-color: #d19adf;
    box-shadow: 0 12px 25px rgba(209, 154, 223, 0.2);
}

.mf-checkout-tile.is-active {
    border: 2px solid #4a2e57;
    box-shadow: 0 4px 12px rgba(74, 46, 87, 0.1);
}

.mf-checkout-tile h4 {
    color: #4a2e57;
    font-size: 1.15rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.mf-checkout-tile p {
    color: #555555;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/******************************************************
   2. SEKTIONS-BOXEN & ALLGEMEINE FELDER
******************************************************/
/* Die rosa Sektions-Container */
.mf-section-box {
    background: #fceef5; /* Dein sanftes Rosa */
    border: 1px solid #fceef2;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
	overflow: visible !important; /* Wichtig, damit Tooltips oder Fehlermeldungen nicht abgeschnitten werden */
    transition: height 0.3s ease; /* Hilft dem Browser, weich auf Inhaltsänderungen zu reagieren */
}

.mf-fields-container {
    background: #ffffff !important;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.edd-label {
    display: block;
    font-weight: 700;
    color: #634d52;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.edd-input, .edd-select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background-color: #fcfcfc !important;
    transition: all 0.2s ease;
}

.edd-input:focus {
    border-color: #d19adf !important;
    background-color: #fff !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(209, 154, 223, 0.1);
}

/******************************************************
   3. SPEZIAL-LAYOUTS (ADRESSE & PASSWORT)
******************************************************/
/* PLZ & Ort Grid */
.mf-address-grid {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

/* Passwort-Wrapper für das Auge */
.mf-password-wrapper {
    position: relative;
    width: 100%;
}

.mf-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
}

/* Passwortstärke Balken */
.mf-strength-meter {
    height: 6px;
    background: #eee;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
    display: block; /* Sicherstellen, dass er sichtbar ist */
}

.mf-strength-meter div {
    height: 100%;
    transition: width 0.3s ease, background 0.3s ease;
    width: 0;
}

/* Mapping der JS-Klassen auf Farben */
.strength-1 div { width: 25%; background: #ef4444; }
.strength-2 div { width: 50%; background: #f59e0b; }
.strength-3 div { width: 75%; background: #10b981; }
.strength-4 div { width: 100%; background: #059669; }

/******************************************************
   4. FEHLERMELDUNGEN & HINWEISE
******************************************************/
.mf-field-message {
    display: block;
    min-height: 20px;
    margin-top: 5px;
    font-size: 0.85rem;
    color: #b91c1c; /* Standardmäßig Rot für Fehler */
    transition: all 0.3s ease;
    opacity: 0; /* Unsichtbar solange kein Text */
}

.mf-field-message:not(:empty) {
    opacity: 1;
}

.edd-input.is-invalid {
    border-color: #ef4444 !important;
    background-color: #fff9f9 !important;
}

#mf-mindful-note-container {
    background: #fff;
    border: 2px dashed #d19adf; /* Gestrichelte Linie wirkt weniger "hart" */
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    margin: 20px 0;
}

.mf-mindful-note {
    color: #4a2e57;
    font-style: italic;
    font-size: 0.95rem;
}

/******************************************************
   5. EDD STANDARDS AUSBLENDEN
******************************************************/
/* Wir blenden die Standard-Container aus, da wir unsere eigenen nutzen */
#edd_checkout_user_info, 
#edd_purchase_form fieldset legend,
.edd-privacy-policy-agreement,
#edd_payment_mode_select {
    display: none !important;
}

/* Container-Begradigung */
#edd_purchase_form fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/******************************************************
   6. INITIALE EINSTELUNGEN
******************************************************/
/* 1. Initialer Schutz: Alles außer Header & Kacheln verstecken */
#mf-section-login, 
#mf-section-email, 
#mf-section-password, 
#mf-section-address, 
#mf-section-legal,
#mf-section-final-step,
#edd_payment_mode_select_wrap,
.edd-loading-ajax {
    display: none;
}

/* 2. Sicherstellen, dass der Hauptcontainer und die Kacheln sichtbar sind */
/* diese weg
#mf-custom-checkout-container #edd_final_total_wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}
*/
.mf-checkout-selection {
    display: flex !important; /* Kacheln nebeneinander */
    visibility: visible !important;
}

/* 3. Den EDD-Standard-Container unsichtbar machen */
#edd_purchase_form_wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 4. Achtsame Box vs. Payment Area */
#mf-mindful-note-container {
    display: block; /* Standardmäßig sichtbar */
}

#mf-actual-payment-area {
    display: none; /* Erst bei 100% Validität */
}

/* 1. Blende die "Geister-Summe" im Standard-Container von EDD aus */
#edd_purchase_submit #edd_final_total_wrap {
    display: none !important;
}

/* 2. Stelle sicher, dass DEINE neue Summe in Block 5 sichtbar bleibt */
#mf-checkout-final-total {
    display: block;
}
/* Wir blenden alle Text-Elemente im Kauf-Bereich aus, die keine Buttons/Inputs sind */
#edd_purchase_submit p, 
#edd_purchase_submit span:not(.edd-loading-icon), 
#edd_purchase_submit strong,
#edd_purchase_submit b {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* Sicherheit: Falls das Theme ein div statt eines p nutzt */
#edd_purchase_submit div:not([id*="paypal"]):not([class*="spinner"]):not([class*="button"]) {
    display: none !important;
}

/* Initial alles ausblenden, was noch nicht bereit ist */
#mf-gatekeeper-note, 
#mf-actual-payment-area, 
#mf-section-legal, 
#mf-checkout-final-total {
    display: none;
}

/******************************************************
   7. Fromulare ohne Überschrift und Abstand
******************************************************/
#edd_checkout_form_wrap .mf-section-box h3 {
    display: none !important;
}

/* Den Abstand zwischen den Sektionen verringern */
.mf-section-box {
    margin-bottom: 10px !important; /* Standard war meist 25px */
    margin-top: 0 !important;
}

/* Den weißen Innenabstand der Felder-Container verkleinern */
.mf-fields-container {
    padding: 10px 15px !important; /* Standard war 20px */
}

/******************************************************
   8. MOBILE OPTIMIERUNG
******************************************************/
@media (max-width: 768px) {
    .mf-checkout-selection {
        flex-direction: column;
        gap: 1rem;
    }
    
    .mf-address-grid {
        flex-direction: column;
        gap: 0;
    }
    
    .mf-pw-column {
        width: 100%;
        margin-bottom: 15px;
    }
}