/*
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;}

.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;position: fixed; z-index: 10000;top: 0;  padding: var(--space,1rem);border: 0;background-color: var(--bg2,#F5F5F5);color:var(--text-bg2,#000); }
.sitepwa_banner-install {box-shadow: 5px 5px 15px -4px #000000;}

.sitepwa_banner-install .banner-wrap{display: flex;gap:1rem;align-items: center;font-size: 0.9em;line-height: 2;}
.sitepwa_banner-install p{display: flex;gap:1rem;justify-content: center;align-items: center;}

.sitepwa_banner-install .app-icon {margin-left: -1em;border-radius: 8px;}
.sitepwa_banner-install .btn-icon {padding: 1em;border:0;background: none;cursor:pointer;display: none;color:var(--text,#000)}
.sitepwa_banner-install .btn-icon svg{width: 1.25em;height: 1.25em;}

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

@media (max-width:768px) {
  .sitepwa_banner-install:not(.is-safari) { padding-left: 0;}

  .sitepwa_banner-install .btn-icon {display: block}
  .sitepwa_banner-install .btn-secondary {display: none}
}
.sitepwa_banner-install.is-safari {top: 50%; width: 88%;max-width: 450px; transform:translateY(-50%);    box-shadow: 5px 5px 0px 100vmax rgba(0,0,0,.8);}
/*.sitepwa_banner-install.is-safari .banner-wrap{position: relative;}*/
.sitepwa_banner-install.is-safari .btn-icon {display: block;position: absolute;top: 0;right: 0;}
.sitepwa_banner-install.is-safari .btn-icon svg {width: 24px;height: 24px;}
.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 (min-width:768px) {
  .sitepwa_banner-install {width: 100%;}
  .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.is-safari em {display: flex;align-items: center;gap:.5em}

.is-safari .hide-safari {display: none;}
.visible-ios,
.visible-macos,
.visible-safari {display: none;}
.is-safari .visible-safari {display: block;}
.is-safari:not(.is-macos) .visible-ios {display: block;}
.is-safari.is-macos .visible-macos {display: block;}
.debug-section {position: relative;z-index: 10;}