/* ============================
   Approved Affiliates Slider (OwlCarousel)
   ============================ */

/* --- Wrapper --- */
.eaa-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdeee0;
  padding: 16px 40px; /* extra space for nav arrows */
  border-radius: none;
  overflow: hidden;
}

/* --- Owl Carousel container --- */
.eaa-carousel.owl-carousel {
  width: 1200px;
}
button.owl-next {
  left: -50px;
  top: -20px;

  position: absolute;
}

button.owl-prev {
  position: absolute;
  right: -50px;
  top: -20px;
}

.owl-carousel .owl-item img {
  width: 130px;
}
/* --- Card container --- */
.eaa-card-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
  height: 135px;
  width: 230px;
  transition: transform 0.2s ease;
}

.eaa-card-inner:hover {
  transform: translateY(-2px);
}

/* --- Logo fills the card --- */
.eaa-card-inner img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain; /* keeps full logo visible */
  display: block;
}

/* --- Owl nav arrows --- */
.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* allow clicks through empty area */
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  pointer-events: auto;
  background: transparent;
  border: none;
  border-radius: 50%;
  box-shadow: none;
  width: 36px;
  height: 36px;
  font-size: 50px !important;
  font-size: 22px;
  color: #928d8d !important;
  transition: all 0.2s ease;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
  background: transparent;
  color: #605e5e !important;
}

/* --- Owl dots (if enabled) --- */
.owl-dots {
  text-align: center;
  margin-top: 10px;
}
.owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 4px;
  background: #bbb;
  display: block;
  border-radius: 50%;
}
.owl-dot.active span {
  background: #333;
}

/* --- Modal (hidden by default; fades in) --- */
.eaa-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.eaa-modal[hidden] {
  display: none !important;
}
.eaa-modal:not([hidden]) {
  opacity: 1;
}

/* --- Modal dialog --- */
.eaa-dialog {
  background: #fff;
  border-radius: 12px;
  max-width: 629px;
  width: 92%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  position: relative;
  padding: 24px;
  height: auto;
}
.eaa-close {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 0;
  background: #f4f4f4;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
}

/* --- Modal content --- */
.eaa-modal-logo img {
  width: 100px;
  height: 100px !important; 
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
}
.eaa-modal-name {
  font-weight: 400;
  text-align: center;
  color: #797878;
  font-size: 14px;
  margin-bottom: 6px;
}
.eaa-modal-logo{
  margin-top:20px;
}
.eaa-carousel.eaa-static-center {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

html[lang="en-US"]  .ef-company-info{
  margin-top: 17px !important;
 }
html[lang="ar"]  .ef-company-info{
  margin-top: 17px !important;
  direction: ltr;
 }

.eaa-carousel.eaa-static-center .eaa-card {
  flex: 0 1 200px;
  text-align: center;
}
.eaa-modal-id {
  font-weight: 500;
  text-align: center;
  color: red;
  font-size: 16px;
  margin-bottom: 6px;
}
.eaa-company-name {
  color: #000000;
}
.eaa-modal-meta {
  font-size: 12px;
  text-align: center;
  color: #777;
  display: none;
  margin-bottom: 10px;
}
.eaa-modal-desc {
  font-size: 16px;
  color: #000000;
  text-align: center;
  margin-bottom: 10px;
  font-weight: 400;
  padding: 0 8px;
}
html[lang="en-US"] .eaa-modal-desc{
  margin-top:22px;
  margin-bottom: 22px;
}
html[lang="ar"] .eaa-modal-desc{
   margin-top:22px;
  margin-bottom: 22px;
}
.eaa-row{
  display: flex;
    width: 100%;
}
.eaa-col {
   flex: 1;
    padding: 10px;
    text-align: left !important;
}
 .eaa-col{
  display: flex;
  justify-content: center;
}
.eaa-text-right{
  text-align: right !important; 
}
.eaa-modal-icon {

 width: 20.5px !important;

}
.eaa-modal-phone {
  font-weight: 400;
  text-align: center;
  color: #000000 !important;
  font-size: 14px;
  margin-bottom: 6px;
}
.eaa-modal-phone a{
  margin-left: -16px !important;
}
html[lang="en-US"] .eaa-modal-phone a{
  margin-left: -28px !important;
}
/* html[lang="ar"] .eaa-modal-phone a{
  margin-left: 41px;
} */
/* html[lang="ar"] .eaa-modal-email{
  margin-left: -6px;;
} */
.eaa-modal-email {
  font-weight: 400;
  text-align: center;
  color: #000000 !important;
  font-size: 14px;
  margin-bottom: 6px;
}
.eaa-modal-email a , .eaa-modal-phone a{
  color: #000000 !important;
}
.eaa-modal-email{
  margin-left:20px;
}
.eaa-modal-website {
  font-size: 14px;;
}
.eaa-modal-website a {
  word-break: break-all;
  color: #000000;
}

/* --- Close button style --- */
button.eaa-close {
  background: #ffffff;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 30px;
}
.modal-info-user{
  margin-top: -17px !important;
}



/* Modal nav buttons */
.eaa-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0 !important;
  padding: 0;
  background: transparent !important;
  box-shadow: none;
  font-size: 30px !important;
  color: #a4a3a3;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}
.eaa-modal-prev,
.eaa-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: none;
  color: #333;
  font-size: 20px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
.eaa-modal-prev {
  left: 14px !important;
  right: auto !important;
}

.eaa-modal-next {
  right: 14px !important;
  left: auto !important;
}
/* Always fixed sides — don’t flip on RTL */
html[dir="rtl"] .eaa-modal-prev {
  left: auto !important;
  right: 14px !important;
}

html[dir="rtl"] .eaa-modal-next {
  right: auto !important;
  left: 14px !important;
}

.eaa-modal-nav:hover {
  background: #333;
  color: #fff;
}

.eaa-modal-nav:hover {
  background: transparent;
  color: #716e6e;
}
/* Ensure carousel content stays centered even with few items */
.eaa-carousel .owl-stage {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}

/* Keep items centered and spaced correctly */
.eaa-carousel .owl-item {
  float: none !important;
  display: flex;
  justify-content: center;
}

/* base */
.eaa-carousel .owl-item .eaa-card-inner {
  transform: scale(1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

/* zoom current/centered slide */
.eaa-carousel .owl-item.is-current .eaa-card-inner,
.eaa-carousel .owl-item.center .eaa-card-inner {
  transform: scale(1.5); /* tweak to taste */
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); */
  border-radius: 12px;
  z-index: 2;
  height: 200px !important; /* adjust height when zoomed */
}

/* --- Responsive tweaks --- */

.eaa-modal.eaa-hide-arrows .eaa-modal-prev,
.eaa-modal.eaa-hide-arrows .eaa-modal-next {
  display: none !important;
}

@media (max-width: 600px) {
  .eaa-carousel .owl-stage {
    justify-content: center !important;
  }
  .eaa-carousel .owl-item {
    margin: 0 8px; /* optional spacing between cards */
  }
  html[lang="en-US"] .ef-company-info{
    margin-top:-11px !important;
  }
  .eaa-modal-email{
    margin-left:0px;
  }
  .eaa-modal-icon {
    width: 16.5px !important;
}
  .eaa-col {
      align-items: center;
  }
  .eaa-modal-name{
    font-size: 12px;
  }
  .ef-mobile{
    flex-direction: column;
    margin-top: 0px;
  }
  .eaa-modal-website{
    margin-top: -27px;
    font-size: 12px;
    margin-left: 10px;
  }
  .eaa-modal-email{
    margin-top: -28px;
    font-size: 12px;
    margin-left: 19px;
  }
  .eaa-modal-phone{
  font-size: 12px;
  margin-top: -2px;
  }
  /* html[lang="ar"] .ef-company-info{
    margin-top:-11px !important;
  }
  html[lang="ar"] .eaa-modal-website {
    margin-left: -9px;
  }
  html[lang="ar"] .eaa-modal-phone a{
    margin-left: 35px;
  }
  html[lang="ar"] .eaa-modal-email {
  margin-left: -16px;
  } */
  .eaa-modal-desc{
    font-size: 12px;
  }
  .button.eaa-close {
  font-size: 20px;
  }
  
  }