/**
 * Підключимо шрифт Montserrat для плагіну, якщо його немає, хоча зазвичай він вже є в основному плагіні
 */

.ddsp-shortcode-container {
    font-family: var(--lq-font, "Montserrat", sans-serif); /* Беремо шрифт з основного якщо заданий, або свій */
    color: var(--lq-text, #1c1c1e);
    margin: 20px 0;
}

.ddsp-title {
    font-size: var(--ddsp-tfs, 24px) !important;
    font-weight: var(--ddsp-tfw, 700) !important;
    margin-bottom: 20px;
    color: #000;
    text-transform: uppercase;
}

.ddsp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ddsp-item {
    display: flex;
    align-items: flex-end; /* Вирівнюємо по нижньому краю, щоб лінія співпадала з текстом */
    width: 100%;
}

.ddsp-name {
    font-size: var(--ddsp-fs, 15px);
    font-weight: var(--ddsp-fw, 400); 
    color: #444;
    white-space: normal; /* Дозволяємо перенос */
    flex: 0 1 auto; /* Дозволяємо звуження та ріст по контенту */
    max-width: 80%; /* Залишаємо місце для ціни */
    word-wrap: break-word;
    line-height: 1.4;
}

.ddsp-line {
    flex-grow: 1;
    border-bottom: 2px solid #000; /* Чорні лінії як на макеті */
    margin: 0 12px;
    position: relative;
    top: -5px; /* Трохи піднімаємо для узгодженості зі шрифтом */
}

.ddsp-price {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Коли екран дуже малий, дозволимо назві переноситися, а лінія трохи стиснеться */
@media (max-width: 600px) {
    .ddsp-name {
        white-space: normal;
        max-width: 60%; 
    }
}