#personalize-modal *,#personalize-modal *:before,#personalize-modal *:after{box-sizing:border-box}#personalize-modal{display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:transparent;border:none;max-width:100vw}#personalize-modal::backdrop{opacity:1}@keyframes backdropIn{0%{opacity:0}to{opacity:1}}@keyframes backdropOut{0%{opacity:1}to{opacity:0}}#personalize-modal.modal-opening::backdrop{animation:backdropIn .22s ease both}#personalize-modal.modal-closing::backdrop{animation:backdropOut .2s ease both}#personalize-modal .product-popup-modal__content{aspect-ratio:4 / 3;width:min(120vh,75vw);height:auto;max-width:100vw;--image-box-size: 300px;margin:0!important;padding:0;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;position:relative!important;top:auto!important;left:auto!important;transform:none!important;box-shadow:none!important;outline:none!important}@media screen and (min-width: 750px) and (max-width: 1024px) and (orientation: portrait) and (min-height: 900px){#personalize-modal .product-popup-modal__content{width:85vw;height:50vh;max-height:50vh;aspect-ratio:auto}}@media screen and (min-width: 750px) and (max-width: 1024px) and (orientation: portrait) and (min-height: 1100px){#personalize-modal .product-popup-modal__content{width:85vw;height:50vh;max-height:50vh}}#personalize-modal .product-popup-modal__content>*:not(.product-popup-modal__toggle){padding:2rem;overflow-y:auto;flex:1;min-height:0}#personalize-modal .product-popup-modal__toggle{position:absolute;top:1rem;right:1rem;z-index:10}#personalize-modal .product-popup-modal__content:focus,#personalize-modal .product-popup-modal__content:focus-visible,#personalize-modal .product-popup-modal__content.focused{box-shadow:none!important;outline:none!important}@media screen and (max-width: 749px){#personalize-modal .product-popup-modal__content{width:95vw;height:85vh;max-width:100vw;overflow-x:hidden;box-sizing:border-box}#personalize-modal .product-popup-modal__content>*:not(.product-popup-modal__toggle){padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;justify-content:flex-start;box-sizing:border-box;max-width:100%}#personalize-modal .product-popup-modal__toggle{top:.5rem;right:.5rem}.step-1-container #photo-example{max-width:280px}.inline-preview-image{max-height:180px}}.personalize-step-heading{display:flex;flex-direction:column}.personalize-step{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:.5rem;align-items:stretch;justify-content:flex-start;text-align:left;opacity:0;visibility:hidden;pointer-events:none;overflow-x:hidden;overflow-y:auto;min-height:300px;box-sizing:border-box}.personalize-step.active{opacity:1;visibility:visible;pointer-events:auto}.personalize-image-box{aspect-ratio:1 / 1;width:var(--image-box-size);max-width:80%;flex:0 0 auto;height:auto;display:flex;align-items:center;justify-content:center;background-color:rgba(var(--color-foreground),.05);border:.2rem dashed rgba(var(--color-foreground),.2);border-radius:.5rem;position:relative;overflow:hidden;box-sizing:border-box}@media screen and (max-width: 749px){.personalize-image-box{width:200px;max-width:60%}}.personalize-image-box img{max-width:100%;max-height:100%;object-fit:contain;image-orientation:from-image}.personalize-form-content{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:0 1rem 1rem 2rem;justify-content:space-evenly}.loading-spinner{width:50px;height:50px;border:4px solid rgba(var(--color-foreground),.1);border-top:4px solid rgb(var(--color-button));border-radius:50%;animation:spin 1s linear infinite;z-index:99}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner.hidden{display:none}.api-result-image{display:none;max-width:100%;max-height:100%}.api-result-image.active{display:block}@media screen and (max-width: 749px){.personalize-step-with-image{flex-direction:column!important;align-items:stretch;text-align:left}.personalize-image-box,.image-preview-container{width:100%;flex:none}.personalize-form-content{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:0 .5rem 1rem;justify-content:center}}@keyframes slideInRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-24px)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(24px)}}.anim-in-right{animation:slideInRight .22s var(--duration, ease) both}.anim-out-left{animation:slideOutLeft .22s var(--duration, ease) both}.anim-in-left{animation:slideInLeft .22s var(--duration, ease) both}.anim-out-right{animation:slideOutRight .22s var(--duration, ease) both}@keyframes modalIn{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modalOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.98)}}#personalize-modal.modal-opening .product-popup-modal__content{animation:modalIn .23s ease both}#personalize-modal.modal-closing .product-popup-modal__content{animation:modalOut .2s ease both}.personalize-step h2{font-size:2rem;overflow-wrap:break-word;word-wrap:break-word}.personalize-step p{margin-bottom:1.5rem;margin-top:0;overflow-wrap:break-word;word-wrap:break-word}@media screen and (max-width: 749px){.personalize-step h2{font-size:1.5rem}.personalize-step p{margin-bottom:.75rem;font-size:1.2rem}.personalize-step-heading{max-width:100%;box-sizing:border-box}}.personalize-step input[type=text],.personalize-step input[type=number]{width:100%;padding:1.5rem;border:var(--inputs-border-width) solid rgba(var(--color-foreground),.55);background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));font-size:1.4rem;transition:box-shadow var(--duration-short) ease}.personalize-step input[type=text]:focus,.personalize-step input[type=number]:focus{outline:0;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3),0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),.55)}.personalize-step-container{display:flex;gap:1rem;align-items:center;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;max-width:100%}.step-left{flex:0 1 auto;max-width:50%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.5rem}.step-right{flex:1;display:flex;flex-direction:column;gap:1rem}@media screen and (min-width: 750px){.step-right,.step-left{min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden}}@media screen and (max-width: 749px){.personalize-step-container{flex-direction:column;gap:.75rem;padding:0;width:100%}.step-left{max-width:100%;width:100%;align-items:center;text-align:left;order:1}.step-right{align-items:stretch;max-width:100%;width:100%;box-sizing:border-box;order:2}.step-right .file-upload-wrapper,.step-right .personalize-form-content{width:100%;max-width:100%;box-sizing:border-box}}@media screen and (max-width: 375px){#personalize-modal .product-popup-modal__content{width:95vw;height:85vh}}.file-upload-wrapper{position:relative;display:flex;flex-direction:column;gap:.5rem;width:80%;padding:0 10px 10px;margin:0 auto;box-sizing:border-box;max-width:100%}.file-upload-wrapper input[type=file]{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1}.file-upload-label{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;min-height:100px;background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));border:.2rem dashed rgba(var(--color-foreground),.3);border-radius:.5rem;cursor:pointer;transition:all .2s ease;font-size:1.2rem;font-weight:500;text-align:center}.file-upload-label:hover{border-color:rgb(var(--color-button));background-color:rgba(var(--color-button),.05)}.file-upload-label.drag-over{border-color:rgb(var(--color-button));background-color:rgba(var(--color-button),.1);transform:scale(1.02)}.file-upload-text{margin-top:.5rem}.file-upload-text-container{max-width:100%;overflow-wrap:break-word;word-wrap:break-word;margin-bottom:0}.file-upload-hint{font-size:1.2rem;color:rgba(var(--color-foreground),.6);margin-top:.3rem}.file-upload-label svg{width:3rem;height:3rem;margin-bottom:.5rem}.file-name-display{font-size:1.2rem;color:rgba(var(--color-foreground),.7);font-style:italic}.inline-preview-container{display:none;flex-direction:column;align-items:center;gap:.75rem;padding:1rem;border:.2rem solid rgba(var(--color-foreground),.2);border-radius:.5rem;background-color:rgba(var(--color-foreground),.02)}.inline-preview-container.active{display:flex}.inline-preview-image{max-width:100%;max-height:250px;object-fit:contain;border-radius:.25rem;image-orientation:from-image}.remove-image-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:transparent;color:rgba(var(--color-foreground),.7);border:1px solid rgba(var(--color-foreground),.3);border-radius:.25rem;cursor:pointer;font-size:.95rem;transition:all .2s ease}.remove-image-btn:hover{background-color:rgba(var(--color-foreground),.05);color:rgb(var(--color-foreground));border-color:rgba(var(--color-foreground),.5)}.remove-image-btn svg{width:1rem;height:1rem}.file-upload-wrapper.has-preview .file-name-display{display:none}.personalize-step-container #photo-example{max-width:500px}.personalize-step-container .file-upload-wrapper{width:100%;max-width:400px}.image-preview-container{aspect-ratio:1 / 1;width:var(--image-box-size);max-width:100%;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(var(--color-foreground),.05);border:.2rem dashed rgba(var(--color-foreground),.2);border-radius:.5rem;padding:1rem;text-align:center;overflow:hidden}.image-preview-container.active{background-color:transparent;border-color:transparent}.image-preview-container .preview-placeholder{color:rgba(var(--color-foreground),.4);font-size:1.4rem}.image-preview-container.active .preview-placeholder{display:none}.image-preview{display:none;max-width:100%;max-height:100%;border-radius:.5rem;border:.1rem solid rgba(var(--color-foreground),.1);object-fit:contain;image-orientation:from-image}.image-preview-container.active .image-preview{display:block}.image-preview-text-container{font-size:1.2rem;max-width:100%;overflow-wrap:break-word;word-wrap:break-word}@media screen and (max-width: 749px){.image-preview-text-container{font-size:1.1rem}.image-preview-text-container p{margin-bottom:.5rem}}.remove-image-btn{padding:.5rem 1rem;background:rgba(var(--color-foreground),.1);border:none;border-radius:.3rem;cursor:pointer;font-size:1.2rem;color:rgb(var(--color-foreground));transition:background .2s ease}.remove-image-btn:hover{background:rgba(var(--color-foreground),.2)}.eye-color-wrapper{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.eye-color-wrapper label{font-size:1.4rem;font-weight:500;color:rgb(var(--color-foreground));padding-left:10px}.eye-color-btn-group{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-start;padding:10px}.eye-color-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background-color:transparent;color:rgb(var(--color-foreground));border:.1rem solid rgba(var(--color-foreground),.35);border-radius:var(--buttons-radius);box-shadow:none;cursor:pointer;font-size:1.2rem;transition:all .2s ease}.eye-color-indicator{display:inline-block;width:1.8rem;height:1.8rem;border-radius:50%;border:.15rem solid rgba(var(--color-foreground),.2);box-shadow:0 1px 3px #0000001a}.eye-color-btn:hover{border-color:rgba(var(--color-foreground),.6);background-color:rgba(var(--color-foreground),.03)}.eye-color-btn.active{background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));border-color:rgb(var(--color-button))}.eye-color-btn.active .eye-color-indicator{border-color:rgb(var(--color-button-text));box-shadow:0 2px 4px #0003}.eye-color-btn:focus-visible{outline:0;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5),0 0 .5rem .4rem rgba(var(--color-foreground),.3)}@media screen and (max-width: 749px){.eye-color-btn-group{gap:.5rem}.eye-color-btn{padding:.5rem .75rem;font-size:1.1rem}.eye-color-indicator{width:1.5rem;height:1.5rem}.eye-color-wrapper label{font-size:1.3rem}.eye-color-wrapper{order:2}.file-upload-wrapper{order:1}}.gender-btn-group{display:flex;gap:1rem;justify-content:space-evenly;margin-bottom:1rem}.gender-btn{flex:1;background-color:transparent;color:rgb(var(--color-foreground));border:.1rem solid rgba(var(--color-foreground),.35);box-shadow:none}.gender-btn.active{background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));border-color:rgb(var(--color-button))}.gender-btn:focus-visible{outline:0;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.5),0 0 .5rem .4rem rgba(var(--color-foreground),.3)}.personalize-actions{display:flex;gap:1rem;margin-top:1.5rem;flex-shrink:0;width:100%;box-sizing:border-box}.personalize-actions .button{flex:1;min-width:0}@media screen and (max-width: 749px){.personalize-actions{gap:.5rem;margin-top:1rem}}#personalize-btn{margin:0;color:#fff5d2}.field-error{color:#a40000;margin:.5rem 0 0;display:none}#photo-example{width:100%;max-width:80%;margin:0 auto;overflow:hidden;box-sizing:border-box}#photo-example img{width:100%;height:auto;display:block;object-fit:contain}@media screen and (max-width: 749px){#photo-example{max-width:100%}}.rounded-btn{border:.1rem solid rgba(var(--color-foreground),.35);border-radius:var(--buttons-radius)}.personalize-instructions{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}.instruction-item{display:flex;align-items:flex-start;gap:1rem;padding:1rem;background-color:rgba(var(--color-foreground),.03);border-radius:.75rem;border:1px solid rgba(var(--color-foreground),.08);transition:background-color .2s ease,transform .2s ease}.instruction-item:hover{background-color:rgba(var(--color-foreground),.05);transform:translate(4px)}.instruction-number{display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;min-width:4.5rem;background-color:rgb(var(--color-button));color:rgb(var(--color-button-text));border-radius:50%;font-weight:700;font-size:1.5rem}.instruction-content{flex:1}.instruction-content h3{margin:0 0 .25rem;font-size:1.5rem;font-weight:600;color:rgb(var(--color-foreground))}.instruction-content p{margin:0;font-size:1.2rem;color:rgba(var(--color-foreground),.7);line-height:1.4}#personalize-step-0 .button--primary{margin-top:auto;align-self:center;min-width:200px}@media screen and (max-width: 749px){.personalize-instructions{gap:.75rem;width:100%;box-sizing:border-box}.instruction-item{padding:.75rem;gap:.5rem;box-sizing:border-box;max-width:100%}.instruction-number{width:2.5rem;height:2.5rem;min-width:2.5rem;flex-shrink:0;font-size:1rem}.instruction-content{min-width:0;overflow-wrap:break-word;word-wrap:break-word}.instruction-content h3{font-size:1.3rem}.instruction-content p{font-size:1.1rem}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/personalize-modal.css.map */