@charset "utf-8";

.popup{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;visibility:hidden;transition:opacity .4s}
.popup[hidden]{display:none}
.popup.on{opacity:1;visibility:visible}

.popup-dim{position:absolute;inset:0;background:rgba(6,12,30,.68);backdrop-filter:blur(3px)}

.popup-box{position:relative;max-width:100%;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 34px 90px rgba(6,12,30,.5);transform:translateY(20px) scale(.98);
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.popup.on .popup-box{transform:none}

.popup-view{position:relative;overflow:hidden;background:#0A1226;touch-action:pan-y;cursor:grab;
  width:min(92vw,460px);height:min(60vh,520px);
  transition:width .5s cubic-bezier(.2,.7,.3,1),height .5s cubic-bezier(.2,.7,.3,1)}
.popup.dragging .popup-view{cursor:grabbing}
.popup.dragging .popup-slide{transition:none}
.popup.single .popup-view{cursor:default;touch-action:auto}

.popup-slide{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;
  transform:translateX(34px);transition:opacity .55s,transform .55s cubic-bezier(.2,.7,.3,1)}
.popup-slide.on{opacity:1;transform:none;pointer-events:auto}
.popup-slide.out{opacity:0;transform:translateX(-34px)}
.popup[data-dir="prev"] .popup-slide{transform:translateX(-34px)}
.popup[data-dir="prev"] .popup-slide.on{transform:none}
.popup[data-dir="prev"] .popup-slide.out{transform:translateX(34px)}
.popup-slide img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.popup-slide iframe{width:100%;height:100%;border:0;display:block}

.popup-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(10,18,38,.42);
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s,background .25s,transform .25s}
.popup-arrow svg{width:19px;height:19px}
.popup-arrow.prev{left:12px}
.popup-arrow.next{right:12px}
.popup-view:hover .popup-arrow{opacity:1}
.popup-arrow:hover{background:var(--blue);border-color:transparent;transform:translateY(-50%) scale(1.06)}
.popup-arrow:focus-visible{opacity:1}

.popup-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:2}
.popup-dots button{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(6,12,30,.4);transition:width .3s,background .3s}
.popup-dots button.on{width:24px;background:#fff}

.popup-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  height:56px;padding:0 8px 0 18px;background:#fff;border-top:1px solid var(--line)}
.popup-today{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.popup-today input{width:18px;height:18px;accent-color:var(--blue);cursor:pointer}
.popup-close{height:40px;padding:0 20px;border-radius:999px;font-size:14.5px;font-weight:700;
  color:var(--ink);transition:background .25s,color .25s}
.popup-close:hover{background:var(--ink);color:#fff}

.popup-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(10,18,38,.45);
  border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px);transition:background .25s,transform .25s}
.popup-x svg{width:16px;height:16px}
.popup-x:hover{background:var(--blue);border-color:transparent;transform:rotate(90deg)}

.popup.single .popup-arrow,.popup.single .popup-dots{display:none}

@media (hover:none){
  .popup-arrow{opacity:1;background:rgba(10,18,38,.34)}
}

body.popup-open{overflow:hidden}

@media (max-width:760px){
  .popup{padding:14px}
  .popup-box{border-radius:14px}
  .popup-arrow{width:36px;height:36px;opacity:1;background:rgba(10,18,38,.34)}
  .popup-arrow.prev{left:8px}
  .popup-arrow.next{right:8px}
  .popup-bar{height:52px;padding:0 6px 0 14px}
  .popup-today{font-size:13px}
  .popup-close{height:36px;padding:0 16px;font-size:14px}
  .popup-x{width:34px;height:34px;top:10px;right:10px}
}

@media (prefers-reduced-motion:reduce){
  .popup,.popup-box,.popup-view,.popup-slide{transition-duration:.001s}
  .popup-slide,.popup-slide.out{transform:none}
}