/* =========================================
   MEELO FORM STYLES (V5 - Stable)
   ========================================= */

:root {
    --meelo-primary: #3182ce;
    --meelo-border: #e2e8f0;
    --meelo-bg: #f8fafc;
}

/* Layout */
.meelo-submission-wrapper { display: flex; gap: 40px; max-width: 1200px; margin: 40px auto; align-items: flex-start; }
.meelo-form-col { flex: 1; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid var(--meelo-border); }
.meelo-preview-col { flex: 0 0 380px; position: sticky; top: 40px; }

/* Wizard */
.meelo-wizard-progress { display: flex; align-items: center; justify-content: center; margin: 30px auto; max-width: 800px; }
.step-dot { font-weight: 600; color: #cbd5e0; font-size: 0.9rem; padding: 8px 15px; border-radius: 50px; background: transparent; transition: all 0.3s; }
.step-dot.active { color: #fff; background: var(--meelo-primary); box-shadow: 0 4px 10px rgba(49, 130, 206, 0.3); }
.step-line { flex: 1; height: 2px; background: var(--meelo-border); margin: 0 5px; }

/* Steps Animation */
.meelo-step, .preview-conteiner { display: none; }
.meelo-step.active, .preview-conteiner.active { display: block; animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Inputs */
.meelo-input-group { margin-bottom: 20px; }
.meelo-input-group label { display: block; font-weight: 600; margin-bottom: 8px; color: #2d3748; font-size: 0.9rem; }
.meelo-input-group input, .meelo-input-group textarea, .meelo-input-group select {
    width: 100%; padding: 12px; border: 1px solid var(--meelo-border); border-radius: 8px; background: var(--meelo-bg); font-size: 1rem; box-sizing: border-box;
}
.meelo-input-group input:focus { border-color: var(--meelo-primary); outline: none; background: #fff; }
.form-row { display: flex; gap: 20px; }

/* MAP FIX */
#meelo-submission-map, #meelo-training-map { 
    width: 100%; height: 250px; border-radius: 8px; border: 1px solid #ccc; margin-bottom: 20px; display: block; 
}

/* DROPZONE FIX */
.meelo-dropzone {
    border: 2px dashed var(--meelo-border); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; background: var(--meelo-bg); position: relative; min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.meelo-dropzone:hover { border-color: var(--meelo-primary); background: #ebf8ff; }
.meelo-dropzone .dz-content { pointer-events: none; /* WICHTIG: Damit Klicks durchgehen */ }
.meelo-dropzone .dashicons { font-size: 30px; color: #a0aec0; height: 30px; width: 30px; margin-bottom: 5px; }

.dz-preview-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; margin-top: 10px; }
.dz-thumb { position: relative; width: 70px; height: 70px; border-radius: 6px; overflow: hidden; border: 1px solid #ddd; background: #fff; }
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dz-remove { position: absolute; top: 2px; right: 2px; background: red; color: white; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; cursor: pointer; line-height: 1; z-index: 10; }

/* Preview Styles */
.meelo-preview-frame { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.preview-card-dummy { position: relative; border-radius: 16px; overflow: hidden; background-color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); height: 320px; }
.meelo-card-bg { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #eee; }
.meelo-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%); }
.meelo-card-content { position: absolute; bottom: 20px; left: 20px; right: 20px; color: #fff; z-index: 2; }
.preview-card-logo { position: absolute; bottom: 15px; right: 15px; width: 40px; height: 40px; z-index: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.preview-card-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Stats Grid Clean */
.prev-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; }
.stat-box { background: #fff; border: 1px solid #edf2f7; border-radius: 6px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.stat-box span { font-size: 0.65rem; color: #a0aec0; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.stat-box b { font-size: 0.9rem; color: #2d3748; margin-top: 2px; }

/* Buttons */
.meelo-btn-row { margin-top: 30px; display: flex; gap: 15px; border-top: 1px solid #eee; padding-top: 20px; }
.meelo-btn-row.split { justify-content: space-between; }
.meelo-submit-btn, .meelo-btn-next { background: var(--meelo-primary); color: #fff; padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }
.meelo-btn-back { background: transparent; color: #718096; padding: 12px 24px; border: 1px solid #cbd5e0; border-radius: 8px; cursor: pointer; }

/* Website Prefix */
.meelo-input-prefix-wrapper { display: flex; align-items: stretch; border: 1px solid var(--meelo-border); border-radius: 8px; overflow: hidden; }
.meelo-input-prefix-wrapper .prefix { background: #edf2f7; color: #718096; padding: 12px; font-size: 0.9rem; border-right: 1px solid var(--meelo-border); }
.meelo-input-prefix-wrapper input { border: none !important; border-radius: 0 !important; }

/* Mobile */
@media (max-width: 900px) { .meelo-submission-wrapper { flex-direction: column-reverse; } .meelo-preview-col { width: 100%; position: static; } }
/* Ergänzungen */
.btn-clear { background: transparent; border: 1px solid #ccc; color: #666; font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; cursor: pointer; }
.btn-clear:hover { background: #eee; }
.time-row input, .time-row select { padding: 5px !important; font-size: 0.9rem !important; }
/* Update für Buttons & Inputs */
.meelo-input-group select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 30px; }
.meelo-btn-dashed { width: 100%; border: 2px dashed #cbd5e0; background: transparent; color: #718096; padding: 10px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.meelo-btn-dashed:hover { border-color: #3182ce; color: #3182ce; background: #ebf8ff; }

/* Box für Buttons Design */
.meelo-box-gray { background: #f7fafc; border: 1px solid #edf2f7; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.box-header h4 { margin: 0; color: #2d3748; }
.btn-clear { color: #e53e3e; font-size: 0.8rem; background: #fff; border: 1px solid #e53e3e; padding: 2px 8px; border-radius: 4px; cursor: pointer; }

/* Dropzone X Button Fix */
.dz-thumb .dz-remove { position: absolute; top: -5px; right: -5px; background: #e53e3e; color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s; }
.dz-thumb .dz-remove:hover { transform: scale(1.1); }

/* Preview Updates */
.preview-header-minimal { padding: 15px 20px; display: flex; align-items: center; gap: 15px; margin-top: -30px; position: relative; z-index: 10; }
.meelo-logo-wrap-small { width: 60px; height: 60px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.meelo-logo-wrap-small img { width: 100%; height: 100%; object-fit: contain; }
.header-text h1 { font-size: 1.1rem; margin: 0; color: #2d3748; }
.header-text p { font-size: 0.8rem; margin: 0; color: #718096; }
.preview-actions { padding: 0 20px; display: flex; gap: 10px; margin-bottom: 15px; }
.mini-btn { padding: 6px 12px; border-radius: 4px; color: #fff; font-size: 0.7rem; font-weight: bold; background: #ccc; }
.preview-body { padding: 20px; border-top: 1px solid #eee; }
/* Update für Buttons & Inputs */
.meelo-input-group select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 30px; }
.meelo-btn-dashed { width: 100%; border: 2px dashed #cbd5e0; background: transparent; color: #718096; padding: 10px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.meelo-btn-dashed:hover { border-color: #3182ce; color: #3182ce; background: #ebf8ff; }

/* Box für Buttons Design */
.meelo-box-gray { background: #f7fafc; border: 1px solid #edf2f7; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.box-header h4 { margin: 0; color: #2d3748; }
.btn-clear { color: #e53e3e; font-size: 0.8rem; background: #fff; border: 1px solid #e53e3e; padding: 2px 8px; border-radius: 4px; cursor: pointer; }

/* Dropzone Updates */
.dz-thumb .dz-remove { position: absolute; top: -5px; right: -5px; background: #e53e3e; color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: transform 0.2s; cursor: pointer; }
.dz-thumb .dz-remove:hover { transform: scale(1.1); }

/* Time Row Input Sizing */
.time-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; align-items: center; background: #fff; padding: 5px; border: 1px solid #eee; border-radius: 4px; }
.tr-day { width: 55px !important; padding: 5px !important; }
.tr-start, .tr-end { width: 70px !important; padding: 5px !important; }
.tr-note { flex: 1; min-width: 120px; padding: 5px !important; font-size: 0.9rem !important; }
.btn-del-time { background: #fee2e2; border: none; color: #c53030; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; }

/* PREVIEW UPDATES (Optimiertes Layout) */
.preview-header-minimal { padding: 15px 20px; display: flex; align-items: flex-end; gap: 15px; margin-top: -30px; position: relative; z-index: 10; flex-wrap: wrap; }
.meelo-logo-wrap-small { width: 70px; height: 70px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 2px; }
.meelo-logo-wrap-small img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

.header-text { flex: 1; min-width: 150px; }
.header-text h1 { font-size: 1.1rem; margin: 0; color: #2d3748; line-height: 1.2; }
.header-text p { font-size: 0.8rem; margin: 2px 0 0 0; color: #718096; }
.header-text .preview-badge { font-size: 0.65rem; background: #edf2f7; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; color: #4a5568; display: inline-block; margin-bottom: 2px; display:none; }

.preview-actions { padding: 0 20px; display: flex; gap: 8px; margin-bottom: 15px; margin-top: 5px; }
.mini-btn { padding: 6px 12px; border-radius: 4px; color: #fff; font-size: 0.7rem; font-weight: bold; background: #ccc; }

.preview-body { padding: 20px; border-top: 1px solid #eee; }
.prev-text-block { font-size: 0.85rem; color: #4a5568; line-height: 1.5; margin-bottom: 15px; }
/* ... bestehender Code ... */

/* PREVIEW HEADER FIX */
.preview-header-minimal { 
    display: flex; 
    align-items: flex-end; 
    gap: 15px; 
    margin-top: -30px; 
    position: relative; 
    z-index: 10; 
    padding: 0 20px 15px 20px; 
}
.meelo-logo-wrap-small { 
    width: 80px; height: 80px; 
    background: #fff; 
    border-radius: 8px; 
    padding: 2px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    flex-shrink: 0;
}
.meelo-logo-wrap-small img { width: 100%; height: 100%; object-fit: contain; }

.header-text h1 { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); font-size: 1.2rem; margin: 0; line-height: 1.1; }
.header-text p { color: #f7fafc; text-shadow: 0 1px 2px rgba(0,0,0,0.5); font-size: 0.8rem; margin: 2px 0 0 0; }

.preview-actions { padding: 0 20px 15px 20px; display: flex; gap: 10px; justify-content: flex-end; margin-top: -40px; position: relative; z-index: 11; pointer-events: none; }
.mini-btn { padding: 4px 10px; border-radius: 4px; color: #fff; font-size: 0.65rem; font-weight: bold; background: #ccc; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* STATS CLEAN PREVIEW */
.prev-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 15px; }
.stat-box { background: #f8fafc; border: 1px solid #edf2f7; border-radius: 6px; padding: 10px; text-align: center; }
.stat-box span { display: block; font-size: 0.6rem; text-transform: uppercase; color: #a0aec0; font-weight: 700; }
.stat-box b { display: block; font-size: 0.95rem; color: #2d3748; margin-top: 2px; }