/* /modules/vvdelivery/views/css/front.css */
.vvdelivery-info {
    margin: 10px 0;
    font-size: 0.9em;
    clear: both;
    line-height: 1.5; /* Додано для кращого вигляду, якщо іконка та текст різної висоти */
}
.vvdelivery-info img.vvdelivery-icon { /* Іконка типу доставки */
    vertical-align: middle;
    margin-right: 5px;
    max-height: 25px;
    max-width: 50px;
}

/* Контейнер для іконки та підказки */
.vvdelivery-tooltip-trigger {
    display: inline-block; /* Дозволяє позиціонувати підказку відносно цього елемента */
    margin-left: 8px; /* Відступ від основного тексту */
    cursor: help;     /* Курсор-підказка */
    position: relative; /* Важливо для абсолютного позиціонування підказки */
    vertical-align: middle;
}

/* Стилізація SVG іконки (якщо використовується inline SVG) */
.vvdelivery-info-svg-inline svg { 
    width: 16px; 
    height: 16px;
    fill: #007bff; /* Синій колір за замовчуванням */
    vertical-align: middle; /* Або text-bottom, залежно від SVG */
    transition: fill 0.2s ease-in-out;
}
.vvdelivery-tooltip-trigger:hover .vvdelivery-info-svg-inline svg {
    fill: #0056b3; /* Темніший синій при наведенні */
}

/* Запасний текстовий символ, якщо SVG не завантажився */
.vvdelivery-info-svg-fallback {
    color: #007bff;
    font-size: 1.1em; /* Трохи більший */
    font-weight: bold;
}
.vvdelivery-tooltip-trigger:hover .vvdelivery-info-svg-fallback {
    color: #0056b3;
}


/* Стилізація кастомної підказки */
.vvdelivery-tooltip-custom-content {
    visibility: hidden; /* Початково прихована */
    opacity: 0;         /* Початково повністю прозора */
    
    width: 250px;       /* Ширина підказки */
    background-color: #45556c; /* Темний фон */
    color: #fff;            /* Білий текст */
    text-align: left;       /* Вирівнювання тексту */
    border-radius: 6px;     /* Заокруглені кути */
    padding: 10px 15px;     /* Внутрішні відступи */
    
    position: absolute;     /* Абсолютне позиціонування */
    z-index: 10;            /* Щоб була поверх інших елементів */
    
    /* Позиціонування над іконкою */
    bottom: 100%;           /* Розміщуємо верхній край підказки біля нижнього краю іконки */
    left: 50%;              /* Починаємо з центру іконки */
    transform: translateX(-50%) translateY(-10px); /* Центруємо по горизонталі та піднімаємо трохи вище (10px відступу) */
    
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Плавна поява/зникнення */
    /* visibility змінюється з затримкою, щоб анімація opacity встигла спрацювати */

    box-shadow: 0px 2px 8px rgba(0,0,0,0.25); /* Тінь */
    font-size: 0.9rem; /* Розмір шрифту в підказці */
    line-height: 1.4;
}

/* Стрілочка для підказки */
.vvdelivery-tooltip-custom-content::after {
    content: "";
    position: absolute;
    top: 100%; /* Розміщуємо стрілку внизу підказки */
    left: 50%;
    margin-left: -7px; /* Половина ширини стрілки для центрування */
    border-width: 7px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Спрямована вгору */
}

/* Показуємо підказку при наведенні на vvdelivery-tooltip-trigger */
.vvdelivery-tooltip-trigger:hover .vvdelivery-tooltip-custom-content {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s; /* Забираємо затримку для visibility при показі */
}