/**********************************************/
/* jmycarousel.css                            */
/* JMyCarousel (refonte/Bootstrap compatible) */
/**********************************************/

/* ===== Container ===== */
div.jMyCarousel{
  position: relative;     /* positioning context for arrows */
  border: 0;              /* remove legacy border */
  padding-left: 46px;     /* space so arrows are not on the edge */
  padding-right: 46px;
  box-sizing: border-box; /* predictable sizing with Bootstrap */
}

/* Bootstrap reset for list */
div.jMyCarousel ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items */
div.jMyCarousel ul li{
  margin: 0;
  padding: 0;
  border: 0;              /* remove legacy border */
  line-height: 0;
}

/* Links/images */
div.jMyCarousel ul li a{
  display: block;
}

div.jMyCarousel ul li img{
  display: block;
  border: 0;
  max-width: 100%;
  height: auto;
  /* If you want to cap the height inside the carousel: */
  max-height: 700px;
}

/* =========================================================
   ARROWS — Case A: legacy elements with .prev / .next classes
   ========================================================= */
div.jMyCarousel .prev,
div.jMyCarousel .next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 50;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Adjust paths to your real location */
div.jMyCarousel .prev{
  left: 12px;
  background-image: url('/css/jmycarousel/left.png');
}

div.jMyCarousel .next{
  right: 12px;
  background-image: url('/css/jmycarousel/right.png');
}

/* =========================================================
   ARROWS — Case B: your current JS-generated <button> arrows
   (inline styles exist, so we override them with !important)
   ========================================================= */
div.jMyCarousel button[type="button"]{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 44px !important;
  height: 44px !important;
  border-radius: 22px !important;

  border: none !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #fff !important;

  font-size: 28px !important;
  line-height: 44px !important;

  cursor: pointer !important;
  user-select: none !important;
  z-index: 60 !important;

  /* Ensure it is visible if something set opacity/display */
  opacity: 1 !important;
  display: block !important;
}

/* If there are exactly two buttons in the carousel container,
   this reliably pushes them inward. */
div.jMyCarousel button[type="button"]:first-of-type{
  left: 12px !important;
  right: auto !important;
}

div.jMyCarousel button[type="button"]:last-of-type{
  right: 12px !important;
  left: auto !important;
}

/* Optional: hover feedback */
div.jMyCarousel button[type="button"]:hover{
  background: rgba(0, 0, 0, 0.60) !important;
}