/* Basic styles for Skin Analysis Wizard */
.saw-wizard {
    max-width: 720px;
    margin: 0 auto;
    padding: 50px 30px;
    background: #fff;
    /* border: 1px solid #e5e5e5; */
    border-radius: 8px;
}

@media (min-width: 768px) {
    .saw-wizard {
        padding: 50px;
    }
}

.saw-wizard h2 {
    font-size: 1.5rem;
}

.saw-step {
    display: none;
}

.saw-step.active {
    display: block;
}

.saw-choose-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.saw-choose-grid .btn {
    min-width: 160px;
}

.saw-camera {
    position: relative;
    overflow: hidden;
}

.saw-camera[data-active="0"] {
    display: none;
}

.saw-camera video {
    display: block;
    background: var(--color-black);
    width: 100%;
    max-height: 60vh;
    aspect-ratio: 9 / 16;
}

.saw-camera-ctrls {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .saw-camera-ctrls {
        flex-direction: row;
    }
}

.saw-preview {
    display: flex;
    justify-content: center;
    aspect-ratio: 1 / 1;
    position: relative;
}

.saw-preview img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.saw-photo-ctrls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .saw-photo-ctrls {
        flex-direction: row;
    }
}

.saw-status {
    font-weight: 600;
}

.saw-error {
    color: #b00;
    margin-top: 0.75rem;
    display: none;
}

.saw-error.active {
    display: block;
}

#saw_opts .form-control, #saw_opts .btn-dropdown, #saw_opts .dropdown-menu, #saw_opts .form-select {
    border: 1px solid var(--color-gray) !important;
    border-radius: 16px;
    padding: 20px 12px;
    box-shadow: none!important;
    min-height: 82px;
}
#saw_opts .btn-dropdown {
    background: transparent;
    justify-content: space-between;
    display: flex;
    align-items: center;
}
#saw_opts .dropdown-item {
    border-radius: 8px;
}
/* Responsive Radius */
.radius-26 {
    border-radius: 15px !important;
}

@media (min-width: 768px) {
    .radius-26 {
        border-radius: 20px !important;
    }
}

@media (min-width: 1400px) {
    .radius-26 {
        border-radius: 26px !important;
    }
}

/* Button Main overrides */
.btn-main.btn-camera::after {
    background: var(--color-white) url('data:image/svg+xml;utf8,<svg width="30" height="25" viewBox="0 0 30 25" xmlns="http://www.w3.org/2000/svg"><path d="M29.9991 19.4213C29.9837 18.3123 29.9776 16.9561 29.97 15.3868C29.9623 13.6106 29.9501 11.1781 29.9179 8.50144C29.898 7.94152 29.745 6.85436 28.9352 5.84963C28.1729 4.90556 27.2224 4.52917 26.7234 4.38919L23.2074 4.23833L20.7399 0.762207H9.16331L7.23158 4.06724L3.97121 4.09213L3.89468 4.09835C3.36659 4.18078 2.03183 4.5074 1.02617 5.77186C0.0342815 7.02389 -0.00857782 8.38479 0.0189746 8.89648C-0.0147006 12.6946 0.00366769 16.082 0.0189746 19.0713V19.2455C0.0250973 20.3218 0.0358122 22.3235 1.41802 23.5506C2.42369 24.4434 3.65742 24.4916 4.12275 24.5087C5.59221 24.5662 8.76839 24.5989 12.8339 24.5989C16.8994 24.5989 21.5022 24.5678 26.4341 24.5087H26.4647L26.5917 24.4854C27.6357 24.1852 28.4607 23.6533 29.0454 22.9036C30.0266 21.6454 30.0082 20.1974 29.9975 19.4213H29.9991ZM1.97979 6.55419C2.69462 5.65366 3.64518 5.40326 4.03856 5.33482L7.93264 5.30527L9.86131 2.0049H20.1139L22.563 5.45769L26.4616 5.60856C26.8183 5.71743 27.4673 5.99272 27.9877 6.63817C28.5694 7.35984 28.6796 8.13749 28.6934 8.53099C28.7255 11.1906 28.7362 13.6215 28.7454 15.3992C28.7531 16.9701 28.7592 18.3263 28.7745 19.4493C28.7822 20.0683 28.799 21.2208 28.0872 22.1322C27.6801 22.6548 27.0907 23.0374 26.3361 23.2676C14.66 23.406 6.66217 23.364 4.1702 23.2676C3.82427 23.2536 2.90432 23.2178 2.22317 22.6143C1.25577 21.7558 1.24812 20.1803 1.24353 19.2393V19.0651C1.22822 16.0805 1.20985 12.6977 1.24353 8.87004C1.22363 8.47811 1.25424 7.46871 1.97979 6.55419Z" fill="%232C2C2C"/><path d="M15.0038 18.1097C17.9504 18.1097 20.3474 15.6741 20.3474 12.6801C20.3474 9.68611 17.9504 7.25049 15.0038 7.25049C12.0572 7.25049 9.66016 9.68611 9.66016 12.6801C9.66016 15.6741 12.0572 18.1097 15.0038 18.1097ZM15.0038 8.49629C17.2753 8.49629 19.1229 10.3736 19.1229 12.6816C19.1229 14.9897 17.2753 16.867 15.0038 16.867C12.7322 16.867 10.8847 14.9897 10.8847 12.6816C10.8847 10.3736 12.7322 8.49629 15.0038 8.49629Z" fill="%232C2C2C"/></svg>') no-repeat center;
    background-size: contain;
    background-size: 30px 25px;
}

.btn-main.btn-upload::after {
    background: var(--color-white) url('data:image/svg+xml;utf8,<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M23.9606 13.9658V24.3256H1.63315V13.9862H0.296875V25.6834H25.2969V13.9658H23.9606Z" fill="%232C2C2C"/><path d="M12.127 2.95115V19.6924H13.4632V2.86289L19.8205 9.32417L20.766 8.36355L12.8385 0.308594L4.82422 8.45181L5.76963 9.41073L12.127 2.95115Z" fill="%232C2C2C"/></svg>') no-repeat center;
    background-size: contain;
    background-size: 30px 25px;
}

.saw-photo-ctrls .btn-main {
    min-width: auto;
    width: 100%;
}

.btn-sec {
    min-width: auto;
    width: 100%;
}

.btn-sec.no-circle::after {
    content: none;
}