/* implicit — intentionally minimal; your glass system does the beauty. */
:root {
  --implicit-primary-900: hsl(256, 43%, 7%);
  --implicit-primary-800: hsl(240, 24%, 13%);
  --implicit-primary-700: hsl(243, 26%, 15%);
  --implicit-primary-600: hsl(252, 9%, 22%);
  --implicit-primary-500: hsl(259, 13%, 28%);
  --implicit-primary-400: hsl(254, 22%, 32%);

  --implicit-primary-300: hsl(251, 13%, 68%);
  --implicit-primary-200: hsl(240, 15%, 76%);
  --implicit-primary-100: hsl(240, 21%, 88%);

  --implicit-neutral-100: hsl(0, 0%, 100%);

  --implicit-accent-400: hsl(190, 64%, 61%);

  --implicit-info: hsl(191, 77%, 47%);
  --implicit-warning: hsl(42, 64%, 61%);
  --implicit-error: hsl(0, 64%, 61%);
  --implicit-success: hsl(139, 64%, 61%);

  --implicit-text-1: var(--implicit-neutral-100);
  --implicit-text-2: var(--implicit-primary-100);
  --implicit-text-3: var(--implicit-primary-200);

  --implicit-background-1: var(--implicit-primary-100);

  --implicit-surface-1: var(--implicit-primary-900);
  --implicit-surface-2: var(--implicit-primary-800);
  --implicit-surface-3: var(--implicit-primary-700);

  --implicit-border-1: var(--implicit-primary-500); /* top */
  --implicit-border-2: var(--implicit-primary-600); /* bottom */


  --implicit-border-width: 3px;
  --implicit-border-width-pseudo: 6px;
  --implicit-border-radius: 1rem;

}

[data-implicit-interface] .implicit-glass, [data-implicit-toasts] .implicit-glass  {
  & h1, & h2, & h3, & h4 {
    color: hsl( from var(--implicit-text-1) h s l / 0.9);
  }
  & p, & span {
    color: hsl( from var(--implicit-text-2) h s l / 0.8);
  }
  & a {
    color: hsl( from var(--implicit-text-2) h s l / 1);
  }
  & a:hover {
    color: hsl( from var(--implicit-text-2) h s l / 0.9);
  }
  & button {
    color: hsl( from var(--implicit-text-1) h s l / 0.9);
    background: hsl( from var(--implicit-background-1) h s l / 0);
    transition: background-color 0.3s ease;
  }
  & button:hover {
    color: hsl( from var(--implicit-text-1) h s l / 0.7);
    background: hsl( from var(--implicit-background-1) h s l / 0.3);
  }
}

.implicit {
  position: fixed;
  inset: 0;
  z-index: 990;
  pointer-events: none; /* surfaces re-enable */
}

html[data-implicit-svg-backdrop] .toastify.implicit-glass {
  -webkit-backdrop-filter: url(#implicit-liquid-glass-drawer);
  backdrop-filter: url(#implicit-liquid-glass-drawer);
}

.implicit-toasts {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.implicit-toasts .toastify {
  display: flex;
  flex-direction: row;
  align-content: baseline;
  max-width: 320px;
  max-height: 220px;
  pointer-events: auto;
  z-index: 1;
  overflow: hidden;
}

.implicit-toasts .toastify .implicit-toast-content {
  inset: 0;
  display: flex;
  flex-direction: row;
  gap: 5;
  align-content: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 1;
  overflow: hidden;
}

.implicit-toasts .toastify.implicit-toast {
  box-shadow: none;
  color: var(--implicit-text-1);
  border-radius: var(--implicit-border-radius);
}

.implicit-toast--success { 
  background: hsl(from var(--implicit-success) h s l / 0) !important;
}

.implicit-toast--warning { 
  background: hsl(from var(--implicit-warning) h s l / 0.55) !important;

}

.implicit-toast--error { 
  background: hsl(from var(--implicit-error) h s l / 0) !important;

}

.implicit-toast-content.--error:before { 
  content: "";
  background-image: url("/wp-content/plugins/implicit/includes/assets/icons/error.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
}

.implicit-toast--info { 
  background: hsl(from var(--implicit-info) h s l / 0.55) !important;

}

[data-implicit-interface] .implicit-glass {
  background: hsl(from var(--implicit-surface-3) h s l / 0.25);
  border-radius: var(--implicit-border-radius);
  display:block;
  position: absolute;
  overflow: hidden;
  background-position: center;
   -webkit-backdrop-filter: blur(12px);
    backdrop-filter:  blur(12px);
  isolation: isolate;
  
  /* backdrop-filter: url(#implicit-liquid-glass); blur(12px); url(#implicit-liquid-glass) url(#implicit-liquid-glass) */
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  
}

html[data-implicit-svg-backdrop] .implicit-glass::before {

}

html[data-implicit-svg-backdrop] .implicit-glass {
  -webkit-backdrop-filter: url(#implicit-liquid-glass);
  backdrop-filter: url(#implicit-liquid-glass);
}

.implicit-glass::before {
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;  
  background-image: url("/wp-content/plugins/implicit/includes/assets/design/light.png");
  background-size: 120% 120%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.2;
  mix-blend-mode: luminosity;
}

.implicit-glass::after {
	position: absolute;
    content:"";
  height: 102%;
  width: 102%;
  top: -1%;
  left:-1%;
  pointer-events:none;
  z-index:0;
  border-radius: calc(var(--implicit-border-radius) + 10px);
  overflow: hidden;
  padding: var(--implicit-border-width-pseudo, 1px);
  background-image: url("/wp-content/plugins/implicit/includes/assets/design/light.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.3;
}



/*.implicit-glass::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: -1;    
  backdrop-filter: url(#implicit-liquid-glass);
  -webkit-backdrop-filter: url(#implicit-liquid-glass);
}*/

.implicit-glass.--dark-glass {

}

.implicit-glass.--dark-glass::before {
  background: hsl(from var(--implicit-surface-3) h s l / 0.55);
}

.implicit-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.implicit__surface {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

html[data-implicit-ua-firefox] .implicit__surface {

}

.implicit__surface[data-clickthrough] {
  pointer-events:none;
}

.implicit__surface[data-type^="callout"] {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 1;
  pointer-events:none;
}

.implicit__surface:not([data-type^="callout"]) {
  z-index: 2;
}

.implicit__surface.--is-persistent:has(.--is-closed){
  pointer-events: none;
}

/* Drawer anchors itself right by default. */
.implicit__surface[data-type^="drawer"] {

}

.implicit__panel {
  max-width: min(92vw, 820px);
  max-height: min(92vh, 900px);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  transition: all .4s ease;
  will-change: tranform backdrop-filter;
}

.implicit__panel[data-mode="callout"]{
  position: absolute !important;

  /* starting state = “profile view” (almost invisible) */
  opacity: 0;
  transform-origin: 50% 50%;
  transform:
    translateY(6px)
    translateZ(-18px)
    rotateY(-86deg)
    scale(0.98);

  
  pointer-events: none;

  transition:
    transform 420ms cubic-bezier(.18,.84,.22,1),
    opacity 220ms cubic-bezier(.2,.8,.2,1);

  backface-visibility: hidden;
}

.implicit__panel[data-mode="callout"].--is-open{
  opacity: 1;
  transform:
    translateY(0)
    translateZ(0)
    rotateY(0deg)
    scale(1);

  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce){
  .implicit__panel[data-mode="callout"]{
    transition: opacity 160ms linear;
    transform: none;
  }
  .implicit-glass::after{ 
    animation: none; 
  }
}



.implicit__panel[data-mode="callout"] > * {
  pointer-events:none;
}

.implicit__panel[data-mode="callout"] {
  & a, & button {
    pointer-events: all;;
  }
} 

.implicit__panel.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.implicit__panel[data-mode="drawer"] {
  position: absolute !important;
  border-radius: 0 !important;
  transition: transform .4s ease-in-out, border-radius .4s ease-in-out;
}

.implicit__panel[data-mode="drawer"]:before {
  border-radius: 0 !important;
}

.implicit__panel[data-mode="drawer"].--is-closed {
  position: absolute !important;
  border-radius: var(--implicit-border-radius) !important;
  transition: transform .4s ease-in-out;
}

.implicit__panel[data-mode="drawer"].--is-closed {
  border-radius: var(--implicit-border-radius) !important;
}

.implicit__surface.--is-persistent .implicit__panel[data-mode="drawer"] > * {

  /* or */

  transition: all .4s ease-in-out;
}

.implicit__panel[data-mode="drawer"].--left {
  top: 0;
  left: 0;
  max-width: 92vw;
  max-height: 100vh;
  height: 100vh;
  transform: translateX(-100%);
}

.implicit__panel[data-mode="drawer"].--right {
  top: 0;
  right: 0;
  max-width: 92vw;
  max-height: 100vh;
  height: 100vh;
  transform: translateX(100%);
}

.implicit__panel[data-mode="drawer"].--top {
  top: 0;
  left: 0;
  width: 100vw; 
  max-height: 90vh;
  transform: translateY(-100%);
}

.implicit__panel[data-mode="drawer"].--bottom {
  bottom:0;
  left: 0;
  width: 100vw;
  max-height: 90vh;
  transform: translateY(100%);
}



.implicit__surface.--is-persistent{
  

}



.implicit__surface.--is-persistent [data-mode="drawer"].--is-closed > * {
  opacity: 0.2;
  transition: transform .4s ease, opacity .4s;
}

.implicit__surface.--is-persistent [data-mode="drawer"].--right {
  padding-left: 20%;
}

.implicit__surface.--is-persistent [data-mode="drawer"].implicit__content-wrap::after {
  content: var(--panel-title);
  position: absolute;
  opacity: 0.2;
  transition: opacity 0.4s ease;
}
.implicit__surface.--is-persistent [data-mode="drawer"].--right:after {
    top: 14%;
    left: -2cqw;
    transform-origin: top left;
    transform: rotateZ(270deg);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 11cqw;
    color: white;
}

.implicit__surface.--is-persistent [data-mode="drawer"].--is-closed::after {
  opacity: 0.2 !important;
}

.implicit__surface.--is-persistent [data-mode="drawer"].--right.--is-closed {
  transform: translateX(85%) rotate3d(0, -4, 0, 45deg) scale3d(1.1)!important;
}
.implicit__surface.--is-persistent [data-mode="drawer"].--right.--is-closed > div {
  /*transform: translateX(15%);*/
}

.implicit__surface.--is-persistent [data-mode="drawer"].--left.--is-closed {
  transform: translateX(-55%) rotateY(-85deg);
}

.implicit__surface.--is-persistent [data-mode="drawer"].--top.--is-closed {
  transform: translateY(-55%);
}

.implicit__surface.--is-persistent [data-mode="drawer"].--bottom.--is-closed {
  transform: translateY(55%);
}




.implicit__surface.--is-persistent [data-mode="drawer"].--right.--pointer-near {
  transform: translateX(50%) rotate3d(0, -4, 0, 45deg) !important;
}
.implicit__surface.--is-persistent [data-mode="drawer"].--left.--pointer-near {
  transform: translateX(-40%) rotate3d(0, 3, 0, 45deg) !important;
}

.implicit__surface.--is-persistent [data-mode="drawer"].--top.--pointer-near {
  transform: translateY(-40%) !important;
}

.implicit__surface.--is-persistent [data-mode="drawer"].--bottom.--pointer-near {
  transform: translateY(40%) !important;
}



.implicit__panel[data-mode="drawer"].--is-open {
  transform: translateX(0) rotateY(0) rotate3d(0, 0, 0, 0) !important;
  transition: transform .4s ease-in-out;
}


.implicit__panel:focus-visible {
  outline: none;
  box-shadow: none;
}

/*
.implicit__panel[data-mode="drawer"].--right.--is-closing {
  transform: translateX(100%) !important;
  transition: transform .4s ease-out;
}
.implicit__panel[data-mode="drawer"].--left.--is-closing {
  transform: translateX(-100%) !important;
  transition: transform .4s ease-out;
}*/

.implicit__panel.--dark-glass { /* modifier hook if you want */ }

.implicit__navbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}

.implicit__iframe {
  height: 80vh;
  min-width: min(90vw,1000px) !important;
  display: block;
}

.implicit__panel .implicit__iframe {
  height: 100%;
  transition: opacity 0.7s ease;
}

.implicit__panel .implicit__content-wrap {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
  width: 100%;
  transition: opacity .7s ease;
}

.implicit__panel.--is-loading .implicit__iframe{
  opacity: 0;
}

.implicit__panel.--is-loading .implicit__content-wrap{
  opacity: 0;
}

.implicit__panel:has(.implicit__iframe) {
  
  overflow: hidden;
  
}

.implicit__panel.--is-loading:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
  animation: implicit-spin 0.9s linear infinite;
  pointer-events: none;
}

@keyframes implicit-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}


.implicit__navbtn.is-left { left: 18px; }
.implicit__navbtn.is-right { right: 18px; }

.implicit__navbtn.is-hidden { display: none; }

.implicit__panel[data-mode="gallery"] {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}

.implicit-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.implicit-gallery__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.implicit-gallery__close svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.implicit-gallery__title {
  padding: 18px 20px 8px;
}

.implicit-gallery__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.implicit-gallery__media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.implicit-gallery__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: absolute;
  inset: 0;
}


.implicit-gallery__media iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.implicit-gallery__meta {
  flex: 0 0 auto;
  max-height: 30vh;
  overflow: auto;
  padding: 10px 20px 20px;
}

.implicit-gallery__loading,
.implicit-gallery__error,
.implicit-gallery__fallback {
  padding: 20px;
}

.implicit-gallery__stage .implicit__navbtn {
  z-index: 2;
  pointer-events: auto;
}