.custom-upload-btn-wrapper{display:flex;gap:10px}.custom-upload-btn-wrapper>div{position:relative;border-radius:var(--variant-pills-radius);border:var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));flex:1;text-align:center;overflow:hidden;cursor:pointer}.custom-upload-btn-wrapper>div .custom-upload-operation{display:none}.custom-upload-btn-wrapper>div:before{display:inline-flex;content:"X";width:0;overflow:hidden;padding:1rem 0;font-size:1.4rem;letter-spacing:.1rem;line-height:1}.custom-upload-btn-wrapper input{position:absolute;opacity:0;z-index:1;left:0;top:0;width:100%;height:100%;cursor:pointer}.custom-upload-btn-wrapper>div label{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;align-items:center;justify-content:center}.custom-upload-btn-wrapper>div.has-img input,.custom-upload-btn-wrapper>div.has-img label{display:none}.custom-upload-btn-wrapper>div.has-img{font-size:0}.custom-upload-btn-wrapper>div.has-img img{max-width:100%;aspect-ratio:1}.custom-upload-btn-wrapper>div.has-img:before{display:none}.custom-upload-btn-wrapper>div.has-img:hover .custom-upload-operation{display:flex;justify-content:center;align-items:center;gap:10px;position:absolute;z-index:1;height:100%;width:100%;background-color:rgba(var(--color-foreground),.8)}.custom-upload-btn-wrapper>div .custom-upload-operation{padding:10px}.custom-upload-btn-wrapper>div .custom-upload-operation>div{width:30px;height:30px;background-repeat:no-repeat;background-position:center}.custom-upload-btn-wrapper>div .custom-upload-operation>div:first-child{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS14LWljb24gbHVjaWRlLXgiPjxwYXRoIGQ9Ik0xOCA2IDYgMTgiLz48cGF0aCBkPSJtNiA2IDEyIDEyIi8+PC9zdmc+)}.custom-upload-btn-wrapper>div .custom-upload-operation>div:last-child{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS11cGxvYWQtaWNvbiBsdWNpZGUtdXBsb2FkIj48cGF0aCBkPSJNMTIgM3YxMiIvPjxwYXRoIGQ9Im0xNyA4LTUtNS01IDUiLz48cGF0aCBkPSJNMjEgMTV2NGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnYtNCIvPjwvc3ZnPg==)}.custom-upload-btn-wrapper>div.hover-bg{transition:all .3s ease-in-out}.custom-upload-btn-wrapper>div.hover-bg:hover{border-color:rgb(var(--color-foreground));background-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.custom-upload-btn-wrapper>div.hover-bg label:hover{cursor:pointer}.custom-upload-build-wrapper{margin-top:10px;display:flex}.custom-upload-build-wrapper>div{border-radius:var(--variant-pills-radius);border:var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));flex:1;text-align:center;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background));padding:1rem 2rem;font-size:1.4rem;letter-spacing:.1rem;line-height:1}.custom-product-upload-wrapper{border-radius:10px;border-style:dashed;border:var(--variant-pills-border-width) dashed rgba(var(--color-foreground),var(--variant-pills-border-opacity));padding:20px}.custom-product-upload-box{position:relative;width:100%;padding-top:20px;display:block!important;border:var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));border-radius:var(--variant-pills-radius);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}.custom-product-upload-box.has-img img{width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0}.custom-product-upload-box.has-img:has(.custom-product-upload-add-icon+img) .custom-product-upload-add-icon{visibility:hidden}.custom-product-upload-box input{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer;opacity:0}.custom-product-upload-add-icon{top:0;left:0;width:100%;height:100%;display:flex!important;align-items:center;justify-content:center;flex-direction:column;cursor:pointer}.custom-product-upload-add-icon>svg{width:36px;height:36px}.custom-product-upload-add-icon>p{margin:0;line-height:1.5}.custom-product-upload-add-icon>div{margin-top:10px}.custom-product-upload-add-icon>div>p{display:flex;align-items:center;font-weight:bolder;margin:8px 0}.custom-product-upload-add-icon>div>p svg{margin-right:8px;color:#49aa19}.custom-product-upload-add-icon .custom-product-upload-btn{width:300px;border:none;box-shadow:0 0 0 0 transparent;color:#fff;cursor:pointer;display:block;font-size:1em;font-weight:500;line-height:1;text-align:center;transition:background .2s ease-in-out;min-width:calc(12rem + var(--buttons-border-width) * 2);min-height:calc(4.5rem + var(--buttons-border-width) * 2);--shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);--shadow-vertical-offset: var(--buttons-shadow-vertical-offset);--shadow-blur-radius: var(--buttons-shadow-blur-radius);--shadow-opacity: var(--buttons-shadow-opacity);--shadow-visible: var(--buttons-shadow-visible);--border-offset: var(--buttons-border-offset);--border-opacity: calc(1 - var(--buttons-border-opacity));border-radius:var(--buttons-radius-outset);background-color:rgba(var(--color-button),var(--alpha-button-background));color:rgb(var(--color-button-text));font-size:1.4rem;line-height:calc(1 + .2 / var(--font-body-scale));letter-spacing:.07rem;position:relative;font-size:1.5rem;letter-spacing:.1rem;font-family:inherit}.custom-product-upload-box:hover .custom-product-upload-add-icon .custom-product-upload-btn{--border-offset: 1.3px;box-shadow:0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text),var(--border-opacity)),0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button),var(--alpha-button-background))}.custom-product-notice{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f5f5f5;border-radius:8px;margin:12px 10px 20px}.custom-product-notice-icon{flex-shrink:0;width:20px;height:20px;color:#333}.custom-product-notice-icon svg{width:20px;height:20px;color:#f56b2a}.custom-product-notice-text{font-size:13px;line-height:1.4;color:#333}.custom-product-notice-text p{margin:0}.custom-modal{z-index:10000;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000001a}.custom-modal-toggle{background-color:#fff!important;border-radius:0!important;border-bottom:1px solid #eaeaea!important;padding-top:2.7rem!important;top:0!important}.modal-title-wrapper{margin-right:auto}.modal-title{display:flex;margin:0;align-items:center}.modal-title:before{display:block;content:var(--current-step, "1");width:28px;height:28px;text-align:center;border-radius:100%;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background));margin-right:8px;font-size:calc(var(--font-heading-scale) * 2rem)}.modal-title:after{display:block;content:var(--current-text, "Preivew Photo")}.modal-svg-wrapper{border:none}.custom-file-err{display:none;color:red;margin-bottom:0;font-size:1.3rem}.custom-file-err.active{display:block}.custom-modal-content{width:516px!important;max-height:80vh!important;height:auto!important;margin-top:0!important;transform:translate3d(-50%,-50%,0)!important;top:50%!important}.custom-modal-btn-wrap{display:flex;justify-content:center}.custom-modal-btn-wrap div{border:var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));background-color:rgb(var(--color-background));color:rgba(var(--color-foreground));border-radius:var(--variant-pills-radius);color:rgb(var(--color-foreground));display:inline-flex;margin:20px auto;padding:1rem 2rem;font-size:1.4rem;letter-spacing:.1rem;line-height:1;text-align:center;transition:border var(--duration-short) ease;cursor:pointer;position:relative;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.custom-modal-preview{max-width:454px;max-height:454px;aspect-ratio:1;background-color:#00000014;border-radius:10px;margin:20px auto 0}.custom-modal-preview img{height:100%;object-fit:cover;display:block;margin:0 auto}.custom-modal-preview-icon{display:flex;flex-direction:column;align-items:center;margin-top:20px}.custom-modal-preview-icon svg{width:40px;height:40px;color:#49aa19}.svg-orange svg{color:#f56b2a}.custom-modal-preview-icon h4{margin:10px auto}.custom-modal-preview-icon p{margin:0}.custom-modal-content__info.step-two .step-one-box,.custom-modal-content__info.step-two .custom-modal-preview,.custom-modal-content__info.step-two .custom-modal-btn-wrap{display:none}.custom-modal-content__info.step-two .custom-modal-progress{display:block}.custom-modal-content__info.step-two .step-three-box{display:none}.custom-modal-progress{--precent-text: "";--precent: 0;display:none;width:454px}.custom-modal-progress-container{width:80%;margin:20px auto;height:10px;background:linear-gradient(90deg,#ededed,#ededed);border-radius:50px;position:relative;overflow:hidden}.custom-modal-progress-bar{display:block!important;border-radius:30px;position:absolute;top:0;left:0;bottom:0;right:0;background-color:#f56b2a;transition:transform .3s linear;transform:translate(calc(var(--precent) * 1% - 100%))}.custom-modal-progress-bar:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:30px 30px;animation:progressStripes 1s linear infinite}.custom-modal-progress-precent{display:flex!important;justify-content:center}.custom-modal-progress-precent:before{content:var(--precent-text);display:block}.custom-modal-progress-container-wrapper{display:flex;align-items:center}@keyframes progressStripes{0%{background-position:0 0}to{background-position:30px 30px}}.carousel-container{position:relative;max-width:900px;height:200px;margin:auto;overflow:visible}.carousel-group{position:absolute;right:0;bottom:0;display:flex;gap:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease;top:50%;left:50%;transform:translate3d(-50%,-50%,0);justify-content:center}.carousel-group.active{opacity:1;visibility:visible;pointer-events:auto;animation:fadeIn .5s ease-out}.image-card{position:relative;background:#fff;box-shadow:0 10px 30px #00000014;width:90px;height:132px;border-radius:4px;box-shadow:0 25px 50px -12px #00000080;border:3px solid orange;border-bottom-width:12px;background-color:#fff;overflow:hidden;transition:transform .3s ease;flex-shrink:0}.image-card img{width:100%;height:320px;object-fit:cover;display:block}.image-card span{position:absolute;left:12px;bottom:12px;background:#000000b3;color:#fff;padding:6px 12px;border-radius:999px;font-size:14px}.slide-in-left{animation:slideLeft .8s ease both}.slide-in-right{animation:slideRight .8s ease .2s both}@keyframes slideLeft{0%{opacity:0;transform:translate(12px) scale(.5) rotate(-16deg)}60%{transform:translate(12px) scale(1.2) rotate(-8deg)}to{opacity:1;transform:translate(20px) scale(1) rotate(-16deg)}}@keyframes slideRight{0%{opacity:0;transform:translate(-12px) scale(.5) rotate(12deg)}60%{transform:translate(-12px) scale(1.2) rotate(12deg)}to{opacity:1;transform:translate(-20px) scale(1) rotate(12deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.custom-modal-content__info .step-three-box,.custom-modal-content__info.step-three .step-one-box,.custom-modal-content__info.step-three .custom-modal-preview,.custom-modal-content__info.step-three .custom-modal-btn-wrap,.custom-modal-content__info.step-three .custom-modal-progress{display:none}.custom-modal-content__info.step-three .step-three-box{display:flex}.custom-modal-result-btn-wrap{display:flex;justify-content:center}.custom-modal-result-btn-wrap div{border:var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));background-color:rgb(var(--color-background));color:rgba(var(--color-foreground));border-radius:var(--variant-pills-radius);color:rgb(var(--color-foreground));display:inline-flex;margin:20px auto;padding:1rem 2rem;font-size:1.4rem;letter-spacing:.1rem;line-height:1;text-align:center;transition:border var(--duration-short) ease;cursor:pointer;position:relative;background-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.custom-modal-result-btn-wrap div.with-light{background-color:rgb(var(--color-background));color:rgba(var(--color-foreground))}.custom-modal-result-btn-wrap>div.hover-bg{transition:all .3s ease-in-out}.custom-modal-result-btn-wrap>div.hover-bg:hover{border-color:rgb(var(--color-foreground));background-color:rgb(var(--color-foreground));color:rgb(var(--color-background))}.custom-modal-result-btn-wrap>div.hover-bg-reverse:hover{background-color:rgb(var(--color-background));color:rgba(var(--color-foreground))}.custom-modal-result-preview{max-width:454px;max-height:454px;aspect-ratio:1}.custom-modal-result-preview img{display:block}.custom-modal-steps{display:flex;align-items:flex-start;justify-content:space-around;padding:20px 10px 10px}.custom-modal-step{display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}.step-circle{width:32px;height:32px;border-radius:50%;border:2px solid #d9d9d9;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-circle svg{width:16px;height:16px;color:#fff}.step-dot{width:10px;height:10px;border-radius:50%;background:#f56b2a}.step-label{font-size:12px;line-height:1.3;text-align:center;color:#666;white-space:nowrap}.step-line{flex:1;height:2px;background:#d9d9d9;margin-top:15px;min-width:40px}.custom-modal-step.completed .step-circle{border-color:#f56b2a;background:#f56b2a}.custom-modal-step.active .step-circle{border-color:#f56b2a;background:#fff}.custom-modal-step.active .step-label{color:#333;font-weight:600}.custom-modal-step.completed+.step-line,.custom-modal-step.active+.step-line{background:#f56b2a}.custom-modal-notice{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f5f5f5;border-radius:8px;margin:12px 10px 20px}.custom-modal-notice-icon{flex-shrink:0;width:20px;height:20px;color:#333}.custom-modal-notice-icon svg{width:20px;height:20px}.custom-modal-notice-text{font-size:13px;line-height:1.4;color:#333}.custom-modal-notice-text span{display:block;text-align:justify}.custom-modal-notice-text span:last-child{margin-top:10px}[slot=progress-bar]{display:block;position:absolute;left:50%;bottom:50%;width:80%;background:#ffffff4d;background:linear-gradient(90deg,#ededed,#ededed);border-radius:3px;overflow:hidden;transform:translate3d(-50%,-50%,0)}[slot=progress-bar] .modelViewer-bar{width:0%;height:100%;background:#409eff;border-radius:3px;background-color:#f56b2a;overflow:hidden;position:relative;height:6px}[slot=progress-bar] .modelViewer-bar:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-size:30px 30px;animation:progressStripes 1s linear infinite}
/*# sourceMappingURL=/cdn/shop/t/17/assets/component-custom-upload.css.map */