.face-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem;box-sizing:border-box;margin:0}.face-modal-content{position:relative;background:#fff;border-radius:12px;width:100%;max-width:400px;height:auto;max-height:90vh;overflow-y:auto;box-shadow:0 10px 30px #0003;padding:1.2rem 1rem 1.5rem;text-align:left;box-sizing:border-box;display:flex;flex-direction:column;word-wrap:break-word;overflow-wrap:break-word;transition:height .3s ease,max-height .3s ease;margin:0 auto}.face-modal-content:not(.quiz-mode){height:fit-content;max-height:90vh}.face-modal-step-container{display:flex;flex-direction:column;height:100%;min-height:0;gap:0;align-items:center;text-align:left}.face-modal-close-btn{position:absolute;top:12px;right:12px;background:none;border:none;font-size:24px;color:#555;cursor:pointer;transition:color .2s ease;z-index:10;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.face-modal-close-btn:hover{color:#000}.face-modal-title{font-size:1rem;margin-bottom:.7rem;color:#333;font-family:neutral_faceregular;text-transform:uppercase;text-align:center}.face-modal-body{margin-bottom:1rem;flex:1;overflow-y:auto;text-align:left;padding-right:10px;min-height:0;display:flex;flex-direction:column;align-items:flex-start}.terms-conditions-container{max-height:300px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;margin:1rem 0;background-color:#fff;scrollbar-width:thin;scrollbar-color:#ccc #ffffff;text-align:left}.terms-conditions-container h3,.terms-conditions-container p,.terms-conditions-container ul,.terms-conditions-container li,.terms-conditions-container div,.face-modal-step-container label{text-align:left!important}.face-upload-area,.upload-placeholder,.face-upload-area p,.upload-placeholder p,#startAnalysisArea,#startAnalysisArea p,#faceAnalysisLoading,#faceAnalysisLoading span,.camera-container,.camera-container *,#faceModalStepTransition .face-modal-body,#faceModalStepTransition .face-upload-area,#faceModalStepTransition .upload-placeholder,#faceModalStepTransition p{text-align:center!important}.terms-conditions-container::-webkit-scrollbar{width:6px}.terms-conditions-container::-webkit-scrollbar-track{background:#fff;border-radius:3px}.terms-conditions-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.terms-conditions-container::-webkit-scrollbar-thumb:hover{background:#999}.face-modal-body p{margin-bottom:1.5rem;color:#666;line-height:1.5}.face-upload-area{border:2px dashed #ddd;border-radius:8px;padding:1.2rem;cursor:pointer;transition:all .3s ease;background-color:#f9f9f9}.face-upload-area:hover{border-color:#999;background-color:#f0f0f0}.face-upload-area.drag-over{border-color:#007bff;background-color:#e3f2fd}.upload-placeholder{text-align:center}.face-upload-area .upload-icon{font-size:2rem;display:block;margin-bottom:1rem}.upload-placeholder p{margin:.5rem 0;color:#666}.upload-hint{font-size:.9rem;color:#999}.face-preview{text-align:center}.face-preview img,.camera-container video,.camera-container img{max-width:100%;max-height:180px;border-radius:8px;margin-bottom:1rem;box-shadow:0 4px 12px #0000001a}.camera-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.camera-container video{object-fit:cover;aspect-ratio:3/4;width:100%;height:auto;max-width:224px;max-height:none;transform-origin:center center;border-radius:8px}.remove-face-btn{background:#dc3545;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s ease}.remove-face-btn:hover{background:#c82333}.face-modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:auto;padding-top:1rem;border-top:1px solid #eee;flex-shrink:0;flex-direction:column;align-items:center}.face-modal-btn{padding:.6rem 1.1rem;font-weight:600;font-size:.95rem;text-decoration:none;background-color:#000;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease;min-width:120px;white-space:nowrap;width:100%;max-width:200px}.face-modal-btn:hover{background-color:#333}.face-modal-btn:disabled{background-color:#ccc;color:#fff;cursor:not-allowed}.face-modal-btn.outline{background-color:#fff;border:2px solid black;color:#000}.face-modal-btn.outline:hover{background-color:#f2f4f8}.spinner{width:18px;height:18px;border:2px solid #fff;border-top:2px solid black;border-radius:50%;animation:spin 1s linear infinite;display:inline-block;margin-left:10px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.face-modal-overlay{padding:5vh .5rem 12vh .5rem}.face-modal-content{width:100%;max-width:none;max-height:85vh;height:auto;padding:1rem .8rem 1.2rem;border-radius:12px;overflow-y:auto}.face-modal-step-container{min-height:auto}.face-modal-body{max-height:60vh;overflow-y:auto}.terms-conditions-container{max-height:250px;padding:.8rem;margin:.8rem 0}.face-modal-content .results-section .results-section>div:last-child>div:last-child{display:grid!important;grid-template-columns:1fr!important;gap:1rem!important}@media (max-width: 480px){.face-modal-content .results-section .results-section>div:last-child>div:last-child{grid-template-columns:1fr!important}.terms-conditions-container{max-height:200px;padding:.6rem;margin:.6rem 0}}.face-modal-title{font-size:1.1rem;margin-bottom:.5rem;padding-right:25px}.face-modal-body{margin-bottom:.8rem}.face-modal-body ul{margin:.8rem 0 1.2rem 1rem!important;font-size:.9rem!important}.face-modal-body li{margin-bottom:.3rem}.face-upload-area{padding:1rem;margin:1.5rem auto!important}.upload-icon{font-size:2.2rem}.upload-placeholder p{font-size:1rem!important;letter-spacing:1px!important}.face-modal-actions{flex-direction:column;gap:8px;margin-bottom:.3rem}.face-modal-btn{width:100%;padding:.8rem 1rem;font-size:.9rem;min-width:auto}.face-modal-close-btn{top:8px;right:8px;font-size:20px;width:28px;height:28px}.camera-container{width:100%}.camera-container video,.camera-container img{max-height:200px;width:100%;object-fit:cover}#faceAnalysisResult{font-size:.9rem!important;margin-top:1rem!important;padding:0 .5rem}#faceAnalysisLoading span{font-size:.9rem!important}.face-modal-body label{font-size:.85rem!important;line-height:1.4!important}.face-modal-results-grid{display:flex;flex-wrap:wrap;gap:.7rem 1.2rem;margin-top:1.5rem}.face-modal-results-grid .results-col{flex:1 1 45%;min-width:0;display:flex;flex-direction:column;gap:.7rem}}@media (max-width: 480px){.face-modal-overlay{padding:.3rem}.face-modal-content{padding:.8rem .6rem 1rem;max-height:95vh;width:100%;max-width:none}.face-modal-step-container{min-height:auto}.face-modal-body{max-height:65vh;overflow-y:auto}.face-modal-title{font-size:1rem;padding-right:25px}.face-modal-body ul{font-size:.85rem!important;margin-left:.8rem!important}.face-upload-area{padding:.8rem;margin:1rem auto!important}.upload-icon{font-size:2rem}.upload-placeholder p{font-size:.9rem!important;letter-spacing:.5px!important}.face-modal-btn{padding:.7rem .8rem;font-size:.85rem}.camera-container video,.camera-container img{max-height:180px}.camera-container{display:flex;flex-direction:column;align-items:center;justify-content:center}.camera-container video{object-fit:cover;aspect-ratio:3/4;width:100%;height:auto;max-width:192px;max-height:none;transform-origin:center center;border-radius:6px}#faceAnalysisResult{font-size:.85rem!important}.face-modal-body label{font-size:.8rem!important}}@media (max-width: 768px) and (orientation: landscape){.face-modal-content{max-height:85vh}.camera-container video,.camera-container img{max-height:150px}.face-modal-body{margin-bottom:.5rem}.face-modal-actions{margin-bottom:.3rem}}#output_canvas{width:200px!important;height:150px!important;max-width:100%;display:block;margin:0 auto}@media (min-width: 769px){.face-modal-content.quiz-mode{max-width:800px;width:90%;display:block;padding:1.5rem}.face-modal-content.quiz-mode .quiz-section{display:none}.face-modal-content.quiz-mode .results-section{width:100%;text-align:center;padding:0}.face-modal-content.quiz-mode .face-modal-title{text-align:center;margin-bottom:1.5rem;border-bottom:1px solid #e0e0e0;padding-bottom:1rem}.face-modal-content.quiz-mode .quiz-section h3{font-size:1.2rem;margin-bottom:1rem;color:#333}.face-modal-content.quiz-mode .results-section h3{font-size:1.2rem;color:#333}.face-modal-content.quiz-mode #faceAnalysisResult{background:#f8f9fa;padding:1rem;border-radius:8px;margin-top:0;font-size:.9rem;line-height:1.5}.face-modal-content.quiz-mode #faceAnalysisSnapshot{max-width:100%;border-radius:8px;margin-bottom:1rem}.face-modal-content.quiz-mode .face-modal-close-btn{top:1rem;right:1rem}.face-modal-content.quiz-mode .camera-container{width:100%;display:block;text-align:center}.face-modal-content.quiz-mode .camera-container video,.face-modal-content.quiz-mode .camera-container img{max-width:100%;max-height:none;border-radius:8px;margin-bottom:0}.face-modal-content.quiz-mode #webcam,.face-modal-content.quiz-mode #output_canvas,.face-modal-content.quiz-mode .grid_canvas{display:none!important}.face-modal-content.quiz-mode .results-section{display:block;width:100%}.face-modal-content.quiz-mode .results-section h3{margin-bottom:.5rem}}@media (max-width: 768px){.face-modal-tabs{display:flex;border-bottom:1.5px solid #e0e0e0;margin-bottom:1.2rem;background:transparent;border-radius:8px 8px 0 0;overflow:hidden;gap:.5rem;padding:0 .5rem}.face-modal-tab-btn{flex:1;padding:1rem .5rem;font-size:1.05rem;font-weight:600;color:#888;background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;transition:color .2s,border-bottom .2s,background .2s;outline:none;margin:0 .25rem}.face-modal-tab-btn.active{color:#111;border-bottom:2.5px solid #111;background:#fff}.face-modal-tab-content{display:none}.face-modal-tab-content.active{display:block}}@media (max-width: 768px){.face-modal-content{max-width:320px!important;width:92vw!important;padding:.8rem .5rem 1rem!important}.face-modal-actions{flex-direction:column;gap:10px}.face-modal-btn{width:100%!important;min-width:0!important;box-sizing:border-box;font-size:.87rem;padding:.73rem 0}}#faceAnalysisResult .progress-bar-container{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative;margin-bottom:1rem}#faceAnalysisResult .progress-bar-fill{width:33%;height:100%;background:linear-gradient(90deg,#1d5caa,#4169e1,#1d5caa);background-size:200% 100%;animation:shimmer 2s infinite linear;border-radius:4px;transition:width 1.2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}#faceAnalysisResult .progress-bar-fill:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:progress-shine 1.5s ease-in-out;animation-delay:.3s;animation-fill-mode:both}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes progress-shine{0%{left:-100%;opacity:0}50%{opacity:1}to{left:100%;opacity:0}}#faceAnalysisSnapshot{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:8px;margin-bottom:1rem}.camera-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center}.camera-container img,.camera-container video{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:8px}.results-section{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}.results-section img{display:block;margin:0 auto;max-width:100%;height:auto;border-radius:8px;margin-bottom:1rem}.completion-checkmark{display:flex;justify-content:center;align-items:center;height:60px;margin-bottom:1rem;animation:checkmark-bounce .8s ease-out}@keyframes checkmark-bounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}80%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.checkmark-circle{width:60px;height:60px;position:relative;transform:rotate(-45deg);animation:checkmark-appear .6s ease-in-out}.checkmark-stem{position:absolute;width:3px;height:25px;background-color:#22c55e;left:30px;top:15px;animation:checkmark-stem .4s ease-in-out .6s both}.checkmark-kick{position:absolute;width:3px;height:15px;background-color:#22c55e;left:15px;top:30px;animation:checkmark-kick .4s ease-in-out .6s both}.progress-bar-container.fade-out{animation:fade-out-progress 1s ease-in-out forwards;animation-delay:2s}.progress-bar-container{transition:opacity .5s ease-out,transform .5s ease-out}@keyframes fade-out-progress{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes checkmark-appear{0%{transform:rotate(-45deg) scale(0);opacity:0}50%{transform:rotate(-45deg) scale(1.2);opacity:.8}to{transform:rotate(-45deg) scale(1);opacity:1}}@keyframes checkmark-stem{0%{height:0;opacity:0}to{height:25px;opacity:1}}@keyframes checkmark-kick{0%{width:0;opacity:0}to{width:15px;opacity:1}}#faceModalStepCamera .face-modal-body{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}#faceModalStepCamera .camera-container,#faceModalStepCamera .layout-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center}.tabs-container{display:flex;border-bottom:1px solid #eee;margin-bottom:1.5rem;width:100%}.tab-btn{flex:1;padding:.5rem 1rem;border:none;background:none;color:#666;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;border-bottom:2px solid transparent}.tab-btn.active{color:#06c;border-bottom-color:#06c;font-weight:600}.tab-btn:hover{color:#06c}.results-tab-content,.adjustments-tab-content{width:100%}.results-tab-content.active,.adjustments-tab-content.active{display:block}@media (max-width: 768px){.adjustments-tab-content div[style*=grid-template-columns]{display:grid!important;grid-template-columns:1fr 1fr!important;gap:.8rem!important}.adjustments-tab-content label{font-size:.85rem!important;margin-bottom:.3rem!important}.adjustments-tab-content select{font-size:.85rem!important;padding:.4rem .6rem!important}@media (max-width: 480px){.adjustments-tab-content div[style*=grid-template-columns]{grid-template-columns:1fr!important;gap:.6rem!important}}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/face-modal-theme.css.map */