/* ------------------------------------------------------------------------
   Плашка «Відкрий в додатку» (плагін Tpozyka App Entry) — вигляд як у
   iOS Smart App Banner, який Safari малює сам за мета-тегом apple-itunes-app:
   біла смуга, іконка додатку, «ТвояПозика / Finance», праворуч синя хмаринка
   завантаження і синій хрестик у сірому колі.
   Плагін правити не можна, тому перевизначаємо його стилі тут. Файл
   підключається після tpozyka-app-entry.css (залежність у functions.php),
   тож вистачає тих самих селекторів. Тексти та іконка — через фільтр
   tpozyka_app_entry_config у functions.php.
   ------------------------------------------------------------------------ */

/* Ширина — 100vw, а не left/right: 0. Якщо сторінка ширша за екран (на вузьких
   екранах таке є, на контактах — завжди), мобільний браузер розтягує layout
   viewport під контент, і fixed-плашка розтягується разом з ним — хрестик
   опиняється за краєм. vw рахується від реального екрана, тому не з'їжджає.
   max-width: 100% — для десктопа, де 100vw включає смугу прокрутки.        */
.tpozyka-app-entry {
    right: auto;
    width: 100vw;
    max-width: 100%;
    background: #fff;
    border-bottom: 0;
    box-shadow: none;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.tpozyka-app-entry__inner {
    box-sizing: border-box;
    height: 62px;
    gap: 12px;
    padding: 9px 16px 9px 16px;
}

.tpozyka-app-entry__head {
    gap: 12px;
}

.tpozyka-app-entry__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.tpozyka-app-entry__title {
    margin-bottom: 1px;
    color: #000;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpozyka-app-entry__text {
    color: #8e8e93;
    font-size: 15px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tpozyka-app-entry__actions {
    gap: 14px;
}

/* Кнопка «Завантажити» — лише іконка хмаринки, як в iOS. Текст лишається
   в розмітці (доступна назва кнопки), але візуально прихований.          */
.tpozyka-app-entry__btn,
.tpozyka-app-entry__btn--primary {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23007aff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17.5H6.5a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 17.6 8a4.75 4.75 0 0 1-.1 9.5H17"/><path d="M12 11v9"/><path d="m8.5 16.5 3.5 3.5 3.5-3.5"/></svg>') center / 32px 32px no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.tpozyka-app-entry__btn:active {
    opacity: .5;
}

/* Хрестик — синій у світло-сірому колі. Символ «×» з розмітки ховаємо,
   малюємо своїм SVG, щоб не залежати від шрифту.                          */
.tpozyka-app-entry__close {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: #eef0f5 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23007aff" stroke-width="2.2" stroke-linecap="round"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></svg>') center / 18px 18px no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.tpozyka-app-entry__close:active {
    background-color: #e0e3ea;
}

@media (max-width: 767px) {
    /* Плагін резервує 68px під свою плашку, наша — 62px. */
    body.tpozyka-app-entry-visible {
        padding-top: 62px;
    }

    html.tpozyka-app-entry-visible {
        scroll-padding-top: 74px;
    }
}