/* Upline Alianzas - Frontend styles */

.upl-ali-wrap{
  width:100%;
}

.upl-ali-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 980px){
  .upl-ali-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .upl-ali-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.upl-ali-card{
  border: 2px solid #E1F3EA;
  border-radius: 20px;
  background: #fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
 
}

.upl-ali-media{
  padding: 20px 18px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 110px;
}

.upl-ali-img{
  max-width: 180px;
  max-height: 70px;
  width:auto;
  height:auto;
  display:block;
  object-fit: contain;
  border-radius: 20px !important;
}

.upl-ali-img--ph{
  width: 160px;
  height: 70px;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(34,149,91,0.10), rgba(225,243,234,0.85));
}

.upl-ali-body{
  padding: 8px 18px 18px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.upl-ali-title{
  font-family: Ubuntu, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 20px;
  color:#4A4A49;
}
.upl-ali-hr{
  border: none;
  border-top: 2px solid #E1F3EA;
  margin: 0 auto 12px;
  width: 100%;
}


.upl-ali-text{
  color: #4A4A49; /* Interpreting the request as text color to match the screenshot */
  font-size: 14px;
  line-height: 1.45;
  margin-top: 25px;

  /* English comments: make content area grow to create flexible space above buttons */
  flex: 1;
}
.upl-ali-text p{
  margin: 0 0 10px;
}

.upl-ali-text p:last-child{
  margin-bottom: 0;
}

.upl-ali-actions{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.upl-ali-btn{
  width: 233px;
  max-width: 100%;
  height: 48px;
  padding: 15px 15px;
  border-radius: 200px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration:none !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing:border-box;
}

button.upl-ali-btn{
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
}

.upl-ali-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
}

.upl-ali-btn--outline{
  background: transparent;
  border: 1px solid #22955B;
  color: #22955B !important;
}

.upl-ali-btn--outline:hover{
  background: rgba(34,149,91,0.06);
}

.upl-ali-btn--solid{
  background: #22955B;
  border: 1px solid #22955B;
  color: #fff;
}

.upl-ali-svg{
  display:block;
  fill: currentColor;
}

.upl-ali-pagination{
  margin-top: 20px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
}

.upl-ali-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  border: 2px solid #E1F3EA;
  color: #1a1a1a;
  text-decoration:none;
  font-weight: 700;
  background:#fff;
}

.upl-ali-pagination .page-numbers.current{
  background:#E1F3EA;
}

.upl-ali-pagination .page-numbers:hover{
  background: rgba(225,243,234,0.7);
}

.upl-ali-empty{
  padding: 12px 14px;
  border: 2px solid #E1F3EA;
  border-radius: 12px;
  background: #fff;
  color:#4A4A49;
}


/* Modifiers controlled by shortcode */
.upl-ali--btn-center .upl-ali-actions{
  align-items: center;
}

.upl-ali--btn-full .upl-ali-actions{
  align-items: stretch;
}

.upl-ali--btn-full .upl-ali-btn{
  width: 100%;
}

/* Ensure the phone button text stays white even if theme overrides link styles */
.upl-ali-btn--solid{
  color: #fff !important;
}
.upl-ali-btn--solid .upl-ali-svg{
  color: inherit;
}


/* Content alignment (title + text + buttons) */
.upl-ali--content-center .upl-ali-body{
  text-align: center;
}

.upl-ali--content-center .upl-ali-title{
  font-family: Ubuntu, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 20px;
  color:#1a1a1a;
}
.upl-ali--content-center .upl-ali-hr{
  width: 100%;
}

.upl-ali--content-center .upl-ali-text{
  color: #4A4A49; /* Interpreting the request as text color to match the screenshot */
  font-size: 14px;
  line-height: 1.45;
  margin-top: 25px;

  /* English comments: make content area grow to create flexible space above buttons */
  flex: 1;
}
/* Image scale */
.upl-ali--img-lg .upl-ali-media{
  min-height: 140px;
  padding-top: 26px;
}

.upl-ali--img-lg .upl-ali-img{
  max-width: 220px;
  max-height: 92px;
}

.upl-ali--img-lg .upl-ali-img--ph{
  width: 200px;
  height: 92px;
}


/* HR width options when content is centered */
.upl-ali--hr-short .upl-ali-hr{
  width: 72%;
  max-width: 260px;
}

.upl-ali--hr-full .upl-ali-hr{
  width: 100%;
  max-width: none;
}


/* English comments: when only one button is visible, center it vertically within a two-button area */
.upl-ali-actions--single{
  min-height: 106px; /* 48 + 48 + 10 gap */
  justify-content: center;
}


/* Modal / Popup */
.upl-ali-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prevent background scroll while modal is open */
html.upl-ali--modal-open,
body.upl-ali--modal-open{
  overflow: hidden;
}

.upl-ali-modal[hidden]{
  display: none !important;
}

.upl-ali-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.upl-ali-modal__panel{
  position: relative;
  width: min(980px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.upl-ali-modal__close{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: #22955B;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}
.upl-ali-modal__close:hover {
	background: black;
}



.upl-ali-modal__brand{
  display: flex;
  align-items: center;
  gap: 14px;
}

.upl-ali-modal__head{
  padding: 30px 30px 0px;
	  
}

.upl-ali-modal__logo{
  width: 72px;
  height: 40px;
  object-fit: contain;
  display: block;
	flex: 0 0 auto;
}

.upl-ali-modal__title{
  margin: 0;
  font-family: Ubuntu, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #4A4A49;
}

.upl-ali-modal__body{
  display: flex;
}

.upl-ali-modal__hr {
	
display: none;
}
.upl-ali-modal__left{
  width: 70%;
  padding: 30px;
}

.upl-ali-modal__right{
  width: 30%;
  padding: 30px;
  
}


.upl-ali-modal__content{
  color: #4A4A49;
  font-size: 14px;
  line-height: 1.5;
}

.upl-ali-modal__content p{ margin: 0 0 10px; }
.upl-ali-modal__content p:last-child{ margin-bottom: 0; }

.upl-ali-modal__image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: contain;
  border-radius: 10px !important;
}

.upl-ali-more-btn{
  cursor: pointer;
}

.upl-ali-more-btn.upl-ali-btn{
  border: 1px solid #22955B;
}


@media (max-width: 640px){
  .upl-ali-modal__body{
    flex-direction: column;
  }

  .upl-ali-modal__left,
  .upl-ali-modal__right{
    width: 100%;
    padding: 20px;
  }

  .upl-ali-modal__right{
    padding-top: 0; /* opcional: para que no quede doble espacio */
  }
}