.ta-c {text-align: center;}
.jc-center {justify-content: center;}
.hidden {display: none;}
.navbar a.hidden {display: none;}

/* buttons */
button {all: unset;}

.btn-theme1 {
  display: inline-flex; padding: 0.5em 1em; font-size: 14px; font-weight: 600; line-height: 1;
  border-radius: 0.625em; cursor: pointer;
  color: black; box-shadow: none; background-color: rgb(255 217 0 / 100%);
  overflow: hidden; position: relative;
}

.btn-theme1:before {
  content: ''; display: block; background-color: #ffffffbb;
  position: absolute; height: 200%; left: -50%; top: -50%; width: 5px;
  transform: rotate(45deg); animation: leftToRight 5s infinite;
}

/* POPUPS */
.popup-overlay {
    position: fixed; display: none; flex-direction: column; padding: 1em 0;
    background:rgba(30,30,30,0.7); align-items: center; transition: backdrop-filter 0.5s;
    left: 0; top: 0; right: 0; bottom: 0; z-index: 100; overflow-y: auto;
}
.popup-overlay::before, .popup-overlay::after {content:''; flex:1;}
.popup-overlay.show {display: flex; backdrop-filter: blur(5px);}
.popup-wrapper {
    max-width:min(90%,906px); background-color: #000;
    background-image: radial-gradient(circle at 50% 16vw, rgb(255 186 0 / 25%) 0%, rgb(240 142 41 / 25%) 4em, transparent 16em), radial-gradient(circle at 99% 0%, rgb(163 41 240 / 50%) 0%, rgb(132 41 240 / 50%) 3em, transparent 16em);
    animation: fadeIn 0.4s; border-radius: 10px;
}
.popup {
    position: relative; border-radius:2px; padding: 1.5em;
    padding-bottom: clamp(2em,4vw,4em);
}
.popup-wrapper-theme-dark {
    background-color: #000; color: #fff;
}
.popup-overlay.show .popup {}
.btn-hover-main:hover {filter: drop-shadow(0 0 0.75em fadeIn);}
.btn-hover-main:active {filter: drop-shadow(0 0 2em fadeIn);}


.popup-close {
  position: absolute; right:0; top:0; width: 2em; height: 2em; border-radius:2px; background-size: auto 1.1em;
  cursor: pointer; opacity: 0.8; filter: brightness(5);
  background-image:url('../img/close.svg'); background-position: 50% 50%; background-repeat: no-repeat;
}
.popup-wrapper-theme-dark .popup-close {filter: brightness(5);}
.popup-close:hover {opacity: 1;}
.popup-close:active {}
.popup-inner {}

/*popup content*/
.popup-header {}
.popup .h2 {font-weight: 600;}
.popup-header-desc {font-size: 13px; margin-block: 0.5em;}
.popup a, .link-default {color: lightblue; opacity: 0.85;}
.popup a:hover, .link-default:hover {opacity: 1;}
.popup .btn-theme1 {padding-block: 0.75em;}
.popup-inner {
    max-width: 590px; margin-left: auto; margin-right: auto;
    display: flex; flex-direction: column; gap: 0.75em;
}
.popup-form {
    display: flex; flex-direction: column; gap: 0.75em; padding: 0.75em;
}
.popup-form-desc {
    font-size: 13px; text-align: center; line-height: 1.33; margin-top: 0.75em;
    max-width: 40em; margin-left: auto; margin-right: auto;
}
.label-checkbox {
    display: flex; align-items: center; gap: 0.75em; text-align: left;
}
@media (min-width:481px){
    .popup-inner {margin-left: clamp(1.5em,4vw,6em); margin-right: clamp(1.5em,4vw,6em);}
}

/* popup confirm age */
.popup-confirm-age {color:#fff;}


@keyframes fadeIn {
  0%  {opacity: 0;}
  100% {opacity: 1;}
}