.ems-compass-wrapper { display: flex; align-items: center; position: relative; padding: 20px; gap: 80px; }
.ems-decoration-element { position: absolute; bottom: -20px; right: -20px; z-index: -1; opacity: 0.8; }
.ems-decoration-element img { max-width: 150px; height: auto; }

.ems-left-container { position: relative; z-index: 2; }
.ems-main-icon-box {
    background: #EFE9FC;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    height: 100px;
    width: 100px;
    display: flex;
    align-items: center;
}
.ems-main-icon-box .ems-icon-img { width: 60px; height: auto; }
.ems-right-container {
    position: relative; 
}

/* =========================================================
   МАТЕМАТИКА НА ИЗВИВКИТЕ
   ========================================================= */
.ems-items-list {
    --gap: 15px;             /* Разстояние между кутийките */
    --w: 2px;                /* Дебелина на линията */
    --color: #EFE9FC;        /* Цвят на линията */
    --rad: 15px;             /* Извивка на клоните */
    --j-rad: 15px;           /* Извивка на центъра (ромба) */
    --spine-x: -82px;        /* Позиция на вертикалния гръбнак */
    margin-left: 52px!important;
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gap); position: relative;
}
.ems-items-list * { box-sizing: border-box; }

/* Основната линия от иконата до центъра */
.ems-items-list::before {
    content: '';
    position: absolute;
    left: -132px;
    width: 37.5px;
    top: 49.7%;
    height: var(--w);
    background: var(--color);
    transform: translateY(-50%);
    z-index: 1;
}

.ems-item { 
    position: relative; 
    margin: 0 !important;
    width: max-content;
    }    

/* === 1. ИЗВИТИ КЛОНИ (От кутийката към гръбнака) === */
.ems-item-top .ems-branch {
    position: absolute; left: var(--spine-x); top: 50%; width: calc(-1 * var(--spine-x)); height: var(--rad);
    border-top: var(--w) solid var(--color); border-left: var(--w) solid var(--color); border-top-left-radius: var(--rad);
}
.ems-item-bottom .ems-branch {
    position: absolute; left: var(--spine-x); bottom: 50%; width: calc(-1 * var(--spine-x)); height: var(--rad);
    border-bottom: var(--w) solid var(--color); border-left: var(--w) solid var(--color); border-bottom-left-radius: var(--rad);
}
/* Правата линия за средния елемент (ако са нечетен брой) */
.ems-item-center .ems-branch {
    position: absolute; left: calc(var(--spine-x) + var(--w) + var(--j-rad)); top: 50%; 
    width: calc(-1 * (var(--spine-x) + var(--w) + var(--j-rad))); height: var(--w); background: var(--color); transform: translateY(-50%);
}

/* === 2. ВЕРТИКАЛНИ ГРЪБНАЦИ (Свързват извивките) === */
.ems-trunk, .ems-trunk-bottom { position: absolute; left: var(--spine-x); width: var(--w); background: var(--color); }

.ems-item-top .ems-trunk { top: 0; bottom: calc(-1 * var(--gap)); }
.ems-item-bottom .ems-trunk { top: 0; bottom: calc(-1 * var(--gap)); }

/* Изчистване на стърчащите краища горе и долу */
.ems-item-first .ems-trunk { top: calc(50% + var(--rad) - var(--w)); }
.ems-item-last .ems-trunk { bottom: calc(50% + var(--rad)); }

/* Гръбнаци за средния елемент (за да не пресичат празния ромб) */
.ems-item-center .ems-trunk { top: 0; bottom: calc(50% + var(--j-rad)); }
.ems-item-center .ems-trunk-bottom { top: calc(50% + var(--j-rad)); bottom: calc(-1 * var(--gap)); }

/* Корекции за "Вилицата" при ЧЕТЕН брой (спират точно до извивката) */
.ems-last-top.ems-even-split .ems-trunk { bottom: calc(-1 * var(--gap) / 2 + var(--j-rad) - var(--w)); }
.ems-first-bottom.ems-even-split .ems-trunk { top: calc(-1 * var(--gap) / 2 + var(--j-rad) - var(--w)); }

/* Корекции ако имаш само 2 елемента общо */
.ems-item-first.ems-last-top.ems-even-split .ems-trunk { top: calc(50% + var(--rad) - var(--w)); bottom: calc(-1 * var(--gap) / 2 + var(--j-rad) - var(--w)); }
.ems-item-last.ems-first-bottom.ems-even-split .ems-trunk { top: calc(-1 * var(--gap) / 2 + var(--j-rad) - var(--w)); bottom: calc(50% + var(--rad)); }


/* === 3. ЦЕНТЪРЪТ (РОМБЪТ ИЛИ ВИЛИЦАТА), ИЗГРАДЕН САМО ОТ ИЗВИВКИ === */
.ems-junction { 
    position: absolute; left: calc(var(--spine-x) - var(--j-rad)); 
    width: calc(var(--j-rad) * 2 + var(--w)); height: calc(var(--j-rad) * 2); 
    display: flex; z-index: 2; 
}
.ems-j-full { top: 50%; transform: translateY(-50%); }
.ems-j-half { top: calc(-1 * var(--gap) / 2); transform: translateY(-50%); width: calc(var(--j-rad) + var(--w)); }

.ems-j-left { 
    width: calc(var(--j-rad) + var(--w)); 
    display: flex; 
    flex-direction: column; 
    top: -7px;
    position: relative;
    left: 0px;
    height: 40px;
}
.ems-j-right { width: var(--j-rad); display: flex; flex-direction: column; }

/* 4-те парчета, които рисуват негативното пространство */
.ems-curve-tl { 
    height: var(--j-rad); 
    border-bottom: var(--w) solid var(--color); 
    border-right: var(--w) solid var(--color); 
    border-bottom-right-radius: var(--j-rad); 
    position: relative;
    width: 18px;
    top: 3px;
    left: -1px;
    height: 100%;
}
.ems-curve-bl { 
    height: var(--j-rad); 
    border-top: var(--w) solid var(--color); 
    border-right: var(--w) solid var(--color); 
    border-top-right-radius: var(--j-rad); 
    position: relative;
    top: 1px;
    height: 100%;
}
.ems-curve-tr { 
    height: var(--j-rad); 
    border-bottom: var(--w) solid var(--color); 
    border-left: var(--w) solid var(--color); 
    border-bottom-left-radius: var(--j-rad); 
    position: relative;
    top: 1px;
    left: -2px;
    width: 20px;
}
.ems-curve-br { 
    height: var(--j-rad); 
    border-top: var(--w) solid var(--color); 
    border-left: var(--w) solid var(--color); 
    border-top-left-radius: var(--j-rad);
    position: relative;
    top: -1px;
    left: -2px;
    width: 20px; 
}

/* === ДИЗАЙН НА КУТИЙКИТЕ === */
.ems-item-box {
    background: #EFE9FC;
    /* padding: 15px 20px; */
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 8px 16px 8px 16px;
}
.ems-item-box:hover { transform: translateX(5px); box-shadow: 0 4px 15px rgba(106, 90, 205, 0.1); }
.ems-item-icon-wrapper img {
    width: 50px;
    height: auto;
    object-fit: contain !important;
}
.ems-item-text {
     font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
     color: #6E33DD; 
    }