/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 11 2026 | 23:16:22 */
/*
 * ZIM – Artists – CSS
 * What: turns the Bricks popup "ZIM – Artist Panel" (template 107) into a profile panel
 *       that slides in from the right, plus the slide/fade keyframes.
 *       (Bricks can't store @keyframes in classes, and can't style the popup wrapper.)
 * Where: Artists page (/artists, page 110). Popup 107 only renders there.
 *        Works together with "ZIM – Artists – JS".
 * Added: 2026-10-11
 */

@keyframes zimPanelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes zimPanelFade { from { opacity: 0; } to { opacity: 1; } }

/* Popup wrapper: panel sits on the right, full height.
   Bricks lays popups out as a flex COLUMN, so align-items moves it left/right. */
body .brx-popup[data-popup-id="107"] {
  justify-content: flex-start;
  align-items: flex-end;
  padding: 0;
}

/* Dim the page behind */
body .brx-popup[data-popup-id="107"] .brx-popup-backdrop {
  background: rgba(17, 17, 17, .55);
}
body .brx-popup[data-popup-id="107"]:not(.hide) .brx-popup-backdrop {
  animation: zimPanelFade .45s ease both;
}

/* The panel itself */
body .brx-popup[data-popup-id="107"] .brx-popup-content {
  width: 520px;
  max-width: 100%;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .18);
}
body .brx-popup[data-popup-id="107"]:not(.hide) .brx-popup-content {
  animation: zimPanelIn .6s cubic-bezier(.22, 1, .36, 1) both;
}

/* Phones: full width */
@media (max-width: 478px) {
  body .brx-popup[data-popup-id="107"] .brx-popup-content { width: 100%; box-shadow: none; }
}

/* Slide out when closing (JS adds .zim-closing for the length of the animation) */
body .brx-popup[data-popup-id="107"].zim-closing .brx-popup-content {
  animation: zimPanelIn .4s cubic-bezier(.55, 0, .7, .2) reverse both;
}
body .brx-popup[data-popup-id="107"].zim-closing .brx-popup-backdrop {
  animation: zimPanelFade .4s ease reverse both;
}

@media (prefers-reduced-motion: reduce) {
  body .brx-popup[data-popup-id="107"] .brx-popup-content,
  body .brx-popup[data-popup-id="107"] .brx-popup-backdrop { animation: none !important; }
}