body{margin:0;overflow:hidden;font-family:Arial,sans-serif;display:flex;transition:all .3s ease}#configurator{flex-shrink:0;width:350px;height:100%}#gui-container{position:absolute;top:10px;left:10px;z-index:100}canvas{display:block;position:absolute;top:0;left:0}.logo-container{display:flex;justify-content:flex-start;margin-bottom:20px;margin-top:20px}.logo{max-width:150px;height:auto}.config-sidebar{position:absolute;top:0;right:0;width:350px;height:100%;background-color:#000;color:#fff;padding:20px;display:flex;flex-direction:column;gap:20px;box-shadow:-5px 0 10px #00000080;z-index:10;transition:transform 1s ease-in-out}.config-sidebar.hide-sidebar{transform:translate(100%)}.config-sidebar h2{font-size:20px;margin-bottom:20px;text-transform:uppercase;border-bottom:2px solid #fff;padding-bottom:10px}.config-group{display:flex;flex-direction:column;gap:10px}.config-group label{font-size:14px;font-weight:700}#shoe-size{padding:10px;width:100%;border:none;outline:none;background-color:#222;color:#fff;font-size:14px}.color-options{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;justify-items:center;align-items:center}.color-square{width:40px;height:40px;cursor:pointer;border:2px solid transparent;transition:border .3s ease}.color-square:hover,.color-square.active{border:2px solid #fff}.apply-button{background-color:#fff;color:#000;padding:10px 20px;border:2px solid transparent;font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:all .3s ease}.apply-button:hover{background-color:#000;color:#fff;border:2px solid #fff}select#extra-option{padding:10px;width:100%;border:none;outline:none;background-color:#222;color:#fff;font-size:14px}select#extra-option:hover{border-color:#fff}select#extra-option option{background-color:#333;color:#fff}.hidden{display:none}.config-step{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.step-header{display:flex;justify-content:space-between;align-items:center}.step-header h3{flex:1;text-align:center}#config-steps h3{text-align:center}.arrow-button{background:none;border:none;cursor:pointer;padding:0;margin:0 10px;outline:none}.arrow-button svg{width:24px;height:24px;stroke:#fff;transition:transform .3s ease}.arrow-button:hover svg{transform:scale(1.1)}.material-button:hover{background-color:#fff;color:#000}textarea#custom-text-input{width:90%;height:50px;padding:10px;margin:20px 0;border:1px solid #fff;background-color:#222;color:#fff}textarea#custom-text-input:focus{outline:none}button#apply-text-button{background-color:#fff;color:#000;padding:10px 20px;border:1px solid transparent;cursor:pointer;transition:all .3s ease}button#apply-text-button:hover{background-color:#000;color:#fff;border:1px solid #fff}#reset-materials-button{position:relative;width:40px;height:43px;cursor:pointer;border:2px solid transparent;background-color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .3s ease}#reset-materials-button:hover{transform:scale(1.1)}#reset-materials-button:before{content:"";position:absolute;width:100%;height:2px;background-color:red;transform:rotate(45deg)}#reset-materials-button:after{content:"";position:absolute;width:100%;height:2px;background-color:red;transform:rotate(-45deg)}.material-options{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;justify-items:center;align-items:center}.material-button{position:relative;width:40px;height:43px;cursor:pointer;border:2px solid transparent;background-size:cover;background-position:center;transition:border .3s ease;color:transparent;padding:10px 20px;background-color:#222}.material-button:hover{border:2px solid #fff}.material-button:after{content:attr(aria-label);position:absolute;top:100%;left:50%;transform:translate(-50%);color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}.material-button:hover:after{opacity:1;transform:translate(-50%) translateY(5px)}.leather-black{background-image:url(/assets/images/black_leather_color.webp)}.leather-red{background-image:url(/assets/images/leather_red.webp)}.leather-brown{background-image:url(/assets/images/brown_leather_albedo.webp)}.leather-gray{background-image:url(/assets/images/gray_leather_color.webp)}.leather-white{background-image:url(/assets/images/leather_white.webp)}.leather-redish{background-image:url(/assets/images/redish_leather_color.webp)}#upload-logo-section{display:flex;flex-direction:column;gap:15px;margin-top:20px}#upload-logo-button{padding:10px;background-color:#222;color:#fff;border:2px dashed #fff;cursor:pointer;transition:all .3s ease;text-align:center}#upload-logo-button:hover{background-color:#fff;color:#000}#logo-preview-container{display:flex;flex-direction:column;gap:10px;align-items:center}#logo-preview-box{width:100%;height:35vh;border:2px dashed #fff;display:flex;justify-content:center;align-items:center;background-color:#222}#logo-preview{max-width:90%;max-height:90%;display:none}#done-section{position:absolute;bottom:60px;width:90%;border:1px solid #fff;text-align:center}#done-button{background-color:#fff;color:#000;width:100%;padding:10px 20px;border:1px solid transparent;font-size:1em;font-weight:700;cursor:pointer;transition:all .3s ease}#done-button:hover{background-color:#000;color:#fff;border:1px solid #fff}#order-form-container{display:flex;flex-direction:column;gap:15px}#order-form-container label{font-size:14px;font-weight:700}#order-form-container input,#order-form-container select{padding:10px;font-size:14px;border:1px solid #ccc;background-color:#222;color:#fff}#order-form-container button{background-color:#fff;color:#000;padding:10px;border:1px solid transparent;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease}#order-form-container button:hover{background-color:#000;color:#fff;border:1px solid #fff}#create-new-shoe{position:fixed;bottom:-50px;left:50%;transform:translate(-50%);padding:15px 30px;font-size:16px;background-color:#000;color:#fff;font-weight:700;border:none;cursor:pointer;box-shadow:0 4px 10px #0000004d;transition:all .3s ease;z-index:20}#create-new-shoe:hover{background-color:#fff;color:#000}#create-new-shoe.show{bottom:30px}#create-new-shoe.hidden{display:none}#order-confirmation{position:fixed;top:20%;left:50%;transform:translate(-50%,-50%);padding:20px 40px;font-size:18px;font-weight:700;background-color:#69ff47;color:#000;box-shadow:0 5px 15px #0000004d;opacity:0;visibility:hidden;z-index:30}#loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;color:#fff;display:flex;justify-content:center;align-items:center;z-index:9999}.spinner{border:8px solid #f3f3f3;border-top:8px solid gray;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#status-bar{position:absolute;bottom:120px;width:90%;text-align:center}#progress-dots{display:flex;justify-content:center;gap:10px;margin-bottom:10px}.dot{width:15px;height:15px;background-color:gray;border-radius:50%;transition:background-color .3s ease}.dot.active{background-color:#fff}