/* =========================================
   MR. PHONE HOMEPAGE CAROUSELS
   Keep original Daftra product styles
   Add only border, shadow, and hover zoom
========================================= */

.carousel-outer .mrphone-home-product {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
    padding-left: 10px !important;
   padding-right: 10px !important;
}


/* Loading */
.mrp-loading{
  width:100%;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:25px;
  color:#111;
  font-weight:600;
}

.mrp-loading span{
  width:10px;
  height:10px;
  display:inline-block;
  background:#d9498e;
  border-radius:50%;
  animation:mrpDots 1s infinite ease-in-out;
}

.mrp-loading span:nth-child(2){animation-delay:.15s;}
.mrp-loading span:nth-child(3){animation-delay:.30s;}
.mrp-loading span:nth-child(4){animation-delay:.45s;}

@keyframes mrpDots{
  0%,80%,100%{
    transform:scale(.6);
    opacity:.35;
  }

  40%{
    transform:scale(1);
    opacity:1;
  }
}

/* Error/loading messages */
.mrp-error,
.mrphone-home-load-error,
.mrphone-home-loading-message{
  width:100%;
  margin:0;
  padding:35px 15px;
  font-weight:600;
  text-align:center;
}

.mrphone-home-load-error{
  color:#d60000;
}

.mrphone-home-loading-message{
  color:#555;
}

.mrphone-home-message-slide{
  width:100% !important;
  min-height:180px;
  align-items:center;
  justify-content:center;
}

/* Category header */
.category-title{
  margin:0 !important;
  color:#000 !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
}

.category-divider{
  flex:1;
  height:1px;
  margin:0 24px;
  background:#d8d8d8;
}

/* Carousel */
.carousel-outer{
  position:relative;
  width:100%;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:visible !important;
}

.carousel-outer > .container{
  width:100% !important;
  max-width:96% !important;
}

.carousel-outer .swiper{
  width:100%;
  padding:10px 6px 28px !important;
  overflow:hidden !important;
}

.carousel-outer .swiper-wrapper{
  align-items:stretch !important;
}

.carousel-outer .swiper-slide{
  height:auto !important;
  display:flex !important;
  padding:8px 6px 22px !important;
  box-sizing:border-box !important;
}

/* =========================================
   PRODUCT CARD
   Keep original website styles unchanged
========================================= */

.carousel-outer .mrphone-home-product{
  width:100% !important;
  height:100% !important;

  border:1px solid rgba(217,73,142,.28) !important;
  border-radius:20px !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.05),
    0 8px 24px rgba(217,73,142,.06) !important;

  overflow:visible !important;
  box-sizing:border-box !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

.carousel-outer .mrphone-home-product:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(217,73,142,.55) !important;

  box-shadow:
    0 15px 34px rgba(0,0,0,.09),
    0 10px 30px rgba(217,73,142,.12) !important;

  z-index:20 !important;
}

/*
 * Keep the original image classes and dimensions.
 * Only add the zoom transition.
 */
.carousel-outer .mrphone-home-product img.product-img-sm{
  transform:scale(1);
  transform-origin:center center;
  transition:transform .3s ease !important;
}

.carousel-outer .mrphone-home-product:hover img.product-img-sm{
  transform:scale(1.06);
}

/* Swiper arrows */
.carousel-outer .swiper-button-prev,
.carousel-outer .swiper-button-next{
  width:44px !important;
  height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#fff !important;
  border:1px solid rgba(217,73,142,.16) !important;
  border-radius:50% !important;

  color:#d9498e !important;
  box-shadow:0 6px 18px rgba(0,0,0,.12) !important;
  z-index:50 !important;

  transition:
    transform .25s ease,
    border-color .25s ease !important;
}

.carousel-outer .swiper-button-prev::after,
.carousel-outer .swiper-button-next::after{
  color:#d9498e !important;
  font-size:18px !important;
  font-weight:bold !important;
}

.carousel-outer .swiper-button-prev:hover,
.carousel-outer .swiper-button-next:hover{
  border-color:#d9498e !important;
  transform:scale(1.08) !important;
}

.carousel-outer .swiper-button-prev[id^="carousel"]{
  left:5px !important;
}

.carousel-outer .swiper-button-next[id^="carousel"]{
  right:5px !important;
}

/* Responsive */
@media(max-width:991px){
  .carousel-outer .swiper-button-prev[id^="carousel"],
  .carousel-outer .swiper-button-next[id^="carousel"]{
    display:none !important;
  }
}

@media(max-width:599px){
  .carousel-outer > .container{
    max-width:100% !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .carousel-outer .swiper{
    padding:8px 2px 22px !important;
  }

  .carousel-outer .swiper-slide{
    padding:7px 3px 20px !important;
  }

  .category-title{
    font-size:20px !important;
  }

  .category-divider{
    margin:0 12px;
  }

  .carousel-outer .mrphone-home-product{
    border-radius:15px !important;
  }

  .carousel-outer .mrphone-home-product:hover{
    transform:translateY(-3px) !important;
  }
}