/* =========================================================
   SHOW DETAIL BODY LEFT
   Sidebar / Left Content
========================================================= */

#showDetailBodyLeft {
  margin: 0;
  padding: 10px;

  background: #f8fafc;

  border: 1px solid var(--sia-border);
  border-radius: 16px;

  box-shadow:
    0 3px 10px rgba(15, 23, 42, 0.04),
    0 8px 22px rgba(15, 23, 42, 0.04);
}


/* =========================================================
   LEFT GRID ITEMS
========================================================= */

#showDetailBodyLeft > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;

  margin-bottom: 10px;
}

#showDetailBodyLeft > [class*="col-"]:last-child {
  margin-bottom: 0;
}


/* =========================================================
   LEFT CARD
========================================================= */

#showDetailBodyLeft .card {
  margin: 0;
  padding: 4px;

  overflow: hidden;

  background: #fff !important;

  border: 1px solid #e7ebf1;
  border-radius: 11px;

  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.04);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

#showDetailBodyLeft img {
  display: block;

  width: 100%;
  max-width: 100%;

  border-radius: 8px;
}

#showDetailBodyLeft .img-fluid {
  width: 100%;
  height: auto;

  border-radius: 8px;
}


/* =========================================================
   LEFT CAROUSEL
========================================================= */

#showDetailBodyLeft .carousel {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #f5f7fb;

  border: 1px solid var(--sia-border-light);
  border-radius: 8px;

  box-shadow:
    0 2px 8px rgba(15, 23, 42, 0.05);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#showDetailBodyLeft .carousel-inner {
  overflow: hidden;

  border-radius: inherit;
}


/* =========================================================
   LEFT CLICKABLE MEDIA
========================================================= */

#showDetailBodyLeft .mouseCursorpointer {
  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#showDetailBodyLeft .mouseCursorpointer:hover {
  transform: translateY(-2px);

  box-shadow:
    0 6px 15px rgba(15, 23, 42, 0.1);
}


/* =========================================================
   LEFT CAROUSEL CONTROL
========================================================= */

#showDetailBodyLeft .carousel-control-prev,
#showDetailBodyLeft .carousel-control-next {
  width: 42px;

  opacity: 0;

  transition: opacity 0.2s ease;
}

#showDetailBodyLeft .carousel:hover .carousel-control-prev,
#showDetailBodyLeft .carousel:hover .carousel-control-next {
  opacity: 1;
}


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

@media (max-width: 991.98px) {
  #showDetailBodyLeft {
    padding: 8px;

    border-radius: 13px;
  }
}