/*
site pwa
*/

/*@media (prefers-color-scheme: dark) {
:where(html){
  --black:#fff;
  --white:#000;
}
}*/
.sitepwa_btn,
.sitepwa_banner-install .btn {text-transform: none;white-space: nowrap;font-size: 0.9em;cursor:pointer;pointer-events: all;
justify-content: center;align-items: center;gap:.5em}

.sitepwa_btn-update {position: fixed;z-index: 11000;left:calc(50% - 21ch);bottom:4rem;width: 42ch;text-transform: none;
cursor:pointer;pointer-events: all;display: block;white-space: break-spaces;font-size: 0.9em;}

.sitepwa_btn[hidden] {pointer-events: none;visibility: hidden;display: none;}

body {
  &>.sitepwa_btn-install {position: absolute;top: 1rem;right: 1rem;}
}

.sitepwa_banner-install {
    --space: 1em;
    --bg-color: var(--pwa_theme_color);
    --text-color: white;
    --btn-close-icon-color: inherit;
    --btn-close-icon-color-w: 28px;
    --btn-close-icon-color-h: 28px;
    position: static;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    padding: var(--space, 1rem);
    padding-bottom: 50px;
    border: 0;
    background-color: var(--bg-color, #F5F5F5);
    color: var(--text-color, #000);
}

.sitepwa_banner-install .banner-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    font-size: 0.9em;
    line-height: 2;
}

.sitepwa_banner-install .banner-text {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    margin-block: 6px 1rem;
    line-height: 1.4;
}

.sitepwa_banner-install .banner-text p {
    margin: 0;
}

.sitepwa_banner-install .app-icon {
    border-radius: 8px;
}

.sitepwa_banner-install .btn-close-icon {
    padding: 6px;
    border: 0;
    background: none;
    cursor: pointer;
    align-self: flex-end;
    border-radius: 999em;
    line-height: 0;
}

.sitepwa_banner-install .btn-close-icon:hover, .sitepwa_banner-install .btn-close-icon:active, .sitepwa_banner-install .btn-close-icon:focus {
    background-color: #fff;
    color: black;
}

.sitepwa_banner-install .btn-close-icon {
    color: var(--btn-close-icon-color, inherit);
}

.sitepwa_banner-install .btn-close-icon svg {
    width: var(--btn-close-icon-color-w);
    height: var(--btn-close-icon-color-h);
}

@media (min-width:768px) {
    .sitepwa_banner-install .btn-close-icon {
        display: none;
    }
}

.sitepwa_banner-install.is-safari em {
    display: flex;
    align-items: center;
    gap: .5em;
}

.sitepwa_banner-install .app-wrap {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-block: .5em;
}

.sitepwa_banner-install .app-wrap .app-icon {
    margin-left: 0;
}

@media (max-width:600px) {
    .sitepwa_banner-install .banner-wrap {
        font-size: 0.8em;
    }
}

@media (max-width:768px) {
    .sitepwa_banner-install .btn-icon {
        display: block;
    }

    .sitepwa_banner-install .btn-secondary {
        display: none;
    }
}

@media (min-width:768px) {
    .sitepwa_banner-install.is-safari {
        --space: 2em;
    }

    .sitepwa_banner-install .banner-wrap {
        justify-content: center;
        padding-right: var(--space, 1rem);
    }

    .sitepwa_banner-install .app-wrap {
        margin-block: 1em;
    }
}

.sitepwa_banner-install .banner-buttons {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.sitepwa_banner-install .help {
    list-style: none;
    margin: 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
    padding: 1rem;
}

.sitepwa_banner-install .help li {
    display: flex;
    align-items: center;
    gap: .5em;
}

.sitepwa_banner-install .sitepwa_btn-help svg, .sitepwa_banner-install .help svg {
    width: 24px;
}
  /* utils */
.sitepwa_banner-install[hidden],
.sitepwa_banner-install .target-hidden,
.sitepwa_banner-install.is-safari .visible-pc {display: none;}
.sitepwa_banner-install:not(.is-safari) .visible-ios,
.sitepwa_banner-install:not(.is-safari) .visible-ios26,
.sitepwa_banner-install:not(.is-safari) .visible-macos,
.sitepwa_banner-install:not(.is-safari) .visible-safari {display: none;}
.sitepwa_banner-install.is-safari:not(.is-macos) .visible-macos {display: none;}
.sitepwa_banner-install.is-safari:not(.is-ios) .visible-ios {display: none;}
.sitepwa_banner-install.is-safari:not(.is-ios26) .visible-ios26 {display: none;}


.debug-section {position: relative;z-index: 10;}

:where(.banner-wrap .btn) {
  display: flex;
  align-content: center;
  padding: 1rem;
  border-radius: 99em;
  width: 100%;
  border:0;
  font-weight: bold;
  font-size: 1rem;
}
:where(.banner-wrap .btn-primary) {
  background-color: #fff;
}