עיצוב צ׳אט לווידגט אקורדיון

selector .e-n-accordion-item-title-icon{
    background: #ffffff; /*צבע רקע אייקון*/
    border-radius: 50px;/*עיגול פינות אייקון*/
    height: 2vw; /*גובה אייקון*/
    width: 2vw; /*רוחב אייקון*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s; /*משך זמן האנימציה של הסיבוב*/    
}

selector .e-n-accordion-item-title-text{
    background: white; /*צבע רקע כותרת*/
    padding: 0.5vw 1vw; /*שוליים פנימיים כותרת*/
    border-radius: 5vw 5vw 0vw 5vw; /*עיגול פינות כותרת*/
    transition: all 0.3s; /*משך זמן האנימציה של שינוי צבע רקע*/
}

selector .e-n-accordion-item:hover  .e-n-accordion-item-title-text, selector .e-n-accordion-item:hover .e-n-accordion-item-title-icon{
background-color:#000000; /*צבע רקע אייקון וכותרת בריחוף עכבר*/
}

selector .e-n-accordion-item[open] .e-n-accordion-item-title-text, selector .e-n-accordion-item[open] .e-n-accordion-item-title-icon{
background-color:#000000; /*צבע רקע אייקון וכותרת פעיל אקורדיון פתוח*/
}

selector .e-n-accordion-item:hover .e-n-accordion-item-title-icon, selector .e-n-accordion-item[open] .e-n-accordion-item-title-icon{
transform: rotate(45deg); /*סיבוב אייקון בריחוף ובמצב פעיל*/
}

/*הגדרות מבנה, לא לגעת*/
selector .e-n-accordion-item-title{
    width: 100% 
}

selector .e-n-accordion-item {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-end;
}

.acordion-text{
    max-width:45vw; /*רוחב תוכן אקורדיון (תשובה*/
    margin:1vw; /*שוליים חיצוניים*/
    border-radius: 3vw 3vw 3vw 0vw; /*עיגול פינות*/
    margin-left:3.5vw; /*שוליים מצד שמאל לפנות מקום לתמונה*/
    display: flex;
    flex-direction: row;
}

.acordion-text::before {
    content: "";
    display: inline-block;
    width: 3vw; /*רוחב התמונה*/
    height: 100%;
    margin-left: -3.5vw !important; /*שוליים מצד שמאל שלא יעלה על התוכן*/
    background-image: url(https:clean.testing.revital-u.com/wp-content/uploads/2025/07/Ellipse-1.svg); /*לינק לתמונה*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    vertical-align: bottom;
}


/*הגדרות טאבלט*/
@media(max-width:1025px){
selector .e-n-accordion-item-title-icon{
    height: 5vw; /*גובה אייקון*/
    width: 5vw; /*רוחב אייקון*/
}

selector .e-n-accordion-item-title-text{
    padding: 2vw 3vw; /*שוליים פנימיים כותרת*/
}

.acordion-text{
    max-width:40vw; /*רוחב תוכן*/
    margin:1vw; /*שוליים חיצוניים תוכן*/
    margin-left:5vw; /*שוליים מצד שמאל לפנות מקום לתמונה*/
}

.acordion-text::before {
    width: 4vw;  /*רוחב תמונה*/
    margin-left: -5vw !important; /*הזזת התמונה לצד שמאל*/
}
}

/*הגדרות מובייל*/
@media(max-width:767px){

selector .e-n-accordion-item-title-icon{
    height: 30px; /*גובה אייקון*/
    width: 30px; /*רוחב אייקון*/
}

selector .e-n-accordion-item-title-text{
    padding: 10px 20px; /*שוליים פנימיים כותרת*/
    border-radius: 25px 25px 0px 25px; /*עיגול פינות כותרת*/
}

.acordion-text{
    max-width:70vw; /*רוחב תוכן אקורדיון*/
    margin:15px; /*שוליים חיצונים תוכן*/
    margin-left:40px !important;
    border-radius: 25px 25px 25px 0px; /*עיגול פינות תוכן*/
}

.acordion-text::before {
    width: 35px; /*רוחב תמונה*/
    margin-left: -40px !important;
}
}

selector .elementor-accordion-icon-left{
    background: #ffffff; /*צבע רקע אייקון*/
    border-radius: 50px; /*עיגול פינות אייקון*/
    height: 2vw; /*גובה אייקון*/
    width: 2vw; /*רוחב אייקון*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s; /*משך זמן האנימציה של הסיבוב*/    
}

selector .elementor-accordion-title{
    background: white;  /*צבע רקע כותרת*/
    padding: 0.5vw 1vw;  /*שוליים פנימיים כותרת*/
    border-radius: 5vw 5vw 0vw 5vw; /*עיגול פינות כותרת*/
    transition: all 0.3s; /*משך זמן האנימציה של שינוי צבע רקע*/   
}

selector .elementor-accordion-item:hover  .elementor-accordion-title, selector .elementor-active .elementor-accordion-title, selector .elementor-active .elementor-accordion-icon-left, selector .elementor-accordion-item:hover .elementor-accordion-icon-left {
background-color:#000000; /*צבע רקע כותרת בריחוף עכבר*/
color:white; /*צבע כותרת בריחוף עכבר*/

}

selector .elementor-accordion-item:hover .elementor-accordion-icon-left svg, selector .elementor-active .elementor-accordion-icon-left svg{
transform: rotate(45deg); 
fill:white; /*צבע אייקון בריחוף עכבר ופעיל*/
transition: all 0.7s;
}

selector .elementor-accordion-item {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: flex-end;
}

selector .elementor-tab-title{
    border-width: 0px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

selector .elementor-accordion-item .elementor-tab-content{
    max-width:45vw; /*רוחב תוכן אקורדיון (תשובה*/
    margin:1vw;  /*שוליים חיצוניים*/
    border-radius: 3vw 3vw 3vw 0vw;  /*עיגול פינות*/
    margin-left:3.5vw; /*שוליים מצד שמאל לפנות מקום לתמונה*/
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
}


selector .elementor-tab-content::before {
    content: "";
    display: inline-block;
    width: 4vw;  /*רוחב התמונה*/
    height:4vw; /*גובה התמונה*/
    margin-left: -7vw; /*ריווח מצד שמאל*/
    margin-right: 1vw; /*ריווח מצד ימין*/
    margin-bottom: -1vw;
    background-image: url(https:clean.testing.revital-u.com/wp-content/uploads/2025/07/Ellipse-1.svg); /*לינק לתמונה*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    vertical-align: bottom;
}


/*הגדרות טאבלט*/
@media(max-width:1025px){
selector .elementor-accordion-icon-left{
    height: 5vw; /*גובה אייקון*/
    width: 5vw; /*רוחב אייקון*/
}

selector .elementor-accordion-title{
    padding: 2vw 3vw;  /*שוליים פנימיים כותרת*/
}

selector .elementor-accordion-item .elementor-tab-content{
    max-width:40vw; /*רוחב תוכן*/
    margin:1vw; /*שוליים חיצוניים תוכן*/
    margin-left:5vw; /*שוליים מצד שמאל לפנות מקום לתמונה*/
}

selector .elementor-tab-content::before {
    width: 10vw; /*רוחב תמונה*/
    height:10vw; /*גובה תמונה*/
    margin-left: -8vw; /*ריווח מצד שמאל*/
    margin-right: 1vw; /*ריווח מצד ימין*/
    margin-bottom: -1vw; /*ריווח מלמטה*/
}
}


/*הגדרות מובייל*/
@media(max-width:767px){

selector .elementor-accordion-icon-left{
    height: 30px; /*גובה אייקון*/
    width: 30px; /*רוחב אייקון*/
}

selector .elementor-accordion-title{
    padding: 10px 20px; /*שוליים פנימיים כותרת*/
    border-radius: 25px 25px 0px 25px; /*עיגול פינות כותרת*/
}

selector .elementor-accordion-item .elementor-tab-content{
    max-width:70vw;  /*רוחב תוכן אקורדיון*/
    margin:15px;  /*שוליים חיצונים תוכן*/
    margin-left:40px !important;
    border-radius: 25px 25px 25px 0px; /*עיגול פינות תוכן*/
}

selector .elementor-tab-content::before {
    width: 125px;/*רוחב תמונה*/
    height:125px; /*גובה תמונה*/
    margin-left: -50px !important; /*ריווח מצד שמאל*/
    margin-right:15px; /*ריווח מצד ימין*/
}
}