/* ===== PROJEKT-WIZARD v2 ===== */

/* Hero */
.hero-konfigurator{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);padding:120px 0 80px;text-align:center}
.hero-konfigurator h1{font-size:2.5rem;font-weight:700;margin-bottom:1rem;color:var(--dark-color)}
.hero-konfigurator .hero-subtitle{font-size:1.15rem;color:var(--gray-color);max-width:480px;margin:0 auto}

/* Section */
.wiz-section{padding:3rem 0 5rem;background:#fff}

/* ===== PROGRESS BAR ===== */
.wiz-progress{max-width:700px;margin:0 auto 2.5rem;position:relative}
.wiz-prog-track{height:4px;background:#e2e8f0;border-radius:4px;position:relative;margin-bottom:1.5rem}
.wiz-prog-fill{height:100%;background:var(--primary-color);border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1);width:0}
.wiz-prog-steps{display:flex;justify-content:space-between}
.wiz-prog-step{display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer}
.wiz-prog-dot{width:36px;height:36px;border-radius:50%;background:#e2e8f0;color:#94a3b8;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;transition:all .3s ease;border:3px solid #e2e8f0}
.wiz-prog-step.active .wiz-prog-dot{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 4px 14px rgba(197,165,114,.35)}
.wiz-prog-step.done .wiz-prog-dot{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}
.wiz-prog-label{font-size:.72rem;color:#94a3b8;font-weight:500;text-align:center;max-width:80px;line-height:1.2}
.wiz-prog-step.active .wiz-prog-label,.wiz-prog-step.done .wiz-prog-label{color:var(--primary-color);font-weight:600}

/* ===== STEPS ===== */
.wiz-step{display:none;animation:wizFadeIn .35s ease}
.wiz-step.active{display:block}
@keyframes wizFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.wiz-step-head{text-align:center;margin-bottom:2rem}
.wiz-step-label{display:inline-block;font-size:.78rem;font-weight:600;color:var(--primary-color);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}
.wiz-step-head h2{font-size:1.6rem;font-weight:700;color:var(--dark-color);margin:0 0 .4rem}
.wiz-step-head p{font-size:.95rem;color:var(--gray-color);margin:0}

/* ===== SERVICE CARDS (Step 1) ===== */
.wiz-services{display:flex;flex-direction:column;gap:.75rem;max-width:650px;margin:0 auto}
.wiz-svc{position:relative;cursor:pointer;display:block}
.wiz-svc input{display:none}
.wiz-svc-inner{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;border:2px solid #e2e8f0;border-radius:14px;background:#fff;transition:all .3s ease}
.wiz-svc:hover .wiz-svc-inner{border-color:rgba(197,165,114,.4);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.wiz-svc input:checked ~ .wiz-svc-inner{border-color:var(--primary-color);background:linear-gradient(135deg,rgba(197,165,114,.08),rgba(197,165,114,.03));box-shadow:0 4px 20px rgba(197,165,114,.15)}
.wiz-svc-badge{position:absolute;top:-8px;right:16px;background:var(--primary-color);color:#fff;font-size:.68rem;font-weight:700;padding:.2rem .75rem;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;z-index:2}
.wiz-svc-icon{width:48px;height:48px;background:linear-gradient(135deg,var(--primary-color),var(--primary-light));border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wiz-svc-icon i{font-size:1.15rem;color:#fff}
.wiz-svc-info{flex:1;text-align:left}
.wiz-svc-info h3{font-size:1.05rem;font-weight:700;color:var(--dark-color);margin:0 0 .15rem}
.wiz-svc-info p{font-size:.82rem;color:var(--gray-color);margin:0}
.wiz-svc-price{font-size:1.1rem;font-weight:700;color:var(--primary-color);white-space:nowrap;flex-shrink:0}

/* ===== FIELD GROUPS ===== */
.wiz-field-group{margin-bottom:1.75rem}
.wiz-field-label{display:block;font-size:.92rem;font-weight:600;color:var(--dark-color);margin-bottom:.6rem}

/* Inputs */
.wiz-input,.wiz-textarea,.wiz-select{width:100%;padding:.8rem 1rem;border:2px solid #e2e8f0;border-radius:10px;font-size:.95rem;font-family:inherit;background:#fff;transition:border-color .25s ease,box-shadow .25s ease;color:var(--dark-color)}
.wiz-input:focus,.wiz-textarea:focus,.wiz-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(197,165,114,.12)}
.wiz-textarea{resize:vertical}
.wiz-hint{display:block;margin-top:.3rem;font-size:.78rem;color:#94a3b8}

/* Domain combo */
.wiz-domain-combo{display:flex;flex-direction:column;gap:.75rem}
.wiz-domain-input{flex:1}
.wiz-tld-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.wiz-tld{cursor:pointer}
.wiz-tld input{display:none}
.wiz-tld span{display:inline-block;padding:.4rem .85rem;border:2px solid #e2e8f0;border-radius:8px;font-size:.82rem;font-weight:600;color:#64748b;background:#fff;transition:all .25s ease}
.wiz-tld:hover span{border-color:rgba(197,165,114,.4)}
.wiz-tld input:checked ~ span{border-color:var(--primary-color);background:var(--primary-color);color:#fff}

/* Branch grid */
.wiz-branch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.6rem}
.wiz-branch{cursor:pointer}
.wiz-branch input{display:none}
.wiz-branch span{display:flex;align-items:center;gap:.55rem;padding:.7rem 1rem;border:2px solid #e2e8f0;border-radius:10px;font-size:.85rem;font-weight:500;color:var(--dark-color);transition:all .25s ease;background:#fff}
.wiz-branch span i{color:var(--primary-color);font-size:.9rem;width:18px;text-align:center;flex-shrink:0}
.wiz-branch:hover span{border-color:rgba(197,165,114,.35);background:rgba(197,165,114,.03);transform:translateY(-1px)}
.wiz-branch input:checked ~ span{border-color:var(--primary-color);background:rgba(197,165,114,.08);box-shadow:0 3px 12px rgba(197,165,114,.12)}
.wiz-branch-other{margin-top:.75rem;animation:wizFadeIn .3s ease}

/* ===== STYLE GRID (Design) ===== */
.wiz-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.wiz-style-opt{cursor:pointer}
.wiz-style-opt input{display:none}
.wiz-style-card{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1.4rem .75rem 1.1rem;border:2px solid #e2e8f0;border-radius:16px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);background:#fff;position:relative;overflow:hidden}
.wiz-style-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:transparent;transition:background .3s ease;border-radius:16px 16px 0 0}
.wiz-style-opt:hover .wiz-style-card{border-color:rgba(197,165,114,.35);transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.07)}
.wiz-style-opt input:checked ~ .wiz-style-card{border-color:var(--primary-color);background:#fff;box-shadow:0 8px 28px rgba(197,165,114,.18)}
.wiz-style-opt input:checked ~ .wiz-style-card::after{background:var(--primary-color)}
.wiz-style-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:transform .3s ease}
.wiz-style-icon i{font-size:1.1rem;color:#fff}
.wiz-style-opt:hover .wiz-style-icon{transform:scale(1.1) rotate(3deg)}
.wiz-style-card strong{font-size:.82rem;color:var(--dark-color);line-height:1.25}

/* ===== COLOR BUBBLES ===== */
.wiz-color-bubbles{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;padding:.5rem 0}
.wiz-bubble{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.wiz-bubble input{display:none}
.wiz-bubble-dot{width:48px;height:48px;border-radius:50%;border:3px solid transparent;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 10px rgba(0,0,0,.12);position:relative}
.wiz-bubble-dot::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;opacity:0;transition:opacity .25s ease}
.wiz-bubble:hover .wiz-bubble-dot{transform:scale(1.15);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.wiz-bubble input:checked ~ .wiz-bubble-dot{border-color:var(--primary-color);transform:scale(1.2);box-shadow:0 6px 24px rgba(197,165,114,.35)}
.wiz-bubble input:checked ~ .wiz-bubble-dot::after{opacity:1}
.wiz-bubble small{font-size:.72rem;color:#64748b;font-weight:600;transition:color .25s ease}
.wiz-bubble input:checked ~ small{color:var(--primary-color)}
.wiz-bubble-unsure::before{content:'\f128';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:1rem;z-index:1}
.wiz-bubble input:checked ~ .wiz-bubble-unsure::before{color:#fff}

/* ===== PILL RADIOS ===== */
.wiz-radio-row{display:flex;flex-wrap:wrap;gap:.6rem}
.wiz-pill{cursor:pointer}
.wiz-pill input{display:none}
.wiz-pill span{display:inline-block;padding:.55rem 1.25rem;border:2px solid #e2e8f0;border-radius:30px;font-size:.88rem;font-weight:500;color:var(--dark-color);transition:all .25s ease;background:#fff}
.wiz-pill:hover span{border-color:rgba(197,165,114,.4)}
.wiz-pill input:checked ~ span{border-color:var(--primary-color);background:var(--primary-color);color:#fff}

/* ===== CHECK GRID ===== */
.wiz-check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem}
.wiz-check,.wiz-check-sm{cursor:pointer;position:relative}
.wiz-check input,.wiz-check-sm input{display:none}
.wiz-check span{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:10px;font-size:.88rem;font-weight:500;color:var(--dark-color);transition:all .25s ease;background:#fff}
.wiz-check:hover span{border-color:rgba(197,165,114,.4)}
.wiz-check input:checked ~ span{border-color:var(--primary-color);background:rgba(197,165,114,.06)}
.wiz-check span i{color:var(--primary-color);font-size:.9rem;width:18px;flex-shrink:0}
.wiz-check small{position:absolute;top:-7px;right:8px;font-size:.65rem;color:var(--primary-color);font-weight:600;background:#fff;padding:0 .3rem}
.wiz-check.checked-always span{opacity:.7}

/* Pages counter */
.wiz-pages-counter{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
.wiz-pages-info{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:#f1f5f9;border-radius:10px;font-size:.85rem;color:var(--dark-color)}
.wiz-pages-info i{color:var(--primary-color);flex-shrink:0}
.wiz-pages-extra{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:rgba(197,165,114,.08);border:1.5px solid rgba(197,165,114,.25);border-radius:10px;font-size:.85rem;color:var(--dark-color);animation:wizFadeIn .3s ease}
.wiz-pages-extra i{color:var(--primary-color);flex-shrink:0}

/* Small check row */
.wiz-check-row{display:flex;flex-wrap:wrap;gap:.6rem}
.wiz-check-sm span{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border:2px solid #e2e8f0;border-radius:10px;font-size:.85rem;font-weight:500;color:var(--dark-color);transition:all .25s ease;background:#fff}
.wiz-check-sm:hover span{border-color:rgba(197,165,114,.4)}
.wiz-check-sm input:checked ~ span{border-color:var(--primary-color);background:rgba(197,165,114,.06)}

/* ===== MATERIAL GRID (Step 5) ===== */
.wiz-material-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:550px;margin:0 auto}
.wiz-material{cursor:pointer}
.wiz-material input{display:none}
.wiz-material-inner{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:2rem 1rem;border:2px solid #e2e8f0;border-radius:14px;text-align:center;transition:all .3s ease;background:#fff}
.wiz-material:hover .wiz-material-inner{border-color:rgba(197,165,114,.4);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.06)}
.wiz-material input:checked ~ .wiz-material-inner{border-color:var(--primary-color);background:rgba(197,165,114,.06);box-shadow:0 6px 20px rgba(197,165,114,.15)}
.wiz-material-inner i{font-size:1.8rem;color:var(--primary-color)}
.wiz-material-inner strong{font-size:.9rem;color:var(--dark-color)}

/* ===== CONTACT GRID ===== */
.wiz-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Privacy */
.wiz-privacy{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:.88rem;color:var(--dark-color);line-height:1.5}
.wiz-privacy input{margin-top:.2rem;flex-shrink:0;width:18px;height:18px;accent-color:var(--primary-color)}
.wiz-privacy a{color:var(--primary-color);text-decoration:none}
.wiz-privacy a:hover{text-decoration:underline}

/* ===== NAVIGATION ===== */
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2.5rem;padding-top:2rem;border-top:1px solid #e2e8f0}
.wiz-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.75rem;border:none;border-radius:10px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none}
.wiz-btn-back{background:#f1f5f9;color:#64748b}
.wiz-btn-back:hover{background:#e2e8f0;transform:translateX(-3px)}
.wiz-btn-next,.wiz-btn-submit{background:var(--primary-color);color:#fff}
.wiz-btn-next:hover,.wiz-btn-submit:hover{background:var(--primary-dark);transform:translateX(3px)}
.wiz-btn-submit{padding:.9rem 2rem;font-size:1rem}
.wiz-btn-next:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ===== MODAL ===== */
.wiz-modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(4px)}
.wiz-modal.active{display:flex}
.wiz-modal-box{background:#fff;border-radius:18px;padding:2.5rem;text-align:center;max-width:420px;width:90%;animation:wizFadeIn .35s ease}
.wiz-modal-icon{width:64px;height:64px;background:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;color:#fff;font-size:1.6rem}
.wiz-modal-box h2{font-size:1.4rem;color:var(--dark-color);margin-bottom:.75rem}
.wiz-modal-box p{font-size:.92rem;color:var(--gray-color);line-height:1.6;margin-bottom:1.5rem}
.wiz-modal-actions{display:flex;justify-content:center;gap:.75rem}

/* ===== ERROR TOAST ===== */
.wiz-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:#ef4444;color:#fff;padding:.85rem 1.5rem;border-radius:12px;font-size:.9rem;font-weight:500;z-index:10001;opacity:0;transition:all .35s ease;box-shadow:0 8px 30px rgba(239,68,68,.3)}
.wiz-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .hero-konfigurator{padding:100px 0 60px}
    .hero-konfigurator h1{font-size:2rem}
    .wiz-section{padding:2rem 0 3rem}
    .wiz-prog-label{display:none}
    .wiz-prog-dot{width:30px;height:30px;font-size:.75rem}
    .wiz-step-head h2{font-size:1.35rem}
    .wiz-svc-inner{flex-wrap:wrap;padding:1rem 1.25rem}
    .wiz-svc-price{width:100%;text-align:left;margin-top:.25rem;padding-left:3.75rem}
    .wiz-style-grid{grid-template-columns:repeat(3,1fr);gap:.6rem}
    .wiz-style-card{padding:1rem .5rem}
    .wiz-style-icon{width:40px;height:40px;border-radius:11px}
    .wiz-style-icon i{font-size:.95rem}
    .wiz-style-card strong{font-size:.75rem}
    .wiz-bubble-dot{width:40px;height:40px}
    .wiz-color-bubbles{gap:.85rem}
    .wiz-check-grid{grid-template-columns:1fr 1fr}
    .wiz-branch-grid{grid-template-columns:1fr 1fr}
    .wiz-tld-pills{gap:.35rem}
    .wiz-tld span{padding:.35rem .65rem;font-size:.75rem}
    .wiz-material-grid{grid-template-columns:1fr 1fr 1fr;gap:.6rem}
    .wiz-material-inner{padding:1.25rem .75rem}
    .wiz-material-inner i{font-size:1.4rem}
    .wiz-contact-grid{grid-template-columns:1fr}
    .wiz-nav{flex-direction:column;gap:.75rem}
    .wiz-btn{width:100%;justify-content:center}
}

@media(max-width:480px){
    .hero-konfigurator{padding:80px 0 50px}
    .hero-konfigurator h1{font-size:1.7rem}
    .wiz-prog-steps{gap:.25rem}
    .wiz-prog-dot{width:26px;height:26px;font-size:.7rem;border-width:2px}
    .wiz-style-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}
    .wiz-bubble-dot{width:36px;height:36px}
    .wiz-bubble-dot::after{font-size:.7rem}
    .wiz-color-bubbles{gap:.7rem}
    .wiz-check-grid{grid-template-columns:1fr}
    .wiz-material-grid{grid-template-columns:1fr}
    .wiz-material-inner{flex-direction:row;padding:1rem;gap:1rem;text-align:left}
    .wiz-color-dot{width:34px;height:34px}
}