/*======================================================================================

    CSS (NO-JS) POPUPS BY GLENTHEMES
    github.com/glenthemes/css-popups

    Functionality inspired by Rob Dodson & CSScience:
    [#] css-tricks.com/modular-future-web-components/#aa-le-practical-example
    [#] web.archive.org/web/20131218010419/http://csscience.com/responsiveslidercss3

======================================================================================*/

/*------- POPUP BUTTONS -------*/
label[for]{
  cursor:pointer;
}

/* radios: visually hidden */
dialog input[type="radio"], label[for="close-popups"i] input[type="radio"]{
  position:absolute;
  margin:-1px;
  width:1px;
  height:1px;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  border:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  -o-appearance:none;
  appearance:none;
  opacity:0;
}

/*------- POPUPS -------*/
dialog {
  all:unset;
  position:fixed;
  margin:0;
  display:block;
  top:50%;left:50%;
  transform:translate3D(-50%,-50%,0);
  width:var(--Popup-Width,420px);
  visibility:hidden;
  opacity:0;
  transition:opacity var(--Popup-Fade-Speed,420ms) ease-in-out, visibility 0s var(--Popup-Fade-Speed,420ms) ease-in-out;
  z-index:calc(var(--Popup-Z-Index,9) + 1);
}

/* popup: show */
dialog:has(> input[type="radio"]:checked){
  visibility:visible;
  opacity:1;
  transition:opacity var(--Popup-Fade-Speed,420ms) ease-in-out, visibility 0s 0s ease-in-out;
}

/* popup box itself */
dialog .popup-inner {
  max-height:var(--Popup-Max-Height,85vh);
  padding:var(--Popup-Padding,0px);
  overflow:auto;
  box-sizing:border-box;
  background:var(--Popup-Contents-BG,transparent);
}

dialog .popup-inner > :is(p,ol,ul,h1,h2,h3,h4,h5,h6):first-child { margin-top:0 }
dialog .popup-inner > :is(p,ol,ul,h1,h2,h3,h4,h5,h6):last-child { margin-bottom:0 }

/*------- POPUP BACKGROUND -------*/
label[for="close-popups"i]{
  position:fixed;
  display:block;
  margin:0;
  top:0;left:0;
  width:100vw;
  height:100vh;
  backdrop-filter:blur(var(--Popup-BG-Blur,0px));
  visibility:hidden;
  opacity:0;
  transition:opacity var(--Popup-Fade-Speed,420ms) ease-in-out, visibility 0s var(--Popup-Fade-Speed,420ms) ease-in-out;
  z-index:var(--Popup-Z-Index,9);
  cursor:default!important;
}

label[for="close-popups"i]:after {
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;  
  background:var(--Popup-BG-Color);
  opacity:calc(100% - var(--Popup-BG-Color-Transparency,100%));
  z-index:-1;
}

/* popup background: show */
body:has(dialog > input[type="radio"]:checked) label[for="close-popups"i]{
  visibility:visible;
  opacity:1;
  transition:opacity var(--Popup-Fade-Speed,420ms) ease-in-out, visibility 0s 0s ease-in-out;
}