
.rdsl-social-login-block {
  margin-top: 18px;
}

.rdsl-alert {
  margin-bottom: 14px;
}

.rdsl-divider {
  position: relative;
  text-align: center;
  margin: 14px 0 16px;
}

.rdsl-divider:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.rdsl-divider span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: #fff;
  font-size: 13px;
  color: #666;
}

.rdsl-buttons,
.rdsl-checkout-buttons {
  display: grid;
  gap: 10px;
  align-items: stretch;
}

.rdsl-buttons {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.rdsl-checkout-buttons {
  grid-template-columns: repeat(auto-fit, minmax(145px, max-content));
  justify-content: start;
}

.rdsl-btn,
.rdsl-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  text-decoration: none !important;
  border: 1px solid rgba(17, 17, 17, 0.16);
  background: #fff !important;
  color: #111 !important;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: none;
}

.rdsl-btn:hover,
.rdsl-checkout-btn:hover {
  opacity: .98;
  transform: translateY(-1px);
  border-color: rgba(17, 17, 17, 0.28);
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.06);
}

.rdsl-btn-icon,
.rdsl-checkout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.rdsl-btn-icon img,
.rdsl-checkout-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.rdsl-icon-letter {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.rdsl-icon-facebook {
  color: #1877f2;
}

.rdsl-icon-apple {
  color: #111;
}

.rdsl-social-login-block-checkout {
  margin: 0 0 24px;
}

.rdsl-checkout-card {
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
}

.rdsl-checkout-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  margin-bottom: 14px;
}

.rdsl-btn-label,
.rdsl-checkout-provider {
  line-height: 1;
  white-space: nowrap;
}

/* neutralizar estilos por proveedor */
.rdsl-btn-google,
.rdsl-btn-facebook,
.rdsl-btn-apple,
.rdsl-checkout-btn.rdsl-btn-google,
.rdsl-checkout-btn.rdsl-btn-facebook,
.rdsl-checkout-btn.rdsl-btn-apple {
  background: #fff !important;
  color: #111 !important;
  border-color: rgba(17, 17, 17, 0.16) !important;
}

@media (max-width: 991px) {
  .rdsl-checkout-buttons {
    grid-template-columns: repeat(auto-fit, minmax(130px, max-content));
  }
}

@media (max-width: 767px) {
  .rdsl-checkout-card {
    padding: 16px;
  }

  .rdsl-checkout-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .rdsl-buttons,
  .rdsl-checkout-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .rdsl-buttons.rdsl-buttons-count-1,
  .rdsl-checkout-buttons.rdsl-checkout-buttons-count-1 {
    grid-template-columns: 1fr;
  }

  .rdsl-btn,
  .rdsl-checkout-btn {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 12px;
    gap: 8px;
  }

  .rdsl-btn-label,
  .rdsl-checkout-provider {
    font-size: 14px;
  }
}


/* ===== AUTH PAGE: poner social arriba y acotar ancho ===== */
.login > .rdsl-social-login-block,
.login > .login__form-wrapper,
.login > .login__register-prompt,
.login > hr {
  max-width: 760px;
  width: 100%;
}

.login > .rdsl-social-login-block {
  margin: 0 0 18px;
}

.login .rdsl-divider {
  display: none;
}

.login .rdsl-buttons {
  grid-template-columns: repeat(auto-fit, minmax(170px, max-content));
  justify-content: start;
  gap: 12px;
}

.login .rdsl-btn {
  width: auto;
  min-width: 170px;
  padding: 10px 18px;
}

.login > hr {
  margin: 22px 0;
}

@media (max-width: 767px) {
  .login > .rdsl-social-login-block,
  .login > .login__form-wrapper,
  .login > .login__register-prompt,
  .login > hr {
    max-width: 100%;
  }

  .login .rdsl-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login .rdsl-buttons.rdsl-buttons-count-1 {
    grid-template-columns: 1fr;
  }

  .login .rdsl-btn {
    min-width: 0;
    width: 100%;
  }
}
