/* ==========================================================================
   Colorbox 1.6.4 — Mota Italic skin
   Replaces the stock "example1" stylesheet entirely (core layout + skin).
   Minimal dark: no frame, no border images, no background pattern,
   no title or counter. Controls only.
   Palette taken from the site: bg #252525, accent #e2471f.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Core layout — required by the plugin, do not restyle
   -------------------------------------------------------------------------- */

#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

#cboxWrapper { max-width: none; }

#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft { clear: left; }

#cboxContent { position: relative; }

#cboxLoadedContent {
  overflow: visible;
  -webkit-overflow-scrolling: touch;
}

#cboxTitle { margin: 0; }

#cboxLoadingOverlay,
#cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow { cursor: pointer; }

.cboxPhoto {
  float: left;
  margin: auto;
  border: 0;
  display: block;
  max-width: none;
}

.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent { box-sizing: content-box; }

/* --------------------------------------------------------------------------
   2. Strip the stock chrome
   -------------------------------------------------------------------------- */

/* The nine sliced border divs that carried the frame and pattern images */
#cboxTopLeft,
#cboxTopCenter,
#cboxTopRight,
#cboxBottomLeft,
#cboxBottomCenter,
#cboxBottomRight,
#cboxMiddleLeft,
#cboxMiddleRight { display: none; }

/* Caption, image counter and slideshow control */
#cboxTitle,
#cboxCurrent,
#cboxSlideshow { display: none !important; }

#colorbox { outline: 0; }

#cboxContent {
  background: transparent;
  margin: 0;
  overflow: visible;
}

#cboxLoadedContent {
  background: transparent;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   3. Overlay
   -------------------------------------------------------------------------- */

#cboxOverlay { background: #1a1a1a; }

/* --------------------------------------------------------------------------
   4. Controls
   -------------------------------------------------------------------------- */

#cboxPrevious,
#cboxNext,
#cboxClose {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.15s ease, opacity 0.15s ease;
  opacity: 0.75;
  outline: 0;
  z-index: 2;
}

#cboxPrevious:hover,
#cboxNext:hover,
#cboxClose:hover {
  opacity: 1;
  background: rgba(226, 71, 31, 0.9);
}

#cboxPrevious:focus-visible,
#cboxNext:focus-visible,
#cboxClose:focus-visible {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Previous / next */

#cboxPrevious,
#cboxNext {
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
}

#cboxPrevious { left: 16px; }
#cboxNext     { right: 16px; }

#cboxPrevious::after,
#cboxNext::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 13px;
  height: 13px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

#cboxPrevious::after {
  left: 19px;
  transform: rotate(45deg);
}

#cboxNext::after {
  right: 19px;
  transform: rotate(-135deg);
}

/* Close */

#cboxClose {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
}

#cboxClose::before,
#cboxClose::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 12px;
  width: 16px;
  height: 2px;
  background: #fff;
}

#cboxClose::before { transform: rotate(45deg); }
#cboxClose::after  { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Loading spinner (replaces loading.gif)
   -------------------------------------------------------------------------- */

#cboxLoadingOverlay { background: rgba(26, 26, 26, 0.6); }

#cboxLoadingGraphic { background: none; }

#cboxLoadingGraphic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: motaCboxSpin 0.8s linear infinite;
}

@keyframes motaCboxSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #cboxLoadingGraphic::after { animation-duration: 2.4s; }
}

/* --------------------------------------------------------------------------
   6. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  #cboxPrevious,
  #cboxNext {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }

  #cboxPrevious { left: 8px; }
  #cboxNext     { right: 8px; }

  #cboxPrevious::after,
  #cboxNext::after {
    top: 14px;
    width: 11px;
    height: 11px;
  }

  #cboxPrevious::after { left: 16px; }
  #cboxNext::after     { right: 16px; }

  #cboxClose {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }

  #cboxClose::before,
  #cboxClose::after {
    top: 17px;
    left: 11px;
    width: 14px;
  }
}