/* ================================================================
   Invisio Portfolio Showcase — showcase.css  v1.3.0

   NOTE: Uses !important on many rules to defeat Elementor / theme
   button overrides. DO NOT use "all: unset" — it causes cascade
   specificity conflicts with the left/right positioning rules.
   ================================================================ */

/* ── Scoped box-sizing ── */
.invsc-wrapper *,
.invsc-wrapper *::before,
.invsc-wrapper *::after { box-sizing: border-box !important; }

/* ── Main wrapper ── */
.invsc-wrapper {
  position: relative !important;
  background-color: transparent !important;
  background-image: none !important;
  overflow: hidden !important;
  padding: 48px 0 40px !important;
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
  isolation: isolate;
}

/* ── Particle canvas (injected by JS) ── */
.invsc-wrapper .invsc-particle-canvas {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── 3-D Stage ── */
.invsc-wrapper .invsc-stage {
  position: relative !important;
  height: 540px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  z-index: 1;
}

/* ── Track ── */
.invsc-wrapper .invsc-track {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
}

/* ── Slide (portrait cards: 460 × 520) ── */
.invsc-wrapper .invsc-slide {
  position: absolute !important;
  top:  50% !important;
  left: 50% !important;
  width:  460px;
  height: 520px;
  margin-top:  -260px;
  margin-left: -230px;
  border-radius: 14px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  box-shadow: 0 20px 60px rgba(0,0,0,.55) !important;
}

.invsc-wrapper .invsc-slide.is-active {
  cursor: default !important;
  box-shadow:
    0 0 0 1.5px rgba(251,188,5,.45),
    0 24px 80px rgba(0,0,0,.70),
    0 0  60px rgba(251,188,5,.12) !important;
}

/* ── Image ── */
.invsc-wrapper .invsc-img {
  position: absolute !important;
  inset: 0;
}
.invsc-wrapper .invsc-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  pointer-events: none;
}
/* Zoom cursor on active image area */
.invsc-wrapper .invsc-slide.is-active .invsc-img {
  cursor: zoom-in !important;
}

/* ── Placeholder ── */
.invsc-wrapper .invsc-img-ph {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #0a0e2e, #1a2060) !important;
}
.invsc-wrapper .invsc-img-ph span {
  font-size: 80px !important;
  font-weight: 800 !important;
  color: rgba(251,188,5,.2) !important;
  letter-spacing: -2px !important;
}

/* ─────────────────────────────────────────────
   ZOOM BUTTON  (appended by JS to .invsc-img)
   Key: individual property overrides only.
   No "all: unset" to avoid cascade issues.
   ───────────────────────────────────────────── */
.invsc-wrapper .invsc-zoom-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 10px !important; right: 10px !important;
  left: auto !important; bottom: auto !important;
  width:  34px !important; height: 34px !important;
  min-width: 0 !important; min-height: 0 !important;
  max-width: none !important; max-height: none !important;
  padding: 0 !important; margin: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  background-color: rgba(0,3,38,.72) !important;
  background-image: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  z-index: 15 !important;
  opacity: 0 !important;
  transform: scale(.82) !important;
  transition: opacity .25s, transform .25s, border-color .2s, background-color .2s !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.invsc-wrapper .invsc-slide.is-active:hover .invsc-zoom-btn {
  opacity: 1 !important; transform: scale(1) !important;
}
/* Touch: always show on active slide */
.invsc-wrapper.invsc-is-touch .invsc-slide.is-active .invsc-zoom-btn {
  opacity: .72 !important; transform: scale(.9) !important;
}
.invsc-wrapper .invsc-zoom-btn:hover {
  background-color: rgba(251,188,5,.18) !important;
  border-color: #FBBC05 !important;
  color: #FBBC05 !important;
}
.invsc-wrapper .invsc-zoom-btn svg {
  width: 14px !important; height: 14px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

/* ── Overlay ── */
.invsc-wrapper .invsc-overlay {
  position: absolute !important;
  inset: 0;
  background: linear-gradient(to top, rgba(0,3,38,.97) 0%, rgba(0,3,38,.58) 42%, transparent 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 28px 28px !important;
  opacity: 0;
  transition: opacity .35s ease;
}
.invsc-wrapper .invsc-slide.is-active .invsc-overlay { opacity: 1; }

/* Staggered children reveal */
.invsc-wrapper .invsc-tag,
.invsc-wrapper .invsc-title,
.invsc-wrapper .invsc-desc,
.invsc-wrapper .invsc-cta {
  transform: translateY(14px);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
.invsc-wrapper .invsc-slide.is-active .invsc-tag   { transition-delay: .42s; transform: translateY(0); opacity: 1; }
.invsc-wrapper .invsc-slide.is-active .invsc-title { transition-delay: .50s; transform: translateY(0); opacity: 1; }
.invsc-wrapper .invsc-slide.is-active .invsc-desc  { transition-delay: .58s; transform: translateY(0); opacity: 1; }
.invsc-wrapper .invsc-slide.is-active .invsc-cta   { transition-delay: .66s; transform: translateY(0); opacity: 1; }

/* ── Category tag ── */
.invsc-wrapper .invsc-tag {
  display: inline-block !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: #6BDCFF !important;
  background: rgba(107,220,255,.10) !important;
  border: 1px solid rgba(107,220,255,.32) !important;
  border-radius: 4px !important; padding: 3px 10px !important;
  margin-bottom: 9px; width: fit-content;
}

/* ── Title ── */
.invsc-wrapper .invsc-title {
  font-size: 22px !important; font-weight: 700 !important;
  color: #ffffff !important; margin: 0 0 8px !important;
  line-height: 1.2 !important; text-shadow: none !important;
}

/* ── Description ── */
.invsc-wrapper .invsc-desc {
  font-size: 13px !important; line-height: 1.55 !important;
  color: rgba(255,255,255,.72) !important;
  margin: 0 0 16px !important; text-shadow: none !important;
}

/* ── CTA button ── */
.invsc-wrapper .invsc-cta,
.invsc-wrapper a.invsc-cta {
  -webkit-appearance: none !important; appearance: none !important;
  display: inline-flex !important; align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important; font-weight: 700 !important;
  color: #000326 !important;
  background-color: #FBBC05 !important; background-image: none !important;
  border-radius: 7px !important; padding: 9px 18px !important;
  text-decoration: none !important; width: fit-content !important;
  letter-spacing: .02em !important; border: none !important;
  box-shadow: none !important; text-shadow: none !important;
  line-height: 1.4 !important; cursor: pointer !important;
  transition: background-color .2s, transform .2s, opacity .4s ease !important;
}
.invsc-wrapper .invsc-cta:hover,
.invsc-wrapper a.invsc-cta:hover {
  background-color: #ffe066 !important;
  color: #000326 !important;
  transform: translateY(-1px) !important;
}

/* ── Shine sweep ── */
.invsc-wrapper .invsc-slide.is-active::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.065) 50%, transparent 72%);
  transform: translateX(-100%);
  animation: invsc-shine 4.2s ease-in-out 1.2s infinite;
  pointer-events: none; z-index: 12;
}
@keyframes invsc-shine {
  0%,  26% { transform: translateX(-100%); }
  58%, 100% { transform: translateX(115%); }
}

/* ── Non-active: dim peek ── */
.invsc-wrapper .invsc-slide:not(.is-active) .invsc-overlay {
  background: linear-gradient(to top, rgba(0,3,38,.78) 0%, transparent 50%) !important;
}
.invsc-wrapper .invsc-slide:not(.is-active) .invsc-title {
  transform: translateY(0) !important; opacity: .72 !important;
  transition: none !important; transition-delay: 0s !important;
  font-size: 14px !important;
}

/* ================================================================
   NAVIGATION ARROWS

   IMPORTANT: Do NOT use "all: unset" here.
   The combined selector includes "button.invsc-next" (specificity
   0-2-1). If "all: unset !important" were applied there, it would
   beat the standalone ".invsc-next { right: 22px !important }"
   rule (specificity 0-2-0), leaving right: auto and both buttons
   stacking at the left edge. Instead we list every property
   explicitly so left/right are never set in the combined rule.
   ================================================================ */
.invsc-wrapper .invsc-nav,
.invsc-wrapper button.invsc-nav {
  /* Reset appearance */
  -webkit-appearance: none !important;
  appearance: none !important;
  /* Layout */
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Size — lock all dimensions to defeat padding/height overrides */
  width:  46px !important; height: 46px !important;
  min-width:  0 !important; min-height: 0 !important;
  max-width: none !important; max-height: none !important;
  padding: 0 !important; margin: 0 !important;
  /* Shape & colour */
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  border-style: solid !important;
  outline: none !important;
  background-color: rgba(0,3,38,.65) !important;
  background-image: none !important;
  color: #ffffff !important;
  /* Typography — prevent line-height / font-size inflating height */
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  font-weight: normal !important;
  text-shadow: none !important;
  /* Misc */
  box-shadow: none !important;
  cursor: pointer !important;
  z-index: 20 !important;
  overflow: visible !important;
  vertical-align: baseline !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease !important;
  /* NOTE: left / right are NOT set here — see rules below */
}

/* Hover */
.invsc-wrapper .invsc-nav:hover,
.invsc-wrapper button.invsc-nav:hover {
  border-color: #FBBC05 !important;
  color: #FBBC05 !important;
  background-color: rgba(251,188,5,.10) !important;
  background-image: none !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

/* SVG chevron */
.invsc-wrapper .invsc-nav svg {
  width:  20px !important; height: 20px !important;
  display: block !important; flex-shrink: 0 !important;
  stroke: currentColor !important; fill: none !important;
  overflow: visible !important;
}

/* Horizontal position — include element selector to match or beat
   any element+class selector the theme might use on <button> */
.invsc-wrapper .invsc-prev,
.invsc-wrapper button.invsc-prev {
  left:  22px !important;
  right: auto !important;
}
.invsc-wrapper .invsc-next,
.invsc-wrapper button.invsc-next {
  right: 22px !important;
  left:  auto !important;
}

/* ── Footer: dots + counter ── */
.invsc-wrapper .invsc-footer {
  position: relative !important; z-index: 2 !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  gap: 20px !important; padding-top: 22px !important;
}

/* Dot buttons — same principle: no all:unset */
.invsc-wrapper .invsc-dot,
.invsc-wrapper button.invsc-dot {
  -webkit-appearance: none !important; appearance: none !important;
  display: block !important;
  width:  7px !important; height: 7px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  border: none !important; outline: none !important;
  background-color: rgba(255,255,255,.28) !important;
  background-image: none !important;
  cursor: pointer !important;
  padding: 0 !important; margin: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  transition: width .25s ease, border-radius .25s ease, background-color .25s ease !important;
  box-sizing: border-box !important;
}
.invsc-wrapper .invsc-dot.is-active,
.invsc-wrapper button.invsc-dot.is-active {
  width: 22px !important;
  border-radius: 4px !important;
  background-color: #FBBC05 !important;
}
.invsc-wrapper .invsc-dot:hover:not(.is-active) {
  background-color: rgba(255,255,255,.55) !important;
}
.invsc-wrapper .invsc-dots {
  display: flex !important; align-items: center !important; gap: 7px !important;
}

/* Counter */
.invsc-wrapper .invsc-counter {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: rgba(255,255,255,.42) !important;
  letter-spacing: .06em !important; line-height: 1 !important;
  text-shadow: none !important;
}
.invsc-wrapper .invsc-cur  { color: #FBBC05 !important; }
.invsc-wrapper .invsc-sep  { color: rgba(255,255,255,.3) !important; }

/* ── Empty ── */
.invsc-no-results {
  text-align: center; padding: 40px 20px;
  color: rgba(255,255,255,.5); background: #000326; font-size: 15px;
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.invsc-lb {
  position: fixed !important; inset: 0 !important;
  z-index: 9999990 !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  padding: 20px; box-sizing: border-box;
  opacity: 0; transition: opacity .28s ease;
  pointer-events: none;
}
.invsc-lb.invsc-lb-open { opacity: 1; pointer-events: auto; }
.invsc-lb-backdrop {
  position: absolute !important; inset: 0 !important;
  background: rgba(0,3,38,.93) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
}
.invsc-lb-inner {
  position: relative !important; z-index: 1 !important;
  max-width: min(92vw, 1400px) !important;
  max-height: 90vh !important;
  transform: scale(.94);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.invsc-lb.invsc-lb-open .invsc-lb-inner { transform: scale(1); }
.invsc-lb-img {
  display: block !important;
  max-width: 100% !important; max-height: 90vh !important;
  border-radius: 10px !important;
  box-shadow: 0 32px 120px rgba(0,0,0,.85) !important;
  border: 1.5px solid rgba(251,188,5,.3) !important;
}
/* Lightbox close button */
.invsc-lb-close {
  -webkit-appearance: none !important; appearance: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  position: absolute !important;
  top: -15px !important; right: -15px !important;
  left: auto !important; bottom: auto !important;
  width: 36px !important; height: 36px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  background-color: #FBBC05 !important; background-image: none !important;
  color: #000326 !important;
  border: none !important; outline: none !important;
  font-size: 24px !important; line-height: 1 !important;
  cursor: pointer !important; z-index: 2 !important;
  padding: 0 !important; margin: 0 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
  text-shadow: none !important; font-weight: 700 !important;
  transition: background-color .2s, transform .2s !important;
  box-sizing: border-box !important;
}
.invsc-lb-close:hover {
  background-color: #ffe066 !important;
  transform: scale(1.12) rotate(90deg) !important;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablet ≤ 900px */
@media (max-width: 900px) {
  .invsc-wrapper { padding: 38px 0 30px !important; }
  .invsc-wrapper .invsc-stage  { height: 400px; perspective: 1000px; }
  .invsc-wrapper .invsc-slide  { width: 330px; height: 372px; margin-top: -186px; margin-left: -165px; }
  .invsc-wrapper .invsc-title  { font-size: 18px !important; }
  .invsc-wrapper .invsc-desc   { display: none !important; }
  .invsc-wrapper .invsc-overlay{ padding: 18px 20px !important; }
  .invsc-wrapper .invsc-nav,
  .invsc-wrapper button.invsc-nav  { width: 40px !important; height: 40px !important; }
  .invsc-wrapper .invsc-prev,
  .invsc-wrapper button.invsc-prev { left: 10px !important; }
  .invsc-wrapper .invsc-next,
  .invsc-wrapper button.invsc-next { right: 10px !important; }
}

/* Mobile portrait ≤ 600px */
@media (max-width: 600px) {
  .invsc-wrapper { padding: 28px 0 24px !important; }
  .invsc-wrapper .invsc-stage  { height: 294px; perspective: 650px; }
  .invsc-wrapper .invsc-slide  { width: 240px; height: 270px; margin-top: -135px; margin-left: -120px; }
  .invsc-wrapper .invsc-title  { font-size: 13px !important; }
  .invsc-wrapper .invsc-tag    { font-size: 9px !important; padding: 2px 7px !important; }
  .invsc-wrapper .invsc-overlay{ padding: 10px 12px !important; }
  .invsc-wrapper .invsc-cta    { font-size: 11px !important; padding: 6px 12px !important; }
  .invsc-wrapper .invsc-nav,
  .invsc-wrapper button.invsc-nav  { width: 32px !important; height: 32px !important; }
  .invsc-wrapper .invsc-nav svg    { width: 14px !important; height: 14px !important; }
  .invsc-wrapper .invsc-prev,
  .invsc-wrapper button.invsc-prev { left: 4px !important; }
  .invsc-wrapper .invsc-next,
  .invsc-wrapper button.invsc-next { right: 4px !important; }
  .invsc-wrapper .invsc-footer { padding-top: 14px !important; gap: 12px !important; }
  .invsc-wrapper .invsc-slide.is-active .invsc-zoom-btn {
    opacity: .68 !important; transform: scale(.88) !important;
    width: 28px !important; height: 28px !important;
    top: 6px !important; right: 6px !important;
  }
}