Elementor Can Do THIS?! Dental Calculator Without Plugins

				
					/* СТЕКЛО GLASS  */
.dental-final{
    --glass-opacity: 0.2; /* */

    display:flex;
    gap:40px;
    padding:40px;
    border-radius:30px;

    background:rgba(7,25,34,var(--glass-opacity));
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.1);
    color:#fff;
}




/* СЕРВИС SERVICE */
.service{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    margin-bottom:12px;
    border-radius:16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.05);
    cursor:pointer;
}

.service.active{
    border:1px solid #59a0bc;
    background:rgba(46,211,198,0.1);
}

.icon{
    width:48px;
    height:48px;
    border-radius:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.check{
    margin-left:auto;
    width:20px;
    height:20px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.2);
}

.service.active .check{
    background:#59a0bc;
}

/* ИТОГ TOTAL AMOUNT*/
.total-block{
    margin-top:20px;
}

.total-block span{
    color:rgba(255,255,255,0.5);
}

.total-block b{
    display:block;
    font-size:28px;
    color:#fff;
}

/* ==============================
WHITE BUTTON + BLUR LIGHT SWEEP
RU: белая кнопка + мягкий блик
EN: white button with soft blur sweep
============================== */

.btn{
    position:relative;
    overflow:hidden;

    margin-top:20px;
    width:100%;
    padding:16px;

    border-radius:999px;
    border:none;

    /* белый градиент the white gradient */
    background:linear-gradient(
        135deg,
        #ffffff,
        #e9f6ff
    );

    color:#0A1A2F;

    font-size:16px; /* РАЗМЕР ТЕКСТА TEXT SIZE */
    font-weight:500;
    letter-spacing:0.8px;

    cursor:pointer;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.25);

    transition:0.3s;
}
.btn{
    position:relative;
    overflow:hidden;
}


/* ==============================
HOVER ANIMATION (вся кнопка)
RU: анимация всей кнопки при наведении
EN: full button hover animation
============================== */

.btn{
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

/* при наведении */
.btn:hover{
    transform:translateY(-3px) scale(1.02);

    color:#2a444f;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.4);
}

/* блик The glare */
.btn::before{
    content:"";
    position:absolute;

    top:0;
    left:-150%;

    width:80%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.9) 50%,
        transparent 100%
    );

    filter:blur(10px);
    opacity:0.8;

    transform:skewX(-20deg);

    z-index:2; /* 🔥 КЛЮЧ */
    pointer-events:none;

    animation:btnShine 5s infinite;
}

/* ускоряем блик при наведении speed up the glare when hovering */
.btn:hover::before{
    animation:btnShineFast 1.2s ease;
}

@keyframes btnShineFast{
    0%{
        left:-150%;
        opacity:0;
    }
    30%{
        opacity:1;
    }
    100%{
        left:150%;
        opacity:0;
    }
}

/* движение movement */
@keyframes btnShine{
    0%{
        left:-150%;
        opacity:0;
    }
    20%{
        opacity:0.8;
    }
    50%{
        left:150%;
        opacity:0.6;
    }
    100%{
        left:150%;
        opacity:0;
    }
}

/* ПРАВАЯ THE RIGHT ONE*/
.dental-right{
    position:relative;
    width:520px;
    aspect-ratio:1/1;
}

.mouth{
    width:100%;
    height:100%;
    object-fit:contain;
}

#points{
    position:absolute;
    inset:0;
}

/* ТОЧКИ POINTS*/
.point{
    position:absolute;
    transform:translate(-50%,-50%);

    width:30px;
    height:30px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.15);

    font-size:11px;
    color:#fff;

    transition:0.25s;
}

/* HOVER */
.point:hover{
    border:1px solid #59a0bc;
    box-shadow:
        0 0 6px rgba(46,211,198,0.6),
        0 0 12px rgba(46,211,198,0.4);
    background:rgba(46,211,198,0.08);
}

/* ACTIVE */
.point.active{
    border:1px solid #fff;
    background:#fff;
    color:#fff;

    box-shadow:
        0 0 10px #2ed3c6,
        0 0 20px rgba(46,211,198,0.6),
        0 0 40px rgba(46,211,198,0.4);
}

/* ГАРАНТИЯ WARRANTY  */
.guarantee{
    position:absolute;
    bottom:20px;
    right:20px;
    display:flex;
    gap:10px;
    align-items:center;
}

.g-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    background:linear-gradient(135deg,#c89b53,#59a0bc);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.g-text{
    font-size:13px;
    color:rgba(255,255,255,0.6);
}

/* МОБИЛКА  PHONE */
@media (max-width:768px){

    .dental-final{
        flex-direction:column;
        padding:20px;
    }

    .dental-right{
        width:100%;
    }

    .guarantee{
        position:static;
        justify-content:center;
        margin-top:10px;
    }
}



/* КРИВЫЕ РАСТЯЖЕНИЯ */
.mouth{
    width:100%;
    height:auto;
    display:block;
}

#points{
    position:absolute;
    inset:0;
}

/* ТОЧКИ POINTS */
.point{
    position:absolute;
    transform:translate(-50%,-50%);
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.15);
    font-size:11px;
    color:#fff;
    transition:0.25s;
}

.point:hover{
    border:1px solid #59a0bc;
    box-shadow:
        0 0 6px rgba(46,211,198,0.6),
        0 0 12px rgba(46,211,198,0.4);
}

.point.active{
    border:1px solid #59a0bc;
    background:#59a0bc;
    color:#fff;
    box-shadow:
        0 0 10px #2ed3c6,
        0 0 20px rgba(46,211,198,0.6);
}

/* МОБИЛКА PHONE */
@media (max-width:768px){

    .point{
        width:26px;
        height:26px;
        font-size:10px;
    }

}

.mobile-total{
    display:none !important;
}

.check{
    margin-left:auto;
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.2);
    position:relative;
}

/* АКТИВНЫЙ КРУГ ACTIVE CIRCLE*/
.service.active .check{
    background:#59a0bc;
    border-color:#68c0e3;
}

/* SVG ГАЛОЧКА */
.service.active .check::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    
    width:12px;
    height:12px;

    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* анимация появления галочки - animation of the checkmark appearance*/
.service.active .check::after{
    animation: checkPop 0.25s ease;
}

@keyframes checkPop{
    0%{
        transform:translate(-50%, -50%) scale(0);
        opacity:0;
    }
    60%{
        transform:translate(-50%, -50%) scale(1.2);
        opacity:1;
    }
    100%{
        transform:translate(-50%, -50%) scale(1);
    }
}

/* плавность */
.service{
    transition:0.3s ease;
}

/* база */
.service{
    transition:0.25s ease;
}

.service{
    transition:0.25s ease;
}

.service:hover{
    transform:translateY(2px) scale(0.98);

    background:rgba(0,0,0,0.25);

   
}

/* иконка icon*/
.service:hover .icon{
    transform:scale(0.95);
    box-shadow:0 0 8px rgba(46,211,198,0.5);
}

/* кружок circle */
.service:hover .check{
    transform:scale(0.9);
    box-shadow:0 0 6px rgba(46,211,198,0.6);
}

/* ==============================
АДАПТИВНЫЙ СДВИГ КАРТИНКИ - ADAPTIVE SHIFT OF THE PICTURE
RU: двигаем только картинку, точки остаются на месте
EN: move only the image, points stay fixed
============================== */

/* БАЗА base */
.mouth{
    position:relative; /* RU: даёт возможность двигать | EN: enables shifting */
}

/* БОЛЬШОЙ ПК LARGE PC*/
@media (min-width:1400px){
    .mouth{
        top:-8px;
    }
}

/* НОУТ LAPTOP*/
@media (max-width:1399px) and (min-width:1025px){
    .mouth{
        top:-10px;
    }
}

/* ПЛАНШЕТ tablet */
@media (max-width:1024px) and (min-width:769px){
    .mouth{
        top:-20px;
    }
}


/* ТЕЛЕФОН phone*/
@media (max-width:600px){
    .mouth{
        top:-7px;
    }
}


/* КОНТЕЙНЕР CONTAINER*/
.dental-right{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width:520px;
    aspect-ratio:1/1;

    margin:auto;

    overflow:visible !important; /*  КЛЮЧ */
}

/* КАРТИНКА picture*/
.mouth{
    position:relative;
    z-index:1;

    pointer-events:none; /*  ВАЖНО */

    width:100%;
    height:auto;
}

/* ТОЧКИ POINTS */
#points{
    position:absolute;
    inset:0;

    z-index:10; /*  НАД КАРТИНКОЙ */
}

.point{
    pointer-events:auto; /*  ОБЯЗАТЕЛЬНО */
    z-index:11;
}


/* ==============================
OVAL FIX (управляемый эллипс)
RU: делаем стабильный овал без съезжания
EN: controlled ellipse, no distortion bugs
============================== */

.dental-right{
    aspect-ratio: 1 / 1.6; /*  ВЫСОТА БОЛЬШЕ ШИРИНЫ → ОВАЛ */
}

/* картинка под этот овал */
.dental-right .mouth{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
}

/* точки остаются в этом же контейнере */
.dental-right #points{
    position:absolute;
    inset:0;
}

/* RU: отступ под текстом перед карточками | EN: space below subtitle */
.subtitle{
    margin-bottom:20px;
}

/* RU: иконки не будут слишком маленькими / EN: prevent icons from shrinking too much */
.icon img{
    width:clamp(22px, 2.4cqw, 28px);
    height:clamp(22px, 2.4cqw, 28px);
    object-fit:contain;
}