/* Contacts popover over a main slider banner (slide LINK "#popover-<id>"), e.g. #popover-plan for "Планируйте с выгодой"
   (Figma "MVB for web" > баннеры на сайт: Group 609 desktop, Group 390 mobile). js/banner-popover.js puts it over the
   banner's own "ОБСУДИТЬ ПРОЕКТ" button: a bar whose tail points at the button, scaled with the banner picture (--bar),
   or a card centred on the button on phones (--card). */
.banner-popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1100; /* above the slider, under the fixed header and Fancybox (1200) */
    display: flex;
    align-items: center;
    background: #fff;
    color: #000;
    font-size: 31px;
    line-height: 32px;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .18));
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.banner-popover[hidden] {
    display: none; /* closed: takes no room, so it never widens the page */
}
.banner-popover.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .18s ease;
}
.banner-popover:focus {
    outline: none;
}
.banner-popover__title {
    flex: none;
}
.banner-popover__link {
    display: flex;
    flex: none;
    align-items: center;
    gap: 20px;
    color: #000;
    text-decoration: none;
    transition: opacity .2s;
}
.banner-popover__link:hover,
.banner-popover__link:focus {
    color: #000;
    opacity: .7;
}
.banner-popover__icon {
    display: block;
    flex: none;
    width: 52px;
    height: 52px;
}
/* the same yellow close button as in the site's Fancybox modals */
.banner-popover__close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: #ffb81c;
    color: #1f1d1d;
    cursor: pointer;
}
.banner-popover__close svg {
    width: 14px;
    height: 14px;
}

/* desktop: 918x212 bar + 70x37 tail, as drawn on the 1920x1080 banner; the script scales it with the picture */
.banner-popover--bar {
    width: 918px;
    height: 212px;
    padding: 0 100px;
    justify-content: space-between;
    transform-origin: 50% 249px; /* the tip of the tail */
}
.banner-popover--bar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 70px;
    height: 37px;
    margin-left: -35px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* phones: a column card, as the MVB popup */
.banner-popover--card {
    width: 335px;
    max-width: calc(100% - 32px); /* of the viewport without the scrollbar: the popover sits in body */
    padding: 60px 24px;
    flex-direction: column;
    text-align: center;
}
.banner-popover--card .banner-popover__title {
    margin-bottom: 56px;
}
.banner-popover--card .banner-popover__link {
    flex-direction: column;
}
.banner-popover--card .banner-popover__link + .banner-popover__link {
    margin-top: 61px;
}
@media (max-height: 700px) {
    .banner-popover--card {
        padding: 40px 24px;
    }
    .banner-popover--card .banner-popover__title {
        margin-bottom: 32px;
    }
    .banner-popover--card .banner-popover__link + .banner-popover__link {
        margin-top: 32px;
    }
}