body{margin:0;overflow:hidden}header{position:fixed;top:0;left:0;width:100%;height:4rem;background:#6af244;box-shadow:0 2px 5px #0000001a;display:flex;justify-content:space-between;align-items:center;padding:10px}#schoe-configurator{font-family:Helvetica,sans-serif}h1{font-family:Helvetica,sans-serif;font-size:24px;margin:0}.logo{width:250px}.configurator{position:fixed;bottom:0;left:0;width:100%;background:#6af244;display:flex;flex-direction:column}.top-bar{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 20px;box-sizing:border-box}#prev-button,#next-button,#material-button{padding:15px 20px;font-size:14px;cursor:pointer;border-radius:5px;font-weight:700;margin:0 10px;background-color:#000;color:#6af244;border:2px solid transparent;width:100px}#prev-button:hover,#next-button:hover{background:#6af244;color:#fff;border:2px solid #000000}#place-order-button{padding:15px 20px;font-size:14px;cursor:pointer;border-radius:5px;font-weight:700;margin:10px;background-color:#000;color:#6af244;border:2px solid transparent;width:110px}h1#main-text{font-size:1.2rem;margin:0;text-align:center;flex:1}.materials{display:flex;align-items:center;gap:10px}#material-select{padding:5px;font-size:16px}.colors{display:flex;flex-wrap:wrap;width:100%;margin:0;padding:0;box-sizing:border-box}.color{flex:1 0 auto;height:50px;cursor:pointer;border:none;box-sizing:border-box;transition:transform .2s}.color:hover{transform:scale(1.1)}.color[data-color=white]{background-color:#fff}.color[data-color=red]{background-color:red}.color[data-color=orange]{background-color:orange}.color[data-color=yellow]{background-color:#ff0}.color[data-color=green]{background-color:green}.color[data-color=blue]{background-color:#00f}.color[data-color=indigo]{background-color:indigo}.color[data-color=violet]{background-color:violet}.color[data-color=pink]{background-color:pink}.color[data-color=black]{background-color:#000}.color[data-color=gray]{background-color:gray}.materials-display{display:none;flex-wrap:wrap;width:100%;margin:0;padding:0;box-sizing:border-box}.material{flex:1 0 auto;height:50px;cursor:pointer;border:none;box-sizing:border-box;background-size:cover;transition:transform .2s}.material:hover{transform:scale(1.1)}.colors,.materials-display{display:none}.colors.show,.materials-display.show{display:flex}.material{width:50px;height:50px;display:inline-block;background-size:cover}#step-indicator{font-size:1.4em;margin:10px 20px 10px 0;text-align:center;color:#000;font-weight:800}#step-indicator span{color:#fff}.order-form{font-family:Helvetica,sans-serif;position:fixed;bottom:-100%;left:0;width:100%;background-color:#6af244;box-shadow:0 -5px 10px #0000004d;padding:20px;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:bottom .5s ease-in-out;z-index:10}.close-button{position:absolute;top:0;right:0;background:none;border:none;font-size:20px;cursor:pointer;background:transparent}.order-form.active{bottom:0}.order-form .form-content{width:90%;max-width:400px}.order-form h2{margin-bottom:20px;text-align:center}.order-form label{font-size:14px;margin-bottom:5px;display:block}.order-form input,.order-form textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:5px;font-size:14px}.order-form button{width:100%;padding:10px;background-color:#000;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;font-weight:700}.order-form button:hover{background-color:#303030}.order-form.visible{bottom:0}