/* PremiumBox notice components: isolated, placement-specific designs. */
:root {
    --pn-notice-glass-background: #00000059;
}

.pn-notice,
.pn-notice * {
    box-sizing: border-box;
    font-family: 'Golos Text', Arial, sans-serif;
}

/* Header notice: horizontal announcement strip. */
.pn-notice--top.wclosearea {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 50px 0 30px;
    padding: 0;
    z-index: 999999;
    color: #fff;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Extend the real page background behind the top notice. The background
   section is below the header in the document, so the small runtime offset
   moves its painted surface upward while compensating its content and flow. */
body.has-pn-top-notice-background .main {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

body.has-pn-top-notice-background .fm-hero,
body.fm-exchange-page-template.has-pn-top-notice-background .fm-exchange-page {
    top: calc(-1 * var(--pn-top-notice-background-offset, 0px));
    padding-top: var(--pn-top-notice-background-offset, 0px);
    margin-bottom: calc(-1 * var(--pn-top-notice-background-offset, 0px));
}

/* The homepage header normally overlays the hero. When a top notice is present,
   keep both desktop and mobile headers in normal flow below the notice. */
body .pn-notice--top ~ .fm-header.desktop-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin-bottom: calc(0px - var(--fm-header-height, 70px));
}

body .pn-notice--top ~ .mobile-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin-bottom: -60px;
}

.pn-notice--top .wclosearea_ins {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: calc(100% - 64px);
    max-width: var(--fm-container);
    min-height: 40px;
    margin: 0 auto;
    padding: 8px 24px;
    border-radius: 20px;
    background: #929292;
    background: var(--pn-notice-glass-background);
    -webkit-backdrop-filter: blur(44px);
    backdrop-filter: blur(44px);
}

.pn-notice--top .wclosearea_text {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
}

.pn-notice--top .wclosearea_text_ins {
    width: 100%;
    padding: 0;
    color: #fff;
    font: 400 14px/20px 'Golos Text', Arial, sans-serif;
    text-align: left;
}

.pn-notice--top .wclosearea_hide.pn-notice__close {
    order: 2;
    position: static;
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    float: none;
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent url('../images/close.svg') center / 20px 20px no-repeat;
    color: transparent;
    cursor: pointer;
    font-size: 0;
    transition: all 0.1s ease-in-out;
}

.pn-notice--top .wclosearea_hide.pn-notice__close:hover {
    opacity: 0.8;
}

/* Bottom notice: fixed bar on desktop, stacked card on mobile. */
.pn-notice--bottom.wn_wrap {
    right: 0;
    bottom: 16px;
    left: 0;
    display: flex;
    justify-content: center;
    width: calc(100% - 32px);
    max-width: 829px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 24px;
    background: #929292;
    background: var(--pn-notice-glass-background);
    -webkit-backdrop-filter: blur(44px);
    backdrop-filter: blur(44px);
    color: #fff;
}

.pn-notice--bottom .wn_div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: none;
    color: #fff;
    font: 400 16px/23px 'Golos Text', Arial, sans-serif;
}

.pn-notice--bottom .wn_div_text {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    color: #fff;
    font: inherit;
}

.pn-notice--bottom .wn_div_button {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    margin: 0;
}

.pn-notice--bottom .wn_div_button input {
    width: 151px;
    min-width: 151px;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: #6826e8;
    color: #fff;
    cursor: pointer;
    font: 500 14px/20px 'Golos Text', Arial, sans-serif;
    transition: all 0.1s ease-in-out;
}

.pn-notice--bottom .wn_div_button input:hover:not(:disabled) {
    opacity: 0.8;
    transition: all 0.1s ease-in-out;
}

.pn-notice--bottom .wn_div_button input:active:not(:disabled) {
    opacity: 0.6;
    transition: all 0.1s ease-in-out;
}

/* Modal notice: centered card; only this modal's panel and backdrop are styled. */
.pn-notice--modal.standart_window {
    width: 100%;
    max-width: none;
    padding: 0;
    z-index: 999999;
}

.pn-notice--modal .standart_windowins {
    width: min(353px, calc(100vw - 32px));
    max-width: 353px;
    margin: 0 auto;
    padding: 0;
}

.pn-notice--modal .standart_window_ins {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    min-height: 215px;
    margin: 0;
    padding: 20px 40px;
    border: 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: none;
    color: #171717;
}

.pn-notice--modal .standart_window_title {
    display: none;
}

.pn-notice--modal .standart_window_close {
    display: none !important;
}

.pn-notice--modal .standart_window_content {
    order: 1;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: #171717;
}

.pn-notice--modal .standart_window_content_ins {
    color: #171717;
    font: 400 16px/23px 'Golos Text', Arial, sans-serif;
    text-align: left;
}

.pn-notice--modal .standart_window_submit {
    order: 2;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.pn-notice--modal .standart_window_submit input {
    width: 151px;
    min-width: 151px;
    height: 36px;
    margin: 0 auto;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: #6826e8;
    color: #fff;
    cursor: pointer;
    font: 500 14px/20px 'Golos Text', Arial, sans-serif;
}

body .standart_shadow.pn-notice__backdrop {
    z-index: 999998;
    background: rgba(0, 0, 0, 0.58);
    filter: none;
    opacity: 1;
}

@media only screen and (max-width: 767px) {
    /* The mobile menu sits inside the mobile-header stacking context (z-index 30).
       Lower the notice only while that full-screen menu is open. */
    body.menu-open .pn-notice--top.wclosearea {
        z-index: 20;
    }

    .pn-notice--top.wclosearea {
        margin: 20px 0;
    }
}

@media only screen and (max-width: 640px) {
    .pn-notice--top .wclosearea_ins {
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: calc(100% - 26px);
        max-width: var(--fm-container);
        min-height: 0;
        padding: 20px 40px 20px 24px;
        border-radius: 24px;
    }

    .pn-notice--top .wclosearea_text,
    .pn-notice--top .wclosearea_text_ins {
        width: 100%;
        color: #fff;
        font: 400 16px/23px 'Golos Text', Arial, sans-serif;
        text-align: center;
    }

    .pn-notice--top .wclosearea_hide.pn-notice__close {
        position: absolute;
        top: 12px;
        right: 12px;
        flex: 0 0 24px;
        width: 24px;
        min-width: 24px;
        height: 24px;
    }

    .pn-notice--bottom.wn_wrap {
        bottom: 16px;
        width: calc(100% - 32px);
        max-width: 353px;
        padding: 24px;
    }

    .pn-notice--bottom .wn_div {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        font-size: 16px;
        line-height: 23px;
    }

    .pn-notice--bottom .wn_div_button {
        width: 100%;
        margin: 0;
    }

    .pn-notice--bottom .wn_div_button input {
        width: 151px;
        min-width: 151px;
        height: 36px;
    }
}