/**
 * wezunu — Smart Route Wizard
 * Developed by Toni Sciacca - mail@tonisciacca.com
 */

/* ── Overlay ── */
.rw-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(10,10,20,.7); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; opacity: 0; transition: opacity .2s, visibility .2s;
    /* Geschlossen: unsichtbar UND klick-durchlässig, sonst blockiert die
       opacity:0-Ebene (z-index 9000) die gesamte Navigation dahinter. */
    visibility: hidden; pointer-events: none;
}
.rw-overlay.rw-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* ── Modal ── */
.rw-modal {
    width: 100%; max-width: 620px; max-height: 92vh;
    background: #fff; border-radius: 22px;
    box-shadow: 0 32px 80px rgba(0,0,0,.4);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(24px) scale(.97); transition: transform .25s;
}
.rw-overlay.rw-open .rw-modal { transform: none; }

/* ── Header ── */
.rw-header {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px 16px; border-bottom: 1px solid #f0f2f5;
}
.rw-header-icon {
    width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #FF385C, #a855f7);
    display: flex; align-items: center; justify-content: center;
}
.rw-header-icon i { width: 18px; height: 18px; color: #fff; }
.rw-header h2 { font-size: 17px; font-weight: 800; flex: 1; margin: 0; letter-spacing: -.3px; }
.rw-close { background: none; border: none; cursor: pointer; padding: 4px; color: #94a3b8; }
.rw-close i { width: 20px; height: 20px; }

/* ── Stepper (nummerierte Kreise + Verbindungslinie) ── */
.rw-progress { padding: 16px 22px 6px; }
.rw-stepper { display: flex; }
.rw-st { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.rw-st::before { content: ''; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: #e5e7eb; z-index: 1; }
.rw-st:first-child::before { display: none; }
.rw-st-c {
    width: 30px; height: 30px; border-radius: 50%; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    font: 800 13px 'Outfit', sans-serif;
    background: #f1f5f9; color: #94a3b8; border: 2px solid #f1f5f9;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.rw-st-c i, .rw-st-c svg { width: 15px; height: 15px; }
.rw-st-l { font-size: 11px; font-weight: 600; color: #94a3b8; margin-top: 6px; transition: color .2s; white-space: nowrap; }
.rw-st.active .rw-st-c { background: #FF385C; border-color: #FF385C; color: #fff; box-shadow: 0 0 0 4px rgba(255,56,92,.15); }
.rw-st.active .rw-st-l { color: #FF385C; font-weight: 700; }
.rw-st.done .rw-st-c { background: #FF385C; border-color: #FF385C; color: #fff; }
.rw-st.done .rw-st-l { color: #1a1a1a; }
.rw-st.done::before, .rw-st.active::before { background: #FF385C; }

/* ── Beliebte Ziele ── */
.rw-pop-title { font-size: 12px; font-weight: 700; color: #64748b; margin: 20px 0 10px; }

/* ── Body ── */
.rw-body { flex: 1; overflow-y: auto; padding: 24px 22px 8px; }
.rw-step { display: none; }
.rw-step.rw-step-active { display: block; }
.rw-step-title { font-size: 20px; font-weight: 800; letter-spacing: -.4px; margin-bottom: 6px; }
.rw-step-sub { font-size: 13px; color: #64748b; margin-bottom: 20px; }

/* ── Destination Search ── */
.rw-dest-wrap { position: relative; margin-bottom: 8px; }
.rw-dest-wrap svg.rw-search-icon,
.rw-dest-wrap i.rw-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: #94a3b8; pointer-events: none;
    display: block; z-index: 1;
}
.rw-dest-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px 12px 42px;
    border: 2px solid #e2e8f0; border-radius: 999px;
    font: 500 15px 'Outfit', sans-serif; outline: none; transition: border-color .15s;
}
.rw-dest-input:focus { border-color: #FF385C; }
.rw-dest-results { border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; margin-top: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.rw-dest-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background .1s; }
.rw-dest-item:hover { background: #faf5ff; }
.rw-dest-item i, .rw-dest-item svg { width: 14px; height: 14px; color: #94a3b8; flex-shrink: 0; }
.rw-dest-name { font-size: 13px; font-weight: 600; }
.rw-dest-sub { font-size: 11px; color: #94a3b8; }
.rw-dest-selected { background: #fdf4ff; border: 2px solid #a855f7; border-radius: 999px; padding: 10px 18px; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rw-dest-selected i, .rw-dest-selected svg { width: 16px; height: 16px; color: #a855f7; }
.rw-dest-selected strong { font-size: 14px; flex: 1; }
.rw-dest-clear { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 2px; }
.rw-dest-clear i, .rw-dest-clear svg { width: 16px; height: 16px; }

/* ── Chips ── */
.rw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rw-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 16px; border-radius: 50px;
    font: 600 13px 'Outfit', sans-serif; cursor: pointer;
    border: 2px solid #e2e8f0; background: #f8fafc; color: #475569;
    transition: all .15s; user-select: none;
}
.rw-chip i { width: 15px; height: 15px; }
.rw-chip.active { background: #FF385C; border-color: #FF385C; color: #fff; }
.rw-chip.active i { color: #fff; }

/* ── Dauer Slider ── */
.rw-dauer-val { font-size: 42px; font-weight: 800; color: #FF385C; text-align: center; margin: 8px 0; letter-spacing: -1px; }
.rw-dauer-unit { font-size: 14px; color: #94a3b8; text-align: center; margin-bottom: 16px; }
.rw-dauer-slider { width: 100%; accent-color: #FF385C; }
.rw-dauer-labels { display: flex; justify-content: space-between; font-size: 11px; color: #cbd5e1; font-weight: 600; margin-top: 4px; }

/* ── Spider + Sliders ── */
.rw-spider-wrap { margin: 4px 0 20px; }
.rw-spider-sliders { display: flex; flex-direction: column; gap: 14px; }
.rw-ssl-row { display: flex; align-items: center; gap: 10px; }
.rw-ssl-lbl { font-size: 12px; font-weight: 700; width: 60px; flex-shrink: 0; }
.rw-ssl-val { font-size: 12px; font-weight: 700; color: #94a3b8; width: 28px; text-align: right; flex-shrink: 0; }
.rw-ssl-inp {
    flex: 1; height: 6px; border-radius: 999px; outline: none; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: linear-gradient(to right, var(--ssl-color, #FF385C) 0%, var(--ssl-color, #FF385C) var(--pct,50%), #e2e8f0 var(--pct,50%));
}
.rw-ssl-inp::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; border: 3px solid var(--ssl-color, #FF385C);
    box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer;
}
.rw-ssl-inp::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ssl-color, #FF385C);
    background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer;
}

/* ── Varianten ── */
.rw-variants { display: flex; flex-direction: column; gap: 14px; }
.rw-variant-card {
    border: 2px solid #e2e8f0; border-radius: 14px; padding: 16px; cursor: pointer;
    transition: border-color .15s, box-shadow .15s; position: relative;
}
.rw-variant-card:hover { border-color: #FF385C; box-shadow: 0 4px 16px rgba(255,56,92,.12); }
.rw-variant-card.selected { border-color: #FF385C; box-shadow: 0 0 0 3px rgba(255,56,92,.15); }
.rw-variant-card.selected::after { content: ''; position:absolute; top:12px; right:12px; width:20px; height:20px; background:#FF385C; border-radius:50%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:14px; background-position:center; background-repeat:no-repeat; }
.rw-var-typ-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rw-var-typ { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:50px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; background:#fff4f5; color:#FF385C; }
.rw-var-match { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 8px; border-radius:50px; font-size:10px; font-weight:700; background:#f0fdf4; color:#16a34a; }
.rw-var-match svg { flex-shrink:0; }
.rw-dna-hint { display:flex; align-items:center; gap:6px; padding:8px 12px; background:rgba(255,56,92,.05); border:1px solid rgba(255,56,92,.12); border-radius:8px; font-size:11.5px; color:#FF385C; margin-bottom:12px; font-weight:600; }
.rw-var-title { font-size:16px; font-weight:800; letter-spacing:-.3px; margin-bottom:4px; }
.rw-var-desc { font-size:12px; color:#64748b; line-height:1.5; margin-bottom:10px; }
.rw-var-days { display:flex; flex-direction:column; gap:5px; }
.rw-var-day { display:flex; align-items:flex-start; gap:8px; }
.rw-var-day-num { width:20px; height:20px; border-radius:50%; background:#FF385C; color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rw-var-day-body { flex:1; }
.rw-var-day-title { font-size:12px; font-weight:700; color:#1a1a1a; }
.rw-var-pois { font-size:11px; color:#64748b; }

/* ── Loading ── */
.rw-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; gap:12px; }
.rw-loading-spinner { width:36px; height:36px; border:3px solid #f0f2f5; border-top-color:#FF385C; border-radius:50%; animation:rw-spin .8s linear infinite; }
@keyframes rw-spin { to { transform:rotate(360deg); } }
.rw-loading-txt { font-size:13px; color:#64748b; font-weight:500; }

/* ── Footer ── */
.rw-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 22px 20px; border-top: 1px solid #f0f2f5;
}
.rw-btn { display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 20px; border-radius:50px; font:700 13px 'Outfit',sans-serif; cursor:pointer; border:none; transition:opacity .15s; }
.rw-btn:disabled { opacity:.4; cursor:default; }
.rw-btn i { width:15px; height:15px; }
.rw-btn-ghost { background:#f1f5f9; color:#475569; }
.rw-btn-ghost:hover:not(:disabled) { background:#e2e8f0; }
.rw-btn-primary { background:#FF385C; color:#fff; box-shadow:0 4px 14px rgba(255,56,92,.3); }
.rw-btn-primary:hover:not(:disabled) { opacity:.9; }
.rw-btn-success { background:#22c55e; color:#fff; box-shadow:0 4px 14px rgba(34,197,94,.3); }
.rw-step-indicator { font-size:12px; color:#94a3b8; font-weight:600; }